[CSS]layout opmaak divs - Softwareontwikkeling

vrijdag 16 juni 2006 16:42

Acties:

Verwijderd

Topicstarter

Ik wil graag dit:

-------------------------
|1|2222222222|33|
|1|2222222222|33|
|1|2222222222|33|
--------------------------

waarbij de breedte van 1 & 3 niet vast is en die van 2 wel( 800px )

Als de content niet een vaste breedte zou moeten hebben zou ik het kunnen oplossen met left: 10%; content 90% en right ook 10%.
Maar de content heeft een vaste breedte van 800px. Hoe doe ik dit?

huidige test code:

<body>
<div id="container">
<div id="left_side">left</div>
<div id="content">content</div>
<div id="right_side">right</div>
</div>
</body>

hoe krijg ik dus dat left_side en right_side variabel zijn qua breedte en content en vaste breedte heeft ( dus container heeft een breedte van 100%)

div {
position: relative;
}

div#container {
width: 100%;
}

div#left_side {
width: ??
float:left;
}

div#content {
width: 800px;
float: left;
}

div#right_side {
width: ??
float: left;
}

vrijdag 16 juni 2006 17:26

Acties:

moozzuzz

ik vloek hiermee tegen de regels, maar meestal doe ik dit met een tabel

. Nadeel is dat je dan bij absolute positionering tov <body> werkt...

HTML:

<html>
...
</head><body>

<table class="body">
<tr>
        <td class="dumbcolumn">&nbsp;</td>
        <td class="sitecolumn">
        <!-- site-code - start -->


        <!-- site-code - end -->
        </td>
<td class="dumbcolumn">&nbsp;</td>
</tr>
</table>

</body></head>

en de rest dan in een css (enkel breedte van sitecolumn definiëren).

vrijdag 16 juni 2006 17:33

Acties:

OnTracK

@moozzuzz: Daar krijg je waarschijnlijk half W&G mee over je heen

@TS: Probeer gewoon eens 50% in beiden in te vullen?

[ Voor 3% gewijzigd door OnTracK op 16-06-2006 17:34 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

vrijdag 16 juni 2006 17:36

Acties:

XWB

Devver

Probeer gewoon eens 50% in beiden in te vullen?

Dat gaat niet lukken, stel je hebt een breedte van 1280, dan is de linker div 640px breed. En zijn content div is er ook al 800px.

Hetzelfde voor de TS: de linker div za 10% van je schermbreedte zijn, de middelste 800px en de rechter weer 10%. Op 1280 wordt dat dus: 128px + 800px + 128px = 1056px. Je rechterkant is dus sowieso breeder. Waarom gebruik je geen vaste breedtes?

[ Voor 39% gewijzigd door XWB op 16-06-2006 17:38 ]

March of the Eagles

vrijdag 16 juni 2006 17:38

Acties:

moozzuzz

width niet definiëren lijkt me verstandiger.

vrijdag 16 juni 2006 17:40

Acties:

XWB

Devver

moozzuzz schreef op vrijdag 16 juni 2006 @ 17:38:
width niet definiëren lijkt me verstandiger.

Dan zal de breedte van de div zich aanpassen aan de inhoud van de div. Dus heb je maar 2 woorden staan dan wordt 'ie ook maar zo breed.

March of the Eagles

vrijdag 16 juni 2006 17:49

Acties:

BasieP

moozzuzz schreef op vrijdag 16 juni 2006 @ 17:26:
ik vloek hiermee tegen de regels, maar meestal doe ik dit met een tabel

same here, faux columns vind ik ranziger dan 1 nette table met 3 vakjes

gewoon zo zegmaar:

HTML:

<table id="container">
  <tr>
    <td id="left"></td>
    <td id="mid"></td>
    <td id="right"></td>
  </tr>
</table>

Cascading Stylesheet:

#container {
  width: 100%; /* ofzo */
  border-collapse: collapse;
}

#container td {
  vertical-align:top;
}

[ Voor 28% gewijzigd door BasieP op 16-06-2006 17:49 ]

This message was sent on 100% recyclable electrons.

vrijdag 16 juni 2006 17:50

Acties:

Verwijderd

HTML:

