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: 5,146
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 05:39 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC