The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Centering Issue
neuromancer
post 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;

}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
neuromancer
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:19 AM