...

View Full Version : Noob question



steene
04-21-2011, 02:01 PM
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?

teedoff
04-21-2011, 02:11 PM
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.

steene
04-21-2011, 02:16 PM
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?

steene
04-21-2011, 02:20 PM
Actually using your code, it fails to center it

teedoff
04-21-2011, 02:25 PM
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.

steene
04-21-2011, 02:30 PM
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?!

teedoff
04-21-2011, 02:49 PM
Change your doctype to:


<!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 (http://validator.w3.org) 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.

teedoff
04-21-2011, 02:57 PM
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?

steene
04-21-2011, 03:01 PM
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...

http://www.logopedia.be/css/images/screen.png

teedoff
04-21-2011, 03:15 PM
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.

steene
04-21-2011, 03:19 PM
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?

Apostropartheid
04-21-2011, 03:20 PM
Change your doctype to:


<!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 (http://validator.w3.org) 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.

teedoff
04-21-2011, 03:25 PM
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?

Apostropartheid
04-21-2011, 03:30 PM
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.

steene
04-21-2011, 03:31 PM
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?

teedoff
04-21-2011, 03:35 PM
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.

Great. I do use xhtml strict for my sites. And I was just reading an article that explains just what you said. Again thanks for the clarification.


Steene, I just validated your document with xhtml strict 1.0 and if you add the /> to the stylesheet link it passes as well.

teedoff
04-21-2011, 03:37 PM
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?

You can center an image the same way, using margin:0 auto;

steene
04-21-2011, 03:38 PM
I mean vertically center

do i need to change my doctype?

steene
04-21-2011, 03:43 PM
Forget this post... i wasn't paying attention

steene
04-21-2011, 03:49 PM
:confused::confused:

OMFG... every change i make feels like a mistake :(

I'm thinking i'm not getting this yet :(

These margin things are crazy?

steene
04-21-2011, 03:56 PM
What is up with this?!

To correctly position my date i added another div class...

I needed to use negative values to set its place?

.date {

font-size: 15px;
font-family:"Arial",verdana,Sans-Serif;
color: #ffffff;
margin-top: -100px;
margin-left: 700px;
}

can someone please tell me from what point i'm setting the margins from?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum