login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Twee div's komen niet naast elkaar bij res 800x600

Offline siebje - 29/04/2009 20:03
Avatar van siebjeNieuw lid Goedenavond zo voor koninginnedag!

Voor het feest vanavond aanbreekt zou ik graag nog een probleempje oplossen. Omdat tabellen echt niet meer kunnen probeer ik CSS onder de knie te krijgen.

Het volgende probleem, ik heb twee div's (box1 en box2) die in resolutie 1024 prima naast elkaar komen, maar verander ik de resolutie naar 800x600 springen ze onder elkaar? Zie hier! het probleem.

Dit is mijn code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  5.  
  6. div.header {
  7. position: relative;
  8. top: 0px;
  9. left: 0px;
  10. width: 100%;
  11. background-color: green;
  12. height: 80px;
  13. }
  14.  
  15. div.menu {
  16. position: relative;
  17. top: 0%;
  18. left: 0%;
  19. width: 100%;
  20. padding: 5px;
  21. background-color: red;
  22. }
  23.  
  24. div.main {
  25. width: 70%;
  26. background-color: blue;
  27. float: left;
  28. }
  29.  
  30. div.home {
  31. padding-left: 5px;
  32. padding-right: 5px;
  33. padding-top: 5px;
  34. padding-bottom: 0px;
  35. }
  36.  
  37. div.box1 {
  38. width: 50%;
  39. background-color: pink;
  40. padding: 5px;
  41. float: left;
  42. }
  43.  
  44. div.box2 {
  45. width: 50%;
  46. background-color: green;
  47. padding: 5px;
  48. float: left;
  49. }
  50.  
  51. div.right {
  52. position: relative;
  53. top: 0%
  54. left: 0%;
  55. width: 30%;
  56. background-color: gray;
  57. padding: 0px;
  58. float: left;
  59. }
  60.  
  61. hr {
  62. margin: 2px;
  63. clear: both;
  64. }
  65.  
  66. div.box1 h1 {
  67. color: orange;
  68. }


Waarom gaat dit niet goed in 800 x 600, ligt het aan mijn css?

Groetjes Willem

18 antwoorden

Gesponsorde links
Offline Martijn - 29/04/2009 20:04 (laatste wijziging 29/04/2009 20:05)
Avatar van Martijn Crew PHP wat als je div 2 float: right geeft?

edit:
en anders zet je er een dus met position relative omheen, en daarin je divs met top: 0px; en left/right: 0px. Werkt ook.
Offline siebje - 29/04/2009 20:10 (laatste wijziging 29/04/2009 20:14)
Avatar van siebje Nieuw lid Div main zit om de div's 'home' 'box1' en 'box2'. Als ik float right geeft dan zit de div wel aan de goede kant, maar nog steeds niet ernaast. Dus dit is nog niet de oplossing.

Mijn html is als volgt (dan zie je wat er met de divs is gedaan):

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.  
  4. <link type="text/css" rel="stylesheet" href="style.css">
  5. </head>
  6.  
  8. <home>
  9.  <div class="header">DANCE DISCOVERY</div>
  10.  <div class="menu">HOME / PORTFOLIO / LINKS / CONTACT</div>
  11.  <div class="main">
  12.     <div class="home">crucilum v</div>
  13.     <div class="box1">ONZE MERKENtest kimi doeiodka</div>
  14.     <div class="box2">ONZE lief</div>
  15. <hr>
  16.  </div>
  17.  <div class="right">TEST TEST  </div>
  18.  
  19. </home>
  20. </body>
  21. </html>
Offline NataschaV - 29/04/2009 20:15 (laatste wijziging 29/04/2009 20:15)
Avatar van NataschaV PHP interesse Zijn ze niet telang dat ze niet naast elkaar passen? Door die padding!
Want je hebt 50% + 50% + 2x padding van 5px
Offline siebje - 29/04/2009 20:37
Avatar van siebje Nieuw lid Dat maakt helaas niet het verschil! Volgens mij telt ook alleen de margin, border width + div width (in dit geval 50%) mee voor de totale 'box breedte'. Of heb ik dat mis? Groetjes Willem

PS Reminder: in de resolutie 1024 is het design wel gewoon goed, maar bij 800x600 springen ze onder elkaar.
Offline NataschaV - 29/04/2009 20:46
Avatar van NataschaV PHP interesse Dus het heeft wel ergens temaken met de breedte, probeer een met beide 25% als ze dan goed staan (maar wel klein) is het dus in die 50% dan het niet naast elkaar past en moet je minder dan 50% doen.
Offline siebje - 29/04/2009 20:58
Avatar van siebje Nieuw lid maar ik wil juist dat ze beiden de hele ruimte vullen, ieders voor 50%, als ik twee keer 49 doe dan hou ik dus ruimte over en dat wil ik eigenlijk niet... en is het niet raar dat het in 1024 wel goed gaat?
Offline NataschaV - 29/04/2009 21:02
Avatar van NataschaV PHP interesse Ja, met welke browser test je het?
Offline siebje - 29/04/2009 21:07
Avatar van siebje Nieuw lid IE...
Offline NataschaV - 29/04/2009 21:11
Avatar van NataschaV PHP interesse Heb je misschien een voorbeeld? of test het met FF.
Offline siebje - 29/04/2009 21:51
Avatar van siebje Nieuw lid Zie de link in het eerste bericht (hier!)
Offline NataschaV - 29/04/2009 22:46 (laatste wijziging 29/04/2009 22:57)
Avatar van NataschaV PHP interesse De css:
http://www.plaatscode.be/136279/
De html:
http://www.plaatscode.be/136277/

