Posted by: Myskillzownu Mar 21 2012, 04:41 PM
So I'm fairly new to CSS, and I have two questions as of right now.
Here's a picture of what my site looks like right now:
1) How do I get my copyright div to stick to the bottom of the page.
2) How to I correctly align my navigation buttons? (A horizontal strip, all of them touching.)
Here's my HTML:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="shortcut icon" href="icon.ico" />
<title>Jim's Hardware</title>
</head>
<body>
<div id="wrap">
<div id="header">
<img id="banner" src="images/banner.png" alt="Jim's Hardware Banner" />
<img id="aboutus" src="images/aboutus1.png" alt="About Us" />
<img id="locateus" src="images/locateus1.png" alt="Locate Us" />
<img id="home" src="images/home2.png" alt="Home (Current Page)" />
<img id="shop" src="images/shop1.png" alt="Shop" />
<img id="contactus" src="images/contactus1.png" alt="Contact Us" />
</div> <!--Close header-->
<div id="maindiv" class="repeat">
<div id="push">
</div> <!--Close push-->
<div id="copyrightdiv">
<p id="copyright">
Copyright © 2012 Jim's Hardware ®
</p>
</div> <!--Close copyrightdiv-->
</div> <!--Close maindiv -->
</div> <!--Close wrap-->
</body>
</html>
Here's my global css file (the index.css file is empty right now):
CODE
body
{
padding-top:-125px;
background-image:url('images/red.png');
background-repeat:repeat-y;
background-position:center;
margin:0 0 0 0;
height:100%;
}
#copyrightdiv
{
position:absolute;
bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
}
#maindiv
{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#push
{
clear:both;
}
#copyright
{
position:relative;
bottom:0px;
clear:both;
text-align:center;
}
#wrap
{
min-height:100%;
position:relative;
}
#banner
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
#header
{
background-color:white;
height:125px;
width:1000px;
margin-left:auto;
margin-right:auto;
}
#aboutus
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
#locateus
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
#home
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
#shop
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
#contactus
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
Thanks
Edit: There's no red image file (as seen in the body portion of the css file), it's just there for later use. (I copied it from my other website.)
Posted by: Myskillzownu Mar 21 2012, 07:35 PM
Okay so now I've fixed my navigation buttons; they are all in line as I would like. I also fixed the copyright issue. However, I turned the buttons into links, and the link locations are where the original image locations were. How do I make the links exactly where the image is?
Posted by: Myskillzownu Mar 21 2012, 07:58 PM
Never mind again; fixed those issues too. I guess I was just being lazy
Posted by: Frederiek Mar 22 2012, 02:25 AM
Just for your information as a reference, bookmark:
http://css.maxdesign.com.au/index.htm
http://css-discuss.incutio.com/wiki/Main_Page