CSS Centering Issue |
CSS Centering Issue |
neuromancer |
Jan 19 2011, 12:15 AM
Post
#1
|
Group: Members Posts: 2 Joined: 19-January 11 Member No.: 13,627 |
So I've been working on getting the css to align the side bar to slide into the spot on the cork board, when you click the link, you'll see immediately. I'm not certain where in my css it's broken, but clearly it is. All help is much appreciated.
http://www.pennkitchen.com/Gifs/ .header { background-image:url('Top.png'); background-repeat:no-repeat; width: 700px; height: 100px; margin-left: auto; margin-right: auto; } .filler { background-image:url(background.png); margin-left: auto; margin-right: auto; } .footer { padding:10px 0; background-image:url('Bottom.png'); background-repeat:no-repeat; width: 700px; height: 792px; margin-left: auto; margin-right: auto; } body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } ul, ol, dl { padding: 0; margin: 0; list-style-type: none; } a img { border: none; } a:link { color:#414958; text-decoration: underline; } a:visited { color: #4E5869; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .sidebar1 { padding-bottom: 10px; padding-left:50px; margin-left: auto; margin-right: auto; float: left; } .content { padding: 10px 0; width: 65%; float:right; margin-left: auto; margin-right: auto; } .content ul, .content ol { padding: 0 15px 15px 40px; margin-left: auto; margin-right: auto; } ul.nav { list-style: none; margin-bottom: 15px; margin-left: auto; margin-right: auto; } ul.nav a, ul.nav a:visited { padding: 5px 5px 5px 15px; display: block; text-decoration: none; margin-left: auto; margin-right: auto; } .container { max-width: 1500px; min-width: 500px; margin: 0 auto; margin-left: auto; margin-right: auto; } |
Darin McGrew |
Jan 19 2011, 01:45 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Positioning content on top of specific parts of a background image is a fragile way to do a page layout.
In your case, since all the content is images anyway, you may as well just use a single image and an image map: http://htmlhelp.com/faq/html/images.html#imagemap |
neuromancer |
Jan 19 2011, 01:52 AM
Post
#3
|
Group: Members Posts: 2 Joined: 19-January 11 Member No.: 13,627 |
I don't think I can use that because all of the images are going to change on hover. And each specific one will
|
pandy |
Jan 19 2011, 10:35 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Well, than. The problem with your current layout is that several container boxes are very wide. You don't want them to be wider than the background image. You basically only need the below two DIVs.
A container DIV made as wide as the background and with the background applied to it. Centered on the page. Inside that... A DIV for the menu, floated left and as wide as the widest icon. The big image. No need to float this, really. You may need a little margin here and there to push things in place. "Psudo HTML" follows... HTML <div id="wrapper"> <div id="menu"> <!-- the menu icons and links --> </div> <img src="big_picture.gif"> </div> |
Lo-Fi Version | Time is now: 19th March 2024 - 05:19 AM |