SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Positioning Relationship problem

    Code HTML4Strict:
    <body>
        <div id="tut_header"></div>
            <div class="tut_name"></div>
                <div id="tut_middle"></div>
                <div class="image"></div>
            <div class="tut_content"><p>content</p></div>
        <div id="tut_base"></div>
    </body>

    How come when I position class=tut_content with margins. It moves the id=tut_base as well I don't see no relation between the two.

  2. #2
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    id=tut_base is immediately after class=tut_content, so they are related (as siblings). Perhaps I'm misunderstanding your question. Could you post a link? Some CSS?

    In any case, something doesn't look right. Why are tut_name, image and tut_content classes, but tut_middle is an ID? Wouldn't tut_middle appear more than once (like the others), and hence need to be a class? Again, posting a full example might clarify the situation.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Assuming the elements are in the flow and non positioned then moving any one of them with margins them will have a knock-on effect on all the others.

    The margins on the inner element will push the outer and following elements accordingly.

    And then there may be margin-collapse to consider

    As mentioned above we'd need the code for all that section to debug properly.

  4. #4
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Green areas of the page is where a graphic will be although the Green Areas of the page are a little taller then they should be I will fixed that once the graphics are complete. I'm trying to position the *blue* box beside the *orange* box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?

    Link

  5. #5
    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, you really need to consider a restructure. You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle .

    I'd nest the two boxes inside the gray element and that way the background will contain both of them (assuming the gray element has a clearing mechanism such as overflow/clearfix )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    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)
    I'm trying to position the *blue* box beside the *orange* box but when I position it with margins the bottom green box moves as well and want to know what order did I put the code in that is causing this?
    You should be using floats to position elements beside each other. I don't see any floats being used in the link you posted.
    The clearing mechanism that Ryan mentioned would be for the floats.

    That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Applying a float moves the id=tut_base which I don't want to have occur. I want tut_base to stay fixed where it's at.

    You are havin to resort to huge negative margins to get the overlap of the backgrounds (-900px for example) and I refuse to help you try and get that working just on principle
    Huh ??
    That would just be a simple One Column layout with a header and footer. Then it would just have two floats in the middle div.
    That is my goal exactly what you had said Rayzur, one column and a header and a footer then place one box on one side, the the other on the other side then rotating the boxes vertically. I can't get the "blue" box to rest beside the "orange" box, here is an update the changes are in the HTML (link in message #4)

  8. #8
    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)
    Hi,
    Something like this should get you pointed in the right direction.
    You can adjust the margins on the floats as you desire. I set a 25px top and bottom padding on the middle div to eliminate top margins on the floats though.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    
    <style type="text/css">
    * {margin:0; padding:0;}
    
    #wrap {
        width:700px;
        margin:auto;
    }
    #tut_header {
        height: 225px;
        background: #66CC00;
    }
    #tut_middle {
        width:700px;/*IE6 haslayout*/
        /*height: 800px;*/
        /*margin-bottom: 200px;*/
        padding:25px 0;
        overflow:hidden;/*contain floated children*/
        background: #AAAAAA;
    }
    .image {
        float:left;
        width:250px;
        height:250px;
        margin:0 0px 0px 25px;
        display:inline;/*IE6 float margin bug*/
        background: #CC9900;
    }
    .tut_content {
        float:left;
        width:300px;
        height:300px;
        margin:0 0 0 75px;
        background: #0099FF;
    }
    #tut_base {
        height: 225px;
        background: #66CC00;
        /*margin-top: 50px;*/
    }
    </style>
    </head>
    <body>
    
    <div id="wrap">
        <div id="tut_header"></div>
        <div id="tut_middle">
            <div class="image"></div>
            <div class="tut_content">
                <p>content</p>
            </div>
        </div>
        <div id="tut_base"></div>
    </div>
      
    </body>
    </html>

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a pretty good head start, I noticed how you nested the classes, something I don't quite have down yet !
    Although I copied a portion of the code because I want the layout to be as follows:

    image - content
    content - image etc

    Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box. I suppose the last part is something jQuery be used for ?

  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)
    If you need the height to be shrink to fit, then just don't specify it? Or if you need a height to get the background showing (even with little/no content boxes) then you could set a min-height
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    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)
    Hi,
    The problem with your updated code is that the additional floats you just added are not nested in the same div as the previous floats. They are not being contained so the BG color does not extend with them.

    Although I copied a portion of the code because I want the layout to be as follows:

    image - content
    content - image etc


    Not to jump to far ahead in the game, but just for record when the situation arises the content box will shrink or get larger based on how much content is written in the box.
    Ok, you want your floats to stagger. That can be done, but in a real world situation where the content is a dynamic height it will give varied heights that will effect the floats.

    You can prevent floats from snagging on each other or rising up below the taller float one of two ways.

    1) Nest the paired floats in their own wrapping div
    2) Set a clearing element after each pair of floats

    If you are going to have an image and a content div in each pair then there is no need to wrap the image in a div. The best way to do this is to set up some classes for left and right floats. You can then use those classes on the image and the content div as they stagger. Since the text in your content div will be unpredictable you will need to prevent float snag with one of the two methods I mentioned. I am going to use method #2 by setting clear:both on a <br> tag in the code below. That is usually frowned upon, but in this case it is either that or an empty clearing div or an extra wrapping div for the paired floats.

    I have removed the height:300px; from the content div and set different amounts of text to show what is going on.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Staggered Float Demo</title>
     
    <style type="text/css">
    body {
        margin:0; 
        padding:0;
        font:100%/1.2 arial, helvetica, sans-serif;
        background:#CDF;
    }
    h1 {
        margin:0;
        padding:.5em;
        font-size:1.65em;
        text-align:center;
    }
    p {
        margin:.5em;
        font-size:1em;
    }
    /*=== Begin Layout ===*/
    #wrap {
        width:700px;
        margin:auto;
    }
    #head {
        height:200px;
        background: #66CC00;
    }
    #inner {
        width:700px;/*IE6 haslayout*/
        padding-top:32px;
        overflow:hidden;/*contain floated children*/
        background:#AAA;
    }
        #inner .left {/*class for all #inner > left floats*/
            float:left;
            margin:0 0 32px 32px;
            display:inline;/*fix IE6 float margin bug*/
        }
        #inner .right {/*class for all #inner > right floats*/
            float:right;
            margin:0 32px 32px 0;
            display:inline;/*fix IE6 float margin bug*/
        }
        .clear {
            clear:both;
            height:0;
            font-size:0;
            overflow:hidden;
        }
        #inner img {
            width:250px;
            height:250px;
            background:#CC9900;
            text-align:center;
        }
        #inner .content {
            width:300px;
            /*height:300px;/* height disabled for testing*/
            background: #0099FF;
        }
        .content p {
            margin:.5em .5em 2em;
        }
    #foot {
        height:100px;
        overflow:hidden;/*margin clearance*/
        background:#66CC00;
        font-weight:bold;
        text-align:center;
    }
    </style>
    </head>
    <body>
     
    <div id="wrap">
        <div id="head">
            <h1>Staggered Float Demo</h1>
        </div>
     
        <div id="inner">        
            <img class="left" src="images/demo.jpg" alt="left image">
            <div class="content right">
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
            </div>        
            <br class="clear">
     
            <div class="content left">
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
            </div>
            <img class="right" src="images/demo.jpg" alt="right image">
            <br class="clear">
     
            <img class="left" src="images/demo.jpg" alt="left image">
            <div class="content right">
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
                <p>Right Content</p>
            </div>
            <br class="clear">
     
            <div class="content left">
                <p>Left Content</p>
                <p>Left Content</p>
                <p>Left Content</p>
            </div>
            <img class="right" src="images/demo.jpg" alt="right image">
            <br class="clear">
        </div><!--end inner-->
     
        <div id="foot">
            <p>Footer Stuff</p>
        </div>
    </div> <!--end wrap-->
     
    </body>
    </html>

  12. #12
    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)
    In regards to my last post and the use of the <br> tag to clear the paired floats. I think a better way to handle this would be to wrap each pair of floats in a div. Either approach has to be done at the cost an extra element and a div would be the semantic way to do it in my opinion.

    I have put up a live example this approach.
    http://www.css-lab.com/test/husky.html

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Staggered Float Demo</title>
     
    <style type="text/css">
    body {
        margin:0; 
        padding:0;
        font:100%/1.2 arial, helvetica, sans-serif;
        background:#CDF;
    }
    h1 {
        margin:0;
        padding:.5em;
        font-size:1.65em;
        text-align:center;
    }
    p {
        margin:.5em;
        font-size:1em;
    }
    /*=== Begin Layout ===*/
    #wrap {
        width:700px;
        margin:auto;
    }
    #head {
        height:200px;
        background:#66CC00;
    }
    #inner {
        width:100%;/*IE6 haslayout*/
        padding-top:32px;
        overflow:hidden;/*contain floated children*/
        background:#AAA;
    }
        .floatwrap {/*wrap around each pair of floats*/
            float:left;
            width:100%;
            margin-bottom:32px;
            background:#BBB
        }
        #inner .left {/*class for all #inner > left floats*/
            float:left;
            margin:0 0 0 32px;
            display:inline;/*fix IE6 float margin bug*/
        }
        #inner .right {/*class for all #inner > right floats*/
            float:right;
            margin:0 32px 0 0;
            display:inline;/*fix IE6 float margin bug*/
        }
        #inner img {
            width:250px;
            height:250px;
            background:#CC9900;
            text-align:center;
        }
        #inner .content {
            width:300px;
            /*min-height:300px;/*temp test height*/
            background: #0099FF;
        }
        .content p {
            margin:.5em .5em 2em;
        }
    #foot {
        height:100px;
        overflow:hidden;/*margin clearance*/
        background:#66CC00;
        font-weight:bold;
        text-align:center;
    }
    </style>
    </head>
    <body>
     
    <div id="wrap">
        <div id="head">
            <h1>Staggered Float Demo</h1>
        </div>
     
        <div id="inner">
            <div class="floatwrap">        
                <img class="left" src="images/demo.jpg" alt="left image">
                <div class="content right">
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                </div>        
            </div>
     
            <div class="floatwrap">
                <div class="content left">
                    <p>Left Content</p>
                    <p>Left Content</p>
                    <p>Left Content</p>
                    <p>Left Content</p>
                    <p>Left Content</p>
                    <p>Left Content</p>
                </div>
                <img class="right" src="images/demo.jpg" alt="right image">
            </div>
     
            <div class="floatwrap">
                <img class="left" src="images/demo.jpg" alt="left image">
                <div class="content right">
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                    <p>Right Content</p>
                </div>
            </div>
     
            <div class="floatwrap">
                <div class="content left">
                    <p>Left Content</p>
                    <p>Left Content</p>
                    <p>Left Content</p>
                </div>
                <img class="right" src="images/demo.jpg" alt="right image">
            </div>
        </div><!--end inner-->
     
        <div id="foot">
            <p>Footer Stuff</p>
        </div>
    </div> <!--end wrap-->
     
    </body>
    </html>

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's always the nesting that throws me off. By building upon this foundation that you have constructed, I assume that the #content_right and #content_left will be scalable depending on how little or how much content will be placed in them ? The content will never be bigger then the biggest #content box is anyhow but I have to ask

    There is no need to worry about IE6 as I see in the style sheet as I'm not supporting it just a FYI I'll update the page as soon as I put some final touches on some of the graphics

  14. #14
    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)
    I assume that the #content_right and #content_left will be scalable depending on how little or how much content will be placed in them ?
    Yes they will expand to the amount of content that is in them since I removed the height. I set different amounts of text in them to show the dynamic heights.

    The content will never be bigger then the biggest #content box is anyhow but I have to ask
    If you want to set the heights back on them then go ahead. Just be aware that the viewers default font-size may render things differently for them and text could spill out.

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur - How come when I try to position the <h1> tag in the <div=head> the entire <div=wrap> moves as well ?

    <div id="wrap">
    <div id="head">
    <h1>ETC</h1>
    css - #head h1

  16. #16
    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)
    It's probably a margin collapse caused by a default margin on the <h1> element.

    Either try removing the <h1> margin or on the #head try giving it a 1px top padding .

    Untested though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked Ryan. By adding 1px top padding what did that resolve ?

  18. #18
    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)
    It fixed a margin collapse that was happening .
    http://reference.sitepoint.com/css/collapsingmargins
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is an update on a old thread. Does anyone know a tool that when I add images to this page they appear small but when a user clicks on them they become almost full screen with the option to pan the image if there screen is smaller ?

    Unless I'm over looking something, when I'm searching but I can't find nothing.

  20. #20
    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)
    Quote Originally Posted by SiberianHuskey View Post
    This is an update on a old thread. Does anyone know a tool that when I add images to this page they appear small but when a user clicks on them they become almost full screen with the option to pan the image if there screen is smaller ?

    Unless I'm over looking something, when I'm searching but I can't find nothing.
    I'm not entirely sure why you didn't just create a new thread . That's called a lightbox (unless I'm misinterpreting something)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Saving Thread space Lightbox can pan too !!! Ok I'll look is over.

  22. #22
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    This is an update on a old thread. Does anyone know a tool that when I add images to this page they appear small but when a user clicks on them they become almost full screen with the option to pan the image if there screen is smaller ?

    Unless I'm over looking something, when I'm searching but I can't find nothing.
    Are you reffering to prettyphoto, one I have used on my portfolio?
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  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)
    Quote Originally Posted by radiant_luv View Post
    Are you reffering to prettyphoto, one I have used on my portfolio?
    That's called a lightbox, and yes he is
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is your portfolio, the one in your signature ?

  25. #25
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you reffering to prettyphoto, one I have used on my portfolio?
    No.


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
  •