CSS float and absolute height

gigafare · #1 (**permalink**) 06-13-07, 02:49 AM

In CSS:

If you create a div for the header and specify the height and a background image, the actuel height is only as "high" as the text in it.
How can you make the height absolute in pixels?
What I mean is this: http://www.kimwebsites.com/kim/ (you see the blue table headers, the underlaying picture is actually a little bigger than that).

Second of all:
I put everything in a div called center and specified that container to be text-align:center
And then the containers in between,they're all text-align: left.
But; appareantly Opera and Mozilla handle these differently than Internet Explorer.

For the left alignment of a container I used float: left; and float: right;
Again, this turns out just fine in Internet Explorer but not at all in Opera,...

Can someeone explain a few actual general css settings to me for:
centering a page but left aligning all text in it?
Creating two blocks or containers next to each other, one left the other one right.
Defining an actual precise height for a container with a background image.

Thanks,
Kim

UnrealEd · #2 (**permalink**) 06-13-07, 03:25 AM

i'm not sure if it's gonna work, but you can try this to center a div:

css Code:

mydiv{
  margin:0 auto;
}

to create to containers next to each other, you will have to specify the width of each container:

css Code:

div_lef {
  float:left;
  width:50%;
}
 
div_right {
  float:right;
  width:50%;
}

to define the exact height, use the "height" option:

css Code:

mydiv{
  height:100%;
}

gigafare · #3 (**permalink**) 06-13-07, 01:02 PM

actually, I just found out the trick is:

CSS Code:

margin-left: auto; 
margin-right: auto;
width: 796px;
text-align: left;

for your center div, and a text-align: left; for your body css

Still afwul in Firefox though...

My css file is:
http://www.kimwebsites.com/kim/style.css

gigafare · #4 (**permalink**) 06-14-07, 02:56 PM

Still got a few problems in Firefox: top images not without spacing, footer not at all underneath (is the border part valid css?).

The alignment is fixed, I was confused whether to add the padding number or not.

HTML

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kim Websites: Open Platform voor Professionele Websites</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="center">


<img src="img/logo.jpg" alt="Logo Kim Websites"><img src="img/english.jpg"><img src="img/webcms1.jpg"><br /><img src="img/bedrijfswebsitecms995.jpg" alt="Logo Kim Websites"><br /><img src="img/tutorialstoolsencms.jpg" alt="Logo Kim Websites">

<h1><strong>Wat maakt ons uniek?</strong></h1>
<p class="tekst">Kim Websites innoveert door zijn software, tools en tips gratis weg te geven. Enkel voor maatwerk betaal je...de laagste prijs.<br />
<a href="#" class="bluelink">Maak kennis met commerciële open-source</a></p>

	
	<div class="homeleft">

<h2><strong>PHOTOSHOP</strong></h2>
<h1><strong>Tips voor een goede ranking</strong></h1>
<p class="datum">29/03/2007</p>
<p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif">

<br />

<h2><strong>PHOTOSHOP</strong></h2>
<h1><strong>Tips voor een goede ranking</strong></h1>
<p class="datum">29/03/2007</p>
<p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif">

<br />

<img src="img/bouwmeeprogrammeurs.jpg">

<h2><strong>PHOTOSHOP</strong></h2>
<h1><strong>Tips voor een goede ranking</strong></h1>
<p class="datum">29/03/2007</p>
<p class="tekst">Er zijn enkele methodes die iedereen kan toepassen om de ranking of positie van zijn website te verbeteren bij zoekmachines. De tips die ik wil geven zijn geldig voor...</p><img src="img/knop.gif">

<br />
<script type="text/javascript"><!--
google_ad_client = "pub-3334368190667923";
google_alternate_color = "FFFFFF";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text";
//2007-06-12: KimWebsites
google_ad_channel = "3547524400";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "20BC0F";
google_color_text = "000000";
google_color_url = "1A7DE8";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

	<div class="homeright">
		
		<div class="tabelkop">
			<p class="kleinwit"><strong>Nieuwe Templates (Alle templates)</strong></p>
		</div>

<div class="templates">
	<br />
<div class="templatelinks">
<a href="gallery.php"><img border="0" src="img/template_001.jpg" /></a> <br />
<a href="gallery.php"><img border="0" src="img/winkelkarretje.jpg" /></a> <a href="gallery.php"><img border="0" src="img/vergrootglas.jpg" /></a>
</div>
<div class="templaterechts">
<a href="gallery.php"><img border="0" src="img/template_002.jpg" /></a> <br />
<a href="gallery.php"><img border="0" src="img/winkelkarretje.jpg" /></a> <a href="gallery.php"><img border="0" src="img/vergrootglas.jpg" /></a>
	<br />
</div>




		</div>
		<br />	<br />
				<div class="tabelkop">
			<p class="kleinwit"><strong>Download Kim Website 1.0</strong></p>
		</div>
		<div class="tabel">
			<p class="tekst">
