The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Centering my <divs> </>, Having problem centering my page
belowHeights00
post Feb 4 2014, 11:26 AM
Post #1


Member
***

Group: Members
Posts: 67
Joined: 4-February 14
Member No.: 20,319



Hello all! I am having the most annoying problem with my site. I have wrapped the entire body in a <div id="container> and everything is margin auto. Not sure why it doesn't seem to center the header or the top content divs. I've also tried setting <div id="header"> and <div id="topContent"> with margin auto but no luck. Any ideas, here's my html:


<!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=utf-8" />
<title>Biography</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div id="promo"><img src="" alt="" name="promotemp" width="150" height="120" id="promotemp" style="background-color: #999999" /></div>
<div id="header">
<div id="logo1"><img src="images/superman logo.png" width="331" height="241" /></div>
<div id="logo2">
<p>KRYPTO</p>
<p>COMICS</p>
</div>

</div>

<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li><a href='shop.html'><span>Shop</span></a></li>
<li><a href='comics.html'><span>Comics</span></a></li>
<li><a href='movies.html'><span>Movies</span></a></li>
<li><a href='games.html'><span>Games</span></a></li>
<li><a href='special.html'><span>Special</span></a></li>
</ul>
</div>

</div>

</div>

</body>
</html>

...And here is my css:


#container {
height: 1000px;
background-image: url(../images/Background.png);
width: 1200px;
margin-right: auto;
margin-left: auto;
}


#header {
height: 241px;
}
#logo1 {
height: auto;
float: left;
margin-right: auto;
margin-left: auto;
width: 50%;
}
#container #header #logo1 img {
}

#logo2 {
text-align: left;
font-weight: bold;
font-size: 28px;
font-family: "Comic Book Italic";
float: left;
}
#container #header #logo1 img {
float: right;


}



#promo {
height: 140px;
}
#container #promo #promotemp {
float: right;

}
body {
color: #000;
background-color: #000;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 4 2014, 12:06 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



You haven't done anything to center #header. This is all there is.
CODE
#header {
height: 241px;
}
'
But since it spans the whole width I guess you could say it is in way centered. At least it isn't off in any direction.

Which are the top content DIVs? Everything is either in the header or the menu DIVs, except the promo thing.
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: 23rd March 2019 - 09:27 PM