[CSS] Enkele vragen over site opmaken met CSS ipv tables

[Reveller]

Ik wil voor het eerst een website gaan maken die ipv met <tables> middels CSS wordt opgebouwd.

Ik heb wat rondgekeken en heb een aantal conclusies getrokken:

1. Het opmaken van je pagina met CSS wordt slechts beperkt aangeraden als je je pagina ook voor Netscape 4 geschikt wil maken (en dat wil ik);
2. Er worden veel mogelijkheden gegeven om een pagina op te bouwen: sommigen geven de absolute left en top waarden van elk #element aan, anderen werken met geneste <div>'s, waarbij deze ten opzichte van elkaar gepositioneerd worden;
3. Er zijn veel sites die zeer geavanceerde layouts laten zien, maar slecht weinig die stap voor stap een eenvoudige layout opbouwen.

Ik zie dus door de bomen het bos niet meer, en wil daarom graag van jullie weten hoe jullie je CSS-sites opbouwen. Heb je wellicht links naar eenvoudige tutorials en / of standaarden waar je gebruik van maakt? Kan iemand mij wellicht wat meer vertellen over het verschil zoals genoemd bij punt 2? In hoeverre ondersteunt NN4 CSS?

BTW: het gaat specifiek om het volgende. Ik wil een site maken met de volgende layout:



En dan wil ik later wellicht in "main" weer meerdere kolommen maken etc.

[whoami]

Zoals je in de forumbeschrijvingen kunt lezen op de index-pagina, hoort CSS / HTML en alle clientside - stuff niet thuis in P&W, maar in W&G.

P&W -> W&G

[Reveller]

Je hebt gelijk, excuses. Ik ken de regels maar surf veel op GoT - meerdere browserwindows open en dan, tja...foutje moet kunnen

[ Voor 20% gewijzigd door Reveller op 14-04-2004 19:09 ]

[T-MOB]

In de reference van W3schools (http://www.w3schools.com/css/css_reference.asp) staat per property aangegeven welke browsers hem ondersteunen (iig voor netscape).

[Verwijderd]

Je stelt onmogelijke eisen. Ga nou maar gewoon wat proberen, en doe zélf ervaring ermee op. Van afkijken leer je met CSS niet zoveel, je moet gewoon weten wat wel en niet gaat, en dat leer je door voor jezelf een bergje testcases te maken. De aangegeven layout is doodsimpel, als je maar een beetje je best doet.

Verder begrijp ik niet waarom je Netscape 4 wilt ondersteunen. Wat Netscape 4 betreft: die gebruikers hoeven geen fantastische websites meer te verwachten. Als je CSS een beetje handig toepast, zal het in Netscape 4 niet mooi, maar wel bruikbaar zijn. Verwacht niet dezelfde layout.

[Verwijderd]

Ja inderdaad, kun je zeggen waarom je NS4 wilt ondersteunen? Ik vind toch dat je inmiddels wel mag verwachten dat mensen een ietwat nieuwere browser gebruiken.

Maar wat is precies het probleem met deze layout? Als je nu eerst eens uitlegt wat je al geprobeerd hebt en wat je niet lukt, dan helpen we je wel verder. Maar nu klinkt het erg als: "zoek dit ff voor me uit", en daar heb ik en de meeste hier weinig zin in eigenlijk.

[Dennis]

Of nog beter, stel je html logisch op, en importeer de CSS met @. Netscape 4 laat dan gewoon een "kale" pagina zien. Op die manier hebben Netscape 4 gebruiker álle functionaliteit en informatie van de site, maar geen lay-out.

Prima toch? .

[Clay]

2. Er worden veel mogelijkheden gegeven om een pagina op te bouwen: sommigen geven de absolute left en top waarden van elk #element aan, anderen werken met geneste <div>'s, waarbij deze ten opzichte van elkaar gepositioneerd worden

met absolute haat je iets uit de flow. Het reserveert dan geen ruimte meer waardoor andere elementen anders weggedrukt zouden worden (meestal verticaal, maar met floats ook horizontaal). Flow en nesting zijn alleen wel je vrienden die kan je idd helemaal links laten liggen maar dan besteel je jezelf van een aantal handigheden.

Naar mijn mening zijn er een paar essentiele dingen die je over CSS moet weten om er überhaupt iets mee te kunnen;

• Hoe de verschillende display types werken en samenwerken; de flow.
• Hoe je position:absolute en position:relative handig kan gebruiken.
• Wat wel en niet te doen met floats en clear.
• Begrip van boxmodels.

Wat daarnaast ook wel handig is:

• Vergeet denken in "cellen". Een element kan ook makkelijk buiten zijn parent gepositioneerd worden zonder dat dat de flow in de weg zit.
• Dat procentuele waardes altijd van de directe parent erven; height:100% zal dus nooit meer dan viewport hoogte worden.
• Dat er een verschil is tussen een visueel effect, en de fysieke dimensies van een element waar dat effect op lijkt te staan; 2 "even lange" kolommen hoeven niet even lang te zijn (zoals tabel cellen) om toch even lang te lijken. Dit kan je veel makkelijker doen door een parent - die de hoogte van de grootste kolom aanneemt - een background met repeat-y te geven waar dat effect inzit, en de kolommen zelf met rust te laten.
• Wat collapsing margins zijn.
• Dat je met nesting en background images meerdere grafische lagen kan stapelen, elk met hun eigen repeat richting.
• Dat IE geen maatstaf is voor hoe goed je CSS is, ook al zie je wel het gewenste effect, en b.v. in een andere browser niet.

Wat b.v. wel grappig is is als je dit doet:

code:

body {
   font-size:12px;
}

* {
   font-size:100%;
}

h1 {
   font-size:125%;
}

Als je dan de fontsize van alleen de body aanpast met javascript, schaalt ALLE content van je pagina automatisch mee. Zo kan je makkelijk verschillende fontsizes in je pagina inbouwen.

_{en *{} overschrijft zo inderdaad -niet- de body{} omdat * een specificity van 0 heeft, en body{} heeft 1}

[Verwijderd]

Als webbouwer blijf je wat compatibiliteit betreft altijd achter de browsers aanhollen. Soms moet je gewoon zeggen: STOP! Voor jou geen ondersteuning meer, download maar eens wat nieuws!

Ik zou voorstellen: doe het lekker met tabellen en CSS. Waarom geen tabellen meer? Die zijn juist tot nu toe nog met alles compatible.

Ook iets lastigs: een div absolute plaatsen op 150px,200px en dan uitlijnen tot de rechterzijde van de browser, bv. width: 100% - dat gaat niet! 100% = de breedte van het scherm, en dan vanaf 150px, dus ook rechts 150px buiten beeld!

En probeer eens een border aan een div te geven. border: 1px solid black
Wat gebeurd er? Die browsers zetten die ene pixel BUITEN het div kader. En dan verschijnt er rechts een schuifbalk, en daardoor ook aan de onderkant een. Grrrr.

Een tabel is toch veel fijner.

HTML:

<html>
<body style="margin: 0px;">

<div style="position: absolute; left: 150px; top: 200px;
width: 100%; background-color: red;">
Dit werkt dus niet omdat het altijd van het scherm afloopt
</div>

<div style="position: absolute; left: 0px; padding-left: 150px;
top: 250px; width: 100%; background-color: yellow; border: 1px solid black;">
Dit werkt ook niet helemaal, ivm de achtergrond kleur
</div>

<table cellspacing="0" cellpadding="0" border="0"
style="position: absolute; left: 0px; top: 300px;
width: 100%; border: 1px solid black;">
  <tr>
    <td style="width: 150px;">[img]""[/img]</td>
    <td style="width: 100%; background-color: blue;">Dit werkt lekker wel!</td>
  </tr>
</table>

</body>
</html>

[Verwijderd]

@Dynamiel: al die dingen die je aangeeft duiden niet op tekortkomingen van CSS, maar te weinig kennis daarvan van jouw kant. De volgende HTML is al een stuk simpeler dan die tabel van jou:

HTML:

<div id="test">
    <div id="content">
        <p>Werkt ook goed</p>
    </div>
</div>

En die style je vervolgens met:

Cascading Stylesheet:

body, p {
    margin: 0;
}

#test {
    position: absolute;
    left: 0;
    top: 200px;
    background-color: yellow;
    width: 100%;
    color: #FFFFFF;
    border-style: solid;
    border-color: black;
    border-width: 1px 0px 1px 0px;
}
    
