Hoofdcategorieën

[RSS] [quick] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » divs op 100% scalen in Firefox

Topicacties

divs op 100% scalen in Firefox

Pagina: 1

Reageer Nieuw Topic

offline Geplaatst op woensdag 15 februari 2006 16:25

Acties:

Door: plakbandrol
Berichten: 802
Reg. datum: 29 juni 2002
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 <!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?

plakbandrol wijzigde dit bericht 15-02-2006 17:42 (27%)

Win XP SP2; Pentium 4 3GHZ,2GBDDR, Asus p4p800s-x, Matrox G550, Topower 350Watt | ondergetekende gaat deze vakantie bezig met paragliding!

offline Geplaatst op woensdag 15 februari 2006 16:35

Acties:

Door: JHS
Splitting the thaum.
Berichten: 8.041
Reg. datum: 20 augustus 2003
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.

JHS wijzigde dit bericht 15-02-2006 16:36 (13%)

DM!

offline Geplaatst op woensdag 15 februari 2006 16:53

Acties:

Door: Savantas
Savatar
Berichten: 2.081
Reg. datum: 11 december 2002
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!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).

Savantas wijzigde dit bericht 15-02-2006 17:13 (125%)

GoT Sequence3 I + II | Zou graag eens instant-graphic-designer willen testen...

offline Geplaatst op woensdag 15 februari 2006 17:05

Acties:

Door: Boelie-Boelie
Berichten: 409
Reg. datum: 19 november 2004
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...standards/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

Boelie-Boelie wijzigde dit bericht 15-02-2006 17:07 (7%)

Cogito ergo dubito

offline Geplaatst op woensdag 15 februari 2006 17:33

Acties:

Door: plakbandrol
Berichten: 802
Reg. datum: 29 juni 2002
quote:
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..

Win XP SP2; Pentium 4 3GHZ,2GBDDR, Asus p4p800s-x, Matrox G550, Topower 350Watt | ondergetekende gaat deze vakantie bezig met paragliding!

offline Geplaatst op woensdag 15 februari 2006 17:34

Acties:

Door: JHS
Splitting the thaum.
Berichten: 8.041
Reg. datum: 20 augustus 2003
quote:
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!

offline Geplaatst op woensdag 15 februari 2006 17:38

Acties:

Door: plakbandrol
Berichten: 802
Reg. datum: 29 juni 2002
quote:
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..

plakbandrol wijzigde dit bericht 15-02-2006 17:43 (17%)

Win XP SP2; Pentium 4 3GHZ,2GBDDR, Asus p4p800s-x, Matrox G550, Topower 350Watt | ondergetekende gaat deze vakantie bezig met paragliding!

offline Geplaatst op woensdag 15 februari 2006 17:45

Acties:

Door: JHS
Splitting the thaum.
Berichten: 8.041
Reg. datum: 20 augustus 2003
quote:
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!

offline Geplaatst op woensdag 15 februari 2006 17:49

Acties:

Door: plakbandrol
Berichten: 802
Reg. datum: 29 juni 2002
quote:
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%

plakbandrol wijzigde dit bericht 15-02-2006 18:11 (24%)

Win XP SP2; Pentium 4 3GHZ,2GBDDR, Asus p4p800s-x, Matrox G550, Topower 350Watt | ondergetekende gaat deze vakantie bezig met paragliding!

Pagina: 1

VNU Media logo Hosted by True

© 1998 - 2010 Tweakers.net - Alle rechten voorbehouden - Uw Privacy - Algemene Voorwaarden

Uitgever van:

Website van het jaar 2009