[CSS/XHTML] Lastig ontwerp realiseren

[oscarvdb]

Ik ben bezig met de site voor leerlingen van mijn school. Daarvoor heb ik het volgende concept gekregen van de ontwerper:

http://indekelder.oscarvdb.nl/images/concept.gif

Ik probeer het nu uit te werken in nette CSS/XHTML, maar daar kom ik wat struikelblokken tegen. Het is namelijk niet bepaald een 'standaard layout' die ze willen. Ik ben hier bezig met de ontwikkeling:

http://indekelder.oscarvdb.nl/

Wie geeft me tips? Hoe krijg ik die twee kolommen evenhoog bijvoorbeeld? Zou ik het dan één vak moeten maken en de rechterkolom er met positioning in moeten mikken?

Bedankt

[nightowl]

Je gif-file is niet zichtbaar, vanuit hier althans niet, gelet op:

Not Found
The requested URL /images/concept.gif was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


--------------------------------------------------------------------------------

Apache/1.3.33 Server at indekelder.oscarvdb.nl Port 80

[ Voor 10% gewijzigd door nightowl op 25-09-2005 16:34 ]

[Jaywalker]

je concept gifje werkt iig nog niet, dus als je daar eerst voor gaat zorgen

[oscarvdb]

Whoops, upload liep vast enzo
Doet het nu wel.

[semicon]

ik zou proberen vanaf het middenstuk waar die tekst in staat een div (1) te maken die de twee kanten opvangt en de inliggende kolommen zijn van 100% hoog ten opzichte van zijn parent(1) dus.

t's wel een lastig conpect iig

[oscarvdb]

Ik heb de height van de linker- en rechterdiv op 100% en op inherit geprobeerd te zetten. Beide zonder resultaat. Zie HTML.

Of was dat niet wat je bedoelde?

[Verwijderd]

oscarvdb schreef op zondag 25 september 2005 @ 16:30:
Ik ben bezig met de site voor leerlingen van mijn school. Daarvoor heb ik het volgende concept gekregen van de ontwerper:

http://indekelder.oscarvdb.nl/images/concept.gif

Over smaak valt niet te twisten, maar dat design is zeg maar allesbehalve mijn smaak

Wie geeft me tips? Hoe krijg ik die twee kolommen evenhoog bijvoorbeeld?

Wat vaak helpt bij dit soort problemen, is beide kolommen te floaten in een div, en dan onderin die div zoiets opnemen:

code:

<div style="clear:both"></div>

.

[ Voor 11% gewijzigd door Verwijderd op 25-09-2005 21:27 ]

[Koeniepoenie]

Om de hoogte van de beide kolommen gelijk te trekken kun je het Faux columns idee gebruiken.

offtopic:
[quote]Over smaak valt niet te twisten, maar dat design is zeg maar allesbehalve mijn smaak ;)[/quote]
Ik vind het er best leuk uitzien hoor

[ Voor 3% gewijzigd door Koeniepoenie op 26-09-2005 08:45 ]

[Woudloper]

Koeniepoenie schreef op maandag 26 september 2005 @ 08:44:
Om de hoogte van de beide kolommen gelijk te trekken kun je het Faux columns idee gebruiken.

Klopt, dit is hier erg gemakkelijk voor toepasbaar. Je kan overigens ook nog kijken naar de diverse oplossingsrichtingen die zijn gekozen bij de CSS Zen Garden aangezien ik daar ook regelmatig zo'n oplossing is gekozen zoals jouw design er nu uitziet.

[oscarvdb]

*kick*

Ik ben alweer iets verder, heb met het Faux Columns-idee al flink wat voor elkaar gekregen. Probleem is nu dat IE een bepaald gedeelte heel anders rendert. Volgens mij heb ik de problemen die het box-model veroorzaakt, al afgevangen. Ik snap niet waarom het er toch nog anders uitziet. Iemand een idee?

[Liquid-Man]

