SitePoint Sponsor

User Tag List

Page 64 of 66 FirstFirst ... 145460616263646566 LastLast
Results 1,576 to 1,600 of 1630
  1. #1576
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried Paul O'Bs code (post 1572, p. 63) and it works fine, but in my case I also need the navigation div "mainnav" to overlap the header div.

    I changed mainnav to absolute and it works fine in Safari/Firefox but in IE6/7 the mainnav div is not showing.

    Code:
    #mainnav {
    	position:absolute;
    	width:900px;
    	height:39px;
    	z-index:24;
    	top:222px;
    	text-align: left;
    }

    What would be the fix for this?

    Edit:
    I found a fix: add a div that surrounds the mainnav div

  2. #1577
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I found a fix: add a div that surrounds the mainnav div
    Glad you found a fix.

  3. #1578
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rwarren View Post
    Hi, I hate to put a damper on this, I am sure it is brilliant CSS, but the right hand column of the initial versin is coded in HTML before the middle (body) column. This means I have to read all the right-hand column before I get to the main body. For people who use screen readers these "floating right" columns are a real pain in the ***. The only way I knew of delivering three columns so that it makes sense to screen readers is to use a simple layout table, one row, three columns. I see that there now is a CSS method that leaves content in a logical order in HTML, but it looks horrenously complicated.
    Thanks - Richard
    I don't think tables are any easier for screen readers to negotiate and in most cases are in fact harder for them because tables create logical connections that aren't there when tables are used for layout.

    For normal html simple skip links will provide the navigation that screen readers will need with a simple skip to the content. It has also been shown that content order has very little impact on SEO.

    The order of the html is not an issue with my layout but with the way that floats work in general and there are methods rto remove xcolumns around with css but it's still better to keep things simple. With a table however you can never move the columns around so the argument fails at the first step.

  4. #1579
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another question.

    The footer image in my case use some extra space above the actual height needed for the actual footer bar (did that make sence?). I start with the container background color on top and fade it out under the footer bar.

    The problem I have now is when I try to lower the footer text to the footer bar. If I use line height to lower the text it will provoke the scroll bar to appear. I tried margins and other things but it's just a mess really when comparing Saf/FF/IE6 + 7.

    Lets say the background image in the footer is 75px. I need to use a line height number higher than 75px and I think that is the problem.

    What would be the best way to fix this problem?
    Attached Images Attached Images

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

    I'd probably need to see your page code in full to give a proper answer but if you just want to shift the element down a bit without upsetting the flow have you tried adding position:relative to the text eleemnt and moving it down a few pixels with topxpx etc.

  6. #1581
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I'd probably need to see your page code in full to give a proper answer but if you just want to shift the element down a bit without upsetting the flow have you tried adding position:relative to the text eleemnt and moving it down a few pixels with topxpx etc.
    Yep that worked. Thanks.

    Another footer question:
    As I mention my footer is 75px high and in your example it is 24px. The footer height is controlled with this:
    Code:
    #footer {
        width:730px;
        margin:-25px auto 0;
        height: 24px;
        background-color: #f5f5f5;
        border-top: 1px solid #e9e9e9;
        position:relative;
        z-index:99;
        clear:both;
    }
    #footer p {
        margin:0;
        padding:0
    }
    * html #footer {
        height:25px;
        he\ight:24px;
    }
    In my case I suppose I should chance 24=>75 and 25=>76 (assuming 25 is a 24+1 trick of some sort). But when I increase these numbers the footer starts to eat up the page. The bottom no longer pushes away the footer. I cant find the code that controls this. I see the same problem when I change the numbers in your example.

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

    There are 3 things in conjunction that control the footer.

    1) First is the negative top margin on the footer which must equal the actual height of the footer.

    2) the actual height of the footer (which is made up of height padding and borders etc.)

    3) The clearefooter which soaks up the space made by the negative margin and stops content overlapping and must be the same as the height of the footer (appprox).

    Code:
    #footer {
        width:730px;
        margin:-75px auto 0;
        height: 74px;
        background-color: #f5f5f5;
        border-top: 1px solid #e9e9e9;
        position:relative;
        z-index:99;
        clear:both;
    }
    
    * html #footer {
        height:75px;/* box model hack for ie5.x*/
        he\ight:74px;
    }
    #clearfooter {
        height:75px;
        width:100%;
        clear:both
    }
    There are other methods instead of using a clear footer and you should read the FAQ on putting a footer at the bottom of the window for more info

  8. #1583
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    There are 3 things in conjunction that control the footer.

    1) First is the negative top margin on the footer which must equal the actual height of the footer.

    2) the actual height of the footer (which is made up of height padding and borders etc.)

    3) The clearefooter which soaks up the space made by the negative margin and stops content overlapping and must be the same as the height of the footer (appprox).

    Code:
    #footer {
        width:730px;
        margin:-75px auto 0;
        height: 74px;
        background-color: #f5f5f5;
        border-top: 1px solid #e9e9e9;
        position:relative;
        z-index:99;
        clear:both;
    }
    
    * html #footer {
        height:75px;/* box model hack for ie5.x*/
        he\ight:74px;
    }
    #clearfooter {
        height:75px;
        width:100%;
        clear:both
    }
    There are other methods instead of using a clear footer and you should read the FAQ on putting a footer at the bottom of the window for more info
    I think there is a semicolon missing there after clear:both at the end.

    With this code I get a one pixel border at the very bottom. It shows my background color in the container. I changed it to green temporarily. It shows in all browsers but it will disappear sometimes if I drag up.
    Attached Images Attached Images

  9. #1584
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If it is the last declaration in a selector there is no need for a semicolon. Thoguh I always do it just in case if I add something later I don't forget it.
    I can't see the attachment to know what you are talking about so I'll wait.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #1585
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think there is a semicolon missing there after clear:both at the end.
    No as Ryan said the last selector in a rule block doesn't need it and being minimalist I omit it on occasions
    With this code I get a one pixel border at the very bottom. It shows my background color in the container. I changed it to green temporarily. It shows in all browsers but it will disappear sometimes if I drag up.
    This is a weakness of browser makers and nothing t do with my code. The problem is simply that the browsers rounds up or down to a pixel height depending on what the height is and therefore the browser is occasionally 1px out.

    What I usually do is make the footer 1px higher than needed and then only drag it upwards by one less pixel than needed thus forcing the vertical scrollbar. It all depends on how picky you are.

    All browsers have rounding errors but some are worse than others I'm afraid.

  11. #1586
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ...

    What I usually do is make the footer 1px higher than needed and then only drag it upwards by one less pixel than needed thus forcing the vertical scrollbar. It all depends on how picky you are.

    All browsers have rounding errors but some are worse than others I'm afraid.
    After some testing it looks like it renders fine if I change the first "74" to "75".

    Code:
    #footer {
        width:730px;
        margin:-75px auto 0;
        height: 75px;  /* 74px from start */
    ...

    What was the intention with the one pixel lower height?

  12. #1587
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Dudikowski View Post
    What was the intention with the one pixel lower height?
    74px height plus 1px for the top border making a total of 75px

  13. #1588
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    74px height plus 1px for the top border making a total of 75px
    Aha! Brilliant!

    (stupid me I removed the border before so I was 1 pixel short)

  14. #1589
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have started to fill the container with my content. I have a problem now where the footer ignores the content and if I shrink the window the footer hovers over my content. What are the ground rules for divs inside the container to avoid this?

  15. #1590
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It can't be positioned I would think-also it can't have a z-index higher then the footer.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #1591
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It can't be positioned I would think-also it can't have a z-index higher then the footer.
    I dont think the z-index have anything to do with it. The footer is supposed to stop when it "hits" an obstacle above itself.

  17. #1592
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh that's normal behavior-maybe Paul knows of a workaround. I'm not into that 3column thing all that much.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #1593
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have started to fill the container with my content. I have a problem now where the footer ignores the content and if I shrink the window the footer hovers over my content. What are the ground rules for divs inside the container to avoid this?
    I'd need to see your code but the points I raised in post #1583 are the technique for keeping the footer clear. If you have manipulated those dimensions incorrectly then the footer will overlap the content.

    Or you may have a div in the wrong place or perhaps you haven't cleared something.

    You should not be getting an overlap with content on the footer so you have something amiss in your code and I'd need to see it to debug

  19. #1594
    SitePoint Member Dudikowski's Avatar
    Join Date
    Mar 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul helped me solve my problem. I had some divs with declared height: xxxpx.

  20. #1595
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    Kansas
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I'm using one of your 3 column layouts and I've modified it slightly to meet my goals. I have run into a bit of a bind though. It appears that my left and right columns are not spanning to match that of the longest column. My example code shows that the left and right , colored with a shade of gray, do not come down and meet flush with the top of the footer. What am I missing that will make them meet up flush with one another. Also it appears that the right column area if it doesn't have enough content in it will shift the the left column.

    The template I'm using as a base is http://www.pmob.co.uk/temp/3col-centred-template10.htm

    HTML 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>
    <title>3 Column Fixed Width Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100&#37;;}
    /* end hide*/
    body { 
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background: url(images/long-bg2.gif) repeat-y center top; 
    	color:#000;
    	text-align:center;
    	font-size:x-small;
    }
    
    #outer{
    	min-height:100%;
    	width:765px;
    	margin-left:auto;
    	margin-right:auto;
    	background:transparent url(images/3-colcentred-blueshade.gif) repeat-y center top;
    	text-align:left;
    	border-left:3px solid #fff;
    	border-right:3px solid #fff;
    	position:relative;
    }
    * html #outer {
    	width:771px;
    	w\idth:765px;
    	height:100%;
    }
    #header, #footer{
    	background:#ffffcc;
    	border-top:5px solid #fff;
    	/* border-bottom:5px solid #fff;  Puts a gap between the header and the menus */
    	text-align:center;
    }
    
    #header { background-color: green; height: 170px; }
    
    #footer{
    	position:absolute;
    	/* bottom:0; This fixes the footer to the bottom of the page*/
    	left:0;	
    	width:765px;
    	height:60px;
    }
    * html #footer {
    	height:50px;
    	he\ight:40px;
    	bottom:-1px;
    }
    #clearfooter {
    	clear:both;
    }
    #right, #left, #content {
    	float:left;
    	width:151px;
    }
    
    #right, #left { background-color: #5f5f5f; }
    
    #content{width:463px;}
    .content1{
    	background: #FFF;
    	color: #000;
    	border-bottom:5px solid #fff;
    	padding:5px;
    }
    .content2{padding:5px;}
    .clearer{
    	height:1px;
    	overflow:hidden;
    	clear:both;
    	margin-top:-1px;
    }
    
    .centeredImage {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #navigation {
    	padding-left: 6px;
    	font-size: small;
    }
    
    #affiliate-logos {
    	padding-right: -6px;
    
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
    	<div id="header">
    		Header
    	</div>
    
    	<div id="left">
    		<div id="navigation">
    			<a class="nav" href="index.php?bod=0">Home</a>
    			<br />
    			<a class="nav" href="index.php?bod=4">Products</a>
    			<br />
    			<a class="nav" href="index.php?bod=5">Services</a>
    			<br />
    			<a class="nav" href="index.php?bod=7">About Us</a>
    			<br />
    			<a class="nav" href="index.php?bod=8">Contact Us</a>
    		</div>
    
    		<div id="left-content">
    			<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 : </p>
    		</div>
    	</div>
    	<div id="content">
    		<div class="content1">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus 
    
    nunc. Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus 
    
    faucibus dictum. Suspendisse quis felis eget lectus auctor varius. Pellentesque mattis odio nec nibh. Ut at ligula quis quam aliquam 
    
    accumsan. Nulla semper molestie lacus. Sed ante magna, tristique nec, facilisis id, fermentum ut, metus. Nullam accumsan scelerisque 
    
    mauris. Nullam ultricies facilisis nisl. In hac habitasse platea dictumst. Donec molestie ipsum in turpis. Nulla facilisi. Ut tincidunt 
    
    ipsum at erat. Proin ullamcorper nisi rhoncus metus. Integer auctor nibh.</p>
    			<br />
    			<table cellspacing="1" cellpadding="1" border="0" align="left" width="200">
    			    <caption><strong>Store Hours</strong></caption>
    			    <tbody>
    			        <tr>
    			            <td nowrap="">Monday - Wednesday</td>
    
    			            <td nowrap="">am-pm</td>
    			        </tr>
    			        <tr>
    			            <td>Thursday</td>
    			            <td>am-pm</td>
    			        </tr>
    			        <tr>
    			            <td>Friday</td>
    			            <td>am-pm</td>
    			        </tr>
    			        <tr>
    			            <td>Saturday</td>
    			            <td>am-pm</td>
    			        </tr>
    			        <tr>
    			            <td>Sunday</td>
    			            <td>am-pm</td>
    			        </tr>
    			    </tbody>
    			</table>
    			<br /><img src="./img/emp/001.jpg" alt="">
    		</div>
    		<div class="content2">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus 
    
    nunc. Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus 
    
    faucibus dictum. Suspendisse quis felis eget lectus auctor varius. Pellentesque mattis odio nec nibh. Ut at ligula quis quam aliquam 
    
    accumsan. Nulla semper molestie lacus. Sed ante magna, tristique nec, facilisis id, fermentum ut, metus. Nullam accumsan scelerisque 
    
    mauris. Nullam ultricies facilisis nisl. In hac habitasse platea dictumst. Donec molestie ipsum in turpis. Nulla facilisi. Ut tincidunt 
    
    ipsum at erat. Proin ullamcorper nisi rhoncus metus. Integer auctor nibh.</p>
    			<p>Duis gravida tellus. Integer adipiscing hendrerit urna. Morbi felis lorem, auctor eget, faucibus feugiat, 
    
    aliquet feugiat, mauris. Pellentesque posuere sem eu est. Nulla ac sem. Vivamus felis est, scelerisque quis, consequat vitae, ultricies 
    
    nec, felis. Proin eu urna. Suspendisse faucibus, ante volutpat hendrerit lobortis, orci dolor eleifend nisi, id sodales ipsum libero a 
    
    nunc. Nunc urna ligula, commodo non, mattis ac, lobortis eget, orci. Cras nisi augue, vehicula eu, tristique et, pharetra in, lacus. Nunc 
    
    ut lacus. Sed iaculis purus. Ut in dui at leo vehicula adipiscing. Fusce id magna. Vivamus tristique, sapien vel tempor fermentum, massa 
    
    sapien luctus erat, ac vulputate augue libero sed orci. Curabitur purus augue, cursus a, elementum eget, suscipit ac, dolor. Cras at magna. 
    
    </p>
    		</div>
    	</div>
    
    	<div id="right">
    		<div id="affiliate-logos">
    			<img class="centeredImage" src="./img/logos/lenexachamber.png" alt="">
    			<img class="centeredImage" src="./img/logos/ncpa.png" alt="">
    			<img class="centeredImage" src="./img/logos/kpsc.png" alt="">
    			<img class="centeredImage" src="./img/logos/pcca.png" alt="">
    		</div>
    
    		<div id="right-content">
    			<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right 
    
    content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
    		</div>
    	</div>
    	<div id="clearfooter"></div>
    	<div id="footer">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus nunc. 
    
    Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus faucibus 
    
    dictum. Suspendisse quis felis eget lectus auctor varius.
    		</p>
    	</div>
    </div>
    </body>
    </html>
    Any help is much appreciated.
    Last edited by devxtech; Mar 27, 2009 at 14:44.

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

    The three columns are floated left so they rely on there being some content to hold the floats apart. You should seta min-height for the columns and that will ensure they stay inp place.

    something like this:

    Code:
    #right, #left, #content {
    min-height:100px;
    }
    * html #right,* html  #left,* html  #content {
    height:100px
    }
    * html #right{float:right}
    The columns colours and borders in that particular example are provided by the background image that was placed on #outer.

    This is the image I used.

    http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

    Just make your self a similar image with the colours and borders you require.

    Hope that explains it

  22. #1597
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    Kansas
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The three columns are floated left so they rely on there being some content to hold the floats apart. You should seta min-height for the columns and that will ensure they stay inp place.

    something like this:

    Code:
    #right, #left, #content {
    min-height:100px;
    }
    * html #right,* html  #left,* html  #content {
    height:100px
    }
    * html #right{float:right}
    The columns colours and borders in that particular example are provided by the background image that was placed on #outer.

    This is the image I used.

    http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

    Just make your self a similar image with the colours and borders you require.

    Hope that explains it
    That worked. I also found that by adding a 1px border to the left and right columns is what made it go wacky and make them not line up. One more thing. How do I make the columns all equal height? I want all the columns to expand to the length of the longest column.

  23. #1598
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    One more thing. How do I make the columns all equal height? I want all the columns to expand to the length of the longest column.
    You can't (Read the article again )

    That's what the background image is for to give the illusion of equal columns.

    That worked. I also found that by adding a 1px border to the left and right columns is what made it go wacky and make them not line up
    Did you reduce the width to account for the extra borders. If not then they won't fit and the columns will drop.

    However you don't need to add borders and they won't work anyway as you should be adding the borders via the background image (as I've said a few times now)

    The equal columns are provided by repeating the background image on the parent that holds all the columns and therefore it will always be as long as the longest column and is the simplest way to do this.

    If you don't want to use an image then look at some of the other examples but they are more advanced and more complicated. The simplest method is using the background image as nothing extra needs to be done to the html.

    If you are still unsure then ask again and I will try and explain it better

  24. #1599
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Location
    Kansas
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you don't want to use an image then look at some of the other examples but they are more advanced and more complicated. The simplest method is using the background image as nothing extra needs to be done to the html.
    Can you point me in the direction of a more advanced/complicated method that will accomplish my goal of totally equal height columns?

    The reason I need to ensure all columns are equal is from a template standpoint. I need the template I am providing as a base for customers to allow the most flexible means for graphic design. What I mean by this is I don't want to require them to have to make a repeating background image mandatory in order to maintain a consistent look and feel with my CMS.

    Or maybe I'm wrong about needing a more advanced example but right now I'm feeling that I do need it. Maybe you could help explain the benefits of this method over a more advanced one and provide a couple examples of a more advanced method.

    Thanks!

  25. #1600
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can you point me in the direction of a more advanced/complicated method that will accomplish my goal of totally equal height columns?
    Equal columns in CSS are mostly an illusion because the only element that will base its height dependent on another unrelated elements is a table-cell.

    You could use a 3 cell table to accomplish this or you could use CSS and use "display:table" for browsers such as IE8 and other modern browsers (not IE6 or 7).

    However to support IE6 and 7 with a CSS only version you need to use a lot of trickery.

    This example uses no images but the CSS is complicated but it will accomplish the illusion of equal columns without the need for images. However it is quite complicated especially if you are not 100&#37; comfortable with css.

    Or this example
    uses a completely different method and overlays absolute column colours to complete the illusion. This is a lot simpler to understand and you basically create your columns as normal (floated) and then you use an absolute technique to bind absolute columns to the relative element.

    Read the details here.

    There are a number of other methods such as using negative margins on nested elements to again create the column colours but are quite complicated if you don;t fully understand how they work.

    Equal columns are the Achilles heel of CSS and until IE8 becomes the standard IE version you will need to resort to trickery or using a table

    I also have another short article here that may help.


    Hope that points you in the right direction but if you get stuck just shout


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
  •