Alignment question

This site is best viewed in a modern browser with JavaScript enabled.

ferdi9999

Hey all,

I am new to HTML/CSS and to this forum.
I want to make a simpel site to start with. But in the header of the page i want 2 pictures and some text and all should be in one line.

Now the part ii can't figure out:
The first picture needs aligne left then i want some text with align center and the last picture needs allign right.

Also a side question, the site is on my pc and im running it in Firefox to test but the top of the header has anathor .5 cm of white above it. Margin is 0px and padding is 0px. any suggestions on this one?

Thank you all for reading

cbVision

You should float your images and then center the text. Also, you want to apply a zero margin and padding to the body and html elements to remove the gap you're talking about. Here's a working example:
http://jsfiddle.net/DbVq2/

ferdi9999

thanks a lot i will try this

KirillTaylor

ferdi9999;1230441 wrote:
Hey all,

I am new to HTML/CSS and to this forum.
I want to make a simpel site to start with. But in the header of the page i want 2 pictures and some text and all should be in one line.

Now the part ii can't figure out:
The first picture needs aligne left then i want some text with align center and the last picture needs allign right.

Also a side question, the site is on my pc and im running it in Firefox to test but the top of the header has anathor .5 cm of white above it. Margin is 0px and padding is 0px. any suggestions on this one?

Thank you all for reading

It would be awesome if you could show the code.

ferdi9999

I have below in the body

<header>
	<div class="header"><img src="Pics/imageleft.jpg" alt="imageleft" class="alignleft" width="133px" height="100px"><H1>Titel<span class="nemo">Text</span></H1><img src="Pics/imgright.jpg" alt="imgright" class="alignright" width="133px" height="100px"></div>
</header>

and i use this css

.alignleft {
	float:left;
}

.alignright {
	float:right;
}

H1 {
	text-align:center;
}

The problem I'm still having is that the right picture go's to the second line.

Also i still have a white bar above my header (background header is yellow)
The CSS for the header:

header {
	padding-top:0px;
	margin-top: 0px;
	height: 100px;
	background-color: #CCFF33;
	color: #FF0000;
}

Hope you people can help me.

cbVision

Simply move the right image above the H1:

<header>
    <div class="header">
        <img src="Pics/imageleft.jpg" alt="imageleft" class="alignleft" width="133px" height="100px">
         <img src="Pics/imgright.jpg" alt="imgright" class="alignright" width="133px" height="100px">
        <H1>Titel<span class="nemo">Text</span></H1>

</div>
</header>&#8203;

ferdi9999

J bent geweldig Ook nog enig idee hoe ik mijn witte balk boven mijn header kwijt raak?

cbVision

As noted previously, I'm guessing your white bar is coming from the default padding on the body and html tags. Try adding this:

html, body {margin: 0; padding: 0;}