SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 54
  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help stoping snagging behavior.

    Need help

    I have three main divs

    HTML Code:
    #leftcolumn {
            background:green;
            width:800px;
            float:left;		
    }
    
    #rightcolumn {
    background:red;
    margin-top:8em;
    width:425px;
    margin-left:0em;
    height:auto;
    float:left;
    }
    
    #completo{
    background:black;
    margin-left:0em;
    height:auto;
    width:auto;
    float:left;
    }
    <div id="completo">
    <div id="leftcolumn"
    </div>
    <div id="righcolumn">
    
    </div>
    </div>
    Div "completo" that wraps "leftcolumn" and "rightcolumn"

    I need Leftcolum to the left and rightcolumn to right inside of "completo" div. But the thing is that with actual css I have rightclumns snags down when the windows is minimize. How can I stop that behavior?

    Thank you.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well, since you give pixel widths for both columns, you could just set a width on the #completo div
    800+425=1225px
    Code:
    #completo{
    background:black;
    margin-left:0em;
    height:auto;
    width:1225px;
    float:left;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did it like that but it stills snagging.

    You can go here and see the example thanks!

    http://www.nyhungry.com/pruebaindex.php


    The three css rules above are all the way in the bottom of the CSS stylesheet.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, firebug is showing the #completo div closed off before the #rightcolumn div starts. Make sure you count your </div> correctly
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

    There should be something else causing this behavior because I have made sure to that the div #rightcolumn and #leftcolumn are inside div #completo but still the behavior will persist.

    any other idea on what could be causing it.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If firebug is showing as I described then that is true.

    Firebug doesn't make mistakes like that. Humans however, do.

    Give me a minute and I'll point out the errornous </div>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Look at this. I was careful to make sure I deleted all content and they matched up. This is the base code
    Code:
    <div id="completo">
    <div id="leftcolumn">
    	<div id="wrapper"></div>
    	<div class="wrap"></div>
    </div>
    
    </div>
    </div>
    <div id="rightcolumn">
    See the extra?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's right above #rightcolumn

    Let me check on that carefully again.

    Thank you Ryan I will get you back on that.

  9. #9
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan it was a php elseif statement causing the problem.

    Now now #rightcolumn is inside #completo but then #rightColumn needs to float to the left and get at the right of #leftcolumn it is floating but then it display below #leftcolumn the green box instead of next to it at the right.

    any observation would be appreciated.

    thank you.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, cehck your PHP again, it's outputting #holders and #header2 divs right after #leftcolumn and of course it wasn't set that way before . And I can see PHP in the source code.

    Post back when hte PHP is fixed
    Code:
    // else if (!empty($arrRestaurants)){ 
      <div id="holders"><img src="images/smallholdersleft.gif" alt="holders" /></div>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan I have fixed the structure.

    Please can you have a look to #rightsidebar inside the #rightcolumn? The #rightsidebar is to low and I would like to see your opinion on that, to see how would be the best way to bring it up.

    I suspect that the footer can be causing this issue don't know please have a look.

    Finally the video doesn't snag now thank you.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, on ".rata1" you give a 100em top margin lol. "#citycontainer" then needs to contain the floats with overflow:hidden; (then haslayout for IE6)

    Heck just make the CSS changes
    Code:
    #citycontainer{overflow:hidden;zoom:1;}
    .mini, .rata1{margin-top:0;}
    #citycontainer .citywrap{
    overflow:hidden;
    margin-top:0;/*this will control space of video links*/
    }
    #rightsidebar{display:block;margin-top:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you

    I made the changes and the space between the #rightsidebar and the footer has been eliminate and it display better but then now the #citycontainer and the #rightsidebar are to far away from each other. I was thinking about giving the #rightsidebar some negative margin-top value to get it close to the #citycontainer?

  14. #14
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    giving a margin-top to the #rightsidebar would not work that well.


  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do my code and then if you have spacing issues come back . I need the playing field reset because there was a lot of clashing in your code as it stood.

    However if you feel like you know what you are doing spacing wise and you are comfortable then by all means taking out the margin-top I wrote for #rightsidebar .

    Some margin-tops there are neccessary though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan I have gotten the #rightsidebar inside the #rightcolumn div and it is displaying ok. The only thing is that I can not find how to bring up the footer. some margin-bottom or any other means is pushing it down.


    Give me a hand on that please.

    Thank you.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The .wrap element (I thought I put this in my code I posted before but I guess not) has a 1000px height. As such the footer is far down..
    Code:
    .wrap{height:auto;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you Ryan!

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey

    The footer in the link above is displaying where it shouldn't be I have this link

    http://www.nyhungry.com/example2.php...d=4&register=0

    Where the footer is not displaying well. In a preview post you suggested that the wrap height needed to be auto.

    Over in this page there is not wrap, What I think that the #outer div height is not assigned but I did tried to put it auto but it didn't worked.


    Help!

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You are setting heights on a lot of things and I see no reason why! PS-know that half pixels don't exist (or .9's)
    Code:
    #nav-subjects-thumbs3{height:auto;}
    #outer{margin-bottom:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that was my tecnnique before knowing of height:auto;



    Pluse I needed to closed some tags within divs to reach the sticky footer effect.

    Thanks!

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan I am using the same CSS for both of the links above the last link is the ideal display but in the first link don't know why is not displaying as in the second link when I am using the same CSS properties and values.


    First link.
    http://www.nyhungry.com/example2.php...ster=0&menu=38


    Second link.
    http://localhost/nyhungry/catering.php


    thank you.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the second link is broken

    In the first link you are reusing IDs a lot and that is most likely the cause of the page being screwed up . If you are going to reuse an ID during a document then switch it to a class that way you can do it validly
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •