Toon posts:

[CSS] Welke opmaaktechniek gebruiken?

Pagina: 1
Acties:

Verwijderd

Topicstarter
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
  • Registratie: Maart 2003
  • Laatst online: 15:02
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

De wijzen komen uit het Oosten!


  • TargetX
  • Registratie: November 2005
  • Laatst online: 18-11-2025
Edit: nvm, ik had exact hetzelfde getyped als NoepZor

  • samo
  • Registratie: Juni 2003
  • Laatst online: 19-02 14:43

samo

yo/wassup

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.

Bekend van cmns.nl | ArneCoomans.nl | Het kindertehuis van mijn pa in Ghana


  • chem
  • Registratie: Oktober 2000
  • Laatst online: 10:01

chem

Reist de wereld rond

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 ]

Klaar voor een nieuwe uitdaging.


  • OnTracK
  • Registratie: Oktober 2002
  • Laatst online: 16:03
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 ]

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.


  • mithras
  • Registratie: Maart 2003
  • Niet online
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
  • Registratie: Juni 2001
  • Niet online
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:
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
28
29
30
31
32
<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:
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
28
29
<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

Topicstarter
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
  • Registratie: Maart 2003
  • Laatst online: 15:02
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.

De wijzen komen uit het Oosten!


Verwijderd

Topicstarter
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
  • Registratie: December 2002
  • Laatst online: 28-02-2025
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.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info


Verwijderd

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

  • klokop
  • Registratie: Juli 2001
  • Laatst online: 29-01 12:34

klokop

swiekie swoeng

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

"Passing silhouettes of strange illuminated mannequins"


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

Topicstarter
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. :o

Cheers

  • Alex)
  • Registratie: Juni 2003
  • Laatst online: 12-12-2025
Misschien een clear:left; toevoegen aan iedere dl?

We are shaping the future


  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Waar ik zo meteen op denk is:

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