CSS // Making my header align

Discussion in 'CSS' started by lolage, Dec 7, 2007.

0
  1. #1
    Hi, im having a bit of trouble getting my header in the middle. I dont understand why it is not in the middle.. anybody know why?

    Website: www.lolage.co.uk

    HTML: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Lolage - Graphical Services</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="Need some web graphics? Need an advertisement designing? If so you came to the right place!" />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />



</head>


<body>
<div id="container">
	<div id="header">
		<img src="#" width="#" height="#"/> 
	</div>
	<ul id="menu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="index.htm">About Us</a></li>
		<li><a href="index.htm">Our Services</a></li>
		<li><a href="index.htm">Portfolio</a></li>
		<li><a href="index.htm">Prices</a></li>
		<li><a href="index.htm">Contact Us</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
		<h1>lolage.co.uk</h1>
		<p>lolage.co.uk, established in November 2007 for online service. The following is a partial listing of our services: Banner Ad Design, 
		Header Design, Logo Design, Advertisement Design.</p>

		</div>
		<div id="footer">
<img src="images/footer.jpg" width="#" height="#"/> 
	</div>
	</div>
	
</div>
</body>
</html>
    Code (markup):
    CSS: 
    /* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	background-color: #2d2d2d;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: tahoma, garamond, times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;                                /* fixes firefox bug */
	display: block;
}

#container {
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	margin: 0 auto;
	background: url(images/banner.gif) no-repeat 0 0;
	height: 156px;
	width: 800px;
}

#menu {
	overflow: hidden;
	background-color: #e2e2e2;
	list-style: none;
}
* html #menu {
	height: 1%;	
}
	#menu li {
		float: left;
	}

	#menu a {
		background: transparent;
		color: #000000;
		display: block;
		font: 14px/5px georgia, helvetica, sans-serif;
		margin-right: 1px;
		margin-left: 1px;
		padding: 10px 0;
		text-decoration: none;
		text-indent: 48px;
	}
	#menu a:hover {
		color: #FFD700;
		font: 14px/5px georgia, helvetica, sans-serif;
	}

#content {
	background: #e2e2e2;
	color: #000;
	min-height: 200px;
}

* html #content {
	height: 200px;                              /* for ie */
}
#content .wrapper {
	padding: 1em;
}

#content p {
	margin: 0.5em 0;
}

#footer {
	clear: left;
	color: #999999;
	padding-top: 40px;
	text-align: center;
	margin-left:2.5px;
}

#footer em {
	border-top: 1px solid #999999;
	display: block;
	margin: 0 auto;
	padding: 0.5em 3em;
}
    Code (markup):
    Thanks Guys!
     
    lolage, Dec 7, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Uh. Your image is 800 pixels. Your container is 750 pixels. Set your container to be 800 pixels.
     
    soulscratch, Dec 7, 2007 IP
  3. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #3
    If i make the container 800px that then makes my content box bigger but i dont want that to happen, is there another way around it?
     
    lolage, Dec 7, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Kick the header outside of the container?
     
    soulscratch, Dec 7, 2007 IP
  5. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    #header{
    margin-left:-25px
    }

    :D
     
    EIx, Dec 7, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    That solution will only work with what he has so far. If he decides to modify the image later on or change things around, it wont be perfectly centered because he'll always have to update the -25px to be another value. I suggest kicking #header out of the container so you never have to worry about it.
     
    soulscratch, Dec 7, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Or make the header smaller than 750px. Depending on how big the image is.
     
    Stomme poes, Dec 8, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    make #container 800px, and set 25 px side margins on #menu and #content... though with that 'wrapper' and the footer inside #content - I'm not sure how that would work out.
     
    deathshadow, Dec 10, 2007 IP