Bedoel je dat er in IE een stuk wordt weergegeven waar dan geen achtergrond bij staat? want dat krijg ik in ieder geval als ik em open met IE, en niet met firefox, want daar lijkt hij net zoals hij staat op het plaatje, ik zal eens even gaan kijken naar de code.

Edit: Waarom werk je niet gewoon met tabellen? want dan kan je precies de maten opgeven en met div's weet ik het niet bepaald. Misschien een keertje kijken hoe dat in elkaar zit? Ik kan je wel een voorbeeld van een site van mij laten zien eventueel

[ Voor 33% gewijzigd door Liquid-Man op 15-10-2005 15:03 ]

[oscarvdb]

Liquid-Man schreef op zaterdag 15 oktober 2005 @ 15:01:
Bedoel je dat er in IE een stuk wordt weergegeven waar dan geen achtergrond bij staat? want dat krijg ik in ieder geval als ik em open met IE, en niet met firefox, want daar lijkt hij net zoals hij staat op het plaatje, ik zal eens even gaan kijken naar de code.

Edit: Waarom werk je niet gewoon met tabellen? want dan kan je precies de maten opgeven en met div's weet ik het niet bepaald. Misschien een keertje kijken hoe dat in elkaar zit? Ik kan je wel een voorbeeld van een site van mij laten zien eventueel

Dat bedoel ik inderdaad, en ik kan de reden daarvoor niet vinden.

Tabellen gebruik ik niet omdat die niet gebruikt zijn voor ontwerpdoeleinden, maar voor tabulaire data. Principes enzo.

[Liquid-Man]

Ja ok, maarja soms moet je gewoon van je princiepes afstappen

voorbeeldje wat je ook kan doen:

code:

<table width="600" height="500">
<tr>
<td width="600" height="500" background="plaatje.gif">tekst....</td>
</tr>
</table>

Zo zorg je ervoor dat de tekst over het plaatje wordt weergegeven

[oscarvdb]

Liquid-Man schreef op zaterdag 15 oktober 2005 @ 18:50:
Ja ok, maarja soms moet je gewoon van je princiepes afstappen

voorbeeldje wat je ook kan doen:

code:

<table width="600" height="500">
<tr>
<td width="600" height="500" background="plaatje.gif">tekst....</td>
</tr>
</table>

Zo zorg je ervoor dat de tekst over het plaatje wordt weergegeven

Ik ben niet helemaal gek.
Ik wil het graag in XHTML/CSS oplossen.

[Koeniepoenie]

Ik weet niet of het zal helpen, maar je hebt een paragraaf teveel afgesloten (2x). Na de eerste paragraaf onder 'hoiilinks' en 'hoiirechts' is dat het geval. Ik denk dat het niet veel zal uitmaken, maar 't is handig om het even te fixen.

[oscarvdb]

Gelukt Heb de Div's wat anders genest en nu ziet het er prima uit.
Toch bedankt voor jullie hulp

[Savantas]

als ik in IE kijk, staat alles links uitgelijnd, niet gecentreerd. Verder gaat de rechterbovenrand niet lekker:
Kan je die niet absoluut plaatsen?

Even zoeken waar dat in zit.
Enkele andere aanmerkingen (of je er wat mee doet of mee eens bent moet je zelf maar zien):
Je #inhoudsopgave: Geef een vaste hoogte en vul met ul li in plaats van tabelslurrie.
Verder heb je een paar keer de definitie div#.... De div mag je weglaten, #... is toereikend.
#spacerrechts bevat twee height-definities. En daarna (* html div#container div#main div#spacerrechts) volgt een andere width.

Of is * html div#container div#main div#spacerrechts onderdeel van een IE-hack?

[ Voor 71% gewijzigd door Savantas op 17-10-2005 10:23 ]

[CyeZ]

* html is inderdaad een bekende IE-hack. Pas daar wel mee op, vanaf IE7 werkt het zeer waarschijnlijk niet meer namelijk.