[CSS] Hoe deze layout het beste uitvoeren?

[-TheNose-]

Mijn site moet er als volgt uitzien:
Site heeft een vaste breedte (750px voor de 800x600 mensen onder ons) en bestaat uit een header gedeelte (logo, menu en een fancy streepje , een middengedeelte van twee kolommen (tekst en plaatjes/aanvullende info) en een footer gedeelte (contactgegevens, fancy streepje en designed by plaatje )
De volledige site blijft horizontaal gecentreerd staan in het browservenster.

Nu ben ik hard aan het ploeteren om de layout met CSS te maken, maar daar loop ik tegen zoveel problemen op dat ik er een beetje verdrietig van wordt! Zoveel verschillende implementaties en eigenlijk alleen mozilla die zich netjes aan de richtlijnen houdt --> kortom iedereen aan de mozilla!!!!

Wat zouden jullie doen in mijn geval? Door ploeteren? (iemand hele nuttige tips voor me dan?) of terug grijpen op tables of frames

Please help me...ben nu in staat een bom op microsoft te gooien voor de slechte of vaak zelfs geen implementatie van CSS2!

[BtM909]

Veel smilies en eigenlijk een ding wat ik mis:

Waar gaat het precies fout

Heb je iets online staan en kan je ook aangeven waar het precies niet loopt zoals je wilt?

[-TheNose-]

Het probleem is juist de positionering van de diverse layers en dan met name de dynamische grote van de middencontent en de positionering van de footer daaronder....ook een later in te voegen DHTML menu gaat problemen geven want dan nemen die layers opeens ruimte in in de layout!

voorbeeld: http://www.jvgl.demon.nl/wb/index.htm
css: http://www.jvgl.demon.nl/wb/wb.css

Ik raak erg gefrustreerd....ben al meer dan een week aan het proberen!!!

[evaarties]

Het ziet er iig goed uit in Opera 7.21. Heb zelf nog geen verstand van layers ed, wil ik nu mee gaan beginnen.

Even een eigen vraag:

Kan je met layers ook slechts bepaalde delen verversen. Bijvoorbeeld alleen de contect, en het menu laten staan. Of heb je hier echt frames voor nodig?

[9nevermind9]

Het ziet hier er eigenlijk ook wel goed eruit in IE5.5

[Woudloper]

Wellicht kan je bij Zeldman kijken want daar geeft hij een link naar de Layout-o-matic, welk naar mijn idee gebasseerd is op de voorbeelden van glish.

Als ik jou was zou ik daar eens kijken...

[Verwijderd]

In IE6 ziet het er ook goed uit.

What's the problem?

[-TheNose-]

het ziet er nu ook wel goed uit, ik heb nu alleen de layout gedaan dmv floats. Het probleem is dus dat als ik absoluut gepositioneerde verborgen layers ga toevoegen (DHTML menuutje) mijn layout naar de knoppen gaat! Een layout o-matic wil ik niet want ik wil het zelf begrijpen!

de middencontent moet ook mooi meeschalen (dus beide kolommen zelfde hoogte zonder een fixed height op te geven...)dit zou mooi kunnen met bijv min-height maar dat kent MSIE weer niet. opera 7 is na mozilla de beste verwerker van SS2 dus die zal ook geen problemen geven.....IE is gewoon het grote probleem, telkens denk ik dat ik het heb, maar dan loop ik weer vast.

Mijn vraag aan jullie is dus ook: hoe zouden jullie dit ontwerp aanpakken? Zelfde aanpak als ik of heeeel anders?

[Dennis van der Stelt]

Inderdaad zeg! What's the problem?
Ik krijg een beetje het idee dat je begint te schelden op Microsoft omdat jij zelf niet helemaal begrijpt hoe je HTML en CSS moet implementeren.

Ik zelf begrijp namelijk nog steeds het probleem niet. Ik zou zeggen, gooi bijv. dat DHTML menu er eens in om te laten zien dat je layout aangepast wordt door het openklappen van de menu's. Dan zullen wij wel aantonen waarom het fout gaat en je de juiste manier uitleggen. Dat heb ik liever dan eerst maar weer 's MS af te zeiken en Mozilla te promoten.

[Dennis van der Stelt]

Hmmm, ik had jouw post nog niet gezien.

Binnen HTML moet je nu eenmaal met beperkingen werken. Voor je min-height moet je gewoon een transparante pixel of leeg divje gebruiken van je min-height.
En ik heb even geen tijd om naar alles te kijken, maar als die twee kolommen mee moeten schalen, moet je ze gewoon binnen een table zetten. Waarom ongewikkeld doen als het ook gemakkelijk kan.

KISS!!!

[André]

dvdstelt schreef op 20 October 2003 @ 09:54:
Hmmm, ik had jouw post nog niet gezien.

Binnen HTML moet je nu eenmaal met beperkingen werken. Voor je min-height moet je gewoon een transparante pixel of leeg divje gebruiken van je min-height.
En ik heb even geen tijd om naar alles te kijken, maar als die twee kolommen mee moeten schalen, moet je ze gewoon binnen een table zetten. Waarom ongewikkeld doen als het ook gemakkelijk kan.

KISS!!!

Geen tabellen gebruiken voor de layout.

[SillyJW]

Volgens mij werd je in 1 van die andere 2 topics die je opende
over je css-perikelen toch aardig geholpen..

[ Voor 10% gewijzigd door SillyJW op 20-10-2003 10:05 ]

[Dennis van der Stelt]

Nu gaan we waarschijnlijk off-topic... maar goed, ik wil wel weten waarom niet...

Misschien hang ik persoonlijk nog erg aan oude HTML standaarden. Maar daarnaast vind ik ook dat je het simpel moet houden en meer van die onzin. Maar ik ben altijd benieuwd naar (opbouwende) kritiek en hoe het zou moeten...

[Verwijderd]

Ik ben het met dvdstelt eens.. Soms moet je gewoon terug naar tables en frames, omdat het op die manier vele malen gemakkelijker te realiseren is. Doe ik zelf ook.
Mijn eerste site in 100% CSS zag er NIET uit op een mac... (div position: absolute vond ie nie leuk)
Probeer dat ook eens, de site op een mac viewen onder IE Wordt je waarschijnlijk wel verdrietig van, mgoe..

succes

Toevoeging:
Ja Andre, waarom niet gebruik maken van tables?? Ik ken wel een paar bedrijven die websites maken die daar wel bij zweren namelijk.

[ Voor 17% gewijzigd door Verwijderd op 20-10-2003 10:06 . Reden: Toevoeging ]

[crisp]

wb je menu's: [rml]crisp in "[ DHTML] Uitklap menu werkt niet, layer p"[/rml]

en waarom een nieuw topic?

[BtM909]

Verwijderd schreef op 20 October 2003 @ 10:05:


Toevoeging:
Ja Andre, waarom niet gebruik maken van tables?? Ik ken wel een paar bedrijven die websites maken die daar wel bij zweren namelijk.

Zoek eens op tabellen vs css, dan zal je de vele discussies wel tegenkomen

Trouwens, ik zweer bij de <h1> tag. Ik kan alle pagina hiermee opmaken

[-TheNose-]

dvdstelt schreef op 20 oktober 2003 @ 09:54:
Hmmm, ik had jouw post nog niet gezien.

Binnen HTML moet je nu eenmaal met beperkingen werken. Voor je min-height moet je gewoon een transparante pixel of leeg divje gebruiken van je min-height.
En ik heb even geen tijd om naar alles te kijken, maar als die twee kolommen mee moeten schalen, moet je ze gewoon binnen een table zetten. Waarom ongewikkeld doen als het ook gemakkelijk kan.

KISS!!!

Ik dacht al wat een onvriendelijkheid hier!

Silly: blijkbaar niet goed genoeg! Bovndien vond ik deze vraag iets anders, was meer bedoelt om een discussie te starten over hoe deze layout aan te pakken.

Andre: jouw opmerking geen tabellen gebruiken voor layout voegt ook echt iets toe aan deze post....ik weet zo langzamerhand wel dat tabellen daar niet voor zijn gebruikt, waarom denk je dat ik zo zit te ploeteren? Met tabellen was de site allang klaar!

Aai: Daar ga ik dus zeker niet aan beginnen, want ik ben nu al zo verdrietig.

Probleem is dus juiost dat ik CSS juist probeer te implementeren (W3C heeft hier hele mooie documentatie over), maar MSIE werkt gewoon zwaar tegen! Tijd voor een browserupgrade maar MS had daar zoals ik eerder op tweakers las nog lang geen trek in...

[-TheNose-]

crisp schreef op 20 oktober 2003 @ 10:07:
wb je menu's: [rml]crisp in "[ DHTML] Uitklap menu werkt niet, layer p"[/rml]

en waarom een nieuw topic?

Omdat ik een discussie wilde starten over het bewerkstelligen van deze layout....je ziet overal CSS design met kolommen etc, zonder een footer en die wil ik juist wel! als je het er toch niet mee eens bent wil ik wel in het andere topic verdergaan hoor. Was gewoon benieuwd naar jullie mening. ik kom gewoon teveel tegen dat hele simpele dingen volgens de standaard niet kunnen of niet goed werken in MSIE...

[Woudloper]

Wellicht dat je hier wat aan hebt. Deze heb ik naar aanleiding van een eigen topic hier geplaatst. Hier staat een voorbeeld van wat jij wilt (denk ik) en daar kan je best ff naar kijken...

[-TheNose-]

Woudloper schreef op 20 October 2003 @ 10:42:
Wellicht dat je hier wat aan hebt. Deze heb ik naar aanleiding van een eigen topic hier geplaatst. Hier staat een voorbeeld van wat jij wilt (denk ik) en daar kan je best ff naar kijken...

Dat topic heb ik toen ook even gevolgd maar was het vergeten.... zal daar straks als ik even pauze heb eens wat duidelijker naar kijken Jouw pagina is alleen niet gecentreerd he? zoals de mijne (vergroot en verklein je browserwindow maar eens als je naar mijn site kijkt, dan snap je wat ik bedoel met centreren....thx voor de link

[-TheNose-]

Hmmmm daar worden ook niet de middelste twee kolommen gelijk gemaakt dat is eigenlijk het grootste probleem wat ik tegenkom. Of ik moet het midden gewoon een vast hoogte geven en dan met scrollbars gaan werken, maar dan wordt de hele layout wel erg strikt! Hmmm misschien wil ik het wel teveel vastleggen...tsja dat is iets wat elke designer het liefst wil denk ik...

[crisp]

even leuk opzetje:

HTML:

<html>
<head>
<title>test</title>
<style type="text/css">

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #000000;
  overflow: auto;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -375px;
  width: 750px;
  border: 1px solid #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#innercontainer {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100%;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#main {
  margin-left: 100px;
  margin-right: 0px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

</style>
<body>
<div style="position:relative">
  <div id="content">
    <div id="header">header</div>
    <div id="innercontainer">
      <div id="left">left</div>
      <div id="main">main<br /><br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
      </div>
    </div>
    <div id="footer">footer</div>
  </div>
</div>
</body>
</html>

mmz, Opera 7 bokt hier weer op

[-TheNose-]

crisp schreef op 20 October 2003 @ 12:13:
even leuk opzetje:

HTML:

Allemaal code

mmz, Opera 7 bokt hier weer op

Jammer in MSIE doet hij het nu goed! Maar opera vind ik minder belangrijk om te ondersteunen....Mozilla (gecko browsers) en MSIE (gebruikt de hele wereld bijna helaas) vind ik belangrijker.

aan je stukje code te zien heb ik toch nog wat meer na te lezen wat betreft layout en CSS (en ik had al zoveel gelezen!)

Iemand behalve de pdf's van het w3c nog andere goede tips?