SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inline divs within divs & more

    Thanks to some help from Paul (see Aug.26, "layout help, please") the first pass at this two column layout was progressing nicely; then I began to fiddle ...
    I'm trying in insert a set of three small divs into the main content div, but so far I can't get them in line horizontally as I want them.
    I have read Paul's Aug.23 post under the heading "Divs next to each other", but don't seem to be able to extrapolate the advice there into my situation.

    Here is the HTML:

    <!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">
    <!--meta tags to come -->
    <head>
    <title>Floraworld.ca Trial Run -- Occasions Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="anniv_expand3-style.css"/>

    </head>
    <body>
    <div id="outer">
    <div id="header"><img alt="floraworld 1-888-rose-888" src="images/header.gif" /> </div>

    <div id="nav">
    <h4>Useful Flower Facts & More</h4>
    <ul>
    <li>Flower Delivery Fees & Taxes</li>
    <li>Flower Care</li>
    <li>Flower Holidays</li>
    <li>Meaning of Roses and Flowers</li>
    <li>Flower, Fruit, and Gourmet Food Baskets</li>
    <li>Monthly Flowers Chart</li>
    <li>Monthly Birth Stones</li>
    <li>Plants & Planter Baskets</li>
    <li>Flower Reminder Service</li>
    </ul>
    </div>

    <div id="main">
    <div id="main1">
    <h2>Send Anniversary Flowers in Canada</h2>
    <h3>Order Online from FloraWorld</h3>
    <h4>Have your Anniversary Flowers Delivered by Floraworld</h4>
    <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />

    <p>When you can't make a personal delivery, trust western Canada's home-grown floral delivery service to make it right!
    Working with the best local flower shops(FTD, Teleflora and Grower Direct),</p>
    <p>Floraworld offers/p>
    <p>easy, secure online ordering</p>
    <p>fast, reliable floral delivery (same day delivery on early orders)</p>
    <p>Aeroplan Miles with every order (or CAA Discount blah, blah)</p>
    <p>the freshest roses and other cut flowers in exquisite bouquets and arrangements.</p>

    <br />
    <br />
    <br />
    <br />
    </div>
    <div id="main2">
    <div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
    <p>Image Title</p>
    <p>Image Price</p>
    </div>
    <div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
    <p>Image Title</p>
    <p>Image Price</p>
    </div>
    <div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
    <p>Image Title</p>
    <p>Image Price</p>
    </div>
    </div>

    <div id:"main3">
    <h2>Favourite Locations for Anniversary Flower Delivery</h2>
    <h3>Popular Places to Send Flowers in Canada</h3>

    <ul>
    <li><a href="link1.html">Victoria, British Columbia</a></li>
    <li><a href="link2.html">Vancouver BC</a></li>
    <li><a href="link3.html">Kelowna BC</a></li>
    <li><a href="link4.html">Edmonton, Alberta</a></li>
    <li><a href="link5.html">Calgary, Alberta</a></li>
    </ul>
    <ul>
    <li><a href="link6.html">Regina, Saskachewan</a></li>
    <li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
    <li><a href="link8.html">Winnipeg, Manitoba</a></li>
    <li><a href="link9.html">Toronto, Ontario</a></li>
    <li><a href="link10.html">Ottawa, Ontario</a></li>
    </ul>
    <ul>
    <li><a href="link11.html">Montreal, Quebec</a></li>
    <li><a href="link12.html">Moncton, New Brunswick</a></li>
    <li><a href="link13.html">Saint John, New Brunswick</a></li>
    <li><a href="link14.html">Halifax, Nova Scotia</a></li>
    </ul>
    <ul>
    <li><a href="link15.html">Charlottetown, PEI</a></li>
    <li><a href="link16.html">St. Johns, Newfoundland</a></li>
    <li><a href="link17.html">Yellowknife, NWT</a></li>
    <li><a href="link18.html">Whitehorse, Yukon</a></li>
    </ul>

    <ul>
    <li><a href="link19.html">All Other Canadian Locations</a></li>
    </ul>
    <br />
    <br />
    <br />
    <br />

    <h2>U.S.A. Flower Delivery</h2>
    <h3>Popular Places to Send Flowers in the United States</h3>
    <br />
    <br />
    <br />
    <br />

    <h2>International Flower Delivery</h2>
    <h3>Popular Places to Send Flowers around the World</h3>
    <br />
    <br />
    <br />
    <br />

    <h2>Popular Flower Varieties for Delivery in Canada</h2>
    <p>Carnations, Chrysanthemums, Daffodils, Tulips, Roses, etc</p>
    <p>(List is not complete, and these are not links to pages)</p>
    <p>(Perhaps this list should go into the left hand column,</p>
    <p>which -- through some CSS sleight of hand -- will appear after the wider</p>
    <p>main column in the source code, thus moving the keywords up still higher)</p>
    <br />
    <br />
    <br />
    <br />
    </div>
    </div>

    <div id="footer">
    <p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp; Site Map &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp; Contact Us</p>
    </div>
    </div>
    </body>
    </html>




    and here is the CSS:

    body {
    background-color: #174417;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
    h1 {
    text-align: center;
    }
    h2 {
    text-align: center;
    }
    h3 {
    text-align: center;
    }
    h4 {
    text-align: center;
    }
    div#outer {
    width: 80%;
    background-color:#ffe6bf;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: thin solid #000000;
    text-align: left;
    }
    div#header {
    padding: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    text-align: center;
    }
    #header img {
    width: 747px;
    height: 73px;
    border-style: ridge;
    border-color: 192d19;
    border-width: 5px;
    }
    div#nav {
    width: 25%;
    padding: 10px;
    margin-top: 1px;
    margin-left: 10px;
    border-style: solid;
    border-color: 192d19;
    border-width: 2px;
    background-color: #e9f4e9;
    float: left;
    display: inline; /*ie fix*/
    }
    div#main {
    margin-left: 30%;
    margin-top: 1px;
    margin-right: 10px;
    border-style: solid;
    border-color: 192d19;
    border-width: 2px;
    background-color: #aed0ae;
    padding: 10px;
    }
    * html div#main (height:1%)/* ie fix*/

    div#main1 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;

    div#main2 {
    text-align: left;
    margin: 0em auto; /*for centering*/
    }

    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 150px;
    height: 205px;
    background-color: #ffffff;
    border: 1px solid #000000;
    }

    div#main2-sample2 {
    background color: #ffc2ff;
    }
    div#main2-sample3 {
    background color: #d6ffff;
    }


    div#main3 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main3 ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    /*white-space: nowrap;*/
    text-align: center;
    }
    div#main3 li {
    list-style-type: none;
    display: inline;
    white-space: nowrap;
    }

    div#main3 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main3 lia:link {
    color: #000:
    }
    div#main3 lia:visited {
    color: #CCC;
    }
    div#main3 lia:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }

    div#footer {
    padding: 15px;
    margin: 5px;
    border-top: thin solid #000000;
    }
    img#flowers{
    float: right;
    width: 200px;
    height:280px;
    margin:5px;
    }

    img#main2_im1{
    width: 100px;
    height: 116px;
    }
    img#main2_im2{
    width: 100px;
    height: 116px;
    }
    img#main2_im3{
    width: 100px;
    height: 116px;
    }


    The images going into the three divs in question will not always be the same width and height, but they will always be less than 125 px, so there should be room for three of them.
    The related question: how do I achieve even spacing of those three divs?

    While I'm at it: if I want to put more information into the left nav column
    (maybe even using it for the 3 product samples) should I be looking at creation of a "nav-container" div with all the characteristics of the current "nav" div, and containing, say, nav1, nav2, nav3, etc?
    And if so, what constraints will automatically apply to those last-named divs because of the styles applied in the "nav-container"?

    This brings to mind a general malaise which other less-than-experts may suffer along with me...
    Much of CSS seems to be about the behavior of boxes within boxes. Despite having studied the box rule numerous times, and having read the rules for "floating" and "absolute", "relative" and other positions, I still find myself uncertain about the consequences of styling decisions.
    A few examples:
    If I use relative positioning for a DIV which is one level down from the <body> tag, what possibilities have I created/eliminated for the next level in? What flexibility have I gained/lost vis. styling in sibling and descendant boxes?
    I know that the answers are there somewhere in the broad CSS-2 spec, but can anyone steer me to something which addresses concerns like this more exclusively and directly? This strikes me as classic database fodder; a series of "if", "then", "and", "or" propositions tht could be laid out neatly in bite-sized chunks for the memory-challenged.
    Thanks from a neophyte who would really like to be less bothersome

    regards, Cam

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

    You have missed a closing bracket in your css which is why the images are not floating and you have also used normal brackets instead of the big curly brackets.

    The easiest solution is just to float the elements and give them a margin-left to just space them out a bit. There is no easy way in css to centre multiple block level elements in a fluid container. Obvoiusly in a fixed with you can place them where you want.

    I can do it with css but its a little too complicated to offer here.

    I would just do something like this.
    Code:
    div#nav {
    width: 25%;
    padding: 10px;
    margin-top: 1px;
    margin-left: 10px;
    border-style: solid;
    border-color: 192d19;
    border-width: 2px;
    background-color: #e9f4e9;
    float: left;
    display: inline; /*ie fix*/
    }
    div#main {
    margin-left: 30%;
    margin-top: 1px;
    margin-right: 10px;
    border-style: solid;
    border-color: 192d19;
    border-width: 2px;
    background-color: #aed0ae;
    padding: 10px;
    }
    * html div#main {height:1%}/* ie fix*/
    div#main1 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    }
    div#main2 {text-align:left;}
    div#main2-sample1, #main2-sample2, #main2-sample3 {
    float: left;
    width: 150px;
    height: 205px;
    background-color: #ffffff;
    border: 1px solid #000000;
    text-align:center;
    margin-left:2%;
    margin-bottom:5px;
    display:inline;/*ie fix*/
    }
    div#main2-sample2 {
    background color: #ffc2ff;
    }
    div#main2-sample3 {
    background color: #d6ffff;
    }
    
    div#main3 {
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    clear:both;
    }
    Replace your styles with those above. Notice you also have a typo here:
    Code:
    	<div id:"main3">
    should be:
    Code:
    	<div id="main3">
    For the complicated example of centering you can have a look at on old demo I did here.

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

    However if you deparetely want something like that then you will probably be better of using a small table (although it hurts me to say it .

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    While I'm at it: if I want to put more information into the left nav column
    (maybe even using it for the 3 product samples) should I be looking at creation of a "nav-container" div with all the characteristics of the current "nav" div, and containing, say, nav1, nav2, nav3, etc?
    And if so, what constraints will automatically apply to those last-named divs because of the styles applied in the "nav-container"?
    The way I do this (and recommend) is to float one column (e.g. your nav) and then to containe inside that nav all your other content.

    Then there is no need for any other floats inside the float and the content you put in there can be static and follow logically.

    The danger of not using this method is that you have to float multiple items to the left and some browsers will get upset because they will only wrap content that is below it in the html. Whcih means you have to keep everything in the order of one float left and then one float right.

    Just float the whole column in one go and then put your content inside it. The benefit (other than mentioned above) is that you don't need to position it as it is already in the right position and of course you can apply classes and style each block as required (if you need to).

    If I use relative positioning for a DIV which is one level down from the <body> tag, what possibilities have I created/eliminated for the next level in? What flexibility have I gained/lost vis. styling in sibling and descendant boxes?
    You will never need relative positioning for structural layout. This is a common error and one that I constantlyy have to pull people up on. Relative positioning moves an element in relation to itself but the space it previously occupied is preserved. That means everything else thinks the element is where it was and will treat it as if it were still there. This is obviously no good for structuring a layout because it will leave big gaps everywhere and you end up chasing gaps all around the page.

    Relative positioning is basically only used for effects and to cause overlaps and small positioning tweaks where required. You will virtually never require relative positioning to create a layout. You will however often specify relative positioning (without co-ordinates to gaine stacking context for absolue elements and for creating z-indexes (and for fixing ie bugs).

    When you use relative positioning (without co-ordinates) then this allows you to place elements absoluely in relation to that element wherever it may be. An element is absolutely placed from its parent and its parent is basically the nearest ancestor that is either position:relative or position absolute. Otherwise the parent is the root element html (body outside margins).

    If you read the faq there are explanations about positioning and floats that may help you understand.

    CSS is about boxes which is why it is called the box model However tables are also about boxes also so theres no real conflict there.

    I think I've just worn my keyboard out

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul...
    You apparently work hours as wierd as mine.
    Your resonse is much appreciated. I'm on my way home now so that my family doesn't divorce me. I'll try your recommendations in the morning. Thanks again.
    Cam

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    <snip> There is no easy way in css to centre multiple block level elements in a fluid container. Obvoiusly in a fixed with you can place them where you want.
    Paul... given what you can see of what I'm trying to achieve here, is there any good reason not to be going with fixed width containers? And back to a variation on one of my questions yesterday: if I were to adopt a fixed width approach, what -- if anything -- am I trading away in terms of styling flexibility? (Obviously, the flexible container widths, but I can't see any great diaadvantage to that given the limited objectives of this design.)
    Do I retain the same IE fixes you have already given me?
    Thanks, Cam

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well fixed width or fluid is a matter of preference and it does depend on the type of content as well.

    With a fixed width you are dictating the size of your layout for all browsers so those with large resolutions gets tons of space and those with small resoultions have to scroll sideways to see everyything.

    Having said that sites like alitapart do very well with fixed width although I don't really like it much as I find it too narrow but a lot of people do like it.

    Obviously fixed with makes positioning things easier because you know exactly where you can place them. With a fluid layout you have to be a bit more flexible in your design and not try to control everything but let the browsers flow and change as required. Which is why I would just float your images left and let the text wrap (or be cleared) as you never know how wide the page is so it doesn't really matter if its centred or not.

    If you want a matching design with 3 elements across at all times then go for a fixed width. If you don't mind whther theres 1,2, or 3 images across then go for fluid.
    mosy sites are a mixture of both with one fluid area to take up spavce and a fixed area for navigation and fixed design images etc.

    It all boils down to what you want and I can't really say one way is better than the other as it all depends on content.

    If you design in a fixed layout that means you will probably have to design for 800x 600 which is what most people do. You can of corse centre the design so it doesn't get squashed to the side and could also add bg images in the spaces to the side if you wanted to make it appear better.

    I suggest you just play around with it and see what you prefer as it won't take much effort to change and you can change it back if you don't like it

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul..
    I just tried your earlier fix, and it looks just fine, so I don't think I'll fiddle further. I may try a fixed design for another project which is moving to the front burner, so your latest sharing of insight (above) won't go untried.
    Once again, thanks.
    regards,
    Cam


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
  •