Hopelijk klopt dit, bij firefox wel, alleen de height moet je nog zelf kiezen
Offline siebje - 29/04/2009 23:25
Avatar van siebje Nieuw lid Helaas, in IE komt het bij deze nu ook bij 1024 onder elkaar. Ik snap het niet hoor... de width van een 'box' word toch bepaald door border, margin en de breedte van een element. Dan maakt 2 x 50 gewoon 100 en zou het gewoon naast elkaar moeten komen te staan, ook in 800 x 600... ik wil graag dat het zoiezo klopt in IE. Groetjes Willem
Offline NataschaV - 29/04/2009 23:26
Avatar van NataschaV PHP interesse De border, margin en padding worden niet meegetelt in die 50%
Offline markla - 29/04/2009 23:35
Avatar van markla PHP interesse Misschien heb je hier wat aan, zelf heb ik HEEL veel aan deze tutorial gehad snel duidelijke IE en FF verschillen worden er in behandeld

http://www.web-garden.be/cursushtml/hoofdstuk4.pdf
t/m
http://www.web-...stuk11.pdf
Offline siebje - 29/04/2009 23:43 (laatste wijziging 29/04/2009 23:53)
Avatar van siebje Nieuw lid IK WORD HELEMAAL GEK, ZOALS JE HIERONDER LEEST DACHT IK DE OPLOSSING TE HEBBEN MAAR LEES AUB EVEN VERDER.

Voor de laatste post, daar ga ik zeker nog aandacht aan besteden, voor nu, de oplossing, zelf bedacht :-).

Ik had immers het volgende in mijn code om de standaardbrowserinstellingen teniet te doen:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }


Ik heb daar nu aan toegevoegd:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. border-width: 0px;
  5. }


En daarmee is het probleem opgelost :-), blijkbaar heeft de browser ook een soort standaar border-width, hoewel ik natuurlijk nog nergens een border had opgegeven, blijft erg raar (in mijn ogen), maar goed. Hoe denken jullie daar over?

Groetjes Willem

PS en geef ik nu in de div's een border op, maakt niet uit hoeveel, dan blijven ze toch naast elkaar :-), puur en alleen door die browserinstelling blijkbaar te omzeilen met border-width: 0px.

OKEY, IK DACHT DAT IK ER WAS, NU IS DE SITUATIE PRECIES OMGEKEERD!!! NU IS HET DOOR DIE OPLOSSING HIERBOVEN GOED IN 800X600 MAAR STAAN ZE ONDER ELKAAR BIJ 1024......... IK SNAP ER STEEDS MINDER VAN HOOR!
Offline markla - 30/04/2009 09:50
Avatar van markla PHP interesse
Juist! Die margin, padding en border-width leveren problemem op.
IE gaat daar fout/anders me om dan FF. IE heeft een eigen interpertatie van 0 of NULL

Daarom zet ik standaard de waarde op nul
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin: 0px 0px 0px 0px;
  2. padding: 0px 0px 0px 0px;
Offline Martijn - 30/04/2009 12:47
Avatar van Martijn Crew PHP gewoon margin: 0px; is voldoende hoor, doet hetzelfde.
en border-width: 0px; -> border: 0px;
Offline siebje - 02/05/2009 10:17 (laatste wijziging 02/05/2009 10:18)
Avatar van siebje Nieuw lid @ DeviourSoul, liever kort inderdaad als het ook zo werkt .

De vraag is echter nog steeds waarom hij de CSS bij verschillende resoluties anders interpreteert. Ik snap nog steeds niet waarom in de ene resolutie ze onder elkaar komen en bij de andere naast elkaar (zoals hoort). Zoals verschillende mensen zeggen kan ik ipv 50% wel 49% nemen, maar zo wil ik het design niet omdat er dan ruimte over blijft.

Citaat:
De border, margin en padding worden niet meegetelt in die 50%


En zoals hierboven beschreven, een padding geeft aan hoever ik de tekst van de kant af wil hebben, ik snap niet waarom dit invloed zou moeten hebben op de breedte van de div, die blijft gewoon 50%, daar ontstaan helemaal geen problemen.

Dit heb ik echter nog weggelaten in onderstaand voorbeeld.

Ik heb de code geminimaliseerd:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  5.  
  6. div.header {
  7. width: 100%;
  8. background-color: white;
  9. height: 80px;
  10. }
  11.  
  12. div.menu {
  13. width: 100%;
  14. padding: 5px;
  15. background-color: red;
  16. }
  17.  
  18. div.main {
  19. width: 70%;
  20. background-color: blue;
  21. float: left;
  22. }
  23.  
  24. div.box1 {
  25. width: 50%;
  26. background-color: pink;
  27. float: left;
  28. }
  29.  
  30. div.box2 {
  31. width: 50%;
  32. background-color: green;
  33. float: left;
  34. }
  35.  
  36. div.right {
  37. width: 30%;
  38. background-color: gray;
  39. padding: 0px;
  40. float: left;
  41. }
  42.  
  43. hr {
  44. clear: both;
  45. }


En zo wordt het geinterpreteerd: (FOUT IS ONDER ELKAAR)

800 x 600 FOUT
1024 x 768 GOED
1152 x 864 GOED
1280 x 720 FOUT
1280 x 1024 FOUT

Wijzig ik echter dit stukje css met de border erbij:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. border: 0px;
  5. }

Dan is het als volgt:

800 x 600 GOED
1024 x 768 FOUT
1152 x 864 HELEMAAL FOUT (OOK HET GRIJZE DIV RIGHT KOMT NU ER ONDER TE STAAN.
1280 x 720 GOED
1280 x 1024 GOED

Zoals jullie misschien ook opvalt, is dit dus precies het tegenovergestelde. Doe ik iets mis, want ik wil uiteraard dat alles op GOED komt te staan.

Groetjes Willem
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.225s