header 100% v/d pagina maken

Status
Niet open voor verdere reacties.
B

bartbh

Gebruiker
Lid geworden
1 jun 2001
Berichten
543
Is het ook mogelijk om een header plaatje uit te rekken tot 100% van de pagina? Het is niet erg als het plaatje wordt vervormd. Zelf heb ik nu een table bovenin staan, maar het is niet mogelijk om deze met IE op 100% te krijgen. (wil trouwens wel bij Firefox)
 
Alleen verticaal

<----> (zo dus)

Het originele plaatje is 600 breed en 126 hoog.
 
Geplaatst door XP_PC


Psst, dat is horizontaal :).
Klik om te vergroten...
Jah, klopt :o :o
Op het moment dat ik het bericht plaatste had ik het ook in de gaten, maar ik had geen tijd meer om het te veranderen want ik moest weg. :o
 
Je kan met css veel doen..

Door op deze pagina de margin en padding op 0px te zetten.. en in de tabel de cellspacing en cellpadding ook op 0 zal er geen rand meer zijn.

Daarna kan je de bovenste td 100% maken en de afbeelding als achtergrond instellen.

Succes
 
Hehe, ik ben niet zo'n held in dit spul :o
Kun je misschien een voorbeeldje maken?

De tabel heb ik nu wel op 100%, maar hoe krijg ik het voor elkaar dat het achtergrond plaatje dan wordt uitgerekt?
 
Laatst bewerkt:
Achteraf is een gewone afbeelding misschien toch eenvoudiger als dit geen probleem is :D

PHP: 
<html>
<head>
  <title>Titel</title>
  <style type="text/css">
    body {
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
      <td width="100%"><img src="plaatje.gif" border="0" width="100%" height="126"></td>
    </tr>
  </table>
</body>
</html>
 
Nah, het probleem is dat er een logo overheen moet.
Hoe kan ik dat het beste oplossen?
 
Een tijdje aan het prutsen en zoeken geweest :D

En css beschikt over de z-index.. dus in de diepte gaan werken, hierdoor kan je lagen over elkaar heen plaatsen:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Titel</title>
  <style type="text/css">
    body {
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
      <td width="100%" align="center">
         <div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;"><img src="achtergrond.gif" style="width: 100%;height: 126px" alt=""></div>
         <div style="z-index: 1; position: absolute;"><img src="logo.gif" border="0" alt=""></div>
      </td>
    </tr>
  </table>
</body>
</html>

:D

Vanwaar die lege regels? :confused:
 
Sorry, dat was ik vergeten erbij te vertellen.
Het logo moet gecentreerd boven komen, dat was mijn probleem.
 
Die wordt op deze manier ook gecentreerd toch?

Alles wat in deze td staat wordt gecentreerd, de bovenste div, met de achtergrond is 100% breed, dus dat zie je niet, maar de div met het logo wordt gecentreerd.

:)
 
Geplaatst door JPeetje
Postte je toevallig met Firefox ? :)
Klik om te vergroten...

yes.gif
:thumb: :D

[edit] En waarom zijn ze nu weg? :D [/edit]
[edit2] Ah.. in Firefox zijn ze er nog wel :D [/edit2]
 
Laatst bewerkt:
Geplaatst door Japie82
Een tijdje aan het prutsen en zoeken geweest :D

En css beschikt over de z-index.. dus in de diepte gaan werken, hierdoor kan je lagen over elkaar heen plaatsen:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Titel</title>
  <style type="text/css">
    body {
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
      <td width="100%" align="center">
         <div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;"><img src="achtergrond.gif" style="width: 100%;height: 126px" alt=""></div>
         <div style="z-index: 1; position: absolute;"><img src="logo.gif" border="0" alt=""></div>
      </td>
    </tr>
  </table>
</body>
</html>

:D

Vanwaar die lege regels? :confused:
Klik om te vergroten...

Hij wordt op deze manier niet bij mij gecentreerd.
Niet bij IE en niet bij FF
 
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body {
		border: 0px;
		margin: 0px;
		padding: 0px;
    }
</style>
</head>
<body>
	<div style="width: 100%; background-image:url(achtergrond.gif); height: 100px; left: 0px; top: 0px; position: absolute; z-index: 0;">
    <div align="center"><img  src=logo.gif" alt="" width="72" height="72" border="0">
    </div>
    </div>
</body>
</html>
 
Laatst bewerkt:
Bij mij wel, of misschien begrijp ik je bedoeling niet?

shot2.png
 
Laatst bewerkt:
Zie de bijlage, zo is het de bedoeling.

Blauw is de header afbeelding (die dus horizontaal wordt uitgerekt tot 100%)
geel is het logo dat in het midden van de pagina moet komen.
En rood is de content van de site.
 

Bijlagen

  • layout.jpg
    layout.jpg
    1,7 KB · Weergaven: 17
Met de code die ik gaf zou het toch moeten werken (zie het voorbeeld).
Alleen de content div staat er niet, maar die kan je zo toevoegen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan