Toon posts:

[css] IE centreert divs niet

Pagina: 1
Acties:

zondag 5 maart 2006 21:48

Acties:
  • blue-gene
  • Registratie: Maart 2005
  • Laatst online: 17-03 17:30

blue-gene

Topicstarter
Beste tweakers

ik ben m'n siteje aant slicen maar nu zit ik al een poos met een probleem
Internet Explorer centreerd de divs 'head', 'menu' en 'body' in de div 'full' niet
In FF en Opera doet ie het wel.

Internet Explorer zo moet ie dus niet
Firefox/Opera zo moet ie dus

als je goed kijkt zie je dat alles bij IE een paar pixels verder naar links zit, ten opzichte van de verticale lijntjes, dan bij FF en Opera.

ik heb vanalles geprobeerd maar ik kom er niet uit ;(
ik hoop dat jullie kunne helpen

alvast bedankt

de css:
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

/* ----------------Body---------------- */

body {
background-color: #2C2C2C;
background-image: url(bg.gif);
background-repeat: repeat-y;
background-position: center;
margin: 0px;
padding: 0px;
text-align: center; 
width: 100%; 
height: 100%;
}

#full {
width: 804px;
margin: 0 auto;
position: relative;
}

#head {
background-image: url(head.gif);
height: 228px;
width: 800px;
margin: 0 auto;
}

#body{

}

/*-----------menu-----------*/

#menu {
background-image: url(menu.gif);
height: 53px;
width: 800px;
margin: 0 auto;
}


de html:
code:
1
2
3
4
5
6
7
8
9
10
11
12

    <body>
        <div id='full'>
            <div id='head'></div>
            <div id='menu'>
                <!--menuitems-->
            </div>
            <div id='body'>
                <!--body zooi-->        
            </div>
        </div>
    </body>
</html>

[ Voor 123% gewijzigd door blue-gene op 05-03-2006 22:58 ]

zondag 5 maart 2006 22:37

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 10:15

crisp

Devver

Pixelated

zou je je code kunnen verkorten tot de essentie van het probleem?

Intentionally left blank

zondag 5 maart 2006 22:41

Acties:
  • Alex)
  • Registratie: Juni 2003
  • Laatst online: 12-12-2025

Alex)

Probeer eens dit voor IE:
Cascading Stylesheet:
1
2

margin-left: auto;
margin-right: auto;


Of anders:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9

div#head
{
 text-align: center;
 margin: 0 auto;
}
div.content
{
 text-align: left;
}

HTML:
1
2
3
4
5

<div id="head">
  <div class="content">
    tekst hier
  </div>
</div>

We are shaping the future

zondag 5 maart 2006 22:47

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

Hij centreert dus in beide gevallen wel neem ik aan? Waarschijnlijk heb je dan te maken met een afrondingsfout voor IE met betrekking tot het positioneren van de background op de body. (Heb je een voorbeeld online staan?)

Wat je bijvoorbeeld kan doen om dat te voorkomen is voor de body een vaste breedte opgeven, deze centreren door middel van "margin: 0 auto;" (hierdoor hoef je de rest van de onderdelen dus niet apart te centreren) en daar de background op toepassen. Tevens dien je dan de achtergrondkleur van het html element te definiëren.
edit:
verder raad ik je, na een blik geworpen te hebben op je html, aan je eens te verdiepen in semantiek; dwz semantisch verantwoorde html. Één van de links hierover waar het een en ander eenvoudig wordt uitgelegd: http://home.parse.nl/~michiel/semantiek.html

[ Voor 30% gewijzigd door Sappie op 05-03-2006 23:04 ]

Specs | Audioscrobbler

zondag 5 maart 2006 22:53

Acties:
  • Facer
  • Registratie: Januari 2002
  • Niet online

Facer

Ken net.....

// offtopic

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

body {
font-family: Tahoma, 'arial unicode MS', arial, helvetica;
color: #cecece;
font-size: 8pt;
}
    a{
        text-decoration: none;
        font-family: Tahoma, 'arial unicode MS', arial, helvetica;
        color: #cecece;
        font-size: 8pt;
    }
    a:hover {
        text-decoration: none;
        font-family: Tahoma, 'arial unicode MS', arial, helvetica;
        color: #cecece;
        font-size: 8pt;
    }
    a:visited {
        text-decoration: none;
        font-family: Tahoma, 'arial unicode MS', arial, helvetica;
        color: #cecece;
        font-size: 8pt;
    }
    a:active {
        text-decoration: none;
        font-family: Tahoma, 'arial unicode MS', arial, helvetica;
        color: #cecece;
        font-size: 8pt;
    }

Waarom declareer je steeds de eigenschappen van je link opnieuw? De body stelt als je font-family in + kleur + font-size.

code:
1
2
3
4
5
6
7
8

body {
font-family: Tahoma, 'arial unicode MS', arial, helvetica;
color: #cecece;
font-size: 8pt;
}
    a{
        text-decoration: none;
    }

