Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Basic CSS Questions

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:
IPB Image

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> 
    <div id="maindiv" class="repeat">
        <div id="push">
                </div> 
    <div id="copyrightdiv">
        <p id="copyright">
            Copyright � 2012 Jim's Hardware �
        </p>
    </div> 
        </div> 
        </div> 
</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