Basic CSS Questions |
Basic CSS Questions |
Myskillzownu |
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: 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.) This post has been edited by Myskillzownu: Mar 21 2012, 04:44 PM |
Myskillzownu |
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 |
Myskillzownu |
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
|
Frederiek |
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 |
Lo-Fi Version | Time is now: 24th April 2024 - 06:54 PM |