Toon posts:

[xhtml / css] FF positioneert niet goed?

Pagina: 1
Acties:

donderdag 7 april 2005 11:54

Acties:

Verwijderd

Topicstarter
In firefox komt de div met class="footer" links van de div met class="main_left". Dit is niet wenselijk en zo staat het er volgens mij ook niet. IE laat de div met footer daadwerkelijk onderaan de pagina zien. Is dit een bug in FF of zie ik iets over het hoofd. In ieder geval zoek ik dus een oplossing.


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-EN">
    <head>
        <title>title</title>
        <link type="text/css" rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div class="container">

            <div class="header"></div>
        
            <div class="main">
                <div class="main_left"></div>

                <div class="main_right">
                    Een stukje tekst
                </div>
            </div>
            
            <div class="footer">footer</div>    
        </div>
    </body>
</html>


Cascading Stylesheet:
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
53
54
55
56
57

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    test-align: center;
    color: #000000;
}

div.container {
    width:752px; 
    padding:0px; 
    margin: 0 auto;     
    text-align: left
}

div.header {
    width:752px;
    height:100px;
    padding:0px;
    margin: 0px;
    border: 0px;
    background-image: url(../img/header.gif);
}

div.main {
    width:752px;
    padding:0px;
    margin: 0px;
    border: 0px;
}

div.main_left {
    float: left;
    width:230px;
    height:345px;
    background-image: url(../img/strawberry.jpg);
    padding:0px;
    margin: 0px;
    border: 0px;
}

div.main_right {
    position: relative;
    padding:0px;
    margin: 0px;
    border: 0px;    
}

div.footer {
    width:752px;
    padding:0px;
    margin-top: 20px;   
    background-color: #cc0000;
    color:#ffd5d6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center; 
}

donderdag 7 april 2005 11:55

Acties:
  • samo
  • Registratie: Juni 2003
  • Laatst online: 16:34

samo

yo/wassup

zet misschien boven je 'footer' een div class="cleardiv" met als css div.cleardiv { clear: both }

Bekend van cmns.nl | ArneCoomans.nl | Het kindertehuis van mijn pa in Ghana

donderdag 7 april 2005 11:58

Acties:
  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38

r0bert

main -> clear: both;
main_left -> clear: left; float: left;
main_right -> clear right; float: right;
?

donderdag 7 april 2005 12:03

Acties:
  • IschaGast
  • Registratie: Juli 2001
  • Laatst online: 25-11-2025

IschaGast

Je kan ook je footer een clear: both; geven

donderdag 7 april 2005 12:17

Acties:
  • SillyJW
  • Registratie: Januari 2002
  • Laatst online: 22-04 18:09

SillyJW

der Gemutlichkeit

werkte dit ook niet?
Cascading Stylesheet:
1
2
3

.main {
    overflow: auto;
}

donderdag 7 april 2005 12:24

Acties:

Verwijderd

Topicstarter
IschaGast schreef op donderdag 07 april 2005 @ 12:03:
Je kan ook je footer een clear: both; geven
Dit werkt deels, hij neemt alleen de margin niet mee. Althans misschien dat hij de margin dus neemt van de rechter div en niet ten opzichte van de linker. Wat ik sowieso niet begrijp is dat het afhankelijk is van twee geneste div-jes, terwijl ik toch duidelijk aangeef dat ik een "main" div heb...

donderdag 7 april 2005 12:26

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Als je toch al weet wat voor afmetingen je "main left" heeft kun je hem net zo goed absoluut positioneren tov je "container" (wel even position: relative in je container zetten dan). Vervolgens geef je je "main_right" een "margin: 0 0 0 230px". et voila :)

edit:
owjah.. wel moet je dan je main_right een min-height geven zodat de footer ook altijd onder de main_left komt

[ Voor 60% gewijzigd door Sappie op 07-04-2005 12:31 ]

Specs | Audioscrobbler

donderdag 7 april 2005 12:32

Acties:

Verwijderd

Topicstarter
Sappie schreef op donderdag 07 april 2005 @ 12:26:
Als je toch al weet wat voor afmetingen je "main left" heeft kun je hem net zo goed absoluut positioneren tov je "container" (wel even position: relative in je container zetten dan). Vervolgens geef je je "main_right" een "margin: 0 0 0 230px". et voila :)
Nee ik wil dat als ik teveel tekst in het rechter gedeelte heb dat de layout keurig meeschaalt zoals dat zou moeten. Zoiets simpels moet toch zonder lelijke hacks en workarounds te realiseren zijn :/

