divs op 100% scalen in Firefox - Softwareontwikkeling

woensdag 15 februari 2006 16:25

Acties:

Topicstarter

Ik ben bezig aan een simpele layout van een site met divjes, voorheen deed ik dit in tables maar ik probeer nu alles met div's te doen, het volgende probleem doet zich voor. Wanneer ik een element (bijvoorbeeld een table) op 100% scale, wordt in firefox en opera de hele breedte van de pagina gebruikt in plaats van de breedte van de div waarin het element staat. Ik heb hier een simpele testcode voor gemaakt:

code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <title>test</title>
  <style>
   body { margin: 0; padding:0; }
   .header { height: 160px; width: 100%; background-color: #996600; }
   .content { font-weight: bold;width: 100%; height: 500px; background-color: #003333; }
   .menu { float: left; width: 178px; height: 500px; background-color: #CCFFFF; }
   .vulling { float: left; background-color: #0099FF; }
  </style>
 </head>

 <body>
  <div class='header'>header</div>
  <div class='content'>
   <div class='menu'>hier komt het menu</div>
   <div class='vulling'>
    <table width="100%" border="1">
     <tr>
      <td>deze table moet de donkergroene div mooi opvullen, dus niet eronder komen te staan</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

De pagina staat ook hier, en komt door de validator.
In IE wordt de pagina weergegeven zoals bedoeld, in FF en Opera niet.
Wat is het probleem?

[ Voor 27% gewijzigd door plakbandrol op 15-02-2006 17:42 ]

woensdag 15 februari 2006 16:35

Acties:

JHS

Splitting the thaum.

Het probleem is waarschijnlijk dat IE het weergeeft zoals het níét bedoelt wordt, in plaats van andersom

. Overigens is het een stuk overzichtelijker als je de styling (de CSS) in een apart stukje / een aparte file doet, in plaats van het op elk element apart gaat toepassen. Ook is het gebruik van alléén maar divjes vaak niet goed, lees daarover bijvoorbeeld smurf language van mophor

.

Ik neem aan dat je met de donkergroene div de #003333 bedoelt? De reden dat de tabel daaruit springt, is dat je hem een float: left; meegeeft, waardoor hij uit de flow wordt gehaald

.

edit:

Overigens is je indenting enigzins verwarrend, het lijkt nu alsof de div met de table child is van de #ccffff div, terwijl die al afgesloten is.

[ Voor 13% gewijzigd door JHS op 15-02-2006 16:36 ]

DM!

woensdag 15 februari 2006 16:53

Acties:

Savantas

Overigens is een div een block-element, en zal dus (zonder ingrijpen mbv css) altijd volledig de beschikbare breedte pakken (hier dus van het div-element waar hij in zit, precies wat je wil dus!).

Woeps, te snel gelezen... Je tabel heb je op 100%
Maar zoals JHS al schreef, maak wat onderscheid tussen css en de rest:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <title>test</title>
  <style>
   body { margin: 0; padding:0; }
   .header { height: 160px; width: 100%; background-color: #996600; }
   .content { font-weight: bold;width: 100%; height: 500px; background-color: #003333; }
   .menu { float: left; width: 178px; height: 500px; background-color: #CCFFFF; }
   .vulling { float: left; background-color: #0099FF; }
  </style>
 </head>

 <body>
  <div class='header'>header</div>
  <div class='content'>
   <div class='menu'>hier komt het menu</div>
   <div class='vulling'>
    <table width="100%" border="1">
     <tr>
      <td>deze table moet de donkergroene div mooi opvullen, dus niet eronder komen te staan</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

Zo is het wat overzichtelijker. Als je een site hebt met meerdere pagina's (dynamisch of statisch) met dezelfde layout, dan is het veel handiger een los css-bestandje te maken. Dan hoef je maar op een plaats een wijziging aan te brengen en al je pagina's zijn aangepast.
Zie bijvoorbeeld het hier vaak aangehaalde www.handleidinghtml.nl voor meer aanpassingen die je kan doen.
Ik heb overigens hierboven alle position: relative weggehaald, het had hier geen functie (zeker niet als je de eerste al relatief neerzet).

[ Voor 125% gewijzigd door Savantas op 15-02-2006 17:13 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 15 februari 2006 17:05

Acties:

Boelie-Boelie

Misschien een idee om tutorials of voorbeelden van bestaande layouts te lezen resp. te bekijken. Om mensen verder te helpen een CSS-layout voor elkaar te krijgen, zijn er veel artikelen geschreven. Voorbeelden waar je wellicht wat mee kan:
www.456bereastreet.com/la...tandards/csslayout/2-col/
http://stijlstek.nl/demo/damascus/

Andere layouts kun je vinden via Google, bijv:
www.google.nl/search?q=css+layouts
www.google.nl/search?q=css+two+column+layouts

[ Voor 7% gewijzigd door Boelie-Boelie op 15-02-2006 17:07 ]

Cogito ergo dubito

woensdag 15 februari 2006 17:33

Acties:

plakbandrol

Topicstarter

JHS schreef op woensdag 15 februari 2006 @ 16:35:
Het probleem is waarschijnlijk dat IE het weergeeft zoals het níét bedoelt wordt, in plaats van andersom . Overigens is het een stuk overzichtelijker als je de styling (de CSS) in een apart stukje / een aparte file doet, in plaats van het op elk element apart gaat toepassen.

Dat snap ik, maar dit was alleen een test-file, nu kun je snel CSS weghalen/aanpassen, als het eenmaal werkt zet ik alles netjes in een stylesheet..

woensdag 15 februari 2006 17:34

Acties:

JHS

Splitting the thaum.

plakbandrol schreef op woensdag 15 februari 2006 @ 17:33:
[...]Dat snap ik, maar dit was alleen een test-file, nu kun je snel CSS weghalen/aanpassen, als het eenmaal werkt zet ik alles netjes in een stylesheet..

Zie de oplossing van Savantas, kan je nog steeds makkelijk je CSS aanpassen, terwijl het toch nog overzichtelijk is

.

DM!

woensdag 15 februari 2006 17:38

Acties:

plakbandrol

Topicstarter

JHS schreef op woensdag 15 februari 2006 @ 17:34:
[...]
Zie de oplossing van Savantas, kan je nog steeds makkelijk je CSS aanpassen, terwijl het toch nog overzichtelijk is .

Ok, maar hoe ik een div aan een class kan koppelen weet ik al, het ging me puur om die nested divs, als dat eenmaal werkt gooi ik de file toch weg

maargoed, ik heb die code van savantas even overgenomen, maar die veranderd niets aan het probleem zelf..

[ Voor 17% gewijzigd door plakbandrol op 15-02-2006 17:43 ]

woensdag 15 februari 2006 17:45

Acties:

JHS

Splitting the thaum.

plakbandrol schreef op woensdag 15 februari 2006 @ 17:38:
[...] maargoed, ik heb die code van savantas even overgenomen, maar die veranderd niets aan het probleem zelf..

In mijn (de) eerste reply staat volgens mij de oorzaak van het probleem. Savantas heeft die niet toegepast in het topic, dat kan je zelf denk ik wel doen

.

DM!

woensdag 15 februari 2006 17:49

Acties:

plakbandrol

Topicstarter

JHS schreef op woensdag 15 februari 2006 @ 17:45:
[...]
In mijn (de) eerste reply staat volgens mij de oorzaak van het probleem. Savantas heeft die niet toegepast in het topic, dat kan je zelf denk ik wel doen .

zie http://4aal.nl/temp/test.htm , in IE zet ie hem er nu onder, en bij firefox en opera renderd ie 'm nog niet helemaal 100%

[ Voor 24% gewijzigd door plakbandrol op 15-02-2006 18:11 ]