Jump to content

Need help with positioning

switters

By switters
in CSS

Recommended Posts

switters Newbie

switters

Posted
Posted

I'm in the process of designing a very simple portfolio for my photography. Right now, I'm just working on the home page. Before yesterday I had zero experience with HTML and CSS, but thanks to the tutorials at HTML Dog I've learned a little bit.I've got the site (http://cdkarts.com/test) pretty close to where I'd like it to be, with just two issues:1) Why is there a horizontal scroll bar at the bottom of the page? How do I get rid of this?2) Why is the "alt" class (assigned to the indented list items) not overriding the default color assigned to the "mainmenu" id?Any help you could offer would be greatly appreciated!Here's the HTML code and CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CDK Arts</title><link rel = "stylesheet" type="text/css" href="style.css" /></head><body><ul id="logo">  <li><a href="#">CDK Arts</a></li></ul><!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->  <ul id="mainmenu"><li><a href="blank.html">About</a></li><li><a href="portfath.html">Projects</a></li><li class="alt"><a href="portfath.html">Choice</a></li><li class="alt"><a href="portfath.html">Through the Veil</a></li><li class="alt"><a href="portfath.html">Alienation</a></li><li><a href="rusgal_01.html">Portraits</a></li><li><a href="blog" target="_blank">Blog</a></li><li><a href="contact.html">Contact</a></li>  </ul><p class="footer">  All photographs © 2007 Chris Kresser</p></body></html>

body {	background:#ffffff;	margin-top:0px;	margin-left:0px;	margin-right:0px;}a:link, a:visited {	padding-bottom: 1px;	color: #31363e;	text-decoration: none;	}a:hover {	padding-bottom: 0;	color: #dddddd;	}ul#logo  { position:relative;	top: 150px;	left: 25%;	padding-left: 20px;	list-style: none;	text-transform: uppercase;	font-size: .9em;	letter-spacing: .1em;}	ul#mainmenu	  { position:relative;	top: 170px;	left: 25%;	padding-left: 20px;	list-style: none;	}ul#mainmenu li	  { padding-bottom: 8px;		padding-top: 8px;		font-size: .68em;		}ul#mainmenu li.alt	  { margin-left: 8px;		padding: 4px;		color: #858c97;	}p.footer	  { position:relative;	top: 170px;	left: 25%;	padding-top: 40px;	padding-left: 20px;	font-family: Arial, Helvetica;	font-size: 9px;	color: #70757e;	padding-top: 20px;	letter-spacing: 0.02em;	text-align: left;	}

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

1) I am not sure if I'm right, but I think that this is because the UL element, being a block, has the same width as the body, and when you move it 25%, the entire document is stretched by 25% (body's width + 25%).To solve it you can try giving the UL element a width of 75% to compensate the 25% you added to the left of it:ul#logo{ position:relative;top: 150px;left: 25%;width: 75%;padding-left: 20px;list-style: none;text-transform: uppercase;font-size: .9em;letter-spacing: .1em;}ul#mainmenu{ position:relative;top: 170px;left: 25%;width: 75%;padding-left: 20px;list-style: none;}2)This CSS:a:link, a:visited {padding-bottom: 1px;color: #31363e;text-decoration: none;}is overriding this one:ul#mainmenu li.alt{ margin-left: 8px;padding: 4px;color: #858c97;}Because the actual element that contains the text is <a> and not <li>.You can try solving it by adding this:li.alt a{color: #858c97;}

Link to comment
Share on other sites
switters Newbie

switters

Posted
  • Author
Posted
1) I am not sure if I'm right, but I think that this is because the UL element, being a block, has the same width as the body, and when you move it 25%, the entire document is stretched by 25% (body's width + 25%).To solve it you can try giving the UL element a width of 75% to compensate the 25% you added to the left of it:ul#logo{ position:relative;top: 150px;left: 25%;width: 75%;padding-left: 20px;list-style: none;text-transform: uppercase;font-size: .9em;letter-spacing: .1em;}ul#mainmenu{ position:relative;top: 170px;left: 25%;width: 75%;padding-left: 20px;list-style: none;}
Thanks for your reply. Both of your suggestions worked! Actually, I had to add a "70%" width for the scroll bar to disappear. And I had to add the 70% width tag to the "footer" id as well. Is there a better way to code this, though? What I want is for the text to appear in the same relative place for everyone regardless of the size of their browser window or screen. It seems like the way I'm doing it now is a bit "hacked", so I'm definitely open to learning a better way if there is one.I also added an li.alt a:hover tag to preserve the hover appearance for that "submenu".
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Maybe the UL width will take effect if you declare the document width first:html,body {width: 100%;}I have no guarantee it will work.Strangely enough, your ul tag seems to have a margin on both the left and right. I don't know why.

