SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

    stymiee learns CSS bit-by-bit

    Back in the day I used to be a heck of a designer. My HTML was rock solid and I could pound out code like a machine. Well, time has moved on but I haven't. It's been over two years since I've designed a website from scratch and now I've fallen behind. I thought it would be a sinch to pick up where I've left off but that clearly isn't going to happen.

    So, I've decided to design a site from scratch and use it as an opportunity to build a foundation from which I can increase my knowledge of CSS (and xhtml for that matter). I wanted to make this as public as possible so others can learn along with me. I'll keep my project posted at http://spf.johnconde.net/.

    My goals are as follows:

    1) Learn how to make a tabless design using CSS
    2) Make that design cross-browser compatible using as few hacks as possible. I hope to support all Gecko browsers, IE 5+ (5.5+ would be ok), Safari/KHTML, Opera 7+

    As I progress in my design I'm am certain to run into problems and/or have questions. I'm going to keep them confined to the thread for easy tracking. Hopefully, when I am completed, I will have built a solid foundation of CSS and created a pleasing site as well.

    Everyone's feedback is welcomed. The only thing I ask is if you are having problems designing your own website, please start a new thread for it. I'd like to keep this thread focused if at all possible. Also, if you provide a solution, please explain it. The goal is just as much to learn as it is to complete this.

    (I've read through many threads here and I've just not been able to put it all together. That's why I am doing this. Hopefully as I progress the solutions provided in other threads will make more sense).

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    First question: If you check out the site you'll notice I'm going for a three column layout. The body is going to be fixed-width and centered in the page. If you look close enough you can see my first issue: the center <div> (the actual content of the page) isn't playing nice. I'd like to "honor" the margins of the left and right column as if they were actually there.

    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" xml:lang="en">
        <head>
            <title>John Conde .net </title>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <meta name="description" content="" />
            <meta name="keywords" content="" />
            <style type="text/css">
                * html body {
                    font-size:x-small;
                    f\ont-size:small;
                }
                body {
                    background-color: #ffffff;
                    font-family: verdana, arial, helvetica, sans-serif, verdana;
                    font-size: 10pt;
                    text-align: center;
                    margin: 0px;
                    min-width:775px;
                    padding: 0px;
                }
                #container {
                    max-width: 1000px;
                    margin-right: auto;
                    margin-left: auto;
                    position: relative;
                    width: 775px;
                    text-align: left;
                }
                #header {
                    clear: both;
                    width: 775px;
                    border: 1px solid #000000;
                }
                #leftcol {
                    float: left;
                    width: 150px;
                    border: 1px solid #ff0000;
                }
                #rightcol {
                    float: right;
                    width: 150px;
                    border: 1px solid #00ff00;
                }
                #footer {
                    clear: both;
                    width: 775px;
                    border: 1px solid #0000ff;
                }
                #middle {
                    border: 1px solid #ffff00;
                }
            </style>
        </head>
        <body>
            <div id="container">
                <div id="header">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie laoreet.
                </div>
                <div id="leftcol">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie laoreet.
                </div>
                <div id="rightcol">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie laoreet.
                </div>
                <div id="middle">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie laoreet.
                    <br><br>
                    Aenean sapien. Curabitur rutrum justo aliquam risus. Suspendisse eleifend nunc id enim. Etiam eget arcu sit amet sem aliquet tristique. Sed lacinia sapien a justo. Cras elit risus, lobortis quis, adipiscing at, iaculis a, quam. Nulla dui. Nulla cursus. Praesent vehicula turpis et enim. Morbi eget pede ut metus volutpat rhoncus. Nam in metus sit amet arcu iaculis congue. Duis ut lacus in est malesuada pulvinar.
                    <br><br>
                    Nam bibendum wisi sit amet dolor. Sed pede. Etiam lectus. Vestibulum augue dolor, pharetra a, aliquet ac, sodales in, lacus. Aenean scelerisque velit eget elit. Nam scelerisque wisi non mi. Fusce nec magna. Maecenas ante quam, auctor ut, elementum in, aliquam sed, leo. Morbi lobortis tempus elit. Morbi dui augue, mattis eu, porttitor at, consectetuer auctor, sapien. Maecenas mauris mauris, posuere vitae, posuere in, aliquam ac, leo. Maecenas a sapien. Phasellus dui wisi, nonummy sed, gravida in, condimentum non, nulla.
                    <br><br>
                    Vestibulum vel mi. Duis dignissim rhoncus elit. Fusce non enim nec tellus adipiscing luctus. Donec quam neque, convallis id, rutrum at, placerat nec, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi facilisis. Nam sollicitudin, quam accumsan dapibus varius, eros massa rhoncus nibh, dapibus pellentesque augue enim a orci. Vivamus imperdiet tempus neque. Vivamus nibh nulla, adipiscing sed, gravida nec, lobortis nec, nulla. Aliquam ultricies luctus diam.
                    <br><br>
                    Vivamus eu sem id nibh pharetra porta. Nam volutpat, tellus et dignissim semper, leo metus feugiat mauris, adipiscing aliquet orci eros nec elit. Aliquam commodo fringilla wisi. Proin quis turpis. In velit. Quisque pharetra nulla eget ante. Nulla facilisi. Nullam vel urna vitae enim tempor consectetuer. Praesent convallis lectus at est. Integer eu erat at risus suscipit dignissim. Aliquam ultricies ligula molestie nibh dapibus consectetuer. Nullam consequat nunc at lacus. Pellentesque eget purus. Nullam sed leo.
                </div>
                <div id="footer">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie laoreet.
                </div>
            </div>
        </body>
    </html>

  3. #3
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding a left & right margin to the middle div so that the middle column will not bleed into the left & right columns?

    Code:
                #middle {
                    border: 1px solid #ffff00;
    		margin-left: 151px;
    		margin-right: 151px;
                }

  4. #4
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    That works! But what confuses me about that is what the margin-left and right are 150px from?

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    boy, i admire what you're doing, learning right out in the open

    i remember when i started learning css, the latest brawsers were ns4 and ie4, and you would not have enjoyed watching that process

    first thing i would go for is to get your sidebars away from the edge of the browser window

    what's f\ont-size:small? eewwwww! a HACK!!

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    boy, i admire what you're doing, learning right out in the open
    No shame in not knowing something. Hopefully this will prove to be useful to others, too.

    Quote Originally Posted by r937
    what's f\ont-size:small? eewwwww! a HACK!!
    I know. First I say I want to limit hacks but then I go and use one right off the bat! I had to weigh using a hack vs accessibility and in cases of accessibilty it always wins.

  7. #7
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stymiee
    That works! But what confuses me about that is what the margin-left and right are 150px from?
    In my understanding it's from the left & right margins of the container div, which is 775 pixels wide.

  8. #8
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by devised
    In my understanding it's from the left & right margins of the container div, which is 775 pixels wide.
    Gotcha. Forgot that I was using a container. Gonna have to remember to keep that in its proper perspective.

  9. #9
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Ok, naturally the next question is: how do I get the three columns to be equal in height. Naturally I've tried 'height: 100%' to no avail. I know there is a method using Mike Foster's X library but I'd like to avoid using JavaScript if I can help it.

  10. #10
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by stymiee
    how do I get the three columns to be equal in height.
    one solution: don't try to make them equal in height

    look hard at why you think you want them to be "equal in height"

    yes, it's a zen type of thing

    p.s. tough loss in ann arbor, man -- did you watch that game?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  11. #11
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it get's tricky trying to make a tabless design be compatible across the browsers (especially without any extra hacks).

    You could try to design it in a way that appears like the columns are of equal height (no matter how much content is in the columns). One way is to wrap the middle columns (left, middle, right) in a container div that has a background color set. Then set the middle column to have a different background color. This way it will appear like the left & right columns are the same height. This might not be what you were looking for (sorry), but I thought I would mention it as it relates.

    I'm a little rusty in my CSS over the past year or so, but here's an example of what I'm blabbering about:

    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" xml:lang="en"><head>
            
            <title>John Conde .net</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <style type="text/css">
                * html body {
                    font-size:x-small;
                    f\ont-size:small;
                }
                body {
                    background-color: #ffffff;
                    font-family: verdana, arial, helvetica, sans-serif, verdana;
                    font-size: 10pt;
                    text-align: center;
                    margin: 0px;
                    min-width:775px;
                    padding: 0px;
                }
                #container {
                    max-width: 1000px;
                    margin-right: auto;
                    margin-left: auto;
                    position: relative;
                    width: 775px;
                    text-align: left;
                }
                #header {
                    clear: both;
                    width: 775px;
                    border: 1px solid #000000;
                }
                #leftcol {
                    float: left;
                    width: 150px;
                    border: 1px solid #ff0000;
    				
                }
                #rightcol {
                    float: right;
                    width: 150px;
                    border: 1px solid #00ff00;
    				
    
                }
                #footer {
                    clear: both;
                    width: 775px;
                    border: 1px solid #0000ff;
                }
                #middle {
                    border: 1px solid #ffff00;
    				margin-left: 151px;
    				margin-right: 151px;
    				background-color: white; 
    				height: 100%;
                }
    	    #midcontainer {
    		 background-color: #cccccc;
    	    }
            </style></head>
    
        <body>
            
    <div id="container"> 
      <div id="header"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate 
        dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. 
        Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer 
        vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, 
        malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas 
        sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, 
        nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula 
        et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce 
        non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie 
        laoreet. </div>
    <div id="midcontainer"> <!-- begin midcontainer -->	
      <div id="leftcol"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate 
        dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. 
        Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer 
        vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, 
        malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas 
        sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, 
        nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula 
        et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce 
        non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie 
        laoreet.</div>
      <div id="rightcol"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate 
        dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. 
        Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer 
        vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, 
        malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas 
        sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, 
        nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula 
        et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce 
        non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie 
        laoreet. </div>
      <div id="middle"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate 
        dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. 
        Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer 
        vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, 
        malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas 
        sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, 
        nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula 
        et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce 
        non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie 
        laoreet. <br>
        <br>
        Aenean sapien. Curabitur rutrum justo aliquam risus. Suspendisse eleifend 
        nunc id enim. Etiam eget arcu sit amet sem aliquet tristique. Sed lacinia 
        sapien a justo. Cras elit risus, lobortis quis, adipiscing at, iaculis a, 
        quam. Nulla dui. Nulla cursus. Praesent vehicula turpis et enim. Morbi eget 
        pede ut metus volutpat rhoncus. Nam in metus sit amet arcu iaculis congue. 
        Duis ut lacus in est malesuada pulvinar. <br>
        <br>
        Nam bibendum wisi sit amet dolor. Sed pede. Etiam lectus. Vestibulum augue 
        dolor, pharetra a, aliquet ac, sodales in, lacus. Aenean scelerisque velit 
        eget elit. Nam scelerisque wisi non mi. Fusce nec magna. Maecenas ante quam, 
        auctor ut, elementum in, aliquam sed, leo. Morbi lobortis tempus elit. Morbi 
        dui augue, mattis eu, porttitor at, consectetuer auctor, sapien. Maecenas 
        mauris mauris, posuere vitae, posuere in, aliquam ac, leo. Maecenas a sapien. 
        Phasellus dui wisi, nonummy sed, gravida in, condimentum non, nulla. <br>
        <br>
        Vestibulum vel mi. Duis dignissim rhoncus elit. Fusce non enim nec tellus 
        adipiscing luctus. Donec quam neque, convallis id, rutrum at, placerat nec, 
        diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
        cubilia Curae; Morbi facilisis. Nam sollicitudin, quam accumsan dapibus varius, 
        eros massa rhoncus nibh, dapibus pellentesque augue enim a orci. Vivamus imperdiet 
        tempus neque. Vivamus nibh nulla, adipiscing sed, gravida nec, lobortis nec, 
        nulla. Aliquam ultricies luctus diam. <br>
        <br>
        Vivamus eu sem id nibh pharetra porta. Nam volutpat, tellus et dignissim semper, 
        leo metus feugiat mauris, adipiscing aliquet orci eros nec elit. Aliquam commodo 
        fringilla wisi. Proin quis turpis. In velit. Quisque pharetra nulla eget ante. 
        Nulla facilisi. Nullam vel urna vitae enim tempor consectetuer. Praesent convallis 
        lectus at est. Integer eu erat at risus suscipit dignissim. Aliquam ultricies 
        ligula molestie nibh dapibus consectetuer. Nullam consequat nunc at lacus. 
        Pellentesque eget purus. Nullam sed leo. </div>
      </div> <!-- end midcontainer -->	
      <div id="footer"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Sed suscipit est vel elit. Praesent est nisl, luctus eget, iaculis eu, vulputate 
        dictum, eros. Sed neque est, malesuada id, tempor ac, bibendum ac, massa. 
        Donec blandit mattis dolor. Nunc tortor. Praesent at ligula ac nunc consectetuer 
        vehicula. Donec sit amet velit. Nulla facilisi. Duis id lorem. In dolor neque, 
        malesuada non, interdum tristique, porttitor id, massa. Maecenas mattis. Maecenas 
        sed orci non lorem ultricies dictum. Donec viverra, diam tempus dictum eleifend, 
        nunc massa luctus urna, eu dapibus lorem lacus et massa. In faucibus ligula 
        et risus. Cras quis felis a purus facilisis volutpat. Etiam eu ligula. Fusce 
        non est in libero congue lacinia. Vestibulum pulvinar tellus et nibh molestie 
        laoreet. </div>
    </div><!-- end container -->
        </body></html>

  12. #12
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    one solution: don't try to make them equal in height

    look hard at why you think you want them to be "equal in height"

    yes, it's a zen type of thing
    I actually did consider that. And it is possible that having the three columns no being equal in height might be perfectly fine for my design.

    Quote Originally Posted by r937
    p.s. tough loss in ann arbor, man -- did you watch that game?
    I'm actually in NJ. I'm only temporarily in Michigan as I impersonate aspen.

    Quote Originally Posted by devised
    You could try to design it in a way that appears like the columns are of equal height (no matter how much content is in the columns). One way is to wrap the middle columns (left, middle, right) in a container div that has a background color set. Then set the middle column to have a different background color. This way it will appear like the left & right columns are the same height. This might not be what you were looking for (sorry), but I thought I would mention it as it relates.
    That's not a bad idea. It might not be a complete solution but it would certainly add options to my design. I'm curious to see what else is suggested.

  13. #13
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by stymiee
    I'm curious to see what else is suggested.
    Same here. I haven't kept up with css in over a year and am curious on new discoveries I've missed out on.

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

    The equal height columnn is done to death in my 3 col demo (sticky thread) so I won't mention it here (ohh too late - I already have ).

    However the simplest way is to add a repeating background gif to the parent container and repeat it down the y-axis.This will give the third column colour based on the code devised posted above.

    Hope that helps.

    Paul

  15. #15
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    The equal height columnn is done to death in my 3 col demo (sticky thread) so I won't mention it here (ohh too late - I already have ).
    I checked that out and went into information overload. I'm hoping as I progress it will make more sense for me. Maybe even result in a fresh rewrite. I'll follow this path which ever way it goes.

    What I'm going to do for now is use the method suggested by yourself and devised and see where it takes me.

  16. #16
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Ok, went with the background image and it worked great. Started adding pseudo content and ran into problems. You'll notice that in the #middle div that I put the paragraphs into <p></p> tags. Unfortunately this gave me an unexpected result. You'll see (clearly if you use the Firefox webdeveloper toolbar) that's there's now a gap between the #header div and the #midcontainer div as well as the #midcontainer div and the #footer div (the disjointed burgandy line should make it easy to spot). Seems to be the natural space between paragraphs but I do not understand why the background image doesn't repeat to fill that space. I tried messing with margins and padding to no avail.

    http://spf.johnconde.net/
    Last edited by stymiee; Nov 1, 2004 at 20:29.

  17. #17
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Stymiee. I'd just like to start out by saying learning xhtml + css is great! It opens up so many possibilities. And I will be checking back here every so often to see if there is anything I can help with (and if there is anything I can learn).

    Now, my suggestion of the day is:

    Place your css code in a seperate file. Call that file "something.css"

    You can then link it to your page in one of two ways"

    1.

    Code:
    <style type="text/css">
    
    @import "something.css";
    
    </style>
    or

    2.

    Code:
    <link rel="stylesheet" type="text/css" href="something.css" />
    I hope anything I contribute here is in some way useful to somebody. I look foreward to reading this more

  18. #18
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Once I have a basic template completed I will definitely put my css in an external file as it is a great way to improve performance of the site.

  19. #19
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it has something to do with the margin of the <p> tags. If you set the top and bottom margins to zero like this:

    #middle p{
    padding-left: 10px;
    padding-right: 10px;

    /* add these */
    margin-top: 0;
    margin-bottom: 0;
    }
    ... then it will align the images. However, you will lose the margins in your <p> tags and you would then have to add a <br /> tag between your <p> tags.

    Sorry, but that's the best I can come up with right now...

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

    Its just the top margin of the p you need to addrees:
    Code:
    p {margin-top:0}
    (Make it specific if you want but I usually get rid of the top margin and set the bottom on all p tags)

    The bottom margin will still take effect and you won't need breaks.

    Paul

  21. #21
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    That leads to my next question: why would the marging of the p seem to go outside its containing div like that? Shouldn't it just affect its position within the containing div only?

  22. #22
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stymiee
    That leads to my next question: why would the marging of the p seem to go outside its containing div like that? Shouldn't it just affect its position within the containing div only?
    Nope. Margins can flow out of the borders of its container. Padding is the one that can't do so.

  23. #23
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Ya know, once you get that whole block/inline and padding/margin thing down, it's all downhill.

    Anyway, here's my newest dilema. I'm designing a form and I'm at a point where I'll need to use a lot of checkboxes. I can envision how to do it but I'm afraid it might be overkill of DIVs. But the alternative is to use a table. I kow tables aren't evil and are ok to us but this isn't tabular data and I would feel a lot cooler if I could avoid it. So, what's worse: using a table or lots of DIVs? (This is more of an opinion thing and that's all I'm looking for).

  24. #24
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,338
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    i think given a choice between using a table or lots of divs, lots of divs is worse

    but who says you have to use either, hmmm?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  25. #25
    Non-Member c1vineoflife's Avatar
    Join Date
    Sep 2004
    Location
    CA
    Posts
    460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    i think given a choice between using a table or lots of divs, lots of divs is worse

    but who says you have to use either, hmmm?
    Well, the way you stated that question makes me want to use tables to. Let's reformat that question as to make it a correct representation of reality (same layout, tables vs divs):

    "I think, given a choice between tons of nested, hard-to-read tables, and a few divs, I wonder which I would choose."

    I personally would choose divs. Now, I do think there are certain situations in which a table is clearly the better option, even when it isn't "tabular data" so to speak. I will also admit that I learned html using tables, but have not used a single table once I got the hang of positioning with divs and css. But then again, I don't think I have come across one of those special circumstances where a table would be the better choice...and I haven't been formatting any tabular data.

    And no one says you have to use either. I could do and entire page, and probably still have it validate (I'm unsure on this), just using the DOCTYPE, html, head, title, and body tags correctly, and some random text thrown in the body (maybe with a little css styling to make it look as pretty as possible). But, I personally see the benefit in using SOME sort of structural device, whether it be tables or divs.

    Which brings me to my next point (don't ask me why, because I don't know):

    IE sucks! What the heck? I coded a beautiful page (using Firefox to view it), and when I opened it up in IE, it looked like someone had come and randomely tossed everything on the screen. Now, I hacked up my css pretty good, and finally made it display (somewhat...as close as possible) the same. But gees, that took quite a bit of hacking. Anyone else (I'm sure you do) share my pain?


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
  •