SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    My div(s) don't move when using margin

    Hello guys!

    I'm having a problem here that some of my div tags and pictures in dreamweaver don't show the same way in a browser as they do in dreamweaver.

    I have a wrapper, and inside that i have another div called "insidewrapper" where I have a picture. As you can see in the CSS the #insidewrapper has a margin of 25px at top. When I put the pic in the #insidewrapper it looks as it should in the preview in dreamweaver but as soon as I press live view or test it in my browser the pic is like ignoring the margin but in the HTML it's still in insidewrapper.


    HTML:

    Code:
    <!DOCTYPE html>
    
    <head>
    
    <title>Untitled Document</title>
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
    
    
    </head>
    
    <body>
    
    
    
    <div id="logobuttons">
    
    <div id="buttons">
    
    
    </div>
    
    <div id="logobild">
    
    <img id="logo" src="../images/Logo.png" width="280" height="56">
    
    </div>
     </div>
    
    
    
    
    <div id="wrapper">
    
    <div id="insidewrapper"><img src="../images/PIC.png" width="880" height="387"></div>
    
    
    </div>
    
    
    
    
    </body>
    </html>

    This is CSS:

    Code:
    body {background-image:url(../images/Banner.png); background-color:#000000; background-repeat:no-repeat; background-position:center; background-position: 50% -12% }
    
    
    #wrapper { height:500px; width:950px; margin-left:auto; margin-right:auto; height: 2000px; background-image:url(../images/Border.png) }
    
    
    #logobuttons {height:100px; width:950px; margin-left:auto; margin-right:auto;}
    
    #logo {margin-top: 30px; margin-left:25px }
    
    #buttons {float:right; width:640px; height:100px; }
    #buttons ul li {list-style-type:none; display:inline; }
    
    #logobild { float:left; width:310px; height:100px; }
    
    #insidewrapper {width:900px; height:500px; margin-top:25px;
    margin-left:auto; margin-right:auto;}
    
    p {color:#FFFFFF}
    
    h1 {color:#FFFFFF; font-family:Verdana, Geneva, sans-serif; font-size:16px;}
    
    #banner {margin-left:auto; margin-right:auto }
    If someone could help me I would appriciate it very much, and if I havent explained it well enough, please tell me what I should explain better.

    Yours Kevin

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Quote Originally Posted by Kevin
    I'm having a problem here that some of my div tags and pictures in dreamweaver don't show the same way in a browser as they do in dreamweaver.
    Don't worry. Even when dreambeaver is right, it's wrong. Forget how DW is showing it to you, and focus only on the browser. After all, the browser is the only one anyone else will ever see your site in.

    Second: I know in this case DW is wrong, because it sounds like your browser is doing the margin-collapse thing... whoops no.

    ...Okay I had a huge rant on how much margin collapse sucks donkey balls and is one of the worst ideas ever and whoever came up with it is batsh*t insane... but actually here it's because of your floats, not margin collapse. The top margin of a box underneath some floats can kinda slide right up underneath floats. You could instead put a bottom margin of 25px on the element above the wrapper/inner thingie. Some further reading just for interest, about bottom margins, floats, and IE being the drooling glue-eater we all know and love written by our very own Paul O'Brien.

    #logobild is floated inside #logobuttons, so a bottom margin on logobuttons might not work if logobild is popping out. Which floats do if you don't enclose them.

    You could try
    #wrapper {
    clear: both;
    }


    I... don't like your markup. What are you making? Image gallery? I'm saying I think you could have simpler CSS with simpler markup, depending on what you're building. Or, the more markup you have, the harder everything gets whether you need it to or not. You have a lot of boxes.

    Also, when debugging things involving floats, padding, margins... while developing, give every box an ugly background colour. Not a border or anything that takes up space, just stuff like background-color: #f00, background-color: #ff0, background-colour: #0f0, background-color: #00f... etc. And... setting absolute heights on boxes is either clever evil CSS genius or you hanging yourself. Depends on what you're going for.

    I also want to tell you to stop using DW, but I guess that depends on what you're doing... making one site? Fine. Learning to code? Ditch it. Get Notepad++ or Geanie or something that doesn't try any coding for you. Use a set of open browsers as your Design View. They'll be more honest.

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure my markup of everything is wrong since I'm new to this, well. I can ask you at start if you know any good guide of how the setup of the divs right.

    Its just my start page (index) and the pic were going to be a "banner".

    EDIT: sorry for not quoting you.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Well, do you want better markup or do you just want this page to work? Either is fine; there are lots of popular sites out there with some pretty bad code. Only web developers look at website underwear.

    If you just want this site to work for now you can try the clear: both on #wrapper and see if it does what you want.

    Though a rough sketch of what you're building can also help.

    Quote Originally Posted by kevin
    I can ask you at start if you know any good guide of how the setup of the divs right.
    There are lots of resources but my problem was, I either followed their examples or flailed about trying to build what *I* wanted. I couldn't learn a bit, then apply it to a pet project. That kinda sucked until I knew enough to really build my own things.

    But you may not have that problem. HTMLdog is a decent resource. I learned to write my first HTML and CSS with Ian Lloyd's book Build Your Own Web Site... that is a beginner's book and later on you'll probably changing your mind on what good code is. There's only so much they can stuff into a book. How-to's are mostly good for little things, but basic good HTML and setting up your basic boxes... I learned most of that base from two books, then the rest was the usual: forums, tuts, building things. You're already building things so you've seen some behaviour and just don't know all the why's yet. But as I mentioned earlier, give all your boxes an ugly background colour NOW and this will totally show you more things you don't see now.

    Quote Originally Posted by kevin
    EDIT: sorry for not quoting you.
    You don't have to, and in fact quoting everything I said (some forums do that) I think is kinda redundant kinda redundant redundant. :)

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Clear:both didn't work.

    But i guess I'll try to put down some more time in reading the boring stuff that can be really useful instead of wasting time trying to figure these kind of stuff out wich maybe wouldnt happen If would've been a bit better since I'm still beginner. Either way I'll try figure this out myself, and if I don't I'll post a pic here.

    I'll try read some of the guids on the site you recomended, thanks.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Meh, I'll copy your code and see what will push teh image down. I'll post results.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I'm a retard, I think.

    If you wanted wrapper space to be above the image you could have top padding on the wrapper instead of top margin on the child.

    http://stommepoes.nl/keventemp/kevintest.html
    I've made #wrapper blue, and I don't have your pics to the image should be in the place of your PIC.png

  8. #8
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's how it should look like, I'll try to do it when I come home and hope it works, and thanks for taking your time writing to me, btw. I don't have any option to choose my own (browse my own) avatar pic?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    I don't have any option to choose my own (browse my own) avatar pic?
    You should be able to upload your own avatar.

  10. #10
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure, do I have to post 25 posts before I can upload my own?
    Quote Originally Posted by ralph.m View Post
    You should be able to upload your own avatar.

  11. #11
    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)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'īve seen people changing profile picture also, but I don't see any options to that..
    Quote Originally Posted by RyanReese View Post

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kevin
    Yeah, I'īve seen people changing profile picture also, but I don't see any options to that..
    I think if the system requires 25 posts, more options appear when you reach that number. You did have that Bill Gates pic earlier :) I just went with no avatar until I could load my own. I'm bull-headed that way

  14. #14
    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 kvnwpts View Post
    Yeah, I'īve seen people changing profile picture also, but I don't see any options to that..
    Get to 25 posts (you only need 14 more, but don't spam). Then try again.

    Having an avatar isn't amazing anyway.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    #div1 is the outer
    #div2 is the iner


    Basically what I did was I had a #div1 and #div2. And when i used margin top on #div2 so the div went like 20px down it didnt make any change in the browser. So what I did I used padding top 20px on #div1. Is that a good soloution because it works as it should or is there any other primary mode to do it?

    I'm excuse me for my bad english.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    What you are experiencing here is margin collapse. Your solution is fine, but if you would rather use margin, you can do a few things, such as put a faint 1px border on the top of #div one, or even a tiny bit of padding on #div 1 (like 1px).

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    You could also try giving overflow:hidden to #div1 ,the outer. Hope that helps.

  18. #18
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That worked too, could you explain why that happens if you can? I hate doing things I don't know since I wanna know as much as possible.

    Thanks
    Quote Originally Posted by dresden_phoenix View Post
    You could also try giving overflow:hidden to #div1 ,the outer. Hope that helps.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You could also try giving overflow:hidden to #div1 ,the outer.
    Ah yes, I forgot that one.

    I don't understand the ins and outs, but overflow:hidden prevents content from hanging out of a container (mainly positioned content, I believe). So the container is forced to wrap itself around any non-positioned content that is hanging out and pull it in. (I'm sure there's a more accurate answer, though. )

  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)
    When you use overflow:hidden, a new block formatting context is created. A few properties do it, but this one will basically do nothing else to affect the rest of the element, it's safe . For example, display (a few values in there), floating, and position (absolute/fixed). As you see, all those will do a good bit of "damage"

    It basically will ensure that the top margin that is set, is contained within the element, when you set overflow:hidden; on it.

    Overflow is a wonderful property .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nice, would it be a good idea to "learn" all of these CSS properties? http://www.htmldog.com/reference/cssproperties/


    Quote Originally Posted by RyanReese View Post
    When you use overflow:hidden, a new block formatting context is created. A few properties do it, but this one will basically do nothing else to affect the rest of the element, it's safe . For example, display (a few values in there), floating, and position (absolute/fixed). As you see, all those will do a good bit of "damage"

    It basically will ensure that the top margin that is set, is contained within the element, when you set overflow:hidden; on it.

    Overflow is a wonderful property .

  22. #22
    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)
    Honestly you can if you want, and you really should know all of them at some point (though most of them are worthless, and you won't use really at all. Take a look at them though)

    A lot of those (such as background-attachment, background-repeat) can all be shortened into a shorthand property, and for that example, it is "background:"

    I wouldn't study CSS that way. Just view forum threads, check out their code, read the replies by the gurus here who know what they are talking about. You will learn .

    Note, I'm not saying you CAN'T learn that way, via learning them one at a time...however, it won't tell you about bugs that apply to browsers, what each value can do, aka I doubt much is mentioned in that HTMLdog link about the powers of overflow:hidden(or any value there.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Ryan pretty much explained it as I would have. DO NOTE that this is a side effect of the "overflow:" property. For that reason:
    Nice, would it be a good idea to "learn" all of these CSS properties?
    So it's good to learn about all the properties but it BEST to have and exploitative thinking style. Remember that these properties INTERACT.. so merely memorizing definitions wont be that useful.

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I had thought it was margin-collapse but on the original code it was also that there were floats above it and the upper margin was sliding up under the floats, and that's why I didn't use the common margin-collapse solution (1px padding on container).

    Kevin: I do generally try to use top-padding on the container rather than top-margin on the child for this reason, but sometimes you don't want to do that (maybe the child has a background-color or border that you don't want spacing on) and in those cases yes, you can use the 1px top padding (or border... there are a few triggers) on the container and that lets your child have a non-collapsed top-margin. Really, I don't understand the person who came up with this, why did they think it was a good idea?
    http://www.search-this.com/2007/05/0...ne-or-why-111/

    Re learning: The structure of the two books I got started with helped a lot. After that, it was a combination of building things, getting bugs, and reading/learning things like at HTMLdog etc. Forum posts as Ryan said are also good, especially if you read threads where someone has a problem you understand, and someone else then answers what's wrong and why and how to fix. You might want to read deathshadow60's posts, just ignore the ranting parts and read his code :)

  25. #25
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You guys gotta be right, I think I'll learn long along the way as you said.



    I think its pretty wierd too.
    Quote Originally Posted by dresden_phoenix View Post
    Ryan pretty much explained it as I would have. DO NOTE that this is a side effect of the "overflow:" property. For that reason: So it's good to learn about all the properties but it BEST to have and exploitative thinking style. Remember that these properties INTERACT.. so merely memorizing definitions wont be that useful.
    Quote Originally Posted by Stomme poes View Post
    I had thought it was margin-collapse but on the original code it was also that there were floats above it and the upper margin was sliding up under the floats, and that's why I didn't use the common margin-collapse solution (1px padding on container).

    Kevin: I do generally try to use top-padding on the container rather than top-margin on the child for this reason, but sometimes you don't want to do that (maybe the child has a background-color or border that you don't want spacing on) and in those cases yes, you can use the 1px top padding (or border... there are a few triggers) on the container and that lets your child have a non-collapsed top-margin. Really, I don't understand the person who came up with this, why did they think it was a good idea?
    http://www.search-this.com/2007/05/0...ne-or-why-111/

    Re learning: The structure of the two books I got started with helped a lot. After that, it was a combination of building things, getting bugs, and reading/learning things like at HTMLdog etc. Forum posts as Ryan said are also good, especially if you read threads where someone has a problem you understand, and someone else then answers what's wrong and why and how to fix. You might want to read deathshadow60's posts, just ignore the ranting parts and read his code


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
  •