Hi all,
As I am fairly new to (X)HTML and CSS, I have started creating a website, I have successfully added a background image to the whole page which is centered, I have also created a header image(also centered) which I have fixed the width to 900px.
What I have been trying to do for a long time now is use 5 seperate rollover images for the buttons one image for hover, and another one for normal, positioned all horizontally inline, and centred on the page (I will size these images to match the fixed width).
I have used seperated images for the 2 states, I believe it is better to use a stacked image and move on the background so I will also need to incorporate this, the button size will be 180 x 35.
Would someone please show me how this is done?, Can I also just use the graphic I create for the button and not display the text?
The whole website I would like to be this fixed width, centred with a white backround about 5px larger all around the content on top of my background image.
Here is where I am so far, I have tried and deleted about 10 attempts so only one button graphic is listed at the moment.
<link rel="stylesheet" type="text/css" href="kwdstyles.css" />
</head>
<body>
<div class="whiteback">
<img class="kwdheader" src="kwd_graphics/kwdbanner.png" alt="headerimage"/>
<ul id="linkbuttons">
<li id="home"><a href="kwdhome.html" title="Home"><span>Home</span></a></li>
<li id="aboutus"><a href="kwdaboutus.html" title="About Us"><span>About Us</span></a></li>
<li id="services"><a href="kwdservices.html" title="Services"><span>Services</span></a></li>
<li id="portfolio"><a href="kwdportfolio.html" title="Portfolio"><span>Portfolio</span></a></li>
<li id="contactus"><a href="kwdcontactus.html" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>
</body>
</html>
body {
background:#FFFFFF url('kwdbackgroundimg.jpg') scroll no-repeat center top;
margin-left: auto;
margin-right: auto;
}
img.kwdheader {
display: block;
margin-left: auto;
margin-right: auto;
}
div.whiteback {
background-color: #FFFFFF;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
span {
display: inherit;
}
#linkbuttons {
font-family: Arial, sans-serif;
text-align: center;
text-decoration: none;
}
#linkbuttons li {
display: inline;
}
#linkbuttons li#aboutus a{
background-color: #FFFFFF;
width: 150px;
height: 40px;
}
#linkbuttons li#aboutus a{
background: url('kwd_buttons/kwdaboutusoff.png') no-repeat;
width: 150px;
height: 40px;
}
Sorry about the big help ask for my first post but I have been banging my head against a wall!
Thanks all, much appreciated,
Foxhole
