SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    central content center flow

    what i'm having as a problem is i want the central content to always sit on the middle of the page, no matter how big the page is, and the header and footer to be at the top and bottom...
    OB m8 any suggestions...

    Code:
    * {margin:0;padding:0}
    /* mac hide \*/
    html,body {
    	height:100%;
    }
    body,td,th {
    	font-family: Arial;
    	font-size: 12px;
    	color: #B5B2B2;
    	background-color: #B5B2B2;
    	text-align:center;
    }
    .container {
    	width:760px;
    	margin-left:auto;
    	margin-right:auto;
    	background:#EEEEEE url(../images/3col-bg.gif) repeat-y left top;
    	text-align:center;
    	position: relative;
    	height:100%;
    	padding:0 10px;	
    }
    * html .container {
    	min-height:100%;
    }
    .banner_head {
    	width:740px;
    	height:60px;
    	background-color:#FFFFFF;
    	margin:auto; padding:0;
    }
    .centralcontent {
    	padding:0; margin:0;
    	height:420px;
    	margin-top:auto;
    	margin-bottom:auto;
    	border-top: 10px solid #EEEEEE;
    	padding:0 10px;
    	background:#EEEEEE;
    }	
    .columnleft {
    	float:left;
    	width:365px;
    	height:365px;
    	margin:0;
    	margin-right:5px;
    	background-color:#00FF00;
    }
    .columnright {
    	float:right;
    	width:365px;
    	height:365px;
    	margin:0;
    	margin-left:5px;
    	background-color:#FF0000
    }
    .footer {
    	background-color:#FFFF00;
    	width:740px;
    	height:35px;
        margin:0; padding:0;
    }
    .clearme {
    	height:1px;
    	font-size:1px;
    	clear:both;
    	background: #EEEEEE;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>WireFrame</title>
    <link href="css/travelling.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body>
    <div class="container"><div class="banner_head">HEAD</div>
      <div class="centralcontent">
      
        <div class="columnleft">LEFT</div>
        <div class="columnright">RIGHT</div>
        <div class="clearme">&nbsp;</div>
      <div class="footer">&nbsp;</div>
      </div>
      
    </div>
    </body>
    </html>

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

    what i'm having as a problem is i want the central content to always sit on the middle of the page, no matter how big the page is, and the header and footer to be at the top and bottom...
    I'm not sure if you are talking about a fixed layout or just my standard layout.

    e.g.
    http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm

    If you mean a fixed header and footer then things are not so easy as ie doesn't do position fixed and a load of hacks have to be used.

    http://www.pmob.co.uk/temp/fixed-centred.htm


    You may need to explain exactly what you are looking to for and how its supposed to behave before i can offer some real code

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ob i have used the 2col with equal columns & footer
    but what i want is the 2 boxes to be equal and have a space between them of 10px #EEEEEE and that they touch the border-top 10px of the footer..
    here now its using the same background-color #B5B2B2, and i don't want it to be like that..
    and also in Explorer u can see on the bottom its not the same as in firefox, how to have them the same???
    is it easier now to see???


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Wireframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide\*/
    html, body {
    	height:100%
    }
    /* end hide */
    body {
    	padding:0;
    	margin:0;
    	text-align:center;
    	min-width:760px;/* for mozilla*/
    	background-color: #B5B2B2;
    	color: #000000;
    }
    #outer{
    	min-height:100%;
    	width:758px;
    	border-left:10px solid #EEEEEE;
    	border-right:10px solid #EEEEEE;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	position:relative;
    }
    * 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:170px;
    	background:#FFFFFF;
    	border-bottom:10px solid #EEEEEE;
    	position:relative;
    }
    * html #header{
    	height:170px;
    }
    #left {
    	position:relative;/*ie needs this to show float */
    	width:375px;
    	float:left;
    	background-color:#000000;
    }
    #left p {
    	padding:2px;
    }
    #footer {
    	width:758px;
    	clear:both;
    	height:50px;
    	border-top:10px solid #EEEEEE;
    	background-color: #FFFFFF;
    	color: #000000;
    	text-align:center;
    	left:0;
    	bottom:0;
    	position: absolute;
    }
    * html #footer {/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    	margin-bottom:-1px;
    }
    div,p  {
    	margin-top:0;
    }/*clear top margin for mozilla*/
    #centrecontent {
    	width:375px;
    	float:right;
    	background-color:#00FF00;
    }
    #centrecontent p {
    	padding-left:3px;
    }
    
    #clearfooter {
    	width:100%;
    	height:52px;
    	clear:both;
    } /* to clear footer */
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header"> 
        <p>Header - No column longest - footer at bottom of window.</p>
      </div>
      <div id="centrecontent"> 
        <!--centre content goes here -->
        <p>Centre Content goes here : Centre Content goes here : Centre Content goes 
          here : Centre Content goes here : Centre Content goes here : Centre Content 
          goes here : Centre Content goes here : Centre Content goes here : Centre 
          Content goes here : Centre Content goes here : Centre Content goes here 
          : Centre Content goes here : </p>
        <p>Centre Content goes here : Centre Content goes here : Centre Content goes 
          here : Centre Content goes here : Centre Content goes here : Centre Content 
          goes here : Centre Content goes here : Centre Content goes here : Centre 
          Content goes here : Centre Content goes here : Centre Content goes here 
          : Centre Content goes here : end </p>
      </div>
      <div id="left"> 
        <p>Left Content goes here : Left Content goes here : Left Content goes here 
          : Left Content goes here : Left Content goes here : Left Content goes here 
          : Left Content goes here : Left Content goes here : Left Content goes here 
          : Left Content goes here : end</p>
      </div>
      <div id="clearfooter"></div>
      <!-- ie needs this -->
      <div id="footer">Footer - | |- Footer </div>
    </div>
    <!-- end outer div -->
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what i want as well is on the left and right of the page, after the 10px #EEEEEE(on the right) and before the 10px #EEEEEE(on the left) i want to include a picture which is a gradient color and it extends all the way down...
    is it doable????

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

    If you want the left and right columns to extend to the footer then you can use a background image as per my original example

    For a vertical gradient outside the layout you will need to repeat an image on the body.

    I'm not quite sure if this is waht you mean so I did an example :

    http://www.pmob.co.uk/temp/2colwaz.htm

    Hope that helps.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the example u've done ob is perfect but the fade thing that i wanted was to be 10px wide that runs vertically on both sides and not as a background imgage like u've done. what i'm looking to do is to have a vertical fade line b4 and after the 10px #EEEEEE of both sides
    so on the left side the 10px fade vertical image will be b4 the 10px #EEEEEE
    and on the right u'll have the 10px #EEEEEE followed by the 10 px fade vertical image.
    and the background will be of color #B5B2B2 and not faded just normal..
    how can i do that??

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it possible as well to have 2 footers on top of each other and each seperated with a 10px border #EEEEEE???
    so between left and centrecontent and footer, there's footer2 that is about 20px height and runs horizontally... i'm gonna use it as a scrollbar. is that easy to do??

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

    For the footers you can just subdivide the original footer as you wish. Just make sure you change all the appropriate dimensions to match

    For the gradient image you will have to use a centred background image on the body as you are running out of emements that can carry 100% height. Both borders are on one image. If you need further effects then you will need to add it to this image. However because uou want a vertical gradient the image is starting to get a bit large.

    Heres a quick example.

    http://www.pmob.co.uk/temp/2colwaz2.htm

    Hope that helps

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ob how can i make the footer top as a horizontal scrollbar, coz instead of the 2 boxes, on the home page i'm gonna have 1 box which is basically a flash movie, and u can scroll horizontally to view it...

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

    Not exactly sure what you want to do but if you apply overflow:auto to an element of fixed width then if its content is greater a scrollbar will appear.

    Code:
    #testing{
     height:50px;
     border-bottom:10px solid #eee;
    width:768px;
    overflow:auto;
    }

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok what i actually need, if u take a look at the example u did me http://www.pmob.co.uk/temp/2colwaz2.htm

    what i want is instead of 2 boxes i want 1 box, and this 1 box is gonna be a wide flash movie that u scroll on from the footer top.
    so footer top will only be a horizontal scroll that manipulates the flash movie iniside the box. the flash movie is gonna be wider than 780px and this is why i need a horizontal scrollbar so that users can view it all.
    is my idea doable, or is it 2 complex?? any help m8??

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    You will have to use a script if you want to manipulate the object using a custom scroller as the normal scrollbars are only on the bottom of an element. Unfortunately scripting is not my area.

    You can just use a normal div with a scrollbar like this:

    http://www.pmob.co.uk/temp/2colwaz3.htm

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://phoenixlondon.co.uk/client_ar.../portfolio.htm

    ob if u can check this page, in explorer its working exactly as i want it, but in firefox u can see the rightbox is 1px lower than the leftbox. how can i modify this small problem, so that it'll look the same on both browsers.
    any suggestions bro???

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

    You need to float the boxes (as I did in my example) otherwise you will suffer from the ie 3 pixel jog. You then need to clear the floats in the menu.

    The margins also need adjusting because they are not working as you think.

    revised CSS.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Wireframe</title>
    <meta name="description" content="description">
    <meta name="keywords" content="keywords">
    <style type="text/css">
    <!--
    body {
     text-align: center;
     margin: 0px;
     padding: 0px;
     min-width:750px;
     background-color: #B5B2B2;
     background-image:url(http://phoenixlondon.co.uk/client_ar...images/bg2.gif);
     background-position:center;
     background-repeat:repeat-y;
    }
    .container {
     position: absolute;
     left: 50%;
     top: 50%;
     width:750px;
     height:460px;
     margin-top: -230px; /* make this half your image/element height */
     margin-left: -375px; /* make this half your image/element width */
     text-align: left;
     background:red;
    }
    * html .container {
     margin-left: -374px; /* make this half your image/element width */
     }
    body,td,th {
     font-family: Arial;
     font-size: 14px;
     color: #999999;
    }
    .header {
     padding:0; 
     margin:0; 
     border:0;
     background:#FFFFFF url(http://phoenixlondon.co.uk/client_ar...ges/header.gif) no-repeat bottom right;
     height:40px;
    }
    .content_full {
     padding:0; 
     margin:0; 
     border:0;
     position:relative;
     margin-top:10px;
     overflow:auto;
     width:756px;
    }
    .menu {
     padding:0; 
     margin:0; 
     border:0;
     background:#FFFFFF;
     height:30px;
     font-family:Arial;
     font-size:16px;
     font-weight:bold;
     color:#B5B2B2;
     padding-top:5px; 
    clear:both;
    }
    .leftbox {
     margin:10px 0; 
     padding:0;
     position:relative;/*ie needs this to show float */
     width:370px;
     height:370px;
     float:left;
     background-color:#FFFFFF;
    }
    
    .leftbox img {
     margin:10px;
    }
    .rightbox {
     margin:10px 0; 
     padding:0;
     width:370px;
     height:370px;
     background-color:#FFFFFF;
     float:right;
    }
    .rightbox p {
     padding:10px;
    }
    a.mainactive {
     text-decoration:none;
     padding: 0 10px;
     font-family:Arial;
     font-size:16px;
     font-weight:bold;
     color:#FF3932;
    }
    a.mainactive:link {
     text-decoration: none;
     color:#FF3932;
    }
    a.mainactive:visited {
     text-decoration: none;
     color:#FF3932;
    }
    a.mainactive:hover {
     text-decoration: none;
     color:#FF3932;
    }
    a.mainactive:active {
     text-decoration: none;
     color:#FF3932;
    }
    a.mainlink {
     text-decoration:none;
     padding: 0 10px;
     font-family:Arial;
     font-size:16px;
     font-weight:bold;
     color:#B5B2B2;
    }
    a.mainlink:link {
     text-decoration: none;
     color:#B5B2B2;
    }
    a.mainlink:visited {
     text-decoration: none;
     color:#B5B2B2;
    }
    a.mainlink:hover {
     text-decoration: none;
     color:#FF3932;
    }
    a.mainlink:active {
     text-decoration: none;
     color:#FF3932;
    }
    a:link {
     color: #FF3932;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
     color: #FF3932;
    }
    a:hover {
     text-decoration: underline;
     color: #FF3932;
    }
    a:active {
     text-decoration: underline;
     color: #FF3932;
    }
    .red {
     color:#FF3932;
    }
    .redbold {
     color:#FF3932;
     font-weight:bold;
    }
    .gray {
     color:#B5B2B2;
    }
    .graybold {
     color:#B5B2B2;
     font-weight:bold;
    }
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header">&nbsp;</div>
      <div class="leftbox"> <img src="http://phoenixlondon.co.uk/client_ar...wire_image.gif" alt="Wire" width="350" height="350"></div>
      <div class="rightbox">
    	<p><em class="redbold">Buldoo, 2003,</em> <strong>Travelling Still</strong></p>
    	<p>Hand printed cibachrome print <br>
    	  Size: 24&quot; x 24&quot; (Framed)<br>
    	  Price: &pound;850 + VAT(Framed)</p>
    	<p> <strong>further enquiries</strong> <span class="redbold">&gt;</span><br>
    	</p>
    	<p>&nbsp;</p>
    	<p><strong>Edition of 12 </strong></p>
      </div>
      <div class="menu"> <a href="home.htm" class="mainlink">home</a>|<a href="#" class="mainlink">about</a>|<a href="#" class="mainactive">portfolio</a>|<a href="#" class="mainlink">contact</a> </div>
    </div>
    </body>
    </html>

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://phoenixlondon.co.uk/client_ar.../portfolio.htm

    hi there ob, if u can take a look at the site i am designing, i'm experiencing a small tiny prob. if u open the page in explorer u can see the travelling still logo should be positioned the same way as in firefox, and in firefox u can see the height in the middle is giving a scrollbar and i don't want a scrollbar i want it to look exactly the same as in explorer. so is it possible to modify these two problems.

    also if u check the page
    http://phoenixlondon.co.uk/client_ar...lio/buldoo.htm

    the travelling still logo is sitting on both browsers where i want it to be. can i have the portfolio.htm logo to be sittting the same as in buldoo.htm and that works for all browsers perfectly.

    Thanx a lot m8.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    1)change the code to this:
    Code:
    .header {
     padding:0; 
     margin:0; 
     border:0;
     background:#FFFFFF;
     height:60px;
     text-align:right;
     position:relative;
    }
    .insideheader{
     width:240px;
     height:40px;
     float:right;
     margin:10px 10px 0 0;
    display:inline;/* ie double margin bug */
    }
    .content_full {
     padding:0; 
     margin:0; 
     border:0;
     position:relative;
     background:#FFFFFF;
     height:371px;/* increased height by 1px */
     margin-top:10px;
     overflow:auto;
     width:750px;
    }

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Location
    Reston, VA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if u increase the height by 1 ob to 371 in content_full u'll have a 1px white line above the horizontal scrollbar in explorer, although in firefox its working fine...
    any ideas to remove that single 1px white line, coz its not that look u know, and i would like it to be pixel perfect if u get me.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well mozilla's scrollbar is probably one pixel higher so you'll just have to hack it I'm afraid.

    Code:
    .content_full {
    padding:0; 
    margin:0; 
    border:0;
    position:relative;
    background:#FFFFFF;
    height:371px;/* increased height by 1px */
    margin-top:10px;
    overflow:auto;
    width:750px;
    }
     
    * html .content_full {height:370px}
    Again that hack would be better in conditional comments (without the star selector) because ie7 will probably need it also


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
  •