Skip navigation
valf
valf
Currently Being Moderated

Clear thing not very clear ...

Mar 27, 2012 8:28 PM

Hi,

Would anyone be kind enough to tell me what errors I am doing ?

I don't understand why my boxes in the footer are shifting to the bottom ..

 

Also, I would really like to understand once and for all how clearing works (but please do not point me to some adobe tutorial as many of them are not that clear ...I am having some issues trying to understand all that "clear " "thing , when to clear right or left , display block (from I learned adding the display:block should automatically make a div position beneath another one, but it does not happen when I try to do it and always end up with a div overlapping another one and going crazy about it ....

 

Many thanks in advance !

 

The link to see the issue this post is about is http://elhoster2.com/hostelinn

656 Views   8 Replies   Latest reply: 3DeeGee, Mar 29, 2012 12:34 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Mar 27, 2012 11:57 PM   in reply to valf
    Report

    This will help http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Felhoster2.com %2Fhostelinn%2F

     

    Gramps

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    2. martcol,
    Mar 28, 2012 12:02 AM   in reply to valf
    Report

    valf wrote:

     

    Also, I would really like to understand once and for all how clearing works (but please do not point me to some adobe tutorial as many of them are not that clear ...I am having some issues trying to understand all that "clear " "thing , when to clear right or left , display block (from I learned adding the display:block should automatically make a div position beneath another one, but it does not happen when I try to do it and always end up with a div overlapping another one and going crazy about it ....

     

    This has quite a straightforward explanation of the clear property in it.  It looks a bit scary but it is worth a read.

     

    http://www.w3.org/wiki/Floats_and_clearing

     

    Martin

     
    |
    Mark as:
  • 3DeeGee
    Currently Being Moderated
    3. 3DeeGee,
    Mar 28, 2012 12:37 AM   in reply to martcol
    Report

    A good tip to help clear floats properly is to add overflow:hidden to the containing element.

    Common use for example is a nav menu where the CSS would be

     

    ul { overflow:hidden;}  /* the containing element */

    li { float:left;}  /* the floated element */

     

    Without the over overflow:hidden; you can have problems adding borders and setting margins. It also clears the float and allows the elements below to flow as they should in the HTML. This method also means no extra unnecessary mark up and therefore cleaner code.

    Hope that helps you.

     
    |
    Mark as:
  • valf
    Currently Being Moderated
    4. valf,
    Mar 28, 2012 1:41 AM   in reply to 3DeeGee
    Report

    I'm so sorry I put the wrong link as reference !!!! So ashamed of that !! sorry for wasting your time !! the right link is http://elhoster2.com/hostelinn/new/

    Now I understand the 400 or something error on w3c ....

     
    |
    Mark as:
  • 3DeeGee
    Currently Being Moderated
    5. 3DeeGee,
    Mar 28, 2012 1:54 AM   in reply to valf
    Report
    1. Run the code through the w3 validator is a good way to find problems and here is yours
    3. Line 121, Column 126: Stray end tag div.…r box 1</div></div><div class="box-4 footer-box">footer box 1</div></div></div>✉
    4. Line 121, Column 132: Stray end tag div.…r box 1</div></div><div class="box-4 footer-box">footer box 1</div></div></div>
     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Mar 28, 2012 1:01 PM   in reply to valf
    Report

    The Magic of Overflow-Hidden (to contain floats and keep margins from collapsing).

    http://colinaarts.com/articles/the-magic-of-overflow-hidden/

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • valf
    Currently Being Moderated
    7. valf,
    Mar 28, 2012 3:46 PM   in reply to 3DeeGee
    Report

    Hi, thank you for your reply, I did what you suggested and corrected all errors I had , but still my boxes are not placed where they should be placed ... I don't know why ...

     
    |
    Mark as:
  • 3DeeGee
    Currently Being Moderated
    8. 3DeeGee,
    Mar 29, 2012 12:34 AM   in reply to valf
    Report

    You have them outside the 'grid-centered' div. I've changed it to this

     

    <div class="footer">

    <div class="grid-centered" style="height:280px;">

    <div class="box-4 footer-box">

    <div class="newsletter">

    <h4 style="color:white">Newsletter</h4>

    <p>

    <input type="text" value="Enter any Valid Email Address" name="s" onblur="if(this.value == '') { this.value = 'Enter any Valid Email Address'; }" onfocus="if(this.value == 'Enter any Valid Email Address') { this.value = ''; }" class="textfield">

    </p>

    <p>

    <input type="submit" value="Submit" class="go backcolr">

    </p>                       

    </div>

    </div>

    <div class="box-4 footer-box">footer box 1</div><div class="box-4 footer-box">footer box 1</div>

    </div>

    </div>

     

    That works in chrome dev tools anyway.

     

    I won't add anymore float advice as my first tip covered that more than enough to help you work with floats.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)