Container DIV centreren - Softwareontwikkeling

vrijdag 7 november 2008 11:08

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb onderstaande HTML en CSS opgesteld.
Het lukt mij alleen niet om het geheel te centreren.
Iemand een suggestie?

Cascading Stylesheet:

#container1 {
position: relative;
border: 1px dashed #FF0000;
margin: 0px auto;
}

#container2 {
position: absolute;
left: 90px;
top: 1px;
border: 1px dashed #FF0000;
}

#header{
background: #FF0000;
width: 900px;
}

#menu {
background: #00FF00;
text-align: center;
width: 900px;
max-width: 900px;
padding: 0px;
}

#content {
background: #0000FF;
width: 900px;
height: 300px;
max-height: 400px;
padding: 0px;
}

#opmaak {
width: 90px;
height: 700px;
background: url(afbeeldingen/achtergrondplaatje.jpg);
background-repeat: repeat-y;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<HTML>
   <HEAD>
      <LINK href="opmaak.css" rel="stylesheet" type="text/css"> 
      <TITLE>Website titel</TITLE>
   </HEAD>
   <BODY>
       <DIV id="container1">
           <DIV id="opmaak" ></DIV>
           <DIV id="container2">
               <DIV id="header">Header</DIV>
               <DIV id="menu">menu</DIV>
               <DIV id="content">Standaard content.</DIV>
           </DIV>
       </DIV>
   </BODY>
</HTML>

Je kan [code=html] of [code=css][/] gebruiken voor betere leesbaarheid :)[/]

[ Voor 5% gewijzigd door BtM909 op 07-11-2008 11:25 ]

vrijdag 7 november 2008 11:12

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Misschien kun je hier wat mee:
CSS examples for faux frames layouts

Doe je de volgende keer ook [code] tags gebruiken?

日本！🎌

vrijdag 7 november 2008 11:14

Acties:

0 Henk 'm!

Verwijderd

Als je alleen de container wilt centreren zou je de volgende css kunnen gebruiken:

Cascading Stylesheet:

body {
  text-align: center;
}

#container {
  margin: 0 auto;
  position: relative;
  text-align: left;
}

Dit is cross-browser compatible, las laatst wel ergens dat die text-align niet nodig zou zijn, maar ik krijg het dan niet aan de praat in IE6.

vrijdag 7 november 2008 11:17

Acties:

0 Henk 'm!

Verwijderd

Verwijderd schreef op vrijdag 07 november 2008 @ 11:08:
Ik heb onderstaande HTML en CSS opgesteld.
Het lukt mij alleen niet om het geheel te centreren.
Iemand een suggestie?

Lukt het niet in alle (bekende) browsers, of enkel in IE(6)?

Verwijderd schreef op vrijdag 07 november 2008 @ 11:14:
Als je alleen de container wilt centreren zou je de volgende css kunnen gebruiken:

[code]

Dit is cross-browser compatible, las laatst wel ergens dat die text-align niet nodig zou zijn, maar ik krijg het dan niet aan de praat in IE6.

En als je het op deze manier doet, vervolgens alle andere div's in deze container zet, staat de rest ook mooi gecentreerd. De text-align: is bij mij ook de enige bekende manier om het in IE6 (en ouder) ook te laten werken.

vrijdag 7 november 2008 12:30

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Het lukte niet in alle bekende browsers.
@Pariah: deze code centreert het geheel alsnog niet

vrijdag 7 november 2008 12:33

Acties:

0 Henk 'm!

Xander

Geef je #container1 ook nog die 900px breedte mee, dan zou het moeten werken.

Hij is nu wel horizontaal gecentreerd, maar dat schiet niet op bij een div van 100% breed.

[ Voor 37% gewijzigd door Xander op 07-11-2008 12:34 ]

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

vrijdag 7 november 2008 12:34

Acties:

0 Henk 'm!

SandaX

Nicht Ärgern nur wundern

Geef je container eens een absolute breedte mee.

Met mn bovenbuurman dus

ps. pas even je html nog even aan, hoofdletters zijn niet meer van deze tijd

[ Voor 58% gewijzigd door SandaX op 07-11-2008 12:43 ]

vrijdag 7 november 2008 12:38

Acties:

0 Henk 'm!

trinite_t

Let er even op dat dit cross browser compatible is als je een strict doctype gebruikt. En dan heb je alleen het volgende maar nodig:

Cascading Stylesheet:

#container{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

The easiest way to solve a problem is just to solve it.

vrijdag 7 november 2008 12:39

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Dat werkt wel.
Bedankt!

vrijdag 7 november 2008 13:12

Acties:

0 Henk 'm!

xzaz

trinite_t schreef op vrijdag 07 november 2008 @ 12:38:
Let er even op dat dit cross browser compatible is als je een strict doctype gebruikt. En dan heb je alleen het volgende maar nodig:
Cascading Stylesheet:
1
2
3
4
5
#container{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

Cascading Stylesheet:

#container{
    margin: 0 auto;
    width: 800px;
}

Raar, waarom werkt dit dan niet? In principe toch 't zelfde niet waar?

Schiet tussen de palen en je scoort!

vrijdag 7 november 2008 14:55

Acties:

0 Henk 'm!

DeluxZ

Livin' the good life

Dat hoort wel te werken. Ik gebruik het zelf altijd als ik een pagina heb met een div in het midden.

]|[ Apple Macbook Pro Retina 13" ]|[

vrijdag 7 november 2008 15:03

Acties:

0 Henk 'm!

trinite_t

Dat is idd hetzelfde, heb je wel een strict doctype gebruikt? Dat is namelijk nodig om het in IE6(en 7?) werkend te krijgen.

[ Voor 34% gewijzigd door trinite_t op 07-11-2008 15:09 ]

The easiest way to solve a problem is just to solve it.