Bovenstaande zou al genoeg moeten zijn

maandag 6 maart 2006 17:00

Acties:
  • blue-gene
  • Registratie: Maart 2005
  • Laatst online: 17-03 17:30

blue-gene

Topicstarter
Code is ingekort

@Alex Geprobeerd maar blijft hetzelfde

@Sappie Online voorbeeld: http://www.ejoty.nl/daniel/designs/skyline/
ik zal ook us naar die sematiek kijken ;)

maandag 6 maart 2006 17:42

Acties:
  • Alex)
  • Registratie: Juni 2003
  • Laatst online: 12-12-2025

Alex)

Hmm, in IE7 beta 1 is alles netjes gecentreerd volgens mij...

We are shaping the future

maandag 6 maart 2006 17:45

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

IE6 trekt je pagina op een of andere manier hier ook voor geen meter. Hij bouwt erg langzaam op en van resizen wordt je ook niet vrolijk. Is dat bij jou ook? Heb op dit moment nog ff geen idee hoe dat komt.. zal er straks eens naar kijken.

Specs | Audioscrobbler

maandag 6 maart 2006 18:03

Acties:
  • blue-gene
  • Registratie: Maart 2005
  • Laatst online: 17-03 17:30

blue-gene

Topicstarter
@alex Bij mij ook wel maar de gemiddelde internetter gebruikt voorlopig nog geen IE7

@sappie hij laad bij mij wat sloom ja, maar IE6 laad over het algemeen volgens mij wat langzamer dan FF en Opera.

maandag 6 maart 2006 18:21

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

Ik ben er wel achter waardoor dat laden zo sloom gaat.. dit heeft te maken met het patroontje dat je een aantal keer gebruik (pattern.gif). Wat je bijvoorbeeld kan doen om dat op te lossen is de transparantie uit het gifje weglaten en wellicht dat je dan 2 verschillende gifjes nodig hebt (ivm andere achtergrondkleuren).

Specs | Audioscrobbler

maandag 6 maart 2006 19:06

Acties:
  • blue-gene
  • Registratie: Maart 2005
  • Laatst online: 17-03 17:30

blue-gene

Topicstarter
hij laad nu wel iets sneller

maandag 6 maart 2006 19:19

Acties:

Verwijderd

achtergrondplaatje iets groter (hoger) maken qua pixels, dan rendert ie sneller.

maandag 6 maart 2006 20:49

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

Ik had ff nix beters te doen en verveelde me de tering.. dus heb ik een poging gewaagd het een en ander even op te schonen en je een duwtje (of zeg maar gerust duw) in de goede, semantisch verantwoordere, richting te geven:

http://tienstra4.flatnet....rein-got/blue-gene/pages/

Zullen ongetwijfeld nog kleine foutjes in zitten en ook heb ik niet alle backgrounds verwerkt, maar hoop (en denk) dat je er wat aan hebt :)

Specs | Audioscrobbler

maandag 6 maart 2006 22:01

Acties:
  • blue-gene
  • Registratie: Maart 2005
  • Laatst online: 17-03 17:30

blue-gene

Topicstarter
das idd een duw :P
ik heb hier zeker wat aan
zal me wat maar verder in sematiek verdiepen, dit is wel een stuk beter dan wat ik eerst had
hij doet het nu ook goed

iig geval heel erg bedankt ;)

dinsdag 7 maart 2006 21:35

Acties:
  • George
  • Registratie: Maart 2006
  • Laatst online: 02-03-2025

George

Je probleem ligt volgens mij aan het volgende.

Je gebruikt auto margin om te centreren. Dit is volkomen juist. Enige probleem is dit.
FF e.a. centreren door de viewport breedte te nemen, boel eraf te trekken en dan te delen door twee etc.
IE neemt die viewport breedte minus scrollbar hiervoor, dus je krijg een pixel jog.

Los je op als volgt:

Cascading Stylesheet:
1
2
3
4
5
6
7

body {
    margin: 0;
    padding: 0;
    margin-left:1px;    /* part of IE hack */
}

html>body {margin:0;}

Aangezien IE parent selectors niet aankan, negeert deze het laatste stukje code en "jogged" de text dus weer terug.

-George.

dinsdag 7 maart 2006 21:54

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

GIsmael: Los van het feit of dit nu nog nodig is, aangezien * Sappie zijn versie het zonder die hack gewoon deed, is het een stuk netter dit soort oplossingen in conditional comments te zetten in plaats van met een hack, aangezien IE7 wel 's wél de hack zou kunnen oplossen, maar níet de bug :) .

DM!

dinsdag 7 maart 2006 21:59

Acties:
  • George
  • Registratie: Maart 2006
  • Laatst online: 02-03-2025

George

Mee eens. Hoewel parent selectors worden ondersteund in IE7, dus de workaround zou gewoon moeten blijven werken. Maar ja, conditional comments is een schonere oplossing.

-George.

Pagina: 1
Reageer