[CSS] positioneren met vaste grootte

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robin de Vries

Robin de Vries

30/08/2009 12:03:00
Quote Anchor link
Ik heb een design, waar het content deel gecentreerd moet zijn. Normaal gesproken doe ik dat met margin-left:auto; margin-right:auto; Maar omdat er nog wat haken en ogen aan het design zitten moeten de 2-variabele-zijkanten ook apart op te maken zijn. In html-tabellen gaat dit vrij simpel:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<table border="0" width="100%">
<tr>
    <td>test</td>
    <td width="960">test2</td>
    <td>test3</td>
</tr>
</table>


maar als ik dit in een nette css-opmaak probeer te zetten, lukt het niet echt.
css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
body{
    background:        #fff;    
}

#left{
    float:left;
    width:auto;
    clear:none;
    border: 1px dashed red
}

#main{
    width:960px;
    clear:none;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    border: 1px dashed red
}

#right{
    float: right;
    clear:none;
    width:auto;
    border: 1px dashed red;

}


html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div id="left">links</div>
<div id="main">main</div>
<div id="right">right</div>


Hoe moet de css-code worden aangepast zodat het toch nog zoals de html-tabel wordt?
(voorbeeldje css code: http://www.smcextra.com/site/?t=smcextra_new )
 
PHP hulp

PHP hulp

22/12/2024 08:34:25
 
Milo

Milo

30/08/2009 12:12:00
Quote Anchor link
Als je dan een container div maakt waar left, main, right inzit.. en dan die main gewoon centreert.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
echo '<div class="container">';
  echo '<div class="left">links</div>';

  echo '<div class="main">main</div>';

  echo '<div class="right"></div>';
echo '</div>';
?>


en dan css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
text-align: center;
}
.container {
width: 800px;
margin: 0 auto;
text-align: left;
}
.left {
width: 200px;
float: left;
}
.main {
width: 400px;
}
.right {
width: 200px;
float: right;
}


of begrijp ik je niet??
Gewijzigd op 01/01/1970 01:00:00 door Milo
 
Robin de Vries

Robin de Vries

30/08/2009 12:16:00
Quote Anchor link
main heeft een vaste grootte. Left en right moeten de rest v/d ruimte opvullen.
En met jouw code heb ik hetzelfde als met de mijne, 'right' verschuift 1 regel naar beneden :S
 
Milo

Milo

30/08/2009 13:24:00
Quote Anchor link
aha..., sorry dat zou ik niet weten moet je even googlen..
 
Robin de Vries

Robin de Vries

30/08/2009 13:56:00
Quote Anchor link
tja googelen op wat?

Weet iemand anders een manier. Anders ben ik bang toch tabellen te moeten gebruiken...
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.