Jump to content

Ryan

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Ryan

  • Rank
    Newbie
  1. I'm just trying something...
  2. Ryan

    Problem with divs again

    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>
  3. 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;}
  4. Ryan

    Resizing in Firefox Br

    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
  5. Ryan

    Resizing in Firefox Br

    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>
×
×
  • Create New...