The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Myskillzownu
post Mar 21 2012, 07:35 PM
Post #2





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



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?

This post has been edited by Myskillzownu: Mar 21 2012, 07:47 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Myskillzownu
post Mar 21 2012, 07:58 PM
Post #3





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



Never mind again; fixed those issues too. I guess I was just being lazy wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 22 2012, 02:25 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 4,436
Joined: 23-August 06
From: Europe
Member No.: 9



Just for your information as a reference, bookmark:
http://css.maxdesign.com.au/index.htm
http://css-discuss.incutio.com/wiki/Main_Page


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 23rd October 2014 - 12:10 AM