I need some help with coding, Coding website templates |
  |
 Jan 5 2010, 07:32 PM
Post
#1
|
|
 "One hell of a butler"  Group: Member Posts: 95 Joined: Nov 2008 Member No: 696,422  |
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? |
|
|
|
|
Jan 5 2010, 07:38 PM
Post
#2
|
|
 Live long and prosper. Group: Staff Alumni Posts: 10,142 Joined: Apr 2007 Member No: 514,926 |
Use semantic xhtml.
 w3schools.com |
|
|
|
|
Jan 5 2010, 08:21 PM
Post
#3
|
|
 Senior Member Group: Administrator Posts: 2,648 Joined: Apr 2008 Member No: 639,265 |
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. |
|
|
|
|
Jan 6 2010, 07:55 PM
Post
#4
|
|
 Member Group: Member Posts: 22 Joined: Dec 2008 Member No: 702,109 |
position your DIV's using
CODE margin: auto; Example: CODE div#ID
{ width: 960px; margin: 0px auto; /* top and bottom = 0px, left and right = auto */ } |
|
|
|
|
Jan 10 2010, 02:40 PM
Post
#5
|
|
 Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
There's always that little absolute positioning hack.
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 */ } 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. |
|
|
|
|
Jan 24 2010, 09:57 PM
Post
#6
|
|
 ~* Traditional Witch Group: Member Posts: 73 Joined: Jul 2007 Member No: 553,061 |
QUOTE(Mikeplyts @ Jan 10 2010, 01:40 PM) There's always that little absolute positioning hack. 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 */ } 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. |
|
|
|
|
Feb 15 2010, 11:34 PM
Post
#7
|
|
 Member Group: Member Posts: 28 Joined: May 2009 Member No: 728,558 |
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. |
|
|
|
|
Feb 15 2010, 11:38 PM
Post
#8
|
|
|
Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
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.
|
|
|
|
|
Feb 17 2010, 04:34 PM
Post
#9
|
|
|
Member Group: Member Posts: 22 Joined: Dec 2008 Member No: 702,109 |
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; } I hope that helped. |
|
|
|
|
Feb 21 2010, 09:35 AM
Post
#10
|
|
|
Member Group: Member Posts: 28 Joined: May 2009 Member No: 728,558 |
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! |
|
|
|
|
Feb 21 2010, 10:16 AM
Post
#11
|
|
|
Member Group: Member Posts: 22 Joined: Dec 2008 Member No: 702,109 |
Could you post you code?
|
|
|
|
|
Apr 2 2010, 01:00 PM
Post
#12
|
|
 Senior Member Group: Administrator Posts: 8,629 Joined: Jan 2007 Member No: 498,468 |
Topic Closed, and Moved to Resolved Topics. Please PM a moderator if you would like this reopened.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: