Zonder overlapping maar met verschuiving

Door Jurgen B op 25-10-2006 12:46

446 views

Hallo,

Ik heb een laag die ik footer noem maar zodra de content laag groter wordt dan daar staat dan gaat de foto bijvoorbeeld over het menu heen.

Ik wil graag dat zodra de content laag groter wordt het menu naar beneden zakt.

Wie kan/wil me daar bij helpen?

Het script:


html, body, tr, td {
		text-align: justify;
	font-family: arial;
	font-size: 0.9em;
	color: #eee;
	background: #333;
}

#werklaag {
  	background: #333333;
	position: absolute;
	width: 780px;
	height: 420px;
	top: 50%;
	left: 50%;
	margin-left: -390px;
	margin-top: -210px;
}

#werklaag #footer {
	position: absolute;
	bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #333;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-size: 0.9em;
	font-style: italic;
	word-spacing: 20px;
}

#footer a {
	text-decoration: none;
	color: #eee;
}
#footer a:link {
		color: #eee;

}
#footer a:hover {
		color: #eee;

}
#footer a:active {
		color: #eee;
}


#content a {
	text-decoration: none;
	color: #eee;
}
#content a:link {
		color: #eee;

}
#content a:hover {
		color: #eee;

}
#content a:active {
		color: #eee;
}

#header {
	position: absolute;
	width: 778px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -389px;
	margin-top: -209px;
	background: url('gfx/logo.jpg');
	background-repeat: repeat-y;
	background-position: center center;	
}

#content {
	position: absolute;
	width: 778px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -120px;
	margin-left: -389px;	 
}

.afbeeldinghome { 
 	float: left;  
	width: 250px; 
	height: 299px;
	margin-right: 10px;  
	background: url('gfx/dame.jpg');
	background-repeat: repeat-y;
	background-position: center center;	
}

.s2 { 
 	background: #333; 
	margin-right: 10px; 
	line-height: 20pt
	 }

Jan Koehoorn

25-10-2006 12:52

Op mijn website werkt dat precies zo: www.jankoehoorn.nl

Kijk maar ff in de CSS hoe ik het gedaan heb. Het is namelijk best ingewikkeld om het cross-browser te krijgen.

Kalle P

25-10-2006 13:18

Liqiud layout...

Je kan simpeler doen door je achtergrond plaatje of kleur te repeaten. Je hebt ook een js oplossing. De faux columns:

Vb:

background: #fff url(repeat.gif) repeat;

bg_kleur_pixel.gif is dan 1x1 pixel van een kleur die je achtergrond kleur is.

Meer uitleg css:
[google]faux columns[/google]

Voor js oplossing:
http://www.killersites.com/blog/2006/matching-div-heigths/
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

Jurgen B

25-10-2006 13:44

Jan, wat ik bedoel staat geloof ik niet op jou site.

Ik moet een laag hebben die onder een andere laag zit en daar ook blijft wat er ook met de veranderende laag gebeurd!

Kalle P

25-10-2006 13:54

dan moet je werken met position:absolute;
Moet die laag ook nog in beeld blijven?
een z-index aan toevoegen

div#laag {
position:absolute;
width: 200px;
height: 500px;
z-index: 2;
}

Jurgen B

25-10-2006 14:15

Met die z-index erbij heb ik er dit van gemaakt:

#werklaag #footer {
position: absolute;
bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
background-color: #333;
width: 100%;
z-index: 2;
text-align: center;
font-family: arial;
font-size: 0.9em;
font-style: italic;
word-spacing: 20px;
}

Nu geeft ie die helemaal vast weer. Boven de afbeelding dus nu staat het menu over de afbeelding heen! ;) En niet eronder! :P

Jurgen B

25-10-2006 14:18

Voorbeeld:

http://img47.imageshack.us/img47/9799/voorbeeldkz8.jpg

Kalle P

25-10-2006 14:43

Dan geef je de de img een hogere z-index. zo:

img{
z-index:3;
}

Als je nog meerdere images gebruikt op je pagina, kan je beter een class omgeven waar je je plaatje neer want dan krijgen alle images z-index: 3; (nu is dat in dit geval niet zo erg maar oke)

img.image{
z-index:3; /* het plaatje met de class="image" krijgt nu z-index:3;*/
}

Jurgen B

25-10-2006 15:21

Dat maakt geen verschil ik heb het gedaan.

Jurgen B

25-10-2006 15:24

Als ik van de laag footer relative maak komt ie boven het logo te staan.

Boven de werklaag dus! Maar daar moet ie juist onder! Valt daar misschien iets mee te regelen?

Kalle P

25-10-2006 15:52

Oh hahaha zo onder, ik nam het te letterlijk.

Die z-index is dan niet nodig.

Met position absolute plaats je iets ergens vast op het scherm, dit kan je doen wanneer elke afbeelding de zelfde hoogte heeft, maar dit zal wel niet.
Zet eens tussen je div van de image en het menu

<br style="clear:both;" />

edit:
als je die br shizzel doet moet je dat absolute wegdoen...

Reageren

Inloggen om te reageren