Tables vs CSS - Softwareontwikkeling

maandag 1 oktober 2007 13:53

Acties:

Websites & Fotografie

Topicstarter

Al jaren maak ik websites op door gebruik te maken van tables. Werkt prima maar bij een beetje grote website heb je misschien wel 10 levels van tables en de code word daar niet echt overzichtelijk door. Ik hoor ook hier een daar mensen roepen dat het vormgeven van pagina's met tables niet echt DE manier is (hoewel het natuurlijk goed werkt). Ik wil dus mijn volgende project eens helemaal in CSS doen en geen tables gebruiken. Ik loop echter tegen 1 probleem aan: Bij iedere layer/div geef ik een top en left positie op, maar wat nou als ik de site in het midden gecentreerd wil hebben? 'Vroeger' deed ik gewoon <table align='center'> en dat werkte perfect. maar aangezien ik nu alleen een <div class='whatever'> wil doen en 'align: center' in het css bestand niet werkt vraag ik me af hoe ik dat dan moet gaan coden.

nickdekruijk.nl Websites & Fotografie

maandag 1 oktober 2007 13:59

Acties:

disjfa

be

Gewoon eerst lezen wat css is en welke elementen je hebt is al een stap in de goede richting. Dan nog wat tutorials doen voor beginners en je komt al een heel eind.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 1 oktober 2007 14:01

Acties:

axis

Ik vind O'Reilly's Head First HTML with CSS & XHTML een briljant boek, die dit uitstekend uitlegt.

Two advices for network troubleshooting.. learn to draw diagrams in Visio, and THINK IN LAYERS!

maandag 1 oktober 2007 14:03

Acties:

amphora

Websites & Fotografie

Topicstarter

Ik ben absoluut geen beginner. En ook zeker geen CSS noob. Dus kom aub niet met tutorials of boeken aanzetten.

Ik heb het nu zo:

code:

1
2
3

<div align=center>
<div class='menu'>menublabla</div>
</div>

dit werkt prima. maar kan het niet simpeler? Is er geen css tag die het centeren in de menu class zelf kan doen?

[ Voor 57% gewijzigd door amphora op 01-10-2007 14:06 ]

nickdekruijk.nl Websites & Fotografie

maandag 1 oktober 2007 14:07

Acties:

lammert

Dit is het eerste waar iedereen die overstapt naar CSS tegenaan loopt: daarom staat Google ook vol van die vragen, inclusief antwoorden

hint

maandag 1 oktober 2007 14:08

Acties:

Grijze Vos

amphora schreef op maandag 01 oktober 2007 @ 14:03:
Ik ben absoluut geen beginner. En ook zeker geen CSS noob. Ken vrijwel alle css tags wel maar alleen centreren lukt me dus niet.

Het truukje is simpel, het element dat je div contained (in dit geval body), geef je een text-align: center, en je div zelf een margin: auto.

Test setup:

Cascading Stylesheet:

body {
  text-align: center;
}

div#main {
  margin: auto;
}

HTML:

<doctype blabla>
<html>
  <head>
  <link naar je css bestand />
  </head>
  <body>
    <div id="main">
      test
    </div>
  </body>
</html>

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

maandag 1 oktober 2007 14:09

Acties:

Spleasure

Ik hier?

Zonder die text-align in de body zou het ook gewoon moeten werken.

maandag 1 oktober 2007 14:16

Acties:

amphora

Websites & Fotografie

Topicstarter

Grijze Vos schreef op maandag 01 oktober 2007 @ 14:08:
[...]

Het truukje is simpel, het element dat je div contained (in dit geval body), geef je een text-align: center, en je div zelf een margin: auto.

Zo had ik het in eerste instantie ook bedacht. Alleen ontbrak bij mij de margin:auto tag. Die zocht ik dus

. Bedankt voor de gouden tip!

nickdekruijk.nl Websites & Fotografie

maandag 1 oktober 2007 14:18

Acties:

disjfa

be

google: css center

Was niet al te moeilijk toch

of gewoon hier

disjfa - disj·fa (meneer)
disjfa.nl

maandag 1 oktober 2007 14:23

Acties:

Grijze Vos

Spleasure schreef op maandag 01 oktober 2007 @ 14:09:
Zonder die text-align in de body zou het ook gewoon moeten werken.

Klopt, waarschijnlijk wel. Maar in zo'n geval ben ik liever expliciet dat mijn inner block ge-centered moet worden. De specs zeggen niet dat margin-left en margin-right even groot moeten worden gecomputeerd als ze allebei auto zijn.

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

maandag 1 oktober 2007 14:26

Acties:

LuCarD

Certified BUFH

amphora schreef op maandag 01 oktober 2007 @ 14:03:
Ik ben absoluut geen beginner. En ook zeker geen CSS noob. Dus kom aub niet met tutorials of boeken aanzetten.

Ik heb het nu zo:
code:
1
2
3
<div align=center>
<div class='menu'>menublabla</div>
</div>
dit werkt prima. maar kan het niet simpeler? Is er geen css tag die het centeren in de menu class zelf kan doen?

Kennelijk overschat je CSS kennis toch.

Verder is er een boek/tutorials voor elke type gebruiker, beginner of anders. Je kan nou eenmaal niet alles weten, en hoe eerder je dat realiseert hoe eerder je een goede coder/programmer/designer word.

Ik kan je garanderen dat alle goede coders hier op het forum regelmatig weer een boek/tutorial en of reference manual ter handen nemen.

Programmer - an organism that turns coffee into software.

maandag 1 oktober 2007 14:28

Acties:

simon

overigens is 't niet tables vs css, maar stylesheets voor make-up ipv tables voor make up

|>

maandag 1 oktober 2007 14:58

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Simon schreef op maandag 01 oktober 2007 @ 14:28:
overigens is 't niet tables vs css, maar stylesheets voor make-up visuele layout-formatering en positionering ipv tables voor make up hetzelfde

alhoewel ik de term 'make up' wel grappig gevonden vind, versterkt het enkel de taalverwarring tussen termen als 'markup' en 'opmaak' verder.
je hebt zeker gelijk, maar een groot probleem voor mensen die zich bezig gaan houden met het gebruik van CSS, zeker als ze eerst enkel met traditionele HTML en attributes voor layout hebben beziggehouden, hebben het meeste eraan als er ook in duidelijk taalgebruik het verschil tussen 'markup/html-opmaakcode' én de visuele formatering ervan wordt uitgelegd...
Dat daar nl. een groot verschil tussen bestaat is een belangrijk grondconcept ... vervolgens komen hieruit enorme voordelen (bv het voorkomen van en tiental genestte tabellen en daardoor gecultterde code)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

maandag 1 oktober 2007 18:32

Acties:

Verwijderd

amphora schreef op maandag 01 oktober 2007 @ 14:16:
[...]

Zo had ik het in eerste instantie ook bedacht. Alleen ontbrak bij mij de margin:auto tag. Die zocht ik dus . Bedankt voor de gouden tip!

Nog even een waarschuwing; als je geen width opgeeft werkt het niet.

Correct me if i'm wrong, heb vandaag al vaker domme dingen gezegd

[ Voor 9% gewijzigd door Verwijderd op 01-10-2007 18:33 ]

maandag 1 oktober 2007 18:54

Acties:

TXC

Lees ook even deze post van Robbert van vandaag. Pas op dat je niet overal waar je normaal een table voor gebruikte nu een DIV gaat gebruiken, zoals je bij je menu lijkt te doen.

maandag 1 oktober 2007 21:06

Acties:

Verwijderd

RM-rf schreef op maandag 01 oktober 2007 @ 14:58:
[...]

alhoewel ik de term 'make up' wel grappig gevonden vind, versterkt het enkel de taalverwarring tussen termen als 'markup' en 'opmaak' verder.
je hebt zeker gelijk, maar een groot probleem voor mensen die zich bezig gaan houden met het gebruik van CSS, zeker als ze eerst enkel met traditionele HTML en attributes voor layout hebben beziggehouden, hebben het meeste eraan als er ook in duidelijk taalgebruik het verschil tussen 'markup/html-opmaakcode' én de visuele formatering ervan wordt uitgelegd...
Dat daar nl. een groot verschil tussen bestaat is een belangrijk grondconcept ... vervolgens komen hieruit enorme voordelen (bv het voorkomen van en tiental genestte tabellen en daardoor gecultterde code)

tja, op hoeveel opleidingen hoor / in hoeveel boeken lees je wel niet dat html een opmaak taal is...

bedroevend
het is een markeertaal

maandag 1 oktober 2007 23:04

Acties:

Rowanov

Kop eens wat anders...

amphora schreef op maandag 01 oktober 2007 @ 14:03:
Ik ben absoluut geen beginner. En ook zeker geen CSS noob. Dus kom aub niet met tutorials of boeken aanzetten.

Ik heb het nu zo:
code:
1
2
3
<div align=center>
<div class='menu'>menublabla</div>
</div>
dit werkt prima. maar kan het niet simpeler? Is er geen css tag die het centeren in de menu class zelf kan doen?

Leuk dat je je gebrek aan kennis met een voorbeeld onderstreept

Met css en semantische html werken is zo verschillend van tabellayouts dat je echt aan een tutorial moet gaan denken. Ik heb in dit topic http://modernmarkup.nl nog niet voorbij zien komen en dat is zeker een goed startpunt, waar je met enige basis zo doorheen gaat (ook zonder enige basis is het een prima uitleg).

Daarnaast wil ik het voorbeeld van Grijze Vos nog even aanhalen:

Grijze Vos schreef op maandag 01 oktober 2007 @ 14:08:

HTML:

<doctype blabla>
<html>
  <head>
  <link naar je css bestand />
  </head>
  <body>
    <div id="main">
      test
    </div>
  </body>
</html>

De CSS is op de volgende manier completer:

Cascading Stylesheet:

body {
  text-align: center;
}
#main {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

De text-align: center; is om het ook in oudere IE versies werkend te krijgen. In alle andere browsers doet de margin: 0 auto; het werk. Het is vervolgens wel nodig om een breedte aan #main mee te geven, want de standaard breedte is 100%. De text-align zet je vervolgens weer terug op left, omdat anders alles gecentreerd blijft staan.

[ Voor 3% gewijzigd door Rowanov op 01-10-2007 23:06 ]

dinsdag 2 oktober 2007 11:08

Acties:

Verwijderd

ha, heb ik dat toch even goed zelf uitgepuzzeld als beginnend css-er

was me toch een gepruts zeg, echt niet normaal, maar uiteindelijk lukte het.

En dat <div align=center> is geen CSS vormgeven als ik me niet vergis, da's gewoon html, en het idee is juist dat je het positioneren etc. in je stylesheet doet...

Ik zit in een klas met mensen die zoals ik net begonnen zijn met CSS, en mensen die het al jaren doen. Maar iedereen heeft het boek 'HTML en CSS de Basis' aangeschaft, terwijl het geen verplichte literatuur is. Probeer het eens TS, met een boek

vrijdag 5 oktober 2007 15:04

Acties:

Verwijderd

Hmmm, <div align=center></div> is geen CSS. Dat is een attribuut met een waarde meegeven aan een DIV element. <div style="text-align: center;"></div> of de DIV een Class (Class wel definieeren in een stylesheet) meegeven oogt meer naar CSS.

Enne layouting in Tables is zoooo last week. Tables zijn gemaakt om data weer te geven, niet om er een layout mee te bepalen. Overigens zijn tables niet flexibel om naar verschillende layouts om te zetten.

[ Voor 30% gewijzigd door Verwijderd op 05-10-2007 15:07 ]

vrijdag 5 oktober 2007 15:21

Acties:

Verwijderd

Je hebt gelijk

Alhoewel:

HTML:

1	<div align="center"></div>

Gebeurt er (als je width hebt opgegeven) hier; niet iets anders als bovenstaand?
text-align: center;

Naar mijn weten zorgt text-align voor het centeren van de tekst en niet van de div. Maar wordt voor het centreren van de div margin: auto; gebruikt.

Alleen in IE6 heb je text-align nodig door een bug.

Correct me if i'm wrong

vrijdag 5 oktober 2007 15:29

Acties:

Verwijderd

Mensen, kraak die jongen niet zo af. Hij heeft een vraag, beantwoord deze of hou je mond. Ga niet lopen zeuren over boeken die hij zou moeten lezen of zijn verstand van CSS of zelf de titel van het toppic. Dank u allen.

Hoewel goed bedoeld; daar hebben we moderators voor

Doe dan een TR

[ Voor 27% gewijzigd door RobIII op 05-10-2007 15:36 ]

vrijdag 5 oktober 2007 15:33

Acties:

Verwijderd

Mag ik je erop wijzen dat ik hem probeer te helpen? Ik kraak hem heus niet af, ik vertel alleen hoe het moet.