centreer site in IE met CSS

**gast2960** · 02-10-2008, 16:18

Origineel gepost door Ralph van leenen

opdit moment heb ik:

Code:

body, html {
margin:0px auto;
}

#container {
margin:0px auto;
width:789px; /* eigen width invullen */
background:#ff0000;
overflow:hidden; 

}

ik zie geen gekleurde div, dus daar zit dan het probleem denk ik?

Daar zit idd het probleem waarschijnlijk, IE6 pakt volgens mij de container gewoon niet.
inplaats van overflow:hidden; kan je misschien overflow:visible; gebruiken.

**Ralph van leenen** · 02-10-2008, 16:20

heb de div nu ook een gekleurde border gegeven, deze zie je nu rechtsboven Dreamweaver kan echter ook geen fouten vinden in de css

**Ralph van leenen** · 02-10-2008, 16:28

nog steeds geen resultaat, iemand nog ideeën?

**Ferdi Reichart** · 02-10-2008, 16:35

Laatste regel die div heeft geen eind </div>

**Jeroen Kamphuis** · 02-10-2008, 16:38

Hierbij wat ik zou gebruiken 3 codes:
1. index.html [De html pagina]
2. css.css [ standaard CSS]
3. cssie.css [speciale CSS voor IE]

1. index.html:

Code:

<html>
<head>

<title>TEST</title>

<link rel="stylesheet" type="text/css" href="css.css">

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="cssie.css">
<![endif]-->

</head>
<body>

<div id="container">GECENTREERD<br />Gecentreerd</div>

</body>

</html>

2. css.css:

Code:

body
    {
        width: 500px;
        background: #828282;
    }



#container
    {
        width: 500px;
        background: #000000;
        height: 500px;
        font-size: 14px;
        font-family: verdana, arial, helvetica;
        color: #ffffff;
        text-align: center;
        margin-left: 50%;
    }

3. cssie.css:

Code:

#container
    {
        margin-left: 25%;
        width: 500px;
        background: #000000;
        height: 500px;
        font-size: 14px;
        font-family: verdana, arial, helvetica;
        color: #ffffff;
        text-align: center;
    }

voorbeeld: http://www.freewebs.com/gehackte/iecentreer/index.html

EDIT:!!! de container div waar alles instaat moet wel even breed zijn als dat de body is ingesteld.!!!

MVG,

Jeroen Kamphuis ~ BetaSlice

**Ralph van leenen** · 02-10-2008, 16:51

bedankt jeroen, ga gelijk even proberen

**Ferdi Reichart** · 02-10-2008, 16:56

2 bestanden is niet eens nodig.

* {
margin: 0;
padding: 0;
}
html {
background: #000000;
}
body {
width: 750px;
height: 100%;
font: 11px "Verdana";
margin: 0 auto;
color: #000000;
}
div#container {
width: 750px;
height: 750px;
background: #FFFFFF;
}

<!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=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<title>Centreer voorbeeld</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>
<body>
<div id="container">
Centreren
</div>
</body>
</html>

http://www.ferdireichart.nl/css/centereren/

**Jaap K** · 02-10-2008, 16:58

Code:

body {margin:0px; padding:0px;}
 
#container {
    position:absolute;
    left:50%;
    width:789px;
    margin-bottom:20px;
    margin-left:-395px
    padding:15px;
}

Met een negatieve margin dus :)

Edit: Je positioneert de container met de linkerkant op het midden (50% left dus), dan pak je de helft van de breedte, met een negatieve margin. Ipv dattie dan verder naar rechts schuift, gooit hij de marge de "verkeerde" kan op, maar precies de helft links van het midden, dus de andere helft zit... rechts van het midden.. Dat noemen ze centreren ;)

**Harmen Vogel** · 02-10-2008, 16:58

leuk bedacht jeroen:)
maar op mijn resolutie staat het meer naar links dan naar rechts...
dus die margin 25% klopt niet helemaal?

**gast2960** · 02-10-2008, 17:04

Origineel gepost door Harmen Vogel

leuk bedacht jeroen:)
maar op mijn resolutie staat het meer naar links dan naar rechts...
dus die margin 25% klopt niet helemaal?

Klopt, op onze manier Harmen zou het perfect, en xhtml valid moeten werken.
Dan zijn twee css bestanden niet eens nodig. Met procenten moet je
zo min mogelijk werken aangezien dat telkens weer anders uitvalt afhankelijk van je browser en resolutie.

Ik zelf zou gewoon de hele pagina door een baser opnieuw laten slicen.
Die automatische slices werken bijna nooit zoals het moet, en daarbij
is deze webpagina niet echt seo-vriendelijk. Er word meer afbeeldingen
en css gebruikt dan dat nodig is ;)

**Jaap K** · 02-10-2008, 17:09

