Jump to content

Ryan

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Ryan

    Problem with divs again

    in CSS

    Posted

    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>

    How to move this footer down

    in CSS

    Posted

    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;}

    Resizing in Firefox Br

    in CSS

    Posted

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