I'm having a hard time coding my layouts so that it can be aligned correctly with all computer screen widths.
For example, I code/design my layouts on a laptop and the screen is really wide. Then I go view the layout on another computer with a thinner screen width and everything is misaligned and just horrible. What can I do to fix that?
Full Version: I need some help with coding
Use semantic xhtml. 
w3schools.com
w3schools.com
QUOTE(tcunningham @ Jan 5 2010, 07:38 PM) 
Use semantic xhtml.
Is that really going to help? Aside from the fact that XHTML is rarely a better choice than HTML, "semantic" (X)HTML won't solve layout problems if you're using CSS. The issue is that the OP should use elastic units for CSS (em's, %'s, etc.), use absolute positioning sparingly and only "correctly", and try to lay things out in a resolution-agnostic manner.
position your DIV's using
Example:
CODE
margin: auto;
Example:
CODE
div#ID
{
width: 960px;
margin: 0px auto; /* top and bottom = 0px, left and right = auto */
}
{
width: 960px;
margin: 0px auto; /* top and bottom = 0px, left and right = auto */
}
There's always that little absolute positioning hack.
It's kind of pointless though, using the margin:auto; method that FACreate mentioned is a bunch better and it saves time and server space.
CODE
div#id {
width:###px;
position:absolute;
top:###px;
left:50%;
margin-left:-###px; /* This is half the amount of pixels that you input into the width property */
}
width:###px;
position:absolute;
top:###px;
left:50%;
margin-left:-###px; /* This is half the amount of pixels that you input into the width property */
}
It's kind of pointless though, using the margin:auto; method that FACreate mentioned is a bunch better and it saves time and server space.
QUOTE(Mikeplyts @ Jan 10 2010, 01:40 PM)
There's always that little absolute positioning hack.
It's kind of pointless though, using the margin:auto; method that FACreate mentioned is a bunch better and it saves time and server space.
CODE
div#id {
width:###px;
position:absolute;
top:###px;
left:50%;
margin-left:-###px; /* This is half the amount of pixels that you input into the width property */
}
width:###px;
position:absolute;
top:###px;
left:50%;
margin-left:-###px; /* This is half the amount of pixels that you input into the width property */
}
It's kind of pointless though, using the margin:auto; method that FACreate mentioned is a bunch better and it saves time and server space.
Yeah, using left:50% is your best bet.
Im having the same issue.Im pretty new to making myspace layouts,and any website layouts in general.Im more into the content than the designing process.
But even using margin-left/top,its a few pixels off from where its supposed to be in any broswer other than IE(which i unforunatly had to use sense none of my other broswers work for some non-aparent reason
).
http://www.createblog.com/myspace-layouts/...ngspan/preview/
This is the layout id like help with.
But even using margin-left/top,its a few pixels off from where its supposed to be in any broswer other than IE(which i unforunatly had to use sense none of my other broswers work for some non-aparent reason
).http://www.createblog.com/myspace-layouts/...ngspan/preview/
This is the layout id like help with.
Sorry to inform you, but I don't think there's really a way to have something positioned in the exact same spot in every browser. But if it's just a few pixels off, no sweat. No one really pays THAT much attention to every little detail in a layout. 
QUOTE(999Murderdoll666 @ Feb 15 2010, 11:34 PM)
But even using margin-left/top,its a few pixels off from where its supposed to be in any broswer other than IE(which i unforunatly had to use sense none of my other broswers work for some non-aparent reason ).
).The reason for it being a little off is because of the default margin on the body set by the browser.
Depending on which browser you are using the margin can be less or greater. Its a easy fix.
CODE
body
{
margin: 0px;
}
{
margin: 0px;
}
I hope that helped.
I dont know what im doing wrong but margin:0px isnt doing anything.
I'll keep messing with the css and hope i can figure it out.
Thanks much though MikeP and ahmad!
I'll keep messing with the css and hope i can figure it out.
Thanks much though MikeP and ahmad!
Could you post you code?
Topic Closed, and Moved to Resolved Topics. Please PM a moderator if you would like this reopened.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.