<style>
#left {
    width: 50%;
    float: left;
}
#left div {
    margin-right: 400px;
    border-right: 1px solid #000000;
}
#center {
    position: absolute;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    border: 1px solid #000000;
}
#right {
    width: 50%;
    float: left;
}
#right div {
    margin-left: 400px;
    border-left: 1px solid #000000;
}
</style>
<body>
<div id="container">
    <div id="left">
        <div>test1</div>
    </div>
    <div id="center">test2</div>
    <div id="right">
        <div>test3</div>
    </div>
</div>
</body>

probeer het zo is

die border was alleen om het te testen, en die opbouw mag je zelf verbouwen... gaat alleen om de opzet.

Edit op hieronder:
Heb t getest en t werkt hier wel... tis alleen niet geperfectioneerd, maar dat laat ik aan de topicstarter over

[ Voor 38% gewijzigd door Verwijderd op 16-06-2006 17:57 ]

vrijdag 16 juni 2006 17:52

Acties:

Rowanov

Kop eens wat anders...

Weet niet of het werkt, maar het zou kunnen:
• De twee side divs absoluut positioneren met een width van 50%
• Vervolgens met een padding-right van 400 op de rechter en een padding-left van 400 op de rechter 'ruimte' maken van voor je content in het midden

Als Nederland klaar is met voetballen zal ik iets uitwerken. Ga iig niet aan de tabellen!

vrijdag 16 juni 2006 18:03

Acties:

Verwijderd

Topicstarter

Bedankt voor de reacties.
Ga er na de WK wedstrijd mee verder

=> ik gebruik iig GEEN tabellen

vrijdag 16 juni 2006 18:21

Acties:

Verwijderd

Hacku schreef op vrijdag 16 juni 2006 @ 17:40:

Dan zal de breedte van de div zich aanpassen aan de inhoud van de div. Dus heb je maar 2 woorden staan dan wordt 'ie ook maar zo breed.

Een div is een block level element, en neemt dus de beschikbare breedte wanneer je geen breedte definieert.

Off topic:

BasieP schreef op vrijdag 16 juni 2006 @ 17:49:

same here, faux columns vind ik ranziger dan 1 nette table met 3 vakjes

Iets wat semantisch correct is kan nooit ranziger zijn dan iets dat dat niet is

[ Voor 30% gewijzigd door Verwijderd op 16-06-2006 18:22 ]

vrijdag 16 juni 2006 18:28

Acties:

XWB

Devver

Verwijderd schreef op vrijdag 16 juni 2006 @ 18:21:
[...]

Een div is een block level element, en neemt dus de beschikbare breedte wanneer je geen breedte definieert.

Je hebt gelijk, maar dan mag die float: left niet op de rechter div:

Cascading Stylesheet:

div#container 
{
    width: 100%;
    border: 1px #000000 solid;
}

div#left_side 
{
    width: 10%;
    float: left;
    border: 1px blue solid;
}

div#content 
{
    width: 800px;
    float: left;
    border: 1px red solid;
}

div#right_side 
{
    border: 1px yellow solid;
}

HTML:

<body>
    <div id="container">
        <div id="left_side">left</div>
        <div id="content">content</div>
        <div id="right_side">right</div>
    </div>
</body>

March of the Eagles

vrijdag 16 juni 2006 18:34

Acties:

Verwijderd

Hacku schreef op vrijdag 16 juni 2006 @ 18:28:

Je hebt gelijk, maar dan mag die float: left niet op de rechter div:

Je hebt helemaal gelijk, had het niet zien staan in de CSS. Sorry

vrijdag 16 juni 2006 22:13

Acties:

CH4OS

It's a kind of magic

In principe hoef je voor left_side en right_side ook geen width op te geven...
Alleen content heeft een vaste waarde van 800px. De andere 2 zou ik met margin bepalen...

Cascading Stylesheet:

div#container 
{
    border: 1px #000000 solid;
}

div#left_side 
{
    float: left;
    border: 1px blue solid;
}

div#content 
{
    width: 800px;
    float: left;
    border: 1px red solid;
    margin-left: 10px; // Of een andere waarde natuurlijk
    margin-right: 10px; // Of een andere waarde natuurlijk
}

div#right_side 
{
    border: 1px yellow solid;
    float: right;
}

Ik weet alleen even niet meer hoe het moet met float, maar mocht het daar niet mee lukken, dan kan je misschien een clear: both; zetten op #container...

De HTML blijft dan gewoon hetzelfde. Op deze manier weet je trouwens zeker dat je 100% beeldvulling krijgt, als je dat zou willen...

[ Voor 6% gewijzigd door CH4OS op 16-06-2006 22:16 ]