[html] links en rechts verschillend bij 100% width

[Verwijderd]

Ik ben bezig met een site te maken op dit moment en tot dusver werkt hij in alle browsers die ik op mijn pc en mac heb (oa iexplorer, mozilla firefox, safari, macExplorer, etc etc) alleen met opera krijg ik een bugg, die ik niet weg krijg.

De site bestaat in het heel simpel uit het volgende:

1 header (100% width)
2 Content pagina (750px width)
3 Footer (100% width)

Makkelijk te maken dus. Maar het content stuk begint ook al meteen bovenaan, dus eigenlijk steekt de header aan 2 kanten uit (background) bij de 750px width bovenkant, deze stukken 'groeien' naarmate de resolutie van de bezoeker groter wordt.
Dit zou ook makkelijk te maken zijn als de uitstekende stukken gelijk waren (bijv door een background met daarop gewoon de content table ofzo). Maar de background is links en rechts verschillend.

Ik heb het volgende geprobeerd en dat werkt dus in alle browsers goed behalve in opera.

Table (plz geen discussie over table vs css) op 100% met 3 columns en 1 row.
Hierin geef ik de middelste cel 750px width mee en de linkse en rechtse cel geen width en geef hier de (td) background mee (links en rechts dus verschillend).
Gevolg in alle browsers (en zelfs opera) is dat de content mooi gecentreerd is (zoals de bedoeling) en links en rechts van het content stuk staan verschillende achtergronden die groeien/krimpen zodra de resolutie groeit/krimpt.

Probleem is nu ik verder gebouwd heb en de gehele content heb gemaakt, opera de achtergrond aan beide kanten ineens ignored en dus alles gewoon naar links toe gooit.

Ik heb al vanalles geprobeerd. De linker en rechtercel opvullen met 100% width spacers etc etc. teveel om op te noemen.

De vraag is dus, weet iemand een browser onafhankelijke oplossing om in het kort links en rechts verschillende achtergronden te hebben, met daarop in het midden de content part?

Ik ben altijd voorzichtig met het linken naar de site omdat sommige mensen dit altijd als spam ervaren. Wanneer iemand de link wilt zien post dat dan even, dan post ik de link (vannavond).

code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td background="images/leftback.gif" valign="top">(spacer)</td>
    <td width="750" valign="top">CONTENT</td>
    <td background="images/rightback.gif" valign="top">(spacer)</td>
  </tr>
</table>

[ Voor 7% gewijzigd door Verwijderd op 03-10-2004 13:11 ]

[Th30]

Zie deze thread:

[rml][ xhtml1.1] centreren table/div[/rml]

Het komt erop neer dat je in CSS aan de main table "margin: 0 auto;" geeft.

Succes

[Verwijderd]

de breedte 750px en 100% conflicteren (het kan alleen als 100%==750px)
je kan het oplossen door links en rechts van je content cell een lege cell aan te maken of een extra table in te voegen in de content cell met een breedte van 750px

code:

<table width="100%">
<tr><td>
[header]
</td></tr>
<tr><td>
<table width="750" align="center"><tr><td>
[content]
</td></tr></table>
</td></tr>
<tr><td>
[footer]
</td></tr>
</table>

[ Voor 39% gewijzigd door Verwijderd op 03-10-2004 17:07 ]

[Verwijderd]

th30 > Ik ben de CSS oplossingen nu aan het proberen.

RoadRunner84 > Zo zou het idd kunnen werken, alleen heb je dan geen mogelijkheden in links en rechts verschillende backs.

[Verwijderd]

Ik heb uiteindelijk alles opnieuw ingedeeld en het werkt, nou nog uitvinden waarom het nou wel in elke browser werkt want ik heb in principe alles op precies dezelfde manier ingedeeld..

Bedankt allemaal voor de suggesties.