SitePoint Sponsor

User Tag List

Page 62 of 66 FirstFirst ... 1252585960616263646566 LastLast
Results 1,526 to 1,550 of 1630
  1. #1526
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need four equal columns each @ 200px width to contain text and images.

    I've been trying to modify the 3colcentered example, but having removed the background image and replaced with a colour, the colour stops at the bottom of the content, so is not equal to the other columns.

    Just to clarify, each column needs a background colour as opposed to an image.

  2. #1527
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will there be any space between the columns? (If not, then you should consider reducing the widths so they're 750px friendly - that way the page is both 800px width and printer friendly.)

  3. #1528
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There needs to be 20px margin between each column. It's for resolutions higher than 800 x 600.

  4. #1529
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Genjutsushi View Post
    Hey Paul,

    any tips for achieving a 4-equal column centered layout without using background images. I've been trying to come up with the answer myself this evening using an amalgamation of examples on your site but I'm getting nowhere fast.

    Cheers.
    It depends on the criteria

    If its 4 fixed width columns then a simple background image will do the trick. This is a 3 col centred example but you'd just change the image to make it 4 columns.

    If you need fluid columns then you are probably better using this other method of mine which will allow for any number of columns.

    Hope that helps

  5. #1530
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, I didn't see the second link you posted on your site last night. That should give me something to work with.

  6. #1531
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    This question relates to the 3colfixedtest_sourcenone demo (3 columns, content first, fluid width, fixed width sides).

    Quote Originally Posted by Paul O'B View Post
    I should point out that the 1px overlap I mention in the demos is not really needed these days and was for older mozilla/firefox versions. It will do no harm to leave it in but if you need that extra 1px space then it can be removed and the negative margin should then match the width of the column exactly.
    I removed the 1px overlap as you suggested (at least I think I did; I'm checking to see if I did it correctly):
    Code:
    /* ============= */
    /* Default Reset */
    /* ============= */
    
    * {margin:0;padding:0}
    p {margin:0 0 1em 0;padding:2px}
    p.expand a:hover {display:block;height:300px;background:red}
    .clearer {
    	height:1px;
    	overflow:hidden;
    	margin-top:-1px;
    	clear:both;
    }
    .contain, .clearfix {
    }
    .offscreen {
    }
    
    
    
    /* ============ */
    /* Layout Frame */
    /* ============ */
    
    /* equalizing columns */
    body {
    	background:#999999 url(images/colsbg1240.jpg) repeat-y left top;
    	color: #000;
    	position:relative;/* for ie7 to stabilize negative margins in child */
    }
    #wrapper {
    	margin:0 180px 0 200px;
    	background:#fff;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000;
    }
    
    /* 3 columns, content first, fluid width, fixed width sides */
    #main {
    	float: left;	
    	width: 100%;
    	margin-right:-3px; /* (no change, not sure what's needed) to stop columns dropping*/
    }
    #content {
    	float:right;
    	width:100%;
    	position:relative;
    	/* margin-left:-1px; (removed, may be required) */
    }
    #sidebar1 {
    	position:relative;/*ie needs this to show float */
    	width:200px;
    	float:left;
    	margin-left:-200px; /* (was -199px;) must be 1px less than width otherwise won't push footer down in some browsers */
    	color:#fff;
    	/* left:-1px; (removed) */
    }
    #sidebar2 {
    	position:relative;/*ie needs this to show float */
    	width:180px;
    	float:right;
    	margin-right:-180px; /* (was -179px;) must be 1px less than width otherwise won't push footer down in some browsers */
    	color:#fff;
    	/* left:1px; (removed) */
    }
    
    
    
    
    <body id="" class="">
    <div id="top"></div>
    <div id="wrapper">
    
    		<div id="main">
    			<div id="content">
    				<p><strong>3 column layout (This layout has content first (unlike my other demos) - and is based on an idea by <a href="http://www.positioniseverything.net/temp/piefecta-beta.html">BigJohn</a> which uses similar techniques to mine.)</strong></p>
    				<p class="expand"><a href="#">Expand</a></p>
    			</div><!-- end content -->
    
    			<div id="sidebar1">
    				<p>Left content goes here : Left content goes here : Left content goes here : </p>
    				<p class="expand"><a href="#">Expand</a></p>
    			</div><!-- end sidebar1 -->
    
    			<div class="clearer"></div>
    		</div><!-- end main -->
    
    		<div id="sidebar2">
    			<p>Start Right content goes here : Right content goes here : </p>
    			<p class="expand"><a href="#">Expand</a></p>
    		</div><!-- end sidebar2 -->
    
    		<div class="clearer"></div>
    </div><!-- end wrapper -->
    </body>
    How badly did I mess it up?
    Should the #main {margin-right:-3px;} be changed too?
    Should the #content {margin-left:-1px;} remain?
    (I'm still trying to wrap my head around how the negative margin technique works, and so I'm not fully aware of what potential pitfalls to look for.)

  7. #1532
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi D9r,

    Yes this part is correct now:
    Code:
    #sidebar1 {
    	position:relative;/*ie needs this to show float */
    	width:200px;
    	float:left;
    	margin-left:-200px; /* (was -199px;) must be 1px less than width otherwise won't push footer down in some browsers */
    	color:#fff;
    	/* left:-1px; (removed) */
    }
    #sidebar2 {
    	position:relative;/*ie needs this to show float */
    	width:180px;
    	float:right;
    	margin-right:-180px; /* (was -179px;) must be 1px less than width otherwise won't push footer down in some browsers */
    	color:#fff;
    	/* left:1px; (removed) */
    }
    You can loose the margin-left:-1px on #content because the left float is moved right out of the way now. Previously the left column was sitting 1px inside the center column.

    The margin-right -3px on #main was to account for the right column 1px overlap and then a 2px margin to cater for rounding errors in IE in case it made 100&#37; bigger than 1005 (as it often does).

    You could probably get away with margin-right:-1px now or in some cases no margin at all but I would leave a 1px negative margin in place just in case to cover for any rounding errors.

    The way these layouts work is explained in the section "equalising columns without images" in this page.

  8. #1533
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a follow up to say I managed to achieve the result I was after. I've now got a 4 equalizing, non-fluid column based layout.

    Code:
    <div id="header">
    		
    	</div>
    	
    <div id="wrapper">
    	
    	
    	<div id="outer">
    		<div id="left">
    			<p>This
    is some text : This is some text : This is some text : This is some
    text :This is some text : This is some text :This is some text : This
    is some text :This is some text : This is some text :This is some text
    : This is some text :This is some text : This is some text :This is
    some text : This is some text :This is some text : This is some text </p>
    		</div>
    		
    		<div id="left2">
    			<p>This
    is some text : This is some text : This is some text : This is some
    text :This is some text : This is some text :This is some text : This
    is some text :This is some text : This is some text :This is some text
    : This is some text :This is some text : This is some text :This is
    some text : This is some text :This is some text : This is some text </p>
    		</div>
    			
    		<div id="right">
    			<p>This
    is some text : This is some text : This is some text : This is some
    text :This is some text : This is some text :This is some text : This
    is some text :This is some text : This is some text :This is some text
    : This is some text :This is some text : This is some text :This is
    some text : This is some text :This is some text : This is some text </p>
    			<p>This is some text : This is some text : This is
    some text : This is some text :This is some text : This is some text
    :This is some text : This is some text :This is some text : This is
    some text :This is some text : This is some text :This is some text :
    This is some text :This is some text : This is some text :This is some
    text : This is some text </p>
    		</div>
    		<div id="right2">
    			<p>This is some text
    : This is some text : This is some text : This is some text :This is
    some text : This is some text :This is some text : This is some text </p>
    
    		</div>
    		<div class="clearer"></div>
    		<div class="col one"></div>
    		<div class="col two"></div>
    		<div class="col three"></div>
    		<div class="col four"></div>
    	</div>
    	<div id="footer"></div>
    </div>

    Code:
    *{margin:0;padding:0}
    p{margin:0 0 1em 0;padding:5px;position:relative;}/*opera 8 needs the position:relative on the inner content but opera 9 doesn't */
    
    
    #wrapper{
    	width:916px;
    	margin:0 auto;
    	padding:0;
     background:#fff;
    	z-index:1;
    	position:relative;
    }
    #header,#footer{
    	background:#fff;
    	position:relative;
    	z-index:5;
    	padding:10px;
    	
    }
    #footer{border:none;}
    #header h1,#footer p{
    	border:1px solid #000;
    	padding:25px;
    	text-align:center;
    }
    #outer{
    	position:relative;
    	width:916px;
    	clear:both;
    	z-index:4;
    	margin:0 auto 0 auto;
    }
    
    
    #left{
     width:200px;
    	z-index:1;
    	position:relative;
    	float:left;
    	margin:0 20px 0 0;
    	display:inline;
    	left:1px;
    	padding-left:17px;
    	padding-top:20px;
    }
    
    #left2{
    width:200px;
    	z-index:1;
    	position:relative;
    	float:left;
    	margin:0 20px 0 0;
    	display:inline;
    	left:1px;
    	padding-left:2px;
    	padding-top:20px;
    }
    
    #right{
    width:200px;
    	z-index:1;
    	position:relative;
    	float:left;
    	margin:0 20px 0 0;
    	display:inline;
    	left:1px;
    	padding-left:0px;
    	padding-top:20px;
    }
    
    #right2{
    	width:200px;
    	z-index:1;
    	position:relative;
    	float:left;
    	margin:0 20px 0 0;
    	display:inline;
    	left:1px;
    	padding-top:20px;
    }
    .col{
    	width:200px;
    	position:absolute;
    	z-index:0;
    	left:5%;
    	bottom:0;
    	border:1px solid #000;
    	margin:20px 0 20px 0;
    }
    .one{background:red; left:20px;}
    .two{background:#FF6600;left:240px;}
    .three{background:#CC3399;left:460px;}
    .four {background:green; left:680px;}
    #footer {clear:both;}
    
    html>body .col{top:0}/* hide from ie6 and under*/
    .clearer{
    	height:1px;
    	overflow:hidden;
    	margin-top:-1px;
    	clear:both;
    }

    Thought I'd post up the code just in case anyone else found it useful. This was very much based on this.

    Cheers again Paul.

  9. #1534
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Glad you got it working

  10. #1535
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you yet again, Paul. Your timely, authoritative answers to my questions is much appreciated. By the way, the last time I bought a computer book was about 15 years ago. As a small token of my appreciation and to help support your efforts, I've been planning to break that streak by buying your new book one of these days. Is there a particular vendor you prefer people use?

    Quote Originally Posted by Paul O'B View Post
    The way these layouts work is explained in the section "equalising columns without images" in this page.
    That tutorial also refers to how to "make this (negative margins) work in older versions of mozilla". How old are we talking about? How likely is this to be a problem? I'm all for simplifying the code by removing the 1px overlaps, but if it's safer to leave them in for now I will. What do you suggest for sites targeted towards the general public in the U.S.?

  11. #1536
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that was about five years ago or so, back in 2003-2004. Could be as "recent" as 2005-2006 though, but even then it should be safe to remove these days. (For the record, I still have a copy of Firefox 0.8 on CD - scary, huh?)

  12. #1537
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Yes as Dan said the article was written 5 years ago and mozilla has improved since then so it's not really necessary to leave the overlap in the code. There are probably very few of those old browsers left.

    Code:
     Is there a particular vendor you prefer people use?
    You can get it from Sitepoint direct or Amazon if its easier (remember to leave a nice review if you get it from Amazon ).

  13. #1538
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. I thought you might be interested in this website which I built using a template from your site. It seems to work Ok in the latest versions of IE, Opera and FireFox but a friend with an earlier version of FF (v1.0.6) finds that the footer on two of the pages encroaches up the page. As you can see, in order to continue the background column image from top to toe in the left column I have varied the padding on the content of the left column. Not very tidy but it seems to work.

  14. #1539
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi SRD,

    The problem is that yoo have nested a wrapper around the 100&#37; height structure which effectively kills the height. You cannot have a 100% (min-height:100%) element unless it is the first element on the page otherwise the height collapses to zero.

    What you should have done is used the main 100% wrapper to hold your repeating image and then just rubbed it out in the header and footer with a background color. In that way the column will always extend with the side content or the main content.

    Here is the revised code although there are numerous changes to the css and a few of changes to the html.

    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>
    <!-- Thanks to pmob.co.uk for the template -->
    <title>Castle House homepage</title>
    <meta name="verify-v1" content="DA/uJqrBaSrNnvDLPQ4BloiJrwBnNxgX3iHp6f1oBc4=" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta content="Antique restoration and other furniture services." name="description" />
    <meta content="antique,furniture,restoration,castle house," name="keywords" />
    <link rel="shortcut icon" href="http://www.castlehouse.uk.com/images/favicon.ico" type="image/x-icon" />
    <link href="structure.css" rel="stylesheet" type="text/css" />
    <link href="design.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    /* mac hide \*/
    html, body {
        height:100%
    }
    body {
        text-align:center;
    }
    /* end hide */
    #wrap {
        min-height:100%;
        position: relative;
        width: 700px;
        margin:-52px auto 0;
        background: url(http://www.castlehouse.uk.com/images/scroll2.gif) repeat-y 0 0;
        text-align:left;
    }
    * html #wrap {
        height:100%
    } /*IE treats height as min-height anyway*/
    #outer {
        margin-left:160px;
        padding:180px 0 0;
        min-height:0;
    }
    * html #outer {
        height:1%
    }
    #header {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        border-top:50px solid #fff;
        height:130px;
        overflow:hidden;/* fixed height so hide overflow*/
        background:#fff;/* rub out background*/
    }
    * html #header {
        height:180px;
        he\ight:130px;
    }
    #left {
        float: left;
        position: relative; /* Needed for IE/win */
        width: 160px;  /*same as margin on outer */
        margin-left: -159px; /*must be 1px less than width otherwise won't push footer down */
        left:-1px;/* line it up exactly*/
    }
    #left {
        margin-right: -3px;
    }/* 3 px jog for ie (also fixes mozilla issue with float drop)*/
    #left p {
        padding:3px;
    }
    #footer {
        width: 100%;
        clear: both;
        height: 50px;
        position: relative;
        background:#fff;
    }
    #clearfooter {/* only needed to clear floats now as header border soaks up negative margin*/
        clear: both;
        height: 1px;
        overflow:hidden;
    }
    #centrecontent {
        float:right;
        width:100%;
        position:relative;
    }
    .outerwrap {
        float: left;
        width: 100%;
        position:relative;
    }
    body {
        font: 18pt "Times New Roman", serif;
        color: #481022;
    }
    a {
        color: #481022;
    }
    #centrecontent h2 {
        margin: 10px 20px;
        padding-top: 20px;
        font-size: 20pt;
    }
    #centrecontent p {
        margin: 10px 20px;
        width: 500px;
    }
    #header {
        border-bottom:5px solid #481022;
        background:#fff;
    }
    #header img {
        float: left;
        margin: 0 15px;
    }
    #header h1 {
        margin: 20px 0 0 180px;
        font-size: 26pt;
    }
    #left ul {
        padding:20px 0;
        list-style-type: none;
    }
    #left li {
        margin:0 0 20px;
    }
    #footer {
        border-top:1px solid #481022;
        background-color:#fff;
        text-align:center;
        color:#000;
        width:700px;
        margin:auto;
    }
    #centrecontent p {
        padding-top: 20px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="outer">
            <div class="outerwrap">
                <div id="centrecontent">
                    <!--centre content goes here -->
                    <p>Established for over 30 years, Castle House can offer restoration 
                        services to trade and private customers.</p>
                    <p>Please click on one of the links to the left for more information.</p>
                </div>
                <div id="left">
                    <ul>
                        <li><a href="http://www.castlehouse.uk.com/aboutus.html">About us</a></li>
                        <li><a href="http://www.castlehouse.uk.com/restoration.html">Restoration<br />
                            and repairs</a></li>
                        <li><a href="http://www.castlehouse.uk.com/services.html">Services</a></li>
                        <li><a href="http://www.castlehouse.uk.com/gallery.html">Gallery</a></li>
                        <li><a href="http://www.castlehouse.uk.com/contact.html">Contact us</a></li>
                        <li><a href="http://www.castlehouse.uk.com/links.html">Links</a></li>
                    </ul>
                </div>
            </div>
            <!--end outer wrap -->
            <div id="clearfooter"></div>
            <!-- to clear footer -->
        </div>
        <div id="header"> <img alt="" src="http://www.castlehouse.uk.com/images/boss3.gif" />
            <h1>CASTLE HOUSE<br />
                ANTIQUE RESTORATION LTD.</h1>
        </div>
    </div>
    <!-- end outer div -->
    <div id="footer"> testing</div>
    </body>
    </html>

    This is working in all my browsers and older mozilla and still maintains the sticky footer technique.

    Hope it helps.

  15. #1540
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thanks for that, I'd done it to enable the whole thing to centre regardless of screen/page size.

  16. #1541
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trying out your code now gives a large area above the centrecontent text. I note you have given 180px padding to the outer div when the header height is only 130px, changing this to 130px moves the text up a bit but not to the 20px gap I wanted. Also, in Opera, the top border to the footer wraps around to a second line.

  17. #1542
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SRD View Post
    Trying out your code now gives a large area above the centrecontent text.
    No it doesn't

    I note you have given 180px padding to the outer div when the header height is only 130px,
    The header height is 130px plus a 50px top border which equals 180px. The 50px white border on the top of the header is to soak up the negative top margin on #wrap and make room for the footer without needing a clearer.


    changing this to 130px moves the text up a bit but not to the 20px gap I wanted.
    Don't change it leave it as it was.


    Also, in Opera, the top border to the footer wraps around to a second line.
    No it doesn't.

    Copy my code again and paste it into your editor and then view it while online and you will see that it works fine.

    You haven't updated your page so I can't see what you have done wrong.

    I've put a version online so you can see it working

    http://www.pmob.co.uk/temp/castle.htm

  18. #1543
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was using the 'Preview in Browser' function of HTML-Kit which allows the code to be viewed via a local link. I've now uploaded it to http://www.castlehouse.uk.com/indexnew.html and it shows as I described above with the exception that, in Opera, the 'Links' link is now disected by the top-border of the footer.

  19. #1544
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You are still linking to the old stylesheets which are corrupting my nice new code.

    See my example here for how it really looks.

  20. #1545
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops, where's the beating myself over the head smiley?, Ah, here it is

    Thanks a lot.

  21. #1546
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, one further thing, as you can see the column image in the left column is a repeating image which I've moved down a little so that it appears to be supporting the border-bottom of the header. Is it possible to adjust the code so that the border-top of the footer aligns with the bottom of the image regardless of the page height rather than bisecting it as currently happens?

  22. #1547
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh dear, I find that the Links page in FireFox and the Links page and Contact page in Opera have the repeating image showing under the footer.

  23. #1548
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SRD View Post
    Oh dear, I find that the Links page in FireFox and the Links page and Contact page in Opera have the repeating image showing under the footer.
    You haven't changed the html correctly on the links page. You are not paying attention again (where's that hammer?)

    Code:
            </div>
            <!--end outer wrap -->
            <div id="clearfooter"></div>
            <!-- to clear footer -->
        </div>
        <!-- end outer div -->
        <div id="header"> <img alt="" src="http://www.castlehouse.uk.com/images/boss3.gif" />
            <h1>CASTLE HOUSE<br />
                ANTIQUE RESTORATION LTD.</h1>
        </div>
    </div>
    <div id="footer"> </div>
    </body>
    </html>
    The footer is now outside the wrapper and not inside it.

    Is it possible to adjust the code so that the border-top of the footer aligns with the bottom of the image regardless of the page height rather than bisecting it as currently happens?
    You've lost me there.

    The top border on the footer will be at whatever position the window is open at and will always appear to be at the bottom of the repeat image anyway.

    I'm not sure what you are asking here as the border doesn't bisect the image it lies under the image which is exactly what I thought you wanted.

    You may need to explain or draw a picture:

  24. #1549
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I missed that the footer had been taken outside of the wrapper.

    Ok, I'll try verbally again before resorting to my non-existent drawing skills.
    The image set as a vertically repeating background image is a table leg. I have moved the start position down by 55px
    (background: url(http://www.castlehouse.uk.com/images/scroll2.gif) repeat-y 0 55px; )
    so that it appears as if the top of the table leg is supporting the border-bottom of the header.

    Can I do a similar thing at the bottom of the page so that the border-top of the footer always appears at the bottom of one of the repeating table leg images. So that an exact number of repeats occur, that number of repeats varying according to the height of the content.
    This would mean that the distance between the bottom of the header and the top of the footer would always be an exact number of repeats of the height of the table leg.

    I did it on the old page by adjusting the padding-bottom of the left column ul thus pushing the footer down until it reached the correct part of the table leg.

  25. #1550
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    This would mean that the distance between the bottom of the header and the top of the footer would always be an exact number of repeats of the height of the table leg.
    I think I understand now and the answer is no you cannot do it.

    It's no good adding various amounts of padding because you don't know how big my monitor is. The footer is always at the bottom of the viewport and you never know what that will be.

    The only way you could do this would be to lose the footer at the bottom of the viewport method (sticky footer) and then let the footer rest under the content. Then you would need to add javascript to check the height of the document content and adjust it so that it meets with the end of the repeated section.

    You can't do it with css and using different padding on various pages won't work (and would be unmanageable) because the height probably varies between browers and would be different depending on the browsers text size anyway.

    The only css solution would be to place an image section in the footer and drag it upwards to meet the other image. This would allow the bootom of the image to look neater but would make the repeating graphic look worse because the join would be further up the table leg and probably look even worse.

    Content on a page can be any height and if the user resizes text etc then the only way to accomplish it would be to script it.

    In theory you could still have a sticky footer with the scripting method if you increase or decrease the footer height to match the image repeat but at the same time you would need to manipulate several other classes to adjust the negative margins and header border so that it all still works together.

    All in all you are better off with what you have unless you are good at scripting


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
  •