The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Basic CSS Questions
Myskillzownu
post Mar 21 2012, 04:41 PM
Post #1





Group: Members
Posts: 3
Joined: 21-March 12
Member No.: 16,760



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> <!--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 smile.gif

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.)

This post has been edited by Myskillzownu: Mar 21 2012, 04:44 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:52 PM