[CSS] indeling van afbeeldingen in header

Door Ivo K op 14-03-2009 15:09

2.665 views

Hallo PHPhulpers

Ik was bezig met een simpele header op het moment dat ik voor dit probleem kwam:
de afbeeldingen ( de header ) moeten de hele pagina vullen, maar aangezien mensen een andere resolutie kunnen hebben moet het dus met * %. Daarnaast wilde ik dat er rechts een speciaal stuk staat en links een speciaal stuk staat.
Het probleem is dat het middenstuk, of terwijl de afbeelding die zich herhaalt om de pagina te vullen, het rechter stuk wegduwt.
iemand ideeën ?

Alvast bedankt,

Ivo

voorbeeld: http://img509.imageshack.us/img509/4709/prtsrn.png

CSS:


.statusbar
{
	height: 90px;
	width:  100%;
}
.statusleft
{
	float: left;
	height: 90px;
	width:  407px;
	background: url('/design/statusleft.png');
}
.statusright
{
	float: right;
	height: 90px;
	width:  390px;
	background: url('/design/statusright.png');
}
.statuscenter
{

	height: 90px;
	width: 100%;
	background: url('/design/statuscenter.png');
}

Jesper Diovo

14-03-2009 16:12

Waarom niet de afbeelding aan een div meegeven, en in die div de linker en rechterkant zetten en positioneren?


<div class="center">
  <div class="left">
     links
  </div>
  <div class="right">
    rechts
  </div>
</div>

Of begrijp ik je nu verkeerd? Je legt het namelijk anders uit dan je op je plaatje laat zien (waar ik al helemaal niks van snap).

Pieter van Linschoten

14-03-2009 18:02

Je hebt het waarschijnlijk zo:


  <div class="statusbar">
      <div class="statusleft"></div>
      <div class="statuscenter"></div>
      <div class="statusright"></div>
 </div>

Door de width:100% zal statuscenter altijd te breed zijn, om statusright op de regel toe te laten.

Probeer dit eens:


  <div class="statuscenter">
      <div class="statusleft"></div>
      <div class="statusright"></div>
      <div style="clear:both;font-size:1px;"></div>
 </div>

Misschien is het handiger als je de div indeling die je in je html gebruikt ook post.

Ivo K

14-03-2009 19:23

@Jezpur

Ik geef toe dat mijn uitleg idd onzin was... was een beetje moe :-)

@Lapidi

Stom dat ik niet zelf aan dat omdraaien dacht. Het werkt nu gewoon goed.
bedankt ;-)

Reageren

Inloggen om te reageren