Page 1 of 1
[Opgelost] Layout meerdere content velden
Posted: Wed Mar 31, 2010 5:58 am
by rayring
Ik ben helaas geen CSS goeroe (probeer het wel te worden ;D)
Ik wil meerdere contentvelden op mijn pagina dit lukt prima alleen het lukt niet om deze netjes in de volgorde te krijgen zoals ik het wil.
Ik heb al aparte divs aangemaakt per content veld maar de content velden blijven onder elkaar weer gegeven.
Moet ik iets met absolute position doen...
Kortom CSS technisch lukt het niet, kan iemand me op weg helpen... Ik wil het zo naast elkaar hebben ???:
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 10:05 am
by wpbremer
Zoiets:
div#content1{
width: 600px;
height: 600px;
float: left;
}
div#content2{
margin-left: 600px;
height: 300px;
}
div#content3{
margin-left: 600px;
margin-top: 300px;
height: 300px;
}
Ik heb het niet getest maar volgens mij moet het zo werken.
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 11:31 am
by TD__
Ik zou het zo doen:
Code: Select all
#box1{
width:50%;
height:600px;
float:left;
border:1px solid black;
margin-right:10px;
}
#box2{
width:48%;
height:295px;
border:1px solid black;
float:left;
margin-bottom:10px;
}
#box3{
width:48%;
height:295px;
border:1px solid black;
float:left;
}
(Die waardes bij width moet je niet zoveel aantrekken, ik heb het even snel geprobeerd in een template die variabel van breedte is.)
En dan voeg je aan de div waar het in staat het volgende toe:
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 5:36 pm
by rayring
Ik ga het proberen en kom erop terug..
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 6:07 pm
by rayring
Ik snap hier echt weinig van...blijkt...
Het blijft onder elkaar staan en ik krijg het niet naast elkaar.
Er worden prima 3 contant velden weergegeven in de admin editor dus dat werkt goed alleen de layout .... >:(
Ik doe het waarschijnlijk helemaal fout maar in de template staat dit:
Code: Select all
{* Start Content Area *}
<div id="box1">
<h2>{title}</h2>
{content} <br />
<div id="box2">
<h2>{title}</h2>
{content block='content2'} <br />
<div id="box3">
<h2>{title}</h2>
{content block='content3'} <br />
<hr class="accessibility" />
</div>
{* End Content Area *}
En in de stylesheet staat nu:
Code: Select all
div#box1 {
width:50%;
height:600px;
float:left;
border:1px solid black;
margin-right:10px;
overflow:hidden;
}
div#box2 {
width:48%;
height:295px;
border:1px solid black;
float:left;
margin-bottom:10px;
overflow:hidden;
}
div#box3 {
width:48%;
height:295px;
border:1px solid black;
float:left;
overflow:hidden;
}
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 6:10 pm
by wpbremer
Heb je de css van mij ook al geprobeerd?
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 6:17 pm
by TD__
box1 moet je wel afsluiten voor het begin van box2, nu zitten box2 en box3 bij box1 in.
En als het dan nog ondermekaar blijft, maak het dan wat smaller.
(En in die boxes moet geen overflow.
Haal die ook eerst maar even weg, als je een stap verder bent dan kijken we wel verder waar we die dan weer instoppen)
Re: Layout meerdere content velden
Posted: Wed Mar 31, 2010 7:36 pm
by rayring
Ja nou snap ik het ik had de div's niet afgesloten nu werkt het...
Ik ga er verder mee..
Bedankt TD__ en wpbremer natuurlijk ook