centre an div with background image in my header
newbie
Posted: Sat, 2008-10-11 12:41
Hi
I am trying to create a web page and have been told css is the way to go!
I have a container div for my whole page:
#container{
height:100%;
top:10px;
width:100%;
padding-left:25px;
padding-right:25px;
}
The page starts with a header within the container
#header {
height:180px;
background-image:url(../Images/background_hdr.png);
background-repeat:repeat-x;
width:100%;
}
within the header I have a title (img) and a horizontal menu.
I tried margin:0 auto; to try and centre the title img but it doesnt seem to be working:
.title{
height:135px; //size of image
width:800px; // size of image
margin:0 auto;
background-image:url(../Images/Title.png);
background-repeat:no-repeat;
}
below this is the horizontal menu which is appearing ok:
.topmenu{
font: bold 12px arial;
padding: 5px 0;
margin: 0;
width: 100%;
background-color: #0000FF;
text-align: center;
}
.topmenu li{
list-style: none;
display: inline;
}
.topmenu li a{
padding: 5px 0.5em;
text-decoration: none;
color:#FFFFFF;
background-color:#0000FF;
border: 1px solid #0000FF;
cursor:pointer;
}
.topmenu li a:hover{
color:#0000FF;
background-color:#FFFFFF;
border-style: outset;
}
html>body .topmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
color:#0000FF;
background-color:#FFFFFF;
border-style: outset;
}
html for header:
<div id="header">
<div class="title"></div><br />
<ul class="topmenu">
<li><a href=".\index.html" title="Our Home Page">Home</a></li>
<li><a href=".\teachertraining.html" title="Details about our teacher training programme">Teacher Training</a></li>
<li><a href=".\danceschool.html" title="Details about our dance school">Dance School</a></li>
<li><a href=".\latestnews.html" title="Find out about our latest events">Latest News</a></li>
<li><a href=".\gallery.html" title="Pictures from our previous shows">Gallery</a></li>
<li><a href=".\timetable.html" title="Our timetable">Timetable</a></li>
<li><a href=".\contact.html" title="Contact Us">Contact us</a></li>
</ul>
</div>
Any help/pointers to make title appear in centre greatly appreciated.
Thanks
Moderator
Posts: 6782
Joined: 2004-05-01
Location: Brisbane
We need to see all your code
Posted: Sun, 2008-10-12 22:03
We need to see all your code - HTML & CSS - including whether you have a correct doctype pasted into code tags please. Also, the styles on #container are wrong because you have 100% width and 50px left and right paddings which means that the total width is greater than 100%. If you want left and right padding, leave the width off because the element will automatically fill 100% of whatever space is available after padding/margins/border have been taken into account.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
newbie
Posts: 4
Joined: 2008-09-28
Hi Tyssen Here is the code
Posted: Mon, 2008-10-13 19:43
Hi Tyssen
Here is the code in full.
I have taken oout the 100% width from container div as you suggested.
CSS:
#container{
height:100%;
top:10px;
margin: 10px auto;
line-height: 130%;
}
#header {
height:180px;
background-image:url(../Images/background_hdr.png);
background-repeat:repeat-x;
width:100%;
}
.title{
height:135px;
margin:0 auto;
background-image:url(../Images/Title.png);
background-repeat:no-repeat;
}
#content{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:180px;
padding: 1em;
border-left:1px solid #0000FF;
border-bottom:1px solid #0000FF;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
height:max;
}
.topmenu{
font: bold 12px arial;
padding: 5px 0;
margin: 0;
width: 100%;
background-color: #0000FF;
text-align: center;
}
.topmenu li{
list-style: none;
display: inline;
}
.topmenu li a{
padding: 5px 0.5em;
text-decoration: none;
color:#FFFFFF;
background-color:#0000FF;
border: 1px solid #0000FF;
cursor:pointer;
}
.topmenu li a:hover{
color:#0000FF;
background-color:#FFFFFF;
border-style: outset;
}
html>body .topmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
color:#0000FF;
background-color:#FFFFFF;
border-style: outset;
}
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=iso-8859-1" />
<title>NLDA Latest news</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="title"></div><br />
<ul class="topmenu">
<li><a href=".\index.html" title="Our Home Page">Home</a></li>
<li><a href=".\teachertraining.html" title="Details about our teacher training programme">
Teacher Training</a></li>
<li><a href=".\danceschool.html" title="Details about our dance school">Dance School</a></li>
<li><a href=".\latestnews.html" title="Find out about our latest events">Latest News</a></li>
<li><a href=".\gallery.html" title="Pictures from our previous shows">Gallery</a></li>
<li><a href=".\timetable.html" title="Our timetable">Timetable</a></li>
<li><a href=".\contact.html" title="Contact Us">Contact us</a></li>
</ul>
</div>
<div id="content">
Latest News
</div>
</div>
</body>
</html>