switters 0 Posted November 9, 2007 Report Share Posted November 9, 2007 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; } Quote Link to post Share on other sites
Ingolme 1,027 Posted November 9, 2007 Report Share Posted November 9, 2007 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;} Quote Link to post Share on other sites
switters 0 Posted November 9, 2007 Author Report Share Posted November 9, 2007 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". Quote Link to post Share on other sites
Ingolme 1,027 Posted November 9, 2007 Report Share Posted November 9, 2007 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. Quote Link to post Share on other sites
Reg Edit 0 Posted November 9, 2007 Report Share Posted November 9, 2007 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. Quote Link to post Share on other sites
switters 0 Posted November 9, 2007 Author Report Share Posted November 9, 2007 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 Quote Link to post Share on other sites
switters 0 Posted November 9, 2007 Author Report Share Posted November 9, 2007 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; } Quote Link to post Share on other sites
Synook 47 Posted November 10, 2007 Report Share Posted November 10, 2007 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%... Quote Link to post Share on other sites
Jonas 151 Posted November 11, 2007 Report Share Posted November 11, 2007 Merged topics and moved to css forum... Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.