#content {
    background-color: green;
    margin-left: 150px;
}

Dat je het niet wilt gebruiken is jouw keuze, maar zeg niet dat het niet kan.

[Clay]

Dynamiel
...

Ook iets lastigs: een div absolute plaatsen op 150px,200px en dan uitlijnen tot de rechterzijde van de browser, bv. width: 100% - dat gaat niet! 100% = de breedte van het scherm, en dan vanaf 150px, dus ook rechts 150px buiten beeld!

• Hoe de verschillende display types werken en samenwerken; de flow.
• Hoe je position:absolute en position:relative handig kan gebruiken.

En probeer eens een border aan een div te geven. border: 1px solid black
Wat gebeurd er? Die browsers zetten die ene pixel BUITEN het div kader. En dan verschijnt er rechts een schuifbalk, en daardoor ook aan de onderkant een. Grrrr.

• Begrip van boxmodels.

In de toekomst (IE kan dit nu niet) kan dat 150px tot rechts ook met:

code:

position:absolute;
left:150px;
right:0;

[Verwijderd]

Gaat ook eens kijken op PositionIsEverything.net zou ik zeggen...

[Verwijderd]

Ok ok, ik zei ook niet dat het 'niet' kan, maar mijn reactie was over the top.

Blijft mijn vraag en verbazing: waarom zou je geen tabellen (icm CSS) meer mogen gaan gebruiken? Moet het met CSS in de toekomst? Die tabellen zijn toch veel beter downwards compatible?

[ Voor 19% gewijzigd door Verwijderd op 15-04-2004 15:49 ]

[Verwijderd]

Eigenlijk wel, tabellen zijn bedoeld voor tabulaire data, en niet voor de layout van een pagina.

En nja, downward compatibility moet je toch durven lostlaten na een tijdje, anders kun je elke verbetering in html wel vergeten. Voordeel aan css goed gebruiken is dat iemand die een hele oude browser heeft nogsteeds de pagina kan zien, ook al ziet ie niet je fancy design.

[ Voor 60% gewijzigd door Verwijderd op 15-04-2004 15:50 ]