Content Management System gebaseerd op PHP en MySQL. Tal van functies: nieuws, columns, leden, online mailings, beveiliging, enquêtes,...
</p>
<p align="center"><img src="img/download.gif"></p>
<a href="#" class="bluelink">Wij hosten en installeren voor € 9,95/maand</a>

</div>

<br />	<br />
				<div class="tabelkop">
			<p class="kleinwit"><strong>Betaalde diensten</strong></p>
		</div>
		<div class="tabel">
			<p class="tekst">
> Professioneel ontwerp op maat<br />
> User-centered design<br />
> Zoekmachineoptimalisatie<br />
> Hosting<br />
> Beheer en onderhoud<br />
> Online mailings</p>
<br /><a href="#" class="bluelink">Een professionele site voor uw bedrijf slechts € 995</a>
</div>


</div>



<div class="footer">
<p class="tekst">&copy 2006-2007 VH Technology</p>
</div>

</div>

</body>
</html>

CSS

css Code:

body {
    padding: 0px;
    margin: 0px;
    text-align: center; 
}
 
h1 { 
    color: #1A7DE8; 
    font-family: arial; 
    font-size: 1.2em; 
    margin: 0px;
}
 
h2 { 
    color: #20BC0F; 
    font-family: arial; 
    font-size: 0.8em; 
    margin: 0px;
}
 
h3 { 
    color: #fff; 
    font-family: arial; 
    font-size: 0.85em; 
}
 
p {
    margin: 0px;
}
 
 
div.center {
    padding: 0px;
    margin-left: auto; 
    margin-right: auto;
    width: 796px;
    text-align: left;
}
 
.tekst {
    color: #000000;
    font-size: 0.75em;
    font-family: Arial;
    text-align: left;
}
 
 
div.home {
    margin: 0px;
    padding: 0px;
    width: 796px;
 
}
 
div.homeleft {
    width: 436px;
    margin: 0px;
    padding: 0px;
    float: left;
    text-align: left;
}
 
div.homeright {
    width: 360px;
    margin: 0px;
    padding: 0px;
    float: right;
    text-align: left;
}
 
div.tabelkop {
    width: 360px;
    height: 25px;
    margin: 0px;
    padding: 0px;
    background-image: url(img/tabelkop.jpg);
}
 
div.tabel {
    width: 360px;
    margin: 0px;
    padding: 0px;
    background-color: #ECEDEF;
}
 
.datum {
    color: #B8B8B8;
    font-size: 0.7em;
    font-family: Arial;
    text-decoration:bold;
}
 
.kleinwit {
    color: #FFFFFF;
    font-size: 0.85em;
    font-family: Arial;
    margin-left: 15px;
}
 
div.templates {
    width: 360px;
    height: 150px;
    margin: 0px;
    padding: 0px;
    background-color: #ECEDEF;
}
 
div.templaterechts {
    width: 150px;
    text-align: right;
    margin-right: 30px;
    padding: 0px;
    float: right;
}
 
div.templatelinks {
    text-align: right;
    width: 150px;
    margin: 0px;
    padding: 0px;
    float: left;
}
 
div.footer {
    border-top: 1px solid #4874D3;
    padding: 0px;
    width: 796px;
    text-align: right;
}
 
a.bluelink:link
{ color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;}
a.bluelink:active
{ color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;}
a.bluelink:visited
{ color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;}
a.bluelink:hover
{ color: 1A7DE8; font-family: arial; font-size: 1em; text-decoration: none; font-weight: bold;}

TwoD · #5 (**permalink**) 06-14-07, 04:08 PM

Wrap the top images in a <span> and set line-height to 0.

The footer needs to have the clear-attribute set (preferable to "both" or "left").
That will ensure that it stays clear of any floated elements on the page. That is, it doesn't place it self on the same "row" and instead jumps down to the next row of elements.

Take a look at http://www.positioniseverything.net/ or QuirksMode (link in my signature) for more info about all kinds of CSS quirks.

gigafare · #6 (**permalink**) 06-15-07, 10:56 AM

great, footer is fixed.

No luck with the images though...
Tried putting them in a span with zero: margin, padding and line-height but nothing

margin-top doesn't work in Firefox either?
And vertical-align doesn't seem to do anything either, for centering the white table heads on the right.

TwoD · #7 (**permalink**) 06-15-07, 03:13 PM

The images look fine to me in both IE and FF.
Before, there was a visible gap between them (line-height) but now there's no visible gap, except for the white line which is part of the image of course...

gigafare · #8 (**permalink**) 06-16-07, 04:42 AM

Yeah finally got it; i changed the strict doctype to transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I hope I'm not just "covering up" the defaults by lowering doctype standards?
Anyhow, both HTML and CSS turned out to be validated so I gues I shouldn't worry?

TwoD · #9 (**permalink**) 06-18-07, 07:28 AM

Transitional works fine, unless you really need strict (or want to show off your über skills as a web-programmer

) you don't have to use it.

gigafare · #10 (**permalink**) 06-18-07, 01:37 PM

I'm using strict now and it works with vertical-align: bottom;

No über skills here lol, not yet at least!!!!
Just trying to use open standards as much as I can.