SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone tell me why all the divs are out of place please?

    All of the divs in the #header got thrown out of place when I took the #width out of the header I don't understand why I must be overlooking something. http://www.aixdesigns.com/edatinghome.html

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) If you float sometehing it is automatically a block element so no need to declare display:block;
    2) Remove the top margin on "#toppichp"
    3) On "#width" set overflow:hidden; and remove the height and top margin.. <div>'s are block elements already so remove display:block; also
    4) On #wrapper you need to add overflow:hidden;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And why is the bg not lining up with the logo I measured it.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What do you mean "not lining up"?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The logo is supposed to line up with the heart shapes behind it and why did I need to get rid of the top margins and what does over flow hidden mean?

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And where am I supposed to add display block to the #width it didn't change anything.

  7. #7
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    1) If you float sometehing it is automatically a block element so no need to declare display:block;
    Please explain.

    Blocks cause explicit line breaks and occupy the width of their parent. Floats don't do that.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you please read? #width is already a block so adding it does nnothing

    Overflow:hidden; contains the floats that you have in there.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    Please explain.

    Blocks cause explicit line breaks and occupy the width of their parent. Floats don't do that.
    Please read hte spec

    They really explain it the best.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Overflow:hidden; contains the floats that you have in there.

    I don't understand when did that become neccessary do I have to add it all the time when do I know when to use it I'm not getting a visual of what it does in layman's terms.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If children of an element are floated you need to add overflow:hidden; to the parent because otherwise the parent will collapse the height to 0. That is because floated elements are taken out of the normal flow of the document and the parent doesn't recognize they are there thus collapsing the height to 0. overflow:hidden; gives it glasses, so to speak. It allows adjacent elements to clear.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I mean is the logo was sliced at 186 on the X Axis and it's not lining up with the bg correctly I tried align center bd and left. It looks fine in Photoshop.

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If children of an element are floated you need to add overflow:hidden; to the parent because otherwise the parent will collapse the height to 0. That is because floated elements are taken out of the normal flow of the document and the parent doesn't recognize they are there thus collapsing the height to 0. overflow:hidden; gives it glasses, so to speak. It allows adjacent elements to clear.
    When you say collapse height to 0 would the alterative be to specify a width and height for every div containing a pic if you don't use overflow:hidden; or am I not grasping the concept.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Dunno about that as it seems you fixed it already / found a way .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by eddie aixed View Post
    When you say collapse height to 0 would the alterative be to specify a width and height for every div containing a pic if you don't use overflow:hidden; or am I not grasping the concept.
    The main point is the parent doesn't even recognize the floated elements are even there. You could set the height (width doesn't matter) for every child and then add it up and give the cocmbined height to the parent. But that is VERY bad. It doesn't allow for more content and it will break very very easily. Text resize, etc. Oveflow:hidden; is the best way and safest.

    Read the spec
    The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
    http://www.w3.org/TR/CSS2/visuren.html#floats
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    Please explain.
    Blocks cause explicit line breaks and occupy the width of their parent. Floats don't do that.
    I think floats become "unique" block level elements in a sense. They are still removed from the flow of the document because they are floats and they behave differently than standard block elements. For example a float without a width will shrink wrap to it's content's width where a standard block element fills the entire width of the parent when no width is defined. Kinda like images are unique inline elements which are able to take dimensions.

    Furthermore, when an element is floated it can take dimensions. Even when you float an inline element like a p it is able to receive dimensions. That is that uniqueness of the float property.

    http://www.visibilityinherit.com/code/float-fact.php

  17. #17
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Dunno about that as it seems you fixed it already / found a way .
    Don't know I'm using IE8 and it's not aligned correctly in IE8 I haven't tried other browsers yet.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you just add "margin-left:-10px" to "#logo" it aligns perfectly.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forget it I know what I did wrong

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok glad you figured it out . Could you explain for people? If you have any more questions just ask.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Ok glad you figured it out . Could you explain for people? If you have any more questions just ask.
    I forgot when I made the psd in Photoshop to make sure I centered everything down to the pixel. Initially there was no need to because I didn't have anything behind the logo besides the gradient which could be coded to repeat on the x-axis. Then I thought it was too plain and added the brush shapes.

  22. #22
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    O.k. why is the #footer not responding to the edits made in the css file? I don't remember having all these issues before. I forgot how to code it correctly. I must be overlooking something.

  23. #23
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or correction why is it responding to font size and type but not anything else?

  24. #24
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is the #toptipstext spacing itself from the #toptipspics without designating a top margin on #toptipstext

    http://www.aixdesigns.com/edatinghome.html

    #toptipspics{
    display: block;
    margin-top: 10px;
    float: left;

    }

    #toptipstext{
    display: inline;
    margin-left: 40px;
    float: left;
    width: 820px;
    font-size: 13px;
    }

    But #tipstext and#tipspics needed me to designate a top margin on #tipstext

    http://www.aixdesigns.com/edatingtips.html


    #tipspics{
    display: block;
    margin-top: 20px;
    float: left;
    }

    #tipstext{
    display: inline;
    margin-left: 40px;
    margin-top: 20px;
    float: left;
    width: 820px;
    font-size: 13px;
    }

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you remove the float:left; on both and the display:inline; you will see them not spaced. Also on the edatinghome page you are running into a margin collapse.

    On #header remove the float left and add overflow:hidden;
    On #width remove the huge top margin.
    Always looking for web design/development work.
    http://www.CodeFundamentals.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
  •