elastische achtergrond

[jeel2008]

hallo, reeds de hele dag probeer ik het volgende te verwezenlijken:

• een achtergrond die schaalbaar is. gecentreerd.
  dus als iemand een grotere of kleinere monitor heeft blijft de achtergrondimage toch mooi in beeld.

• daar overheen (een divlaag? voor) het logo. gecentreerd.

• daaronder de content: het menu links + rechts tekst. de div waar dit in ligt is ook gecentreerd. de tekst zelf is links uitgelijnd.
  ook dit ligt dus allemaal op de achtergrondlaag. content , dus menu en tekst, wordt 950px breed.
  

ooit kreeg ik dit voor elkaar in www.vlinderkas.com
maar die html is een wat rommelig, ondanks het feit dat ik zelfs als javascript extern heb gemaakt. zo is er bv nog een tabel waar ik vanaf wil. maar elke keer als ik die tabel probeer te vervangen door een div loopt een na een tijdje in de soep.
maar dat is dus wat ik wil: alleen nog css, geen tabel. maar toch hetzelfde resultaat als op vlinderkas.

 

[jeel2008]

gelukt?

hallo, het lijkt gelukt. zie: http://www.jeelsites.nl/test2.html

echter, het vreemde was dat ik, zodra ik de opdracht text-align left gaf dat hele divje naar de linkerkant schoof. maar toen ik m op de 'echte' server testte, dus niet local, toen was dat probleem blijkbaar ineens opgelost.
nog ff snel IE testen...
kijk, daar gaat het dus helemaal de mist in, net als op mn local server.
wat heeft IE nodig om dat divje net als in firefox gewoon onder het logo te krijgen?

 

[jeel2008]

gelukt

volgens mij is het nu okee. behalve in IE6 dan, maar who cares.

http://www.jeelsites.nl/test5.html

de truc was display: block als ik het me goed herinner.
wat ik niet voor elkaar krijg: iedere keer als ik de elastische achtergrond uit de html wil rukken loopt het helemaal fout.
nu staat er :

align="center" width="100%" height="100%" alt="" title=""

maar zodra ik er een cssregel van maak, zelfs een style als style="width: 100%" etc etc loopt het spaak.

 

[grumbkow]

volgens mij is het nu okee. behalve in IE6 dan, maar who cares.

http://www.jeelsites.nl/test2.html

de truc was display: block als ik het me goed herinner.
wat ik niet voor elkaar krijg: iedere keer als ik de elastische achtergrond uit de html wil rukken loopt het helemaal fout.
nu staat er :

align="center" width="100%" height="100%" alt="" title=""

De Height en Wisdth attributen binnen een image tag kunnen geen % bevatten. Daarom moet het in een .css of style="height: 100%"

maar zodra ik er een cssregel van maak, zelfs een style als style="width: 100%" etc etc loopt het spaak.

 

[jeel2008]

100%

hallo grumbkow,
ja, dat zou je denken. maar als dat zo zou zijn zou die 100% in de imagetag dus geen effect hebben maar dat heeft ie wel. kijk maar hier
1. code in imagetag:
http://www.jeelsites.nl/test5.html
zo is het okee

2. code eruit gehaald en in divtag gezet
http://www.jeelsites.nl/test5b.html
zo is het niet okee.

de achtergrondimage gaat een eigen leventje leiden en zo groot worden als ie eigenlijk is. (en hij is zo groot opdat grote schermen geen rafelig plaatje krijgen bij uitrekken). bovendien krijg je zo een lelijke tweede scrollbalk rechts.

 

[grumbkow]

Bij mij worden de codes dan niet gevalideerd maar misschien komt dat omdat ik alles XHTML Strict laat gevalideerd wil hebben.

Die scrollbalken etc komen overigens omdat de HTML/CSS in je website dusdanig geschreven is dat je dit eigenlijk zelf hebt veroorzaakt.

Sowieso raad ik aan de pagina even helemaal opnieuw opbouwen, ook om er wat van op te steken