Vertical align text

[Hajduk]

I am messing around with my header at www.rodoslovlje.com/beliorao

It seems I cant get the text to properly be aligned vertically. I tried using margins but it pushes everything down. The document almost completely validates but I think some other CSS parts are messing things up. Any tips on how to do this in this layout are more then welcome.

[Paul O'B]

Hi,

First error is that you have defined a class of .texter but you have used an id in the html

You should use semantic markup for your header which would really be an h1. You have a div with an id of hdr and then some break tags and then a nested div if .texter and then more break tags and then p tags.

This what you have:

<div id="hdr"><img src="http://www.rodoslovlje.com/beliorao/images/shd_headcoa1.gif" alt="White Eagle"  /> 		       <div id="texter"><p>	  <br />Српско хералдичко друштво "Бели Орао"<br /></p></div>         </div>

and it could be simplified to this.

 <h1 id="hdr"><img src="http://www.rodoslovlje.com/beliorao/...d_headcoa1.gif" alt="White Eagle" />Српско хералдичко друштво "Бели Орао"</h1>

CSSS:

#hdr {
 height:100px;
 background-image: url("http://www.rodoslovlje.com/beliorao/images/bckH1.gif");
 color: #333333;
 margin: 0;
 padding: 0;
 font-size:25px;
line-height:100px;
}

The line-height:100px will ensure the text is central withn the 100px high div ( as long as you don't want the text to wrap etc)

Hope that helps

[Hajduk]

THnx Paul that helps. I didnt know that about the line-height. See those are nice interesting things, I learned something new. Thnx.

[Hajduk]

I have stumbled into another problem. When using FF the white background in the bodyblock is missing most likely due to the blocks I added. In IE I get a nice white space that pushes the content down. Are these one and the same or am I looking at something else?

[Tyssen]

Add overflow: hidden to #bodyblock which forces FF (and other non-IE browsers) to expand to contain the floats.

[Hajduk]

Thnx, so if the overflow is hidden it forces the FF and other browsers to expand. But what is causing the big white space in the content part? I am trying to go deeper into understanding CSS, I have 1 error left in the html but I fail to see what is causing that big whitespace. Is it the combining of different CSS elements or HTML that is causing this and how can I prevent this in the future when I design?

[Paul O'B]

Hi,

It's the 3 pixel jog in ie that is causing the content to drop because it won't fit in the allocated space because of the 3 pixels that ie adds to it. See the faq on floats for a long explanation on the 3 pixel jogs and on why you need to clear floats.

The simple answer to the 3 pisel jog in a two column fixed width layout is just to float both columns and then there is no bug to get in the way.

#cont {
 width:495px;
 background:#ffffff;
 color: #333333;
 border:solid #000000; 
 border-width:0 0 0 1px;
 text-align:left;
 padding: 4px;
float:right;
 }
.right_left {
 float: left;
 width: 47%;
 padding: 2px;
 background: #ffffff url(http://www.clansunited.net/images/corner.gif) no-repeat bottom right;
 color: #000000;
clear:left
}

(You also needed a clear:left on the above element also for another problem you had.)

Thnx, so if the overflow is hidden it forces the FF and other browsers to expand

When overflow hidden (or auto) is used it makes elements take account non-visible content (including floats) and stretches around them. However it's not widely supported so you may need other methods as well such as forcing "layout" in ie. In simple situations it works well though. read the faq for a complete run-down on this and other float behaviours and bugs.