SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left column nav not in correct position :-(

    http://www.pauserefreshment.co.uk/of..._machines.html
    (not an attack site! Ive removed the i frames, view in IE to avoid the message)



    Hi from sunny wakefiled Uk - 64°F Cloudy Wind: SW at 10 mph Humidity: 52%

    Now I wouldnt normally post this as thanks to previous sitepoint members have illuminated me into using firebug which I now do with much pleasure. But an iframe (now deleted) is stopping me from running this page thru firefox (Ive re submiited the site thru google webmaster so its should clear soon) and firebugging it :-(

    Any way my css problem is this... Whats causing the column not to site on the left and causing it to get forced to the bottom? I want the layout like this - http://www.pauserefreshment.co.uk/sh..._machines.html

    I suspect a div blunder but my naked eye cant spot it and I cant get firebug to check it.

    Heres the rogue 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">
    <head>
    <title>Office coffee machines | pause... refreshment professional coffee machine suppliers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "css/all.css";
    </style>
    </head>
    <body>
    <div id="pagewidth">
    <div id="header">
      <p> <a href="index.html"> Pause </a> </p>
      <ul>
        <li> <a href="whoweare.html" class="who"> who we are... </a> </li>
        <li> <a href="ourrange.html" class="our"> our range... </a> </li>
        <li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
        <li> <a href="talktous.html" class="come"> come &amp; say hello... </a> </li>
        <li> <a href="hotel_coffee_machines.html" class="useful" title="hotel coffee machines"> useful things...</a> </li>
        <li> <a href="office_coffee_machines.html" class="on-line" title="office coffee machines"> on-line shop... </a> </li>
        <li> <a href="shop_coffee_machines.html" class="show" title="shop coffee machines"> show you care... </a> </li>
      </ul>
    </div>
    <div id="main">
    <div id="content2">
    <div class="left"><img class="callbanner" src="images/quote/number_machines2.jpg" alt="call our professional coffee machine quote line" title="Call pause refreshment for professional office shop and hotel coffee machines"/>
      <h1>Office coffee machine solutions for your workplace!</h1>
      <img class="" src="images/model_machine/krist_vision.jpg" alt="professional office coffee machine - Vision 400" title="office coffee machine - Vision 400"/>
      <h2 class="pump">The Vision 400 professional <a href="vision_coffee_machine.html" title="office coffee machine - Vision 400">office coffee machine</a></h2>
      <p>When you want a quick push button office coffee service 
        then pause...refreshment recommends 
        the Vision 400 instant table top coffee machine. Compact and portable this little office coffee dymano can squeeze in the smallest of office kitchens.</p>
      <p>And it only takes 3 seconds to serve up a black coffee, a great pick me up  before that early morning meeting.</p>
      <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Vision 400">Discover more about the professional Vision 400 office coffee machine</a></p>
      <img src="http://www.pauserefreshment.co.uk/images/model_machine/kenco-kbar-155.jpg" width="155" height="155" alt="Professional office coffee machine - Kenco K Bar" title="office coffee machine - Mondo 2"/>
      <h3 class="pump">The Kenco K bar professional <a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Kenco Kbar">office coffee machine</a></h3>
      <p>The Kenco K bar office coffee machine uniquely serves up fresh bean to cup &amp; instant coffee. Packed with all the household coffee favourites plus Knorr Soup &amp; Bovril the Kbar is packed with choice.</p>
      <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Kenco Kbar">Discover more about the professional Kenco Kbar office coffee machine</a></p>
      <div style="clear:both;">
      <img src="images/model_machine/darenth_155_2.jpg" WIDTH=150 HEIGHT=150 /> 
        <h3 class="pump">The Darenth professional <a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Darenth">office coffee machine</a></h3>
        <p>When your office needs a lightening fast office coffee machine that demands virtually zero cleaning and serves up all the hot drink favourites then pause... refreshment gives the thumbs up to the Darenth Style 5 instant coffee machine. </p>
        <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Darenth">Discover more about the professional Darenth office coffee machine</a></p>
        <div style="clear:both;"> <img src="http://www.pauserefreshment.co.uk/images/model_machine/chris_mondo.jpg" alt="Professional office coffee machine - Mondo 2" title="office coffee machine - Mondo 2"/>
          <h3 class="pump">The Mondo 2 professional <a href="mondo2_coffee_machine.html" title="office coffee machine - Mondo 2">office coffee machine</a></h3>
          <p>The perfect entry level office coffee hero the Mondo 2 
            is a robust manual fill, reliable filter coffee machine 
            work horse. Commit to one box of coffee a month and we 
            will wheel the Mondo 2 office coffee hero direct to your workplace. But be warned your office kettle  may be on redundancy notice when you ad the this professional coffee machine to your wish list.</p>
          <p><a href="mondo2_coffee_machine.html" title="office coffee machine - Mondo 2">Discover more about the professional Mondo 2 office coffee machine</a></p>
          <img src="http://www.pauserefreshment.co.uk/images/model_machine/az_flavia.jpg" alt="Professional office coffee machine - flavia 400" title="office coffee machine - flavia 400"/>
          <h4 class="pump">The flavia 400 professional <a href="flavia_creation_400.html" title="office coffee machine - flavia 400">office coffee machine</a></h4>
          <p>Available direct from pause... refreshment the flavia 400 
            office coffee machine is a proven success for quick no nonsense filter 
            coffee for today's busy office. You might have seen one in
            a car dealership or a posh hairdresser. The flavia 400 professional office coffee machine won't burden you with tonnes of cleaning either, the occassional wipe will keep Kim and Aggie happy and with  30 drink varities to choose from what's there not to like?</p>
          <p><a href="flavia_creation_400.html" title="office coffee machine - flavia 400" >Discover more about our professional flavia 400 office professional coffee machine</a></p>
          <img src="images/model_filter/ruth_therm2.jpg" alt="Professional office coffee machine - The Therm" title="office coffee machine - Therm"/>
          <h2 class="pump">The Bravilor Therm professional <a href="pump_coffee_machine.html" title="office coffee machine - Therm">office coffee machine</a></h2>
          <p>When you need an entry priced portable filter  
            coffee machine the Bravilor Therm
            professional office coffee machine ticks all the boxes. Brew the coffee in one room then transport the 
            coffee to the boardroom in the chrome hard wearing pump air pots 
            keeping the coffee hot for up to 5 hours. </p>
          <p><a href="pump_coffee_machine.html" title="office coffee machine - Therm">Discover more about the Bravilor Therm office coffee machine</a></p>
        </div>
      </div>
      <!-- Happy customers nav -->
      <div id="sidebar">
        <ul>
          <li class="activeorange"> <a href="office_coffee_machines.html" title="Office coffee machines"> office coffee machines<span class="dotsorange">...</span> </a> <br />
          </li>
          <li> <a href="coffee_machine_review_flavia.html" title="office coffee machines">pause office coffee review<span class="dotsorange">...</span> </a> </li>
          <li> <a href="coin_operated_coffee_machines.html" title="coin operated coffee machines">coin operated coffee machines<span class="dotsorange">...</span> </a> </li>
          <li> <a href="hot_chocolate_machines.html" title="hot chocolate coffee machines">office Hot Chocolate machines<span class="dotsorange">...</span> </a> </li>
          <li><a href="office_coffee_machine_persuasion.html" title="office coffee persuasion">office coffee machine persuasion<span class="dotsorange">...</span> </a> </li>
          <li> <a href="shop_coffee_machines.html" title="shop coffee machines">shop coffee machines<span class="dotsorange">...</span> </a> </li>
          <li> <a href="hotel_coffee_machines.html" title="hotel coffee machines">hotel coffee machines<span class="dotsorange">...</span> </a> </li>
        </ul>
      </div>
        </div>
    <div id="footer">
      <ul>
        <li><a class="special" href="index.html">Home</a></li>
        <li><a class="special" href="pressreleases.html">Press</a></li>
        <li><a class="product" href="largeorganisations.html">Large Organisations</a></li>
        <li><a class="product" href="http://www.pauserefreshment.co.uk/coffee-machine-brochure-request.html" title="coffee machine rental catalogue">Brochure</a></li>
        <li><a class="new" href="legal.html">Legal</a></li>
        <li><a class="our" href="pausepromise.html">pause promise</a></li>
        <li><a class="pause" href="supportingyourworld.html">Show you care</a></li>
        <li><a class="special" href="index.html">Copyright 2008 &#169; pause</a></li>
      </ul>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-4432210-1";
    urchinTracker();
    </script>
    </body>
    </html>
    The layout is supposed to look like this:
    http://www.pauserefreshment.co.uk/sh..._machines.html

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure but your content start with three divs
    Code CSS:
    <div id="main">
    <div id="content2">
    <div class="left">

    but you close the content with just two </divs>

    Code CSS:
          <p><a href="pump_coffee_machine.html" title="office coffee machine - Therm">Discover more about the Bravilor Therm office coffee machine</a></p>
        </div>
      </div>

    Then furthermore, do you have two clearing divs within your left div, which you also didn't close.

    When you would like to clear without having to worry about closing divs you could use:

    <br style="clear:both;">

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Not sure but your content start with three divs
    Code CSS:
    <div id="main">
    <div id="content2">
    <div class="left">

    but you close the content with just two </divs>

    Code CSS:
          <p><a href="pump_coffee_machine.html" title="office coffee machine - Therm">Discover more about the Bravilor Therm office coffee machine</a></p>
        </div>
      </div>

    Then furthermore, do you have two clearing divs within your left div, which you also didn't close.

    When you would like to clear without having to worry about closing divs you could use:

    <br style="clear:both;">
    Hi Donboe - thanks for spotting the missing closing div tag. In all honesty I did spot it and added it before but it made no difference :-(

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but it's not just 1 div tag. What about those two clearing divs? I think you should first correct the code and post it again

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As donboe said your end tags are all in the wrong place.

    The html should look like this.

    Code:
    <div id="pagewidth">
        <div id="header">
            <p> <a href="index.html"> Pause </a> </p>
            <ul>
                <li> <a href="whoweare.html" class="who"> who we are... </a> </li>
                <li> <a href="ourrange.html" class="our"> our range... </a> </li>
                <li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
                <li> <a href="talktous.html" class="come"> come &amp; say hello... </a> </li>
                <li> <a href="hotel_coffee_machines.html" class="useful" title="hotel coffee machines"> useful things...</a> </li>
                <li> <a href="office_coffee_machines.html" class="on-line" title="office coffee machines"> on-line shop... </a> </li>
                <li> <a href="shop_coffee_machines.html" class="show" title="shop coffee machines"> show you care... </a> </li>
            </ul>
        </div>
        <div id="main">
            <div id="content2">
                <div class="left"><img class="callbanner" src="images/quote/number_machines2.jpg" alt="call our professional coffee machine quote line" title="Call pause refreshment for professional office shop and hotel coffee machines"/>
                    <h1>Office coffee machine solutions for your workplace!!</h1>
                    <img class="" src="images/model_machine/krist_vision.jpg" alt="professional office coffee machine - Vision 400" title="office coffee machine - Vision 400"/>
                    <h2 class="pump">The Vision 400 professional <a href="vision_coffee_machine.html" title="office coffee machine - Vision 400">office coffee machine</a></h2>
                    <p>When you want a quick push button office coffee service 
                        then pause...refreshment recommends 
                        the Vision 400 instant table top coffee machine. Compact and portable this little office coffee dymano can squeeze in the smallest of office kitchens.</p>
                    <p>And it only takes 3 seconds to serve up a black coffee, a great pick me up  before that early morning meeting.</p>
                    <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Vision 400">Discover more about the professional Vision 400 office coffee machine</a></p>
                    <img src="http://www.pauserefreshment.co.uk/images/model_machine/kenco-kbar-155.jpg" width="155" height="155" alt="Professional office coffee machine - Kenco K Bar" title="office coffee machine - Mondo 2"/>
                    <h3 class="pump">The Kenco K bar professional <a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Kenco Kbar">office coffee machine</a></h3>
                    <p>The Kenco K bar office coffee machine uniquely serves up fresh bean to cup &amp; instant coffee. Packed with all the household coffee favourites plus Knorr Soup &amp; Bovril the Kbar is packed with choice.</p>
                    <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Kenco Kbar">Discover more about the professional Kenco Kbar office coffee machine</a></p>
                    <div style="clear:both;"> <img src="images/model_machine/darenth_155_2.jpg" WIDTH=150 HEIGHT=150 /></div>
                    <h3 class="pump">The Darenth professional <a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Darenth">office coffee machine</a></h3>
                    <p>When your office needs a lightening fast office coffee machine that demands virtually zero cleaning and serves up all the hot drink favourites then pause... refreshment gives the thumbs up to the Darenth Style 5 instant coffee machine. </p>
                    <p><a href="http://www.pauserefreshment.co.uk/kenco-kbar-office-coffee-machine.html" title="office coffee machine - Darenth">Discover more about the professional Darenth office coffee machine</a></p>
                    <div style="clear:both;"> <img src="http://www.pauserefreshment.co.uk/images/model_machine/chris_mondo.jpg" alt="Professional office coffee machine - Mondo 2" title="office coffee machine - Mondo 2"/></div>
                    <h3 class="pump">The Mondo 2 professional <a href="mondo2_coffee_machine.html" title="office coffee machine - Mondo 2">office coffee machine</a></h3>
                    <p>The perfect entry level office coffee hero the Mondo 2 
                        is a robust manual fill, reliable filter coffee machine 
                        work horse. Commit to one box of coffee a month and we 
                        will wheel the Mondo 2 office coffee hero direct to your workplace. But be warned your office kettle  may be on redundancy notice when you ad the this professional coffee machine to your wish list.</p>
                    <p><a href="mondo2_coffee_machine.html" title="office coffee machine - Mondo 2">Discover more about the professional Mondo 2 office coffee machine</a></p>
                    <img src="http://www.pauserefreshment.co.uk/images/model_machine/az_flavia.jpg" alt="Professional office coffee machine - flavia 400" title="office coffee machine - flavia 400"/>
                    <h4 class="pump">The flavia 400 professional <a href="flavia_creation_400.html" title="office coffee machine - flavia 400">office coffee machine</a></h4>
                    <p>Available direct from pause... refreshment the flavia 400 
                        office coffee machine is a proven success for quick no nonsense filter 
                        coffee for today's busy office. You might have seen one in
                        a car dealership or a posh hairdresser. The flavia 400 professional office coffee machine won't burden you with tonnes of cleaning either, the occassional wipe will keep Kim and Aggie happy and with  30 drink varities to choose from what's there not to like?</p>
                    <p><a href="flavia_creation_400.html" title="office coffee machine - flavia 400" >Discover more about our professional flavia 400 office professional coffee machine</a></p>
                    <img src="images/model_filter/ruth_therm2.jpg" alt="Professional office coffee machine - The Therm" title="office coffee machine - Therm"/>
                    <h2 class="pump">The Bravilor Therm professional <a href="pump_coffee_machine.html" title="office coffee machine - Therm">office coffee machine</a></h2>
                    <p>When you need an entry priced portable filter  
                        coffee machine the Bravilor Therm
                        professional office coffee machine ticks all the boxes. Brew the coffee in one room then transport the 
                        coffee to the boardroom in the chrome hard wearing pump air pots 
                        keeping the coffee hot for up to 5 hours. </p>
                    <p><a href="pump_coffee_machine.html" title="office coffee machine - Therm">Discover more about the Bravilor Therm office coffee machine</a></p>
                </div>
            </div>
            <!-- Happy customers nav -->
            <div id="sidebar">
                <ul>
                    <li class="activeorange"> <a href="office_coffee_machines.html" title="Office coffee machines"> office coffee machines<span class="dotsorange">...</span> </a> <br />
                    </li>
                    <li> <a href="coffee_machine_review_flavia.html" title="office coffee machines">pause office coffee review<span class="dotsorange">...</span> </a> </li>
                    <li> <a href="coin_operated_coffee_machines.html" title="coin operated coffee machines">coin operated coffee machines<span class="dotsorange">...</span> </a> </li>
                    <li> <a href="hot_chocolate_machines.html" title="hot chocolate coffee machines">office Hot Chocolate machines<span class="dotsorange">...</span> </a> </li>
                    <li><a href="office_coffee_machine_persuasion.html" title="office coffee persuasion">office coffee machine persuasion<span class="dotsorange">...</span> </a> </li>
                    <li> <a href="shop_coffee_machines.html" title="shop coffee machines">shop coffee machines<span class="dotsorange">...</span> </a> </li>
                    <li> <a href="hotel_coffee_machines.html" title="hotel coffee machines">hotel coffee machines<span class="dotsorange">...</span> </a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">
        <ul>
            <li><a class="special" href="index.html">Home</a></li>
            <li><a class="special" href="pressreleases.html">Press</a></li>
            <li><a class="product" href="largeorganisations.html">Large Organisations</a></li>
            <li><a class="product" href="http://www.pauserefreshment.co.uk/coffee-machine-brochure-request.html" title="coffee machine rental catalogue">Brochure</a></li>
            <li><a class="new" href="legal.html">Legal</a></li>
            <li><a class="our" href="pausepromise.html">pause promise</a></li>
            <li><a class="pause" href="supportingyourworld.html">Show you care</a></li>
            <li><a class="special" href="index.html">Copyright 2008 &#169; pause</a></li>
        </ul>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-4432210-1";
    urchinTracker();
    </script>
    </body>

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you :-) div tags have been cleaned up, Ive got the layout I wanted!
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •