Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Noob question

  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Noob question

    Hi

    I'm trying to get a newsletter thing going in html and css.
    Thing is i'm not succeeding very well.

    You can see the result here: http://www.logopedia.be/css/nieuwsbrief.html.

    My main question now is:
    I have margin: 0 auto; to center my divs.
    But I also want to manipulate the distance between two divs.
    So i use margin-top: 10 px;

    But it's not working probably because of the margin 0 auto; tag.


    How can i solve this?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Change it to

    margin: 10px, auto, 0, auto;

    Your code above is shorthand and is essentially telling your element to add 0 margin to top and bottom, and auto to left and right. Margin rules go in order from the top, clockwise around to the left margin.
    Teed

  • Users who have thanked teedoff for this post:

    steene (04-21-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think i might have found another solution?
    I added a wrapper and gave that the element margin: 0 auto;
    So now i can add margin-top to the frames.

    Or so I thought?
    cos it seems to work with high values but it fails with small values.
    It's seems like there is this space eitherway?

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Actually using your code, it fails to center it

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No the css code I gave you WILL center an element and add 10 px top margin to that element provided that element has a width less that its containg element AND a valid doctype, which you dont have at this point.

    That may not fix your issue, but you need one. Add the doctype and then we can go from there.

    Also, your page is centered in IE8, but not ff.
    Teed

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, i got it working. I needed to lose the comma's duh...

    However there seems to be a white space between frame top 2, 3 and 4 wich isn't there between frame top 1 and header?
    Where does that come from? I want it gone?!
    Last edited by steene; 04-21-2011 at 02:45 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Change your doctype to:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    That leaves you with one validation error, which is a div not closed. So right above your </body> tag, add a </div>. Your site is centered already in FF now. It wasn't before you added that doctype.


    The red background is also centered and not the full width of your viewport. Not sure if thats what you wanted.
    Teed

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ok still have one error if you keep the doctype you have now. You need to self close your link to your stylesheet.

    ...type="text/css media="screen" />

    Now what white space are you referring too? I'm not sure I see what you're talking about. Can you screen capture and post the image?
    Teed

  • #9
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    everything valid now?

    i have a screenshot
    i mean the white spaces between frame 1 and 2, frame 2 and 3, ...

    i've colored them red in photoshop...

    Last edited by steene; 04-21-2011 at 03:05 PM.

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not sure, I think it might be in your frame-bottom image... which is 902x14. Try adding:

    margin-bottom: -14px;

    to your frame_bottom div.

    edit: or -13px if you want that white 1px line like your first div has.
    Last edited by teedoff; 04-21-2011 at 03:17 PM.
    Teed

  • #11
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You sir are a genius ;-)
    thnx!

    I'll suffer some more and I'll be sure to bother you again if needed, if that is fine by you?

    Is there an auto way to center an image like my logo (wich is a div class) in my header (div id) using padding for example?
    Last edited by steene; 04-21-2011 at 03:23 PM.

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by teedoff View Post
    Change your doctype to:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    That leaves you with one validation error, which is a div not closed. So right above your </body> tag, add a </div>. Your site is centered already in FF now. It wasn't before you added that doctype.


    The red background is also centered and not the full width of your viewport. Not sure if thats what you wanted.
    This is slightly irresponsible. Changing the doctype so you get fewer errors is not the right way to do things: rather, you should fix your code to come in line with the spec. New documents should never, ever be written in transitional flavours, only strict.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Apostropartheid View Post
    This is slightly irresponsible. Changing the doctype so you get fewer errors is not the right way to do things: rather, you should fix your code to come in line with the spec. New documents should never, ever be written in transitional flavours, only strict.
    Yes thats true, but I suggested he use the 4.01 transitional as he had NO doctype to begin with and that would have resulted in cleaner(less errors) code to start.

    So, yes you should fix your code to come in line with the specs....but no doctype...no specs.

    Now, for my own curiousity, what is inherently wrong with using a transitional doctype? Where ARE they useful and used?
    Teed

  • #14
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by teedoff View Post
    Yes thats true, but I suggested he use the 4.01 transitional as he had NO doctype to begin with and that would have resulted in cleaner(less errors) code to start.

    So, yes you should fix your code to come in line with the specs....but no doctype...no specs.

    Now, for my own curiousity, what is inherently wrong with using a transitional doctype? Where ARE they useful and used?
    Transitional doctypes are surprisingly (I know, it's odd for the W3C to make something simple) self-explanatory. They are meant to be used for document authors who are in the progress of updating (or transitioning from) a document conforming to an older spec, in this case HTML 3.2, to the new one, here HTML 4.01. This is why it allows some legacy elements, attributes and syntax which are illegal in the new spec. Transitional documents are meant to be a stop-gap only, and should be eventually updated to conform to the strict specification. As new documents have nothing to transition from, they should default to strict doctypes.

  • #15
    New Coder
    Join Date
    Apr 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm pretty noob here, if you could tell me what doctype i need to use, i'll change it happily.

    Also i was wondering about this: Is there an auto way to center an image like my logo (wich is a div class) in my header (div id) using padding for example?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •