Toon posts:

[html/css] div block gedraagt zich anders in firefox

Pagina: 1
Acties:

dinsdag 3 januari 2006 19:27

Acties:
  • Pendaco
  • Registratie: Augustus 2003
  • Laatst online: 20:46

Pendaco

Vogon Poetry FTW!

Topicstarter
Hey mensen, ik ben weer eens op een voor mij onbekend probleem gestuit.

Ik ben bezig met een eigen startpagina, omdat de oude wel aan vervanging toe was.
Meestal test ik pagina's eerst in internet explorer en vervolgens in firefox, ik weet dat anderen het liever andersom doen maar dat terzijde.

En aangezien plaatjes meer zeggen dan praatjes;

internet explorer (goed)
Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/ie-goed.jpg

firefox (fout)
Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/firefox-fout.jpg

Zoals jullie zien, wilt die radio box in firefox niet op de juiste plaats staan.
Ik heb gewerkt met floats en margins gebruikt om de verschillende blokken op hun plaats te krijgen.

html
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body>
<div id="layout">

<div id ="left">
  </div>

<div id ="right">
 </div>

<div id="searchbar">
</div>

<div id="radio">
   </div>

</div>
</body>


css
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

#layout {
    width: 640px;
    margin-top: 20px;
    height: 510px;
    margin-right: auto;
    margin-left: auto;
}

#left {
    float: left;
    text-align: left;
    padding: 5px;
    margin-top: 145px;
    margin-left: 20px;
    overflow: auto;
    width: 135px;
    height: 240px;
    display: inline;
    
}
#right {
    text-align: left;
    width: 135px;
    float: left;
    padding: 5px;
    margin-top: 145px;
    margin-left: 26px;
    overflow: auto;
    height: 240px;
}

#searchbar {
    
    height: 35px;
    width: 315px;
    float: left;
    margin-left: 20px;
    margin-top: 35px;
    display: inline;
    clear: left;
}

#radio {    
    margin-left: 57px;
    margin-top: 125px;
    padding: 5px;
    width: 135px;
    height: 220px;
    text-align: left;
    float: left;
    clear: none;
}


Ziet iemand toevallig wat er fout gaat, of wat ik fout doe? En natuurlijk hoe ik het probleem kan oplossen.

dinsdag 3 januari 2006 21:05

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 20-04 15:28

Sappie

De Parasitaire Capaciteit!

switch je div met id "searchbar" en die met id "radio" eens in de markup.. denk dat dat het wel op zal lossen. Verder zou je het misschien anders aan kunnen pakken, zonder zoveel gebruik te maken van floats, maar het werkt zo ok.

Specs | Audioscrobbler

dinsdag 3 januari 2006 22:19

Acties:

Verwijderd

Waarom heeft #radio een float left? Die moet toch rechts staan? Je moet de bovendste van de twee divjes een float mee geven (searchbar aan je html te zien) en die andere geen float geven, want die komt er dan vanzelf naast.

Wat zijn "left" en "right" voor divs?
Ik begrijp geloof ik nog niet helemaal hoe die pagina nou in elkaar zit... Heb je 'm niet ergens online staan?

dinsdag 3 januari 2006 22:37

Acties:
  • Pendaco
  • Registratie: Augustus 2003
  • Laatst online: 20:46

Pendaco

Vogon Poetry FTW!

Topicstarter
Sappie schreef op dinsdag 03 januari 2006 @ 21:05:
switch je div met id "searchbar" en die met id "radio" eens in de markup.. denk dat dat het wel op zal lossen. Verder zou je het misschien anders aan kunnen pakken, zonder zoveel gebruik te maken van floats, maar het werkt zo ok.
Ja hoor, hoe kan dat nou, het werkt _/-\o_ :D , iig bedankt daarvoor,
ahh oke, ik snapte m zelf eerst niet maar ik begrijp nu idd dat die omgedraaid in de html horen te staan.
Ik zat teveel in kolommen te denken en vergat daarbij de natuurlijke flow van de 'website'.

@Jekav
Die 2 id's links & rechts zijn de 2 blokken met de wazige links erin (aan de linkerzijde).
De float weghalen gaat niet werken, aangezien hij dan tussen de rest van de div's valt.
Reageer