Ryan
-
Posts
6 -
Joined
-
Last visited
Ryan's Achievements
Newbie (1/7)
0
Reputation
-
I'm just trying something...
-
How would I create two columns within the header, so that my logo appears in the left column, and I have a seperate div next to it. SITE: http://rterry.sasktelwebsite.net/CSS: h3 {font-family: arial}p {font-family: arial; font-size: 120%;}a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #FFFFFF}a:active {color: #FFFFFF}* { padding: 0; margin: 0;}body { color: #FFFFFF; font-size: 16px; background-color: #CCCCCC;}#wrapper { width: 1000px; margin: 0 auto;}#header { border: 1px solid #ccc; margin: 0px; height: 100px; padding: 10px; background-color: #000000; font-size: 16px; color: #CC9966;}#navbar { border: 1px solid #ccc; min-height: 50px; margin: 0 auto; padding: 6px; background-color: #000000; font-size: 16px; color: #FFFFFF;}#leftcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: left; border: 1px solid #ccc; min-height: 300px; background-color: #000000; font-size: 16px;}* html #leftcolumn {height:300px} /* IE Min-Height Hack */ #centercolumn { border: 1px solid #ccc; margin: 0 auto; display: inline; /* IE Hack */ padding: 4px; width: 670px; float: left; min-height: 300px; background-color: #000000;}* html #centercolumn {height:300px} /* IE Min-Height Hack */ #rightcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: right; border: 1px solid #ccc; background-color: #000000; min-height: 300px; font-size: 14px;}#footer { border: 1px solid #ccc; margin: 0px; padding: 4px; background-color: #000000; font-size: 16px; color: #FFFFFF;} HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Cosmic Spice</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><br><div id="wrapper"> <div id="header"><img src="logo.jpg"></div><div id="navbar"></div> <div id="leftcolumn"></div><div id="centercolumn"></div><div id="rightcolumn"><a href="http://www.shroomery.org" title="Hallucinogenic Magic Mushroom Information"><img name="Magic Mushrooms - Shroomery" border="0" src="http://www.shroomery.org/banner/magic-mushrooms-shroomery-button.png" alt="Magic Mushrooms Shroomery"></a></div><div id="footer">footer</div></div></body></html>
-
Site: http://rterry.sasktelwebsite.net/How would I make this footer appear seperated and moved down a little from the 3 columns above it. I want a space between like the one existing between the navigation div and 3 columns.HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Cosmic Spice</title><link rel="stylesheet" type="text/css" href="style.css" /></head><br><body><div id="wrapper"> <div id="header"><img src="logo.jpg"></div><div id="navbar"><a href="index.html">Home</a> |</div> <br><div id="leftcolumn"><a href="documents.html">Documents</a> |</div><div id="centercolumn"></div><div id="rightcolumn"><a href="http://www.shroomery.org" title="Hallucinogenic Magic Mushroom Information"><img name="Magic Mushrooms - Shroomery" border="0" src="http://www.shroomery.org/banner/magic-mushrooms-shroomery-button.png" alt="Magic Mushrooms Shroomery"></a></div><br><div id="footer">footer</div></div></body></html> CSS: h3 {font-family: arial}p {font-family: arial; font-size: 120%;}a:link {color: #FFFFFF}a:visited {color: #FFFFFF}a:hover {color: #FFFFFF}a:active {color: #FFFFFF}* { padding: 0; margin: 0;}body { color: #FFFFFF; font-size: 16px; background-color: #CCCCCC;}#wrapper { width: 1000px; margin: 0 auto;}#header { border: 1px solid #ccc; margin: 0px; height: 100px; padding: 10px; background-color: #000000; font-size: 16px; color: #CC9966;}#navbar { border: 1px solid #ccc; margin: 0 auto; padding: 6px; background-color: #000000; font-size: 16px; color: #FFFFFF;}#leftcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: left; border: 1px solid #ccc; min-height: 300px; background-color: #000000; font-size: 16px;}* html #leftcolumn {height:300px} /* IE Min-Height Hack */ #centercolumn { border: 1px solid #ccc; margin: 0 auto; display: inline; /* IE Hack */ padding: 4px; width: 670px; float: left; min-height: 300px; background-color: #000000;}* html #centercolumn {height:300px} /* IE Min-Height Hack */ #rightcolumn { /* Parent Wrapper for inside boxes */ margin: 0 auto; padding: 4px; display: inline; /* IE Hack */ width: 150px; float: right; border: 1px solid #ccc; background-color: #000000; min-height: 300px; font-size: 14px;}#footer { border: 1px solid #ccc; margin: 0px; padding: 4px; background-color: #000000; font-size: 16px; color: #FFFFFF;}
-
oops, I had a close tag on html and forgot to close the body and title tag. It now appears in IE but without the divs
-
I'm just beginning and I'm having troubles understanding this whole division thing. Anyways, it won't show up in IE and it resizes in firefox when I make the browser window smaller.I would like to make a header, navigation div below it, 3 colums underneath that and a footer at the bottom. Website:http://rterry.sasktelwebsite.net/CSS Code body { background: #CCCCCC; font-family: arial, 'lucida console', sans-serif">}#header{ width: 60%; margin: auto; padding: 20px; border: 1px solid #666; background: #faebd7;}#navigation{ width: 60%; height:10px; margin: auto; padding: 20px; border: 1px solid #666; background: #faebd7;} #left{ width: 10%; min-height: 400px; margin: auto; padding: 20px; border: 1px solid #666; background: #faebd7; float: left;} #content{ width: 60%; min-height: 400px; margin: auto; padding: 20px; border: 1px solid #666; background: #faebd7;} HTML Code: </html><head><title>Cosmic Spice<title><link rel="stylesheet" type="text/css"href="style.css" /></head><body><div id="header"><img src="logo.jpg"></div><div id="navigation">Navigation</div><div id="left">Left</div><div id="right">Right</div><div id="content">Content</div><div id="footer">Footer</div><body></html>
-
Temporarily fixed