Div's staan op elkaar in IE7. - Softwareontwikkeling

maandag 30 maart 2009 14:09

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik ben bezig met een website van onze afdeling.

Link naar website

In FF staan mijn div'jes keurig onder elkaar zoals ik het ook graag hebben wil. Maar IE plaatst alle div'jes boven op elkaar. Waarschijnlijk zit het 'm in iets heel kleins... maar wat???

HTML

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>DTP</title>
    
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

</head>
<body>
<center>
<div class="container">
    <div id="kop">
        <img src="images/tft.png" width="1000" height="400" align="center" />
        <img src="images/post-it_met_namen.png" width="500" height="208" align="left" class="align_post-it_namen" />
    </div>
    <div id="personen">
        <img src="images/telefoon.png" width="426" height="679" align="left" class="align_telefoon" />
    </div>

</div>
</center>
</body>
</html>

CSS:

code:

@charset "utf-8";
/* CSS Document */

body {
    margin: 0;
    padding: 0;
    background: #adce01 url("../images/background.jpg") repeat left top;
}

/* Containers */

.container {
    clear: both;
    width: 1000px;
}

#kop {
    clear: both;
    float: right;
    position: relative;
    width: 1000px;
}

#personen {
    clear: both;
    float: left;
    position: relative;
    width: 1000px;
    height: 1000px;
    background: url("../images/groot-vel.png") repeat left top;
}

/* Image alignment */

.align_post-it_namen {
    margin-top: -50px;
}

.align_telefoon {
    margin-left: -300px;
}

maandag 30 maart 2009 14:16

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Kun je de afbeeldingen op de achtergrond niet absoluut positioneren? Ze komen toch altijd op dezelfde plek zo te zien.

Overigens doet ie het in IE8 wel goed, dus zal wel een van de vele float-bugs zijn in IE7.

[ Voor 28% gewijzigd door Bosmonster op 30-03-2009 14:16 ]

maandag 30 maart 2009 14:21

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Dit is een tijdelijke test. Het witte papier moet straks gaan meesizen met dynamische content erin.

Dus dan lijkt absolute mij niet heel handig. Goed te horen dat IE8 hem wel pakt.

maandag 30 maart 2009 14:33

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Verwijderd schreef op maandag 30 maart 2009 @ 14:21:
Dit is een tijdelijke test. Het witte papier moet straks gaan meesizen met dynamische content erin. Dus dan lijkt absolute mij niet heel handig. Goed te horen dat IE8 hem wel pakt.

Dat maakt toch niet uit of het mee moet schalen? Dat kan net zo goed met absolute positionering. Dit soort ontwerpen is juist waar absolute positionering perfect voor is en waar je niet met floats e.d. wil gaan kloten.

maandag 30 maart 2009 14:50

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik ben het eens met Bosmonster, position:absolute is hier prima voor.

Je hoeft ze niet perse vanuit links boven uit te lijnen. Wanneer je een element bijvoorbeeld "position:relative" mee geeft, kun je alle elementen daar in dmv "position:absolute" ten opzichte van dat element positioneren ipv ten opzichte van je document-body.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 30 maart 2009 14:53

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

offtopic:
Die plaatjes zijn renders toch, of echte foto's (al dan niet bewerkt)?

Ik ben het overigens helemaal eens met Bos, gewoon absolute gebruiken voor je positionering. Scheelt ook even de troubles met het floaten nu.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 30 maart 2009 14:57

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ok, hardstikke bedankt voor de info, ik ga er mee aan de slag!

maandag 30 maart 2009 14:58

Acties:

0 Henk 'm!

ReseTTim

Chocolate addicted

^^ wat de andere muppets zeggen

gewoon ffies position op 'absolute' zetten. dit heeft niks te maken met aanpassing van hoogte voor het vel wanneer er veel tekst in zit..

btw zal je alles niet iets kleiner maken.. (header) je moet hier eerst scrollen om te zien wat er op het vel papier staat.. ik draai op resolutie van 1400 x 1050

Mijn profiel - Te koop: Overzicht van spullen..

maandag 30 maart 2009 15:04

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Thx, nah ik gooi er straks een smoothscroll plugin in van MooTools. Pagina wordt nog veel langer namelijk.