[CSS] losse divjes in een colomstructuur - Softwareontwikkeling

zaterdag 5 juni 2004 13:30

Acties:

bastards...

Topicstarter

Dag mensen,

ik heb een vraagje.
ik ben een site aan het maken waarbij ik net zoals bij csszengarden dmv 1 css file de layout verschillende vormen wil aan kunnen laten nemen

nu heb ik de volgende opzet van mijn code

code:

<body>
  <div id="container">
    <div id="blokje 1"></div>
    <div id="blokje 2"></div>
    <div id="blokje 3"></div>
    enz.
  </div>
</body>

de content van de site komt in verschillende blokjes te staan welke de user kan maximaliseren/minimaliseren, de blokjes kunnen dus verschillende groottes aannemen (in de hoogte)

hier zit dan ook meteen mijn probleem.
Als ik verschillende kolommen wil gebruiken om de content in weer te geven dan plaatst ie de zaken in de linker kolom netjes naast elkaar. echter als ik de middelste en de rechtse kolom wil positioneren met css dan doe ik dat met absolute positionering, waardoor de content dus vaststaat op een bepaalde plaats.

dit levert me problemen op aangezien de content op mijn site wisselt per gebruiker en de blokjes van grootte verschillen.

ik ben absoluut geen css guru en zou graag weten hoe ik dit probleem het beste kan aanpakken

alvast bedankt

nothing special

zaterdag 5 juni 2004 13:55

Acties:

Verwijderd

Ik zet het dan altijd in een lijst

code:

<ul class="bla">
<li class="andere bla">
<li class="nog een andere bla">
</ul>

Dit werkt perfect met menuutjes ed. Anders moet je ff bij startpagina oid spieken (want zoiets wil je toch?)

[ Voor 45% gewijzigd door Verwijderd op 05-06-2004 14:00 ]

zaterdag 5 juni 2004 14:42

Acties:

sealy

bastards...

Topicstarter

ik wil de kolomstructuur niet door middel van tabellen realiseren maar dmv css.

de html moet hetzelfde kunnen blijven en alleen de css moet hoeven te veranderen.

nothing special

zondag 6 juni 2004 03:14

Acties:

T-MOB

Ik zie nog niet helemaal wat je exacte probleem is (waarom kun je niet met absolute positioning werken?). Een alternatieve werkwijze om een column-structuur te krijgen is allicht met floats.

Als je duidelijker kunt maken wat je exacte probleem is wil ik best even voor je prutsen, misschien heb je al wat aan test21 tm 23 uit mijn GOT mapje

Regeren is vooruitschuiven

dinsdag 8 juni 2004 21:42

Acties:

sealy

bastards...

Topicstarter

misschien heb ik hier mijn verhaal duidelijker uitgelegd,

in ieder geval met voorbeeld

http://www.phpfreakz.nl/f...?forum=3&iid=430808#reply

nothing special

woensdag 9 juni 2004 00:11

Acties:

T-MOB

Je bedoelt dus zoiets als test 26

Dat is dus een kwestie van floats en een beetje hoofdrekenen...

Regeren is vooruitschuiven

woensdag 9 juni 2004 18:48

Acties:

sealy

bastards...

Topicstarter

nee dit bedoel ik niet.

je hebt hier extra divs toegevoegd om de kolomstructuur te genereren.
je hebt dus in de html dingen aangepast

ik wil graag dat ik de html zo kan laten als ie nu is (of op een andere manier de zaken indeel waardoor wat ik wil mogelijk is).

Ik wil dus:
met de huidige div-structuur zoals aangegeven hierboven verschillende layouts kunnen realiseren.

de layout moet dus in zijn geheel uit css komen. de layout voor de kolommen en de plaatsing van de blokjes informatie

zo kunnen mensen verschillende layouts maken met het veranderen van ALLEEN de css file.

de layout zoals bij je test26 klopt dus idd. maar dan zonder het toevoegen van die extra divs.

nothing special

woensdag 9 juni 2004 19:19

Acties:

T-MOB

Dat kan ook wel, wat je moet doen is alles wat links moet komen een aparte klasse meegeven (denk dat dat nu al zo is.. vind je code vrij onleesbaar). Het midden een eigen klasse en rechts een eigen klassen.

• Linkerkolom krijg je middels float: left;
• Middelste kolom krijg je met position: absolute; en left: x px;
• Rechterkolom creeër je met float: right;

Regeren is vooruitschuiven

woensdag 9 juni 2004 19:24

Acties:

sealy

bastards...

Topicstarter

vind je de code van deze pagina niet duidelijk? zo ja, wat is er dan niet duidelijk aan?

bedankt voor de moeite om er naar te kijken!

ik zal me eens meer gaan orienteren op floats

[ Voor 10% gewijzigd door sealy op 09-06-2004 21:53 ]

nothing special

woensdag 9 juni 2004 21:21

Acties:

sealy

bastards...

Topicstarter

----edit---
hmm met de

html { margin: 0; padding: 0; height: 100%;}

regel erbij doet ie het iig al beter, maar nog niet perfect

---edit----
in IE ligt ie nu helemaal overhoop terwijl ie in mozilla alles beter weergeeft

grr @ browsers

--edit---
het lijkt alsof als ik een border om de html en de body zet, er aan de rechter kant een padding niet op 0 staat. er zit ruimte tussen de zwarte (html) en de witte (body) border.
ook aan de onderkant lijkt dit het geval

(in mozilla en in IE alleen met andere ruimten tussen de borders.

--edit--
er zat een fout in de div layout, de referrer div werdt niet met een </div> afgesloten.

sorry voor deze slordigheid.

hij is nu aangepast

[ Voor 108% gewijzigd door sealy op 09-06-2004 22:54 ]

nothing special

woensdag 16 juni 2004 22:35

Acties:

Verwijderd

we zijn inmiddels wat verder maar we zijn er nog niet helemaal uit.

voor de duidelijkheid, we zijn een site aan het maken waarbij de gehele content gepositioneerd moet worden aan de hand van 1 css file. de kolomstructuur zoals in het hieronder aangegeven oude voorbeeld willen we 'namaken' dmv css.

Zo zou de layout eruit moeten zien (dit is de oude, met tables)
http://www.madvies.nl/moraalridder/test28.html

en zo ziet ie er nu uit: (kijk niet met IE want daar ziet ie er nog niet in uit)

http://www.madvies.nl/moraalridder/test27.html

de linker kolom is gefloat naar links, de center content is absoluut geplaatst en de rechter kolom is eigenlijk het probleem..

zijn er hier nog css guru's die ons even willen helpen?

donderdag 17 juni 2004 00:05

Acties:

rewind.

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm << echt super!

edit: http://css.maxdesign.com.au/index.htm < maybe iets voor de FAQ ?

[ Voor 38% gewijzigd door rewind. op 17-06-2004 00:06 ]

donderdag 17 juni 2004 10:34

Acties:

Verwijderd

deze heb ik idd al gelezen, maar voldoet niet helemaal aan wat ik wil

er worden hier slechts 3 blokelementen (divs) gebruikt en ik heb er velen meer

ik zou graag deze blokelementen in verschillende orientaties kunnen gebruiken maar ik zie dat je daar met de structuur

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

weinig mee kunt.

css lijkt me toch niet zo veelzijdig als ik had gehoopt.

waar ik eigenlijk naar op zoek ben is een positionering waarbij ik iets kan positioneren relatief ten opzichte van het vorige blokelement met dezelfde parent.

wel een soort float dus, maar eigenlijk een float: bottom; en deze bestaat niet

donderdag 17 juni 2004 10:43

Acties:

Trinsec

Huffi-Muffi-Guffi

Veel van CSS weet ik niet, maar ik dacht dat er toch wel relatieve positionering bestaat dat enorm veelzijdig is. Voorbeelden kan ik helaas niet geven.

when the Darkness fell upon us
when the Evil Ones came!
Creatures from the darkest pits of hell they were.
Trinsec's Journal

donderdag 17 juni 2004 19:14

Acties:

mullah

sealy schreef op 05 juni 2004 @ 13:30:
de content van de site komt in verschillende blokjes te staan welke de user kan maximaliseren/minimaliseren, de blokjes kunnen dus verschillende groottes aannemen (in de hoogte)

hier zit dan ook meteen mijn probleem.
Als ik verschillende kolommen wil gebruiken om de content in weer te geven dan plaatst ie de zaken in de linker kolom netjes naast elkaar. echter als ik de middelste en de rechtse kolom wil positioneren met css dan doe ik dat met absolute positionering, waardoor de content dus vaststaat op een bepaalde plaats.

dit levert me problemen op aangezien de content op mijn site wisselt per gebruiker en de blokjes van grootte verschillen.

je hebt dus x kleine blokjes met een hoogte die links op de site saan, rechts heb je dan absoluut gepositioneerde layout ..

maar de blokjes hebben dan toch allemaal een vastgestelde breedte die niet echt verandert over de verscillende pagina's

stap een:
alle blokjes krijgen een breedte en een float left, clear left mee

code:

div.blokje {
width: 200px;
float: left;
clear: left;
}

zo komen alle blokjes als het goed is links onder elkaar te staan
(ik heb even een class gebruikt om het compact te houden, je kunt ook ieder blokje apart met de id aanroepen)
Je content kolom bestaat dan uit het volgende

code:

div.content {
float:none;
position: relative;
top: 10px;
left: 0px;
margin-left: 210px;
}

het totaal ziet er dan ongeveer zo uit:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test</title>
    <style>
div {
border: 1px solid #da0;
}
div.blokje {
width: 200px;
float: left;
clear: left;
}
div.content {
float:none;
position: relative;
top: 10px;
left: 0px;
margin-left: 210px;
}
#container {
float: left;
clear: both;
}
    </style>
</head>

<body>
<div id="container">
    <div id="b1" class="blokje">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</div>
    <div id="b2" class="blokje">Vestibulum enim tortor,
 viverra dignissim, luctus non, gravida eget, nunc.
Curabitur pharetra est sed nisl.</div>
    <div id="b3" class="blokje">Sed cursus consectetuer quam.
Vestibulum ultrices ultrices nisl.</div>
    <div id="b4" class="blokje">Etiam orci quam, dapibus quis, ornare in,
facilisis sit amet, nunc.</div>
    <div id="b5" class="blokje">Vivamus ut tellus. Nullam egestas tortor semper  diam.
Praesent pede augue, pretium ut, accumsan sit amet, vestibulum eu, massa.
Vivamus rutrum libero ut dolor ullamcorper pellentesque.</div>
    <div id="b6" class="blokje">Mauris laoreet lectus id sem.</div>
    <div id="b7" class="blokje">etc...</div>
    <div id="b8" class="content">
        <h1>Sed cursus enim ac turpis.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam orci quam, dapibus quis, ornare in, facilisis sit amet, nunc.
Vestibulum enim tortor, viverra dignissim, luctus non, gravida eget, nunc.
Curabitur pharetra est sed nisl. Sed cursus consectetuer quam.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec sapien. Duis at sem in justo ornare eleifend.
Mauris et tellus in lacus aliquet faucibus.</p>
        <p>Vivamus ut tellus. Nullam egestas tortor semper diam.
Praesent pede augue, pretium ut, accumsan sit amet, vestibulum eu, massa. 
Vivamus rutrum libero ut dolor ullamcorper pellentesque.
Mauris laoreet lectus id sem. Proin volutpat.
Suspendisse at justo non odio gravida lacinia.
Vestibulum non lorem a ligula placerat gravida.
In tempus, erat ut sodales vehicula, odio velit venenatis dui,
ac facilisis velit urna et neque.</p>
    </div>
</div>
</body>
</html>

was dat ongeveer het idee?

anders moet je hier even verder kijken:
http://www.positioniseverything.net/ordered-floats.html
http://www.inknoise.com/experimental/layoutomatic.php
deze is wat te lang

of toch echt je html gaan aanpassen

[ Voor 13% gewijzigd door mullah op 17-06-2004 19:18 ]

vrijdag 18 juni 2004 11:10

Acties:

Verwijderd

nee helaas dat was niet het idee, je hebt slechts 2 kolommen gemaakt

ondertussen heb ik inderdaad de html aangepast en twee extra divs geplaatst om de kolommen met de kleine blokjes erin.

de twee brede blokken (weblog & kalender) heb ik gelaten zoals ze waren, alleen heb ik dus besloten dat deze ten alle tijden zichtbaar moeten zijn, willen ze de layout niet verpesten.

inmiddels ben ik er bijna uit voor mozilla, voor IE is het nog een grote zooi.

ik heb geen idee welke css hacks ik allemaal wel niet nodig heb om de zaak voor IE recht te trekken.

het resultaat is inmiddels hier te bekijken

http://www.madvies.nl/moraalridder/test29.html

je kunt zien dat de layout bijna ok is in mozilla. IE is dikke frutzooi

ik ben nog met twee dingetjes aan het stoeien:

- het gat tussen het maincontent en het footer gedeelte
vreemd genoeg gaat dit gat dicht als ik om beide divs een rand van 1px zet
- de knoppen voor minimaliseer/sluiten op de juiste plek krijgen.

deze knoppen zitten in een structuur als volgt

code:

<div class="container">
  <div id="column1">
    <div class="blokje1">
      <h2>titel blokje met bijbehorende achtergrond</h2><a class="KNOP1"></a><a class="KNOP2"></a>
    </div>
    <div class="blokje2">
      <h2>titel blokje met bijbehorende achtergrond</h2><a class="KNOP1"></a><a class="KNOP2"></a>
    </div>
    <div class="blokje3">
      <h2>titel blokje met bijbehorende achtergrond</h2><a class="KNOP1"></a><a class="KNOP2"></a>
    </div>
  </div>
  enz. enz.
</div>

nu dacht ik de knopjes met absolute positioning makkelijk te kunnen positioneren ten opzichte van de bovenrand van blokje1/2/3
absolute positioning moet, zoals ik gelezen heb, de zaak positioneren in relatie tot de PARENT van het te positioneren element.

ze snappen echter niet naar blokje 1/2/3 (wat ik dacht dat de parent was) maar naar column1/2, wat in mijn ogen een parent hoger ligt.

ik kan natuurlijk nu proberen om NOG een div om die blokjes1/2/3 heente zetten maar daar heb ik eerlijk gezegd geen zin in

zondag 20 juni 2004 23:20

Acties:

mullah

de parent van het bovenliggende element klopt wel... maar de float order gooit roet in het eten dan denk ik..

enneuh, die twee kolommen van mij - k was te lui om er drie te maken, en ik gehoopt dat je zelf een betje verder was gaan stoeien... het principe dat ik gebruikt heb werkt namelijk ook met drie kolommen, is alleen een stuk ingewikkelder.

de linkjes aan het einde geven nog meer tips trouwens

Pagina: 1

Reageer