Link to comment
Share on other sites
Reg Edit Member

Reg Edit

Posted
Posted
Thanks for your reply. Both of your suggestions worked! Actually, I had to add a "70%" width for the scroll bar to disappear [...]
I think that's because you have padding-left set, so the overall width was25% plus padding-left plus 75% = over 100%
[...] Is there a better way to code this, though? [...]
I think there probably is. But I'll leave it to others who've used CSS more than me to suggest some better ways.
Link to comment
Share on other sites
switters Newbie

switters

Posted
  • Author
Posted
I think that's because you have padding-left set, so the overall width was25% plus padding-left plus 75% = over 100%I think there probably is. But I'll leave it to others who've used CSS more than me to suggest some better ways.
I'll try posting this in the CSS forum, since it's really more of a CSS issue than HTML.Thanks,Chris
Link to comment
Share on other sites
switters Newbie

switters

Posted
  • Author
Posted

This is the first website I've ever coded without the help of a program like iWeb or RapidWeaver. I went through the HTML & CSS tutorials at HTML Dog, and I've learned a little bit. But I'm still a complete novice, so I could use your help.Here's my page so far: http://cdkarts.com/testIt looks the way I want, but the code is kind of "hacked" to get it that way. I'd like the content to appear in the same relative position (indented about 25% from left) no matter what people's browser window and screen size is. So I used the left: 25% tag. However, that caused a horizontal scroll bar to be placed a the bottom of the window, because the entire layout was being moved over 25%. So then I inserted a width: 70% tag (because there is also "padding-left" in various places) to reduce the total size of the content area and get rid of the scroll bar. It's "working" for this page, but could screw me up on the sub-pages where I plan to put photos. What's the best way to code this?Here's the HTML and CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CDK Arts</title><link rel = "stylesheet" type="text/css" href="style.css" /></head><body><ul id="logo">  <li><a href="#">CDK Arts</a></li></ul><!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->  <ul id="mainmenu"><li><a href="blank.html">About</a></li><li><a href="portfath.html">Projects</a></li><li class="alt"><a href="portfath.html">Choice</a></li><li class="alt"><a href="portfath.html">Through the Veil</a></li><li class="alt"><a href="portfath.html">Alienation</a></li><li><a href="rusgal_01.html">Portraits</a></li><li><a href="blog" target="_blank">Blog</a></li><li><a href="contact.html">Contact</a></li>  </ul><p class="footer">  All photographs © 2007 Chris Kresser</p></body></html>

body {	background:#ffffff;	margin-top:0px;	margin-left:0px;	margin-right:0px;}a:link, a:visited {	padding-bottom: 1px;	color: #31363e;	text-decoration: none;	}a:hover {	padding-bottom: 0;	color: #dddddd;	}ul#logo  { position:relative;	top: 150px;	left: 25%;	width: 70%;	padding-left: 20px;	list-style: none;	text-transform: uppercase;	font-size: .9em;	letter-spacing: .1em;}	ul#mainmenu	  { position:relative;	top: 170px;	left: 25%;	width: 70%;	padding-left: 20px;	list-style: none;	}ul#mainmenu li	  { padding-bottom: 8px;		padding-top: 8px;		font-size: .68em;		}ul#mainmenu li.alt	  { margin-left: 8px;		padding: 4px;		color: #858c97;	}		li.alt a{color: #858c97;}		li.alt a:hover{color: #dddddd;}p.footer	  { position:relative;	top: 170px;	left: 25%;	width: 70%;	padding-top: 40px;	padding-left: 20px;	font-family: Arial, Helvetica;	font-size: 9px;	color: #70757e;	padding-top: 20px;	letter-spacing: 0.02em;	text-align: left;	}

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

I don't see what is wrong doing it that way. You could insteaad if you want make the body have a margin-left and margin-right of 25%...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...