SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 div layout.. help needed

    hello all.. i have been using the same div layout for over a year.. it was a centred div 750px wide.


    i want to move to a more dynamic layout that uses the technology to its fullest and expands when the space is available..

    i have attached a picture of what im looking for:

    http://www.londonheathrowcars.com/div_layout.jpg

    the reason i want to create this is because the layout i was using before was too dependant on pixel size.. etc

    you can see my site here..

    http://www.londonheathrowcars.com

    it is completely different from what i need.. the truth is i dont have as much time as i would like to code this from scratch..

    if someone could give me a quickfix layout based on that picture, it would really save me a lot of time.. i am fairly profficient, url examples of those kind of layouts will also be of interest..

    thanks.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    it is completely different from what i need.. the truth is i dont have as much time as i would like to code this from scratch..

    if someone could give me a quickfix layout based on that picture, it would really save me a lot of time.. i am fairly profficient, url examples of those kind of layouts will also be of interest..
    Hmmm, there's a difference between asking a question and asking someone to work for you for free.

    But it seems Paul has already done the work
    http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
    http://www.pmob.co.uk/temp/fixedlayoutexample3.htm
    http://www.pmob.co.uk/temp/fixedlayoutexample4.htm

    I like Paul's work a lot - but I don't like the layout itself - it's a little too unorthodox..

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello... thank you for the links mark. they are very helpful.

    i thought i would at least be honest..

    if you look here.. the top bar is white.. (with my logo) and the left bar is black.
    http://www.londonheathrowcars.com/thisting.htm

    what i would prefer is if the left bar starts from the top..

    ive tried to do it myself.. by removing the padding from the top.. and a few other things but nothing seems to work.. i think it is because the actual foundations of the layout are too advanced for me..

    if i can get this left bar how i want, i should be able to edit the sizes.. etc to my liking..

    here is the page code... your time is very appreciated.


    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- force quirks mode with the xml prologue -->
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100&#37;} 
    /* end hack */ 
    html,body {margin:0;padding:0;background:#000}
    #top-bar {
    	position:fixed;
    	top:0;
    	left:0;
    	z-index:999;
    	width:100%;
    	height:90px;	
    }
    * html #top-bar {
    	position:absolute;
    }
    #topbar-inner {
    	height:90px;
    	background:#fff;
    	
    }
    * html #topbar-inner {	margin-right:17px;/* for scrollbar*/}
    * html body{
    	padding-top:23px;
    }
    * html, * html body{
    	overflow-y: hidden; 
    	height:100%;
    	margin-top:-23px;
    }
    #mainouter {
    	position:relative;
    	z-index:2;
    	padding-top:23px;
    	padding-bottom:40px;
    	margin-left:150px;
    	background:pink;
    	min-height:100%;
    }
    
    
    * html #mainouter {
    	height:100%;
    	overflow:auto;
    	overflow-y:scroll;
    	position:relative;
    	z-index:2;
    	padding-top:23px;
    	padding-bottom:40px;
    }
    
    #bottom {
    	position:fixed;
    	bottom:0;
    	left:0;
    	z-index:999;
    	width:100%;
    	height:40px;	
    }
    * html #bottom {
    	position:absolute;
    	bottom:-1px;
    }
    #bottom-inner {
    	height:40px;
    	background:#666666;
    }
    * html #bottom-inner {	margin-right:17px;/* for scrollbar*/}
    
    
    * html #left {
      position:absolute;
      height:100%;
      width: 150px;
      border-right: 1px solid #000;
      left:0;
      top:90px;
      overflow:auto;
      z-index:100;
      margin-bottom:-63px;
      }
    html>body #left {
      position: fixed;
      left: 0;
      top: 90px;
      bottom: 40px;
      padding: 0;
      width: 149px;
      border-right: 1px solid #000;
     }
    
    
    
    </style>
    </head>
    <body>
    <div id="top-bar"> 
      <div id="topbar-inner"><img style="margin-left:149px;" src="newlogo.gif" /></div>
    </div>
    <div id="left"> 
      <ul>
    
        <li>fixed menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
    
        <li>menu</li>
        <li>menu</li>
      </ul>
    
    </div>
    <div id="mainouter"> 
      <p>Content start</p>
      <p>Content</p>
      <p>Content</p>
    
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content end</p>
    
    </div>
    <div id="bottom"> 
      <div id="bottom-inner">Fixed Bottom</div>
    </div>
    </body>
    </html>

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    The models you use are slightly outdated , using quirks mode for IE < 7, I think Paul has a few that use a strict DTD only

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok....

    what do you suggest i do? are there any websites that offer the latest models.. and in particular, the layout i am looking for??

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    look under
    New versions for standards mode:
    http://www.pmob.co.uk/temp/

    or this is the most advanced i think , Paul has them also but I can't find them
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Scrollable 100&#37; high element</title>
    <style type="text/css">
    * {margin:0;padding:0}
    
    body{height:100%;font-size:75%;background:#a2a2a2;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    }
    
    div{font-size:1em;}
    
    html{padding:1em 2em;}
    
    .c,.d,.a,.he,.fo{overflow:auto;}
    
    .wra{background:#d8d8d8;}
    
    head+body .wra{top:11em;bottom:11em;position:absolute;}
    
    .he,.fo{background:#ff8c00;height:10em;position:absolute;}
    
    .wra,.he,.fo{right:2em;left:2em;}
    
    * html .a,* html .b,* html .d{height:100%;}
    * html .a,* html .b{float:left;}
    * html .a{width:20em;}
    * html .a{background:#ccffcc;}
    * html .b{width:100%;margin:0 -21em 0 1em;}
    * html .c{float:right;background:#ccffff;}
    * html .d{margin:0 21em 0 0;background:#ffffcc;}
    
    head+body .a,head+body .b,head+body .c,head+body .d{position:absolute;top:0;bottom:0;}
    head+body .a{width:20em;}
    head+body .a,head+body .d{left:0;}
    head+body .c,head+body .d{right:0;}
    head+body .a{background:#ccffcc;}
    head+body .b{left:21em;right:0em;}
    head+body .d{background:#ffffcc;}
    
    .he{top:1em;}
    
    .fo{bottom:1em;}
    
    p{margin:.2em .5em .3em .5em;}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    
    * html {padding:11em 2em;} 
    
    * html body{padding:11em 2em;padd\ing:0}
    
    * html .wra{height:100%;}
    
    * html .w{width:100%;}
    
    </style>
    <![endif]-->
    </head>
    <body>
    <!--  -->
    <div class="he w">
    
    <p>start</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    </div>
    
    <div class="wra">
    
    <div class="a">
    <p>start a</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <!-- 
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
     -->
    <p>end</p>
    </div>
    
    <div class="b">
    <div class="d">
    <p>start b</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    </div>
    </div>
    
    </div>
    
    <div class="fo w">
    <p>start</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello again.. i think i have found a layout i want to settle with

    it is here..

    http://www.londonheathrowcars.com/thisting.htm

    i would still like the footer, header and menu to be unmoving.. and the main content div to have the overflow auto feature.

    another issue i had was when i tried changing the background colour of the left div.. but the left and main content div seem to be connected.. and when i changed one colour it changed them both, i would rather they stay separate.

    i know it is a lot to ask, but if anyone has the time or the motivation to help me out here, i will certainly owe them something back.

    here is the page code.. thanks again for any help if it comes

    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>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide\*/
    html, body {height:100&#37;}
    /* end hide */
    body {
    	padding:0;
    	margin:0;
    	text-align:center;
    	min-width:752px;/* for mozilla*/
    	background-color: #a3a3a3;
    	color: #000000;
    }
    #outer{
    	min-height:100%;
    	width:750px;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	position:relative;
    	background-color:#fff;
    }
     
    * html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
    #header{
    	min-height:70px;
    	background:#FF0000;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	position:relative;
    }
    * html #header{height:70px}
    #left {
    	position:relative;/*ie needs this to show float */
    	width:156px;
    	float:left;
    	color:#fff
    
    }
    #left p {padding:2px}
    #footer {
    	width:750px;
    	clear:both;
    	height:70px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background-color: #565656;
    	color: #000000;
    	text-align:center;
    	left:0;
    	bottom:0;
    	position: absolute;
    }
    * html #footer {/*only ie gets this style*/
    	\height:72px;/* for ie5 */
    	he\ight:70px;/* for ie6 */
    	margin-bottom:-1px;
    }
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    #centrecontent {
    	width:594px;
    	float:right;
    }
    #centrecontent p {padding-left:3px}
    
    #clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header"> 
    <img src="newlogo.gif" />  </div>
      <div id="centrecontent"> 
        
      <table border="0" width="594" id="table2" cellspacing="0" cellpadding="0">
    	<tr>
    		<td>gsgsagasgsdgasg<p>sgs</p>
    		<p>dgas</p>
    		<p>dgag</p>
    		<p>s</td>
    	</tr>
    	</table>
    	<p> 
        
      </div>
      <div id="left"> 
    	<table border="1" width="100%" id="table1" bordercolordark="#565656" cellspacing="0" cellpadding="0" bordercolorlight="#565656">
    		<tr>
    			<td><font color="#A3A3A3">Our Services</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Our Cars</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Our Prices</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Enquiries</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Book Online</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Faqs</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Travel Guide</font></td>
    		</tr>
    		<tr>
    			<td><font color="#A3A3A3">Contact</font></td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td><font color="#00FF00">UK Freephone:</font></td>
    		</tr>
    		<tr>
    			<td><font color="#00FF00">0800 505 3231</font></td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td><font color="#00FF00">International:</font></td>
    		</tr>
    		<tr>
    			<td><font color="#00FF00">+44 (0) 20 8814 2727</font></td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>
    	</table>
      </div>
      <div id="clearfooter"></div>
      <!-- ie needs this -->
    
      <div id="footer">Footer - | |- Footer </div>
    </div>
    <!-- end outer div -->
    </body>
    </html>


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
  •