Origineel gepost door gehackte

Hierbij wat ik zou gebruiken 3 codes:
1. index.html [De html pagina]
2. css.css [ standaard CSS]
3. cssie.css [speciale CSS voor IE]

1. index.html:

Code:

<html>
<head>

<title>TEST</title>

<link rel="stylesheet" type="text/css" href="css.css">

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="cssie.css">
<![endif]-->

</head>
<body>

<div id="container">GECENTREERD<br />Gecentreerd</div>

</body>

</html>

2. css.css:

Code:

body
    {
        width: 500px;
        background: #828282;
    }



#container
    {
        width: 500px;
        background: #000000;
        height: 500px;
        font-size: 14px;
        font-family: verdana, arial, helvetica;
        color: #ffffff;
        text-align: center;
        margin-left: 50%;
    }

3. cssie.css:

Code:

#container
    {
        margin-left: 25%;
        width: 500px;
        background: #000000;
        height: 500px;
        font-size: 14px;
        font-family: verdana, arial, helvetica;
        color: #ffffff;
        text-align: center;
    }

voorbeeld: http://www.freewebs.com/gehackte/iecentreer/index.html

EDIT:!!! de container div waar alles instaat moet wel even breed zijn als dat de body is ingesteld.!!!

MVG,

Jeroen Kamphuis ~ BetaSlice

BetaSlice.. 'Slicing in betaversion' ;)

Sorry maar dit is dus geen centreren maar goochelen ;)

Sowieso ontgaat me de logica van een 500px brede body?? Met daarin een 500px brede container die links nog eens 25% moet krijgen.. terwijl je container al zo breed als je body zou moeten zijn volgens jouw idee.. Dat betekent dat je in je 500px brede "body" nog 125px marge moet kunnen proppen. Wáár laat je die 125px marge links, en wáár laat je het overige scherm? Je body is immers maar 500px, wat is de rest van m'n venster dan? Outerbody ofzo?

**Ralph van leenen** · 02-10-2008, 17:10

vooralsnog werkt de manier van Jeroen!! iig op mijn monitore(n) thx!, ik ga nu ook de andere manier proberen. Dat de site te veel plaatjes bevat klopt idd :) t'is voor het eerst dat ik het op deze manier doe. Dreamweaver CS4 belooft overigens een stuk beter te worden mbt de automatische slices.

**gast2960** · 02-10-2008, 17:14

Origineel gepost door Ralph van leenen

vooralsnog werkt de manier van Jeroen!! iig op mijn monitore(n) thx!, ik ga nu ook de andere manier proberen. Dat de site te veel plaatjes bevat klopt idd :) t'is voor het eerst dat ik het op deze manier doe. Dreamweaver CS4 belooft overigens een stuk beter te worden mbt de automatische slices.

Bij mij klopt het toch niet, zie bijlage

**Jaap K** · 02-10-2008, 17:15

Dit is de enige oplossing hoor :)

(Even een paar berichten terug van me, denk dattie over het hoofd gezien wordt :))

Code:

body {margin:0px; padding:0px;}
 
#container {
    position:absolute;
    left:50%;
    width:789px;
    margin-bottom:20px;
    margin-left:-395px
    padding:15px;
}

Met een negatieve margin dus :)

Edit: Je positioneert de container met de linkerkant op het midden (50% left dus), dan pak je de helft van de breedte, met een negatieve margin. Ipv dattie dan verder naar rechts schuift, gooit hij de marge de "verkeerde" kan op, maar precies de helft links van het midden, dus de andere helft zit... rechts van het midden.. Dat noemen ze centreren ;)

**gast2960** · 02-10-2008, 17:19

Origineel gepost door Jaap K

Dit is de enige oplossing hoor :)

(Even een paar berichten terug van me, denk dattie over het hoofd gezien wordt :))

Code:

body {margin:0px; padding:0px;}
 
#container {
    position:absolute;
    left:50%;
    width:789px;
    margin-bottom:20px;
    margin-left:-395px
    padding:15px;
}

Met een negatieve margin dus :)

Edit: Je positioneert de container met de linkerkant op het midden (50% left dus), dan pak je de helft van de breedte, met een negatieve margin. Ipv dattie dan verder naar rechts schuift, gooit hij de marge de "verkeerde" kan op, maar precies de helft links van het midden, dus de andere helft zit... rechts van het midden.. Dat noemen ze centreren ;)

Dat is toch niet de enige? ;)

Hier: http://www.gigadesign.be/2005/03/centreren-met-css-2/
Staat een mooie tutorial over hoe te centreren in xhtml. Dit is
de meest veilige manier die ik ken, en een manier die op goede
xhtml-pagina's altijd werkt.

centreer site in IE met CSS

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

centreer site in IE met CSS

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen