SitePoint Sponsor

User Tag List

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

    layout help, please

    I am looking for help with my layout. I've done a page which looks fine in Opera, but is misaligned in IE6. I've tried the FAQ here and other sources of info on various IE hacks, but I just can't figure out which one might apply to my problem. In IE the main container div doesn't size properly and logo banner doesn't centre, in the main content container the image won't push to the right as I intend, leaving a huge unsightly margin (Speaking of unsightly, I know the current borders aren't too pleasing, and I'm still playing with colours, bu tthose are other issues )
    Right how I don't have a site on which I can post, so I hope the information below is sufficient to allow someone to help.

    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, based on flora_trial-i.html -->
    <head>

    <title>Floraworld.ca Trial Run -- Localities Template</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="calgary_flowers-style3.css"/>

    </head>

    <body>

    <div id="outer">
    <div id="header">
    <img alt="floraworld 1-888-rose-888" src="images/header.gif"
    style="float: center;
    width: 747px;
    height: 73px;
    border-style: ridge;
    border-color: 192d19;
    border-width: 5px;"/>
    </div>

    <div id="nav">
    <h4>Useful Calgary Information</h4>*
    <ul>
    <li>Calgary Area Map</li>
    <li>Online Calgary Weather</li>
    <li>Calgary Postal Code Map</li>
    <li>Calgary White Pages Online</li>
    <li>Calgary Yellow Pages Online</li>
    <li>Calgary Area Ski Conditions (seasonal)</li>
    <li>Calgary Alberta Online Road Report</li>
    </ul>

    <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">
    <h2>Send Flowers to Calgary</h2>
    <h3>Order Online from FloraWorld</h3>
    <h4>Order Early for Sameday Flower Delivery in Calgary</h4>
    <img src="images/covermain.jpg"
    style="float: right;
    width: 200px;
    height: 280px;
    margin: 5px 5px 5px 5px;
    alt="flowers delivered" />
    <p>We are western Canada's home-grown floral delivery service, working with Calgary's best FTD, Teleflora and Grower Direct flower shops, to ensure that you get the freshest flowers available, beautifully arranged, and delivered on time.</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>

    <h2>Occasional Favourites for Flower Delivery in Calgary</h2>
    <h3>Popular Places to Send Flowers in Canada</h3>
    <ul>
    <li><a href="link1.html">Anniversary Flowers</a></li>
    <li><a href="link2.html">Birthday Flowers</a></li>
    <li><a href="link3.html">Congratulations Flowers</a></li>
    <li><a href="link4.html">Get Well Flowers</a></li>
    </ul>
    <ul>
    <li><a href="link5.html">New Baby Flowers</a></li>
    <li><a href="link6.html">Sympathy Flowers</a></li>
    <li><a href="link7.html">Funeral Flowers</a></li>
    <li><a href="link8.html">Christmas Arrangements</a></li>
    </ul>
    <ul>
    <li><a href="link9.html">Easter/Passover Flowers</a></li>
    <li><a href="link10.html">"I Love You" Flowers</a></li>
    <li><a href="link11.html">Mothers Day Flowers</a></li>
    <li><a href="link12.html">Valentines Day Flowers</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>

    </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>



    CSS

    body {
    background-color: #174417;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    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;
    }
    div#header {
    padding: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    }

    div#nav {
    width: 25%;
    padding: 10px;
    margin-top: 30px;
    margin-left: 10px;
    background-color: #ffe6bf;
    float: left;
    }

    div#main {
    margin-left: 30%;
    margin-top: 1px;
    margin-right: 10px;
    border-style: ridge;
    border-color: 192d19;
    border-width: 5px;
    background-color: #aed0ae;
    padding: 10px;
    }

    div#main ul {
    margin: 5px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000;
    line-height: 30px;
    white-space: nowrap;
    }

    div#main li {
    list-style-type: none;
    ??? display: inline;
    }

    div#main li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }

    div#main lia:link {
    color: #000:
    }

    div#main lia:visited {
    color: #CCC;
    }

    div#main lia:hover {
    font-weight: bold;
    color: #000;
    background-color: #3366FF;
    }

    div#footer {
    padding: 15px;
    margin: 5px;
    border-top: thin solid #000000;
    }


    Thanks, 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,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have used float:center which doesn't exist which may be why its not working

    In your right content you have an ul that is set to white-space nowrap which is stretching the div too wide and breaking the layout. You have display:inline in your list but only ie is recognising it because you have preceeded it with 3 question marks ???

    Fixing these errors solves most of your problems without a hack in sight (well nearly anyway ).

    Here's the revised code:
    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">
    <!--meta tags to come, based on flora_trial-i.html -->
    <head>
    <title>Floraworld.ca Trial Run -- Localities Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/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: 30px;
    margin-left: 10px;
    background-color: #ffe6bf;
    float: left;
    display:inline;/*ie fix*/
    }
    div#main {
    margin-left: 30%;
    margin-top: 1px;
    margin-right: 10px;
    border-style: ridge;
    border-color: 192d19;
    border-width: 5px;
    background-color: #aed0ae;
    padding: 10px;
    }
    * html div#main {height:1%}/* ie fix*/
    div#main 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#main li {
    list-style-type: none;
    /* ???display: inline;*/
    display:inline;
    white-space:nowrap;
    }
    div#main li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #000;
    }
    div#main lia:link {
    color: #000:
    }
    div#main lia:visited {
    color: #CCC;
    }
    div#main 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;
    }
    </style>
    </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 Calgary Information</h4>
    	<ul>
    	  <li>Calgary Area Map</li>
    	  <li>Online Calgary Weather</li>
    	  <li>Calgary Postal Code Map</li>
    	  <li>Calgary White Pages Online</li>
    	  <li>Calgary Yellow Pages Online</li>
    	  <li>Calgary Area Ski Conditions (seasonal)</li>
    	  <li>Calgary Alberta Online Road Report</li>
    	</ul>
    	<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"> 
    	<h2>Send Flowers to Calgary</h2>
    	<h3>Order Online from FloraWorld</h3>
    	<h4>Order Early for Sameday Flower Delivery in Calgary</h4>
    	<img id="flowers" src="images/covermain.jpg" alt="flowers delivered" /> 
    	<p>We are western Canada's home-grown floral delivery service, working with 
    	  Calgary's best FTD, Teleflora and Grower Direct flower shops, to ensure 
    	  that you get the freshest flowers available, beautifully arranged, and delivered 
    	  on time.</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 />
    	<h2>Occasional Favourites for Flower Delivery in Calgary</h2>
    	<h3>Popular Places to Send Flowers in Canada</h3>
    	<ul>
    	  <li><a href="link1.html">Anniversary Flowers</a></li>
    	  <li><a href="link2.html">Birthday Flowers</a></li>
    	  <li><a href="link3.html">Congratulations Flowers</a></li>
    	  <li><a href="link4.html">Get Well Flowers</a></li>
    	</ul>
    	<ul>
    	  <li><a href="link5.html">New Baby Flowers</a></li>
    	  <li><a href="link6.html">Sympathy Flowers</a></li>
    	  <li><a href="link7.html">Funeral Flowers</a></li>
    	  <li><a href="link8.html">Christmas Arrangements</a></li>
    	</ul>
    	<ul>
    	  <li><a href="link9.html">Easter/Passover Flowers</a></li>
    	  <li><a href="link10.html">"I Love You" Flowers</a></li>
    	  <li><a href="link11.html">Mothers Day Flowers</a></li>
    	  <li><a href="link12.html">Valentines Day Flowers</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 />
      </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>
    Note that is bad practice to use <br> and &nbsp; to create space on your layout because that becomes fixed in the html and means a change of html ig you want to change things later.

    Use structured semantic markup (e.g paragraphs <p></p>) and control their margins and padding with css. You can move elements as far and as near as you like using the margin property and allows tight control over your layout.

    Although it may seem like more work it will reap great benefits in the end.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch, Paul.
    Cam

  4. #4
    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
    Note that is bad practice to use <br> and &nbsp; to create space on your layout because that becomes fixed in the html and means a change of html ig you want to change things later.
    Use structured semantic markup (e.g paragraphs <p></p> ) and control their margins and padding with css. You can move elements as far and as near as you like using the margin property and allows tight control over your layout. <snip> Paul
    Paul.. I'm reasonably sure I understand how to control where a paragraph begins and ends using semantic markup (<p></p>). But what do I use to create the equivalent of line breaks? Is it text-height-bottom, or some such?
    And if you look at the material in the footer, how do I control the amount of space between the three pieces of text (each of which will be a link)? I thought perhaps I should be putting the 3 text items inside an inline selector, but I still don't see how to create the space between them. Okay, maybe I'm getting a glimmer: three sets of text:
    <p>Floraworld 1-888-ROSE-888</p> <p>Site Map</p> <p>Contact Us</p>
    each with its own margins, inside a div with an inline property?
    (I can feel that glimmer getting dimmer )
    I know this must be pretty basic. One of the disadvantages of the "dive in and swim" approach, I guess.
    Thanks for your patience.
    regards, Cam

  5. #5
    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)
    But what do I use to create the equivalent of line breaks
    Well you still use the paragraph tags.

    I can let you get away with the odd break in a paragraph just for a line break but there is no need for rows of them . You just give the paragraph a class and add a margin-bottom to it to suit.

    Then you can always change this from the stylesheet without needing to delve back into the html.

    What you are trying to do with your footer with text on the left and text on the right and text/image in the centre isnt quire that intuitive in css.

    The way I would do it is to create 2 floats of equal size and float them left and right accordingly in an outer element that is 100% wide. Then set the outer element so that text is text-align:center.

    The floats will float to either side and the text will be centred.

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    edmonton, canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul rules, ok?


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
  •