donderdag 7 april 2005 12:37

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op donderdag 07 april 2005 @ 12:32:
[...]
Nee ik wil dat als ik teveel tekst in het rechter gedeelte heb dat de layout keurig meeschaalt zoals dat zou moeten.
Dat gebeurt ook als je het zo oplost zoals ik suggereer

Specs | Audioscrobbler

donderdag 7 april 2005 12:55

Acties:

Verwijderd

Topicstarter
Sappie schreef op donderdag 07 april 2005 @ 12:37:
Dat gebeurt ook als je het zo oplost zoals ik suggereer
Niet lullig bedoeld maar ik vind hacken met margins geen oplossing, dat is een workaround, het moet voor firefox toch hopelijk wel mogelijk zijn om geneste div elementen correct weer te geven :/

donderdag 7 april 2005 12:57

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

hacken met margins? Ik weet niet wat jij onder hacken verstaat maar dat is dit dus absoluut niet. Een andere manier.. geef je "main_right" ook position: relative en "top: 0; left: 230px;".

verder kijk hier als je het toch per se wilt oplossen met een float:

http://www.quirksmode.org/css/clearing.html

het 'probleem' waar jij tegenaanloopt (floated element die er niet voor zorgt dat zijn parent element uitrekt) is namelijk een toch wel alombekend probleem.

[ Voor 61% gewijzigd door Sappie op 07-04-2005 13:02 ]

Specs | Audioscrobbler

donderdag 7 april 2005 13:15

Acties:

Verwijderd

Topicstarter
Sappie schreef op donderdag 07 april 2005 @ 12:57:
hacken met margins? Ik weet niet wat jij onder hacken verstaat maar dat is dit dus absoluut niet. Een andere manier.. geef je "main_right" ook position: relative en "top: 0; left: 230px;".

verder kijk hier als je het toch per se wilt oplossen met een float:

http://www.quirksmode.org/css/clearing.html

het 'probleem' waar jij tegenaanloopt (floated element die er niet voor zorgt dat zijn parent element uitrekt) is namelijk een toch wel alombekend probleem.
Ja dat is hacken, daar is een margin niet voor bedoeld, dat is de afstand ten opzichte van de andere elementen. Maar de container div is wel groot genoeg aangezien ik een gave border krijgt om de beide elmenten heen, maar toch vind de footer het nodig om er domweg tussendoor te gaan.

donderdag 7 april 2005 13:52

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

margin definieert de hoeveelheid ruimte om een element heen.. dus nogmaals das nix hacken..

verder zou je ook de links of andere oplossing die ik aandraag kunnen lezen :)

[ Voor 6% gewijzigd door Sappie op 07-04-2005 13:53 ]

Specs | Audioscrobbler

donderdag 7 april 2005 14:05

Acties:

Verwijderd

Topicstarter
bedankt voor het aandragen van je oplossing, daar ben ik blij mee. Ik ben dan uiteindelijk maar voor een vaste hoogte gegaan het is niet anders.

Ik ben niet van plan hacks en truukjues te gebruiken. ik wacht wel op het moment dat ze het bij mozilla correct implementeren.En margin vind ik nou eenmaal een truukje/hack, je gebruikt immers een attribuut dat niet bedoeld is voor positionering als positionerings element.

donderdag 7 april 2005 14:18

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

zoals ik al zei kun je ipv gebruik te maken van de margin ook zowel de "main" (hier vertikte ik me strax zag ik net) als de "main_right" "position: relative;" geven en vervolgens aan "main_right" nog "top:0; left: 230px;" toevoegen.

Verder begrijp ik misschien (toch) niet helemaal wat de opzet is van je layout.. als ik het goed begrijp bestaat je pagina uit een header - content - footer, waar de content uit 2 kolommen beslaat?

Specs | Audioscrobbler

donderdag 7 april 2005 23:30

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:35

crisp

Devver

Pixelated

ik wacht wel op het moment dat ze het bij mozilla correct implementeren.
Dan kan je lang wachten aangezien mozilla niets fout doet ;) (dat het misschien onlogisch is in jouw ogen is een ander verhaal...)

Intentionally left blank

donderdag 7 april 2005 23:35

Acties:
  • Billie
  • Registratie: Januari 2003
  • Laatst online: 06-05 21:54

Billie

Cascading Stylesheet:
1
2
3
4
5
6

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    test-align: center;
    color: #000000;
}


Moet test-align trouwens niet text-align zijn? :)
Pagina: 1
Reageer