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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:27 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC