[CSS] Welke opmaaktechniek gebruiken?

[Verwijderd]

Beste Tweakers,

De site die ik op het moment aan het ontwikkelen ben omvat het volgende structuurschema:
http://www.aestetik.net/dev/structuur.jpg

Ik ben benieuwd welke opmaaktechniek ik het beste kan gebruiken om zoiets om te zetten naar HTML. Zelf zat ik te denken aan tabellen, maar misschien is er een betere oplossing? Misschien een unsorted list (mbv. display: inline; voor de horizontale spatiering) ?

De rest van de site is HTML 4.01 Strict en opgebouwd uit DIV's. Ik wil het liefst dus de meest nette manier gebruiken die in lijn is met deze doctype.

Kan iemand mij een beetje op weg helpen?

Alvast bedankt

[NoepZor]

Ik zou alles in Divs gooien en tabellen voor de opmaak zoveel mogelijk mijden. Je kunt dan de opmaak van de divs centraal in de stylesheet regelen en je hebt een mooie overzichtelijke html code. De structuur die je in je voorbeeld hebt is ook niet dermate complex dat het je dagen kost om het goed voor elkaar te krijgen met div's.

Just my few cents

[TargetX]

Edit: nvm, ik had exact hetzelfde getyped als NoepZor

[samo]

De titel 'Woningbouw' enz. past in een header-element of div/span, moet je zelf even kiezen. (ligt ook aan de rest van de site natuurlijk).
Ieder groen stuk er onder past in een list, met daarin een image, gewone tekst, een titel (miss. enige tekst zonder span), en een link. Is niet zo heel ingewikkeld om dat met css te stijlen. Tabellen zie ik niet als nodig.

[chem]

ik zie een logo (bv een h1), een dl/dt/dd en in de dd een img, dan een ul gevolgd door een a.

[ Voor 8% gewijzigd door chem op 19-06-2006 16:32 ]

[OnTracK]

Zo snel zat ik te denken aan:
• h1 voor "in verkoop"
• h2 voor "woningbouw" en "utiliteitsbouw"
• ul voor de huizen met daarin eventueel een div om de opmaak wat meer te scheiden

puur div'jes gebruiken betekend nog niet dat je goed bezig bent. h1 en h2 zijn prima te style voor dit doel (gebruik margin, padding, width, height, background, color, enz..). Het style van de list is ietwat moelijker omdat je de standaard style die eraan gegeven word grotendeels weg moet halen. Maar het komt er véél netter én duidelijker uit te zien.

Wat chem zegt is misschien beter. Maar persoonlijk vind ik een dl behoorlijk moeilijk te stylen.

[ Voor 17% gewijzigd door OnTracK op 19-06-2006 16:39 ]

[mithras]

Ik zou een combi doen van bovenstaande. Iedereen kan wel roepen div dit, div dat, maar dat maakt het juist onlogischer.

Als je nu idd de verkoop een h1 maakt, woningbouw een h2.
Daarin Daaronder een dl met de dt een img en de dd de tekst, een link en dan kan je het adres "strong" maken.
Dan kan je de css stylen door de dl, dt en dd aan te geven, in de dd maak je linkjes groen, en dan hoef je alleen je span voor je adres nog nader te specificeren

[ Voor 6% gewijzigd door mithras op 19-06-2006 16:38 . Reden: dl in h2 is onlogisch, leuke typo ]

[Blaise]

Ik zou het doen met een definition list. Het is niet strict een definitie, maar met een definiton list geef je de relatie tussen de verschillende elementen duidelijk weer.

Deze markup is met CSS zó te stylen dat je het resultaat van het plaatje krijgt, zonder toevoeging van enige mark-up. Vergt wel enige kennis van CSS.

HTML:

<h2>In verkoop</h2>
<dl>

   <dt>Woningbouw</dt>
   <dd>
         <img>
         <h3>28 Woningen</h3>
         <strong>Johan Beelij, Dinxperlo</strong>
         <a>Bekijk dit project</a>
   </dd>
   <dd>
         <img>
         <h3>Mantelwoningen</h3>
         <strong>Gouda</strong>
         <a>Bekijk dit project</a>
   </dd>

   <dt>Utiliteitsbouw</dt>
   <dd>
         <img>
         <h3>29 Bedrijvenunits</h3>
         <strong>Angeslkade..</strong>
         <a>Bekijk dit project</a>
   </dd>
   <dd>
         <img>
         <h3>...</h3>
         <strong>...</strong>
         <a>Bekijk dit project</a>
   </dd>

</dl>

Eventueel kan je in de <dd> een nieuwe <dl> plaatsen zoals het voorbeeld hieronder.

[ Voor 43% gewijzigd door Blaise op 19-06-2006 16:39 ]

[Verwijderd]

HTML:

<h2>In verkoop</h2>

<h3>Woningbouw</h3>
<dl>
    <dt>plaatje1</dt>
    <dd><p>28 Woningen<br>
           Johan Beelij, Dinxperlo<br>
           <a href="">Bekijk dit project ></a></p>
    </dd>
    <dt>plaatje2</dt>
    <dd><p>Mantelwoningen<br>
           Gouda<br>
           <a href="">Bekijk dit project ></a></p>
    </dd>
</dl>

<h3>Utiliteitsgebouw</h3>
<dl>
    <dt>plaatje3</dt>
    <dd><p>29 Bedrijvenunits<br>
           Angstelkade, Nieuwersluis<br>
           <a href="">Bekijk dit project ></a></p>
    </dd>
    <dt>plaatje4</dt>
    <dd><p>8 Bedrijvenunits<br>
           Artemisweg, lelystad<br>
          <a href="">Bekijk dit project ></a></p>
    </dd>
</dl>

Zoiets?

[ Voor 75% gewijzigd door Verwijderd op 19-06-2006 16:41 . Reden: wat tabs enzo.. ]

[Verwijderd]

Ontzettend bedankt voor de snelle reply's.

Ik ga waarschijnlijk verder met de structuur zoals Treador en Blaise al hebben voorgedefineerd (dank daarvoor).
Omdat er in de toekomst waarschijnlijk meer projecten bij komen lijkt me die optie het meest flexibel.
Het opmaken van een dergelijke structuur heb ik nog niet eerder gedaan, maar daar moet wel uit te komen zijn.

[NoepZor]

Ik ben van het weekend een beetje aan het kloten geslagen met mijn website. Ik maakte eerder de lay-out in tables en de opmaak in de HTML zelf, maar deze keer wou ik met DIVS aan de gang. Ik heb gezocht op Google en toen is het redelijk gelukt. Het is effe proberen/uitzoeken waarvoor alle atributen dienen in de CSS en hoe je alles precies positioneert, maar daarna is het ideaal als je alles centraal hebt.

In principe zou je dan de hele opmaak kunnen vervangen door een andere stylesheet te laden.

[Verwijderd]

Ik loop meteen al tegen een klein probleempje aan:

http://www.aestetik.net/dev/tweak.html

Hoe kan ik er nou voor zorgen dat ik de tekstregels op gelijke hoogte met het plaatje uitlijn?

Heb al wel even gegoogled, maar het is lastig specifieke informatie over dit soort dingen te vinden.


Update: Float: left; is inderdaad wat ik zocht
Nu nog even spelen met inline elementen. hulde.

[ Voor 16% gewijzigd door Verwijderd op 19-06-2006 17:11 ]

[Verwijderd]

dt { float: left; }

[Grijze Vos]

Geef je dt en dd een float: left, zou ik denken. Dan plaats je de blokken naast elkaar.

Of je maakt er inline elementen van, ipv block elements.

[Verwijderd]

Bedenk wel dat inline je niet de mogelijkheid biedt om afmetingen mee te geven..

[klokop]

Verwijderd schreef op maandag 19 juni 2006 @ 17:03:
dt { float: left; }

Ik denk dat er dan iets niet goed gaat als de dt langer is dan de dd. Toch?

[Verwijderd]

klokop schreef op maandag 19 juni 2006 @ 17:14:
[...]

Ik denk dat er dan iets niet goed gaat als de dt langer is dan de dd. Toch?

Ja klopt, maar dat kun je perfect oplossen door de dt een clear: left; mee te geven..

[Verwijderd]

http://www.aestetik.net/dev/tweak.html

Firefox/Safari doet nu ongeveer wat ik wil. Ik heb een rood lijntje toegevoegd om mijn probleem te verhelderen. Het rode lijntje is de outline van mijn DD, maar waarom begint deze temidden van het plaatje? Ik wil dat het lijntje begint waar mijn plaatje ook begint. Weet iemand hier een oplossing voor?

Het geheel werkt echter niet in Internet Explorer, dus als iemand daar een oplossing voor heeft zou dat ook erg mooi zijn.

Cheers

[Alex)]

Misschien een clear:left; toevoegen aan iedere dl?

[moozzuzz]

Waar ik zo meteen op denk is:

- DL als block-elem CSS'en
- Spelen met padding.