Adding a margin to an image

Hey,

I was just about to write the single pages of the website I was working on. I then wanted to start the content with an image, but the image has to be beneath the header. The header is placed with position: absolute.

When I wanted to do the same with a site starting with a <p> text, the margin-top worked perfectly. Now as I wanted to use an image it doesn’t work for some reasons. I need to put a margin-top onto it because of the header which would cover the image.

I uploaded the website here. Go to ‘Preise’, thats how it is supposed to work. Then go to service and you will see whats wrong with it.

Thanks.

Hi,

I’m not quite sure if this is what you mean as you have no margin on the element called #image (if that’s the one you mean) but you would need to stop margins collapsing like this.

#content{padding-top:1px}
#image{margin-top:200px;}

Margins between adjacent elements collapse when there is nothing between them.

Thanks. I added the padding and it works now.
But there is another thing wrong now. I built a 2x3 table out of featurelistitem classes and wanted to place a p underneath it. Somehow the margin-top of the #calltext div isn’t working. Also, Safari says that the whole table is in the p.

Thanks!

Have you validated your HTML? Missing tags can cause malfunctions like that. Just a thought.

You can check the website in the link I posted in the first post.
The first lines of code look like this. When I put the DOCTYPE as the first line my code is broken then.

<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="de">
<!DOCTYPE html>

You probably want to lose the html xhtml declaration. in any case you shouldn’t have more than one.

Check this

abnd see what you can do with it.

When you put the DOCTYPE first and the layout “breaks”, then the code is indeed broken and needs to be fixed. The doctype declaration must be first.

<!DOCTYPE html>
<html lang="de">

Thanks for the answers I will try to fix the layout with the Doctype corrected.

Still don’t see why this hasn’t been changed yet in the html language, could have been done way more easily. [Atom][1] isn’t even recognizing it as code.

Thanks!
[1]: http://www.atom.io

I can’t talk about Atom or the future of the doctype declaration, but I can confidently say that if you want cross-browser compatibility, compatibility with devices for accessibility, and backwards compatibility with earlier browsers, a very good measure of standards compliance is required.

When you code for the bleeding edge, some devices will be excluded.

I have to excuse the long time of not answering but I was on vacation in Austria for 2 weeks.

I tried to fix the layout things with the doctype set correctly. Except of one thing I fixed all the problems. Its about the hover-line, that has to appear beneath the navigation item and not above. I would be glad if someone had an idea how to fix this.
Thanks!

Uploaded here.

You have omitted the unit for bottom:55;. Co-ordinates without units will be treated as zero or ignored.

.nav a:after{bottom:55px;}

1 Like

Unrelated.

It would be a good idea to give this page another check with the HTML validator: http://validator.w3.org/

There are two <html> tags at the top of the page; there should only be one.
Line 2 <html xmlns="http://www.w3.org/1999/xhtml"> is unnecessary.

Lines 31 and 33 have duplicate IDs “call”. Duplicate IDs are not valid. An ID can only exist once on a page.

Cheers.

1 Like