SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: 3 column simple

  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column simple

    I am having problems with 3 column simple posted by Paul at http://www.pmob.co.uk/temp/3column_simple_1.htm .
    Is there an ideal width for the banner and footer? I am trying to insert banner and footer images of width 750 pixels but the footer sticks out at both ends. While trying to fix this by resizing the footer and top banner, something went Twannng! and the whole site collapsed into a dog's breakfast.
    I reckon if the BG images are too long, the middle column margins will not work so that they clear the footer?
    Please haalp.

  2. #2
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the site where the dog's breakfast is parked: www.taiga-communications.com/YorkFactory/.
    Here is my code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>indexyf2</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    //--><!]]></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="yf2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header"><img src="assets/img/yorkcoastline642.jpg" width="642" height="67" />
    </div>
    <div id="navbar">
    <ul id="nav">

    <li><a href="#">COUNCIL</a>
    <ul>
    <li><a href="#">Council Members</a></li>
    <li><a href="#">Governance</a></li>
    <li><a href="#">Elders</a></li>
    </ul>
    </li>

    <li><a href="#">SERVICES</a>

    <ul>
    <li><a href="#">Programs</a></li>
    <li><a href="#">Program Heads</a></li>
    </ul>
    </li>

    <li><a href="#">CULTURE</a>
    <ul>
    <li><a href="#">Language</a></li>
    <li><a href="#">Cultural Days</a></li>
    </ul>
    </li>

    <li><a href="#">PROFILE</a>
    <ul>
    <li><a href="#">Location</a></li>
    <li><a href="#">Transportation</a></li>
    <li><a href="#">MORE</a></li>
    </ul>
    </li>
    <li><a href="#">HISTORY</a>
    <ul>
    <li><a href="#">"Kayas" - Ancient Times</a></li>
    <li><a href="#">York Factory Era</a></li>
    <li><a href="#">The Relocation</a></li>
    </ul>
    </li>
    <li><a href="#">SEEPASTIK</a>
    <ul>
    <li><a href="#">Pinew Trading Post</a></li>
    <li><a href="#">Office Rentals</a></li>
    <li><a href="#">MORE</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="middle">
    <div id="left">
    <p>Jeremiah's Blog</p>
    </div>
    <div id="sidebar">
    <p><center><strong>NEWS & EVENTS</strong></center></p>
    <ul>
    <li><a href="#">TB Epidemic Despite Assurances</a></li>
    <li><a href="#">Council Invites World Health Organization</a></li>
    <li><a href="#">Kawechiwasik Achimowin Newsletter</a></li>
    <li><a href="#">York Factory Meeting Notices</a></li>
    <li><a href="#">George Saunders Memorial News</a></li>
    <li><a href="#">Future Development News</a></li>
    </ul>
    <p><img src="assets/img/map_manitoba.gif" alt="map of Manitoba in Canada" width="150" height="229" class="map" id="map" /></p>
    </div>
    <p><em>Tansi</em>, Hello.
    </p><p>Welcome to the York Factory First Nation site.
    We are Ininew (Cree) from Ininew Aski on the Hudson Bay Lowlands, where we have lived for thousands of years.</p>
    <p><em>Pih-tik-wek</em>, enter. Enjoy your visit.</p>
    <br style="clear:both" />
    </div>
    <div id="footer">
    <p>YORK FACTORY CREE NATION<br />
    Tel. (204) 341-2180<br />
    Fax (204) 341-2281</p>
    </div>
    </div>
    </body>
    </html>

    Here is the css:
    /* CSS Document */
    body {
    margin:10px;
    padding:10px;
    text-align:center;
    background-color: #D1C6C0;
    }
    #container {
    text-align:left;
    background-color: #D7D6C8;
    width: 750px;
    }
    #header {
    height:68px;
    text-align:center;
    background-color: #D4C7BE;
    }
    #nav, #nav ul {
    padding: 0;
    list-style: none;
    line-height: 1;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    z-index: 2;
    margin-left: 10px;
    margin: 0;
    padding-left: 40px;
    }

    #nav a {
    display: block;
    width: 9em;
    color: #FFFFFF;
    text-decoration: none;
    }

    #nav li {
    float: left;
    width: 9em;
    margin-left: 3px;
    line-height: 18px;
    }
    #nav li ul {
    position: absolute;
    width: 9em;
    left: -999em;
    background-color: #826C5E;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    background-color: #826C5E;
    padding: 0;
    }
    #navbar {
    float: left;
    margin-left: 0px;
    position: relative;
    height: 18px;
    z-index: 2;
    border-bottom-style: solid;
    border-color: #FF0000;
    border-bottom-width: 1px;
    background-image: url(assets/img/leftcornertop750.gif);
    clear: right;
    }
    #nav ul li a:hover {
    background-color: #CC9966;
    width: 9em;
    }
    #left {
    margin-left:-169px;
    float:left;
    width:170px;
    position:relative;
    background-image: url(assets/img/leftsidebar.jpg;
    }
    #sidebar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    text-decoration: none;
    width: 170px;
    float: right;
    margin-right: -169px;
    position: relative;
    padding-left: 5px;
    }
    #middle {
    border-left:1px solid red;
    border-right:1px solid red;
    margin-left:170px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    background-color: #F9F9EC;
    margin-right: 170px;
    }
    * html #middle {height:1%}/* combat ie's 3 pixel jog */
    #footer {
    clear:both;
    border-top:1px solid red;
    height:35px;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #FFFFFF;
    background-image: url(assets/img/footer.jpg);
    }
    h1,h3,p {margin-top:0}

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You missed a bracket out of the footer bg image url which is why it isn't showing.

    I'm not quite sure where you are goung but I#ve tidied it up a bit for you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>indexyf2</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    /* CSS Document */
    body {
     margin:10px;
     padding:10px;
     text-align:center;
     background-color: #D1C6C0;
    }
    #container {
     text-align:left;
     width: 750px;
     margin-left:auto;
     margin-right:auto;
     background:#D7D6C8 url(http://www.taiga-communications.com/...eftsidebar.jpg) repeat left top;
    }
    #header {
     height:68px;
     text-align:center;
     background-color: #D4C7BE;
    }
    #nav, #nav ul {
     padding: 0;
     list-style: none;
     line-height: 1;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: x-small;
     z-index: 2;
     margin-left: 10px;
     margin: 0;
     padding-left: 40px;
    }
    #nav a {
     display: block;
     width: 9em;
     color: #FFFFFF;
     text-decoration: none;
    }
    #nav li {
     float: left;
     width: 9em;
     margin-left: 3px;
     line-height: 18px;
    }
    #nav li ul {
     position: absolute;
     width: 9em;
     left: -999em;
     background-color: #826C5E;
    }
    #nav li:hover ul, #nav li.sfhover ul {
     left: auto;
     background-color: #826C5E;
     padding: 0;
    }
    #navbar {
     margin-left: 0px;
     position: relative;
     height: 18px;
     z-index: 2;
     border-bottom-style: solid;
     border-color: #FF0000;
     border-bottom-width: 1px;
     background-image: url(http://www.taiga-communications.com/...rnertop750.gif);
    }
    #nav ul li a:hover {
     background-color: #CC9966;
     width: 9em;
    }
    #left {
     margin-left:-169px;
     float:left;
     width:170px;
     position:relative;
    }
    * html #left {margin-right:-3px}/* 3 pixel jog*/
    #sidebar {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #000000;
     text-decoration: none;
     width: 170px;
     float: right;
     margin-right: -169px;
     position: relative;
    }
    * html #sidebar {margin-left:-3px}/* 3 pixel jog*/
    #sidebarinner{padding:3px}
    #middle {
     border-left:1px solid red;
     border-right:1px solid red;
     margin-left:170px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: small;
     background-color: #F9F9EC;
     margin-right: 170px;
    }
    /* mac hide \*/
    * html #middle {height:1%;margin-left:167px;margin-right:167px;}/* combat ie's 3 pixel jog */
    #footer {
     clear:both;
     border-top:1px solid red;
     text-align:center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: x-small;
     color: #FFFFFF;
     background:#D1C6C0 url(http://www.taiga-communications.com/...img/footer.jpg) no-repeat left top;
    }
    h1,h3,p {margin-top:0}
    .clearer{
     clear:both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"> <img src="http://www.taiga-communications.com/...astline642.jpg" width="750" height="67" /> 
      </div>
      <div id="navbar"> 
    	<ul id="nav">
    	  <li><a href="#">COUNCIL</a> 
    		<ul>
    		  <li><a href="#">Council Members</a></li>
    		  <li><a href="#">Governance</a></li>
    		  <li><a href="#">Elders</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">SERVICES</a> 
    		<ul>
    		  <li><a href="#">Programs</a></li>
    		  <li><a href="#">Program Heads</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">CULTURE</a> 
    		<ul>
    		  <li><a href="#">Language</a></li>
    		  <li><a href="#">Cultural Days</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">PROFILE</a> 
    		<ul>
    		  <li><a href="#">Location</a></li>
    		  <li><a href="#">Transportation</a></li>
    		  <li><a href="#">MORE</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">HISTORY</a> 
    		<ul>
    		  <li><a href="#">"Kayas" - Ancient Times</a></li>
    		  <li><a href="#">York Factory Era</a></li>
    		  <li><a href="#">The Relocation</a></li>
    		</ul>
    	  </li>
    	  <li><a href="#">SEEPASTIK</a> 
    		<ul>
    		  <li><a href="#">Pinew Trading Post</a></li>
    		  <li><a href="#">Office Rentals</a></li>
    		  <li><a href="#">MORE</a></li>
    		</ul>
    	  </li>
    	</ul>
      </div>
      <div id="middle"> 
    	<div id="left"> 
    	  <p>Jeremiah's Blog</p>
    	  <p>Jeremiah's Blog</p>
    	  <p>Jeremiah's Blog</p>
    	  <p>Jeremiah's Blog</p>
    	</div>
    	<div id="sidebar"> 
    	  <div id="sidebarinner"> 
    		<p><strong>NEWS & EVENTS</strong> 
    		<p><strong>NEWS & EVENTS</strong> 
    		<p><strong>NEWS & EVENTS</strong> 
    		<p><strong>NEWS & EVENTS</strong> </p>
    		<ul>
    		  <li><a href="#">TB Epidemic Despite Assurances</a></li>
    		  <li><a href="#">Council Invites World Health Organization</a></li>
    		  <li><a href="#">Kawechiwasik Achimowin Newsletter</a></li>
    		  <li><a href="#">York Factory Meeting Notices</a></li>
    		  <li><a href="#">George Saunders Memorial News</a></li>
    		  <li><a href="#">Future Development News</a></li>
    		</ul>
    		<p><img src="http://www.taiga-communications.com/...p_manitoba.gif" alt="map of Manitoba in Canada" width="150" height="229" class="map" id="map" /></p>
    	  </div>
    	</div>
    	<p><em>Tansi</em>, Hello. </p>
    	<p>Welcome to the York Factory First Nation site. We are Ininew (Cree) from 
    	  Ininew Aski on the Hudson Bay Lowlands, where we have lived for thousands 
    	  of years.</p>
    		<p>Welcome to the York Factory First Nation site. We are Ininew (Cree) from 
    	  Ininew Aski on the Hudson Bay Lowlands, where we have lived for thousands 
    	  of years.</p>
     <p><em>Pih-tik-wek</em>, enter. Enjoy your visit.</p>
    	<div class="clearer"></div>
      </div>
      <div id="footer"> 
    	<p>YORK FACTORY CREE NATION<br />
    	  Tel. (204) 341-2180<br />
    	  Fax (204) 341-2281</p>
      </div>
    </div>
    </body>
    </html>
    Be aware that you can't use the left and right columns for full length images as these are controlled by the main container. If you want a full length left column then it goes on the container itself. If you also want a right column full length image then you then you will need to wrap another container around the whole lot and use that for the other image.

    Also with the left and right columns you can't add padding to the main elements as this makes them too big. Add padding on inner elements.

    Hope that helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You more than tidied. I wouldn't have known where to start to fix this. and I don't kno w how i missed that bracket. THanks so much again. If you;re back here I reposted the site at the above url and doin gmore fine tuning.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Good to know its back on track


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •