[CSS/XHTML] Lastig ontwerp realiseren

Pagina: 1
Acties:

  • oscarvdb
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

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

... he's gone.


  • nightowl
  • Registratie: April 2002
  • Laatst online: 14-03-2009

nightowl

always too early to sleep

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 ]

Ik pas in mijn jas. Mijn jas past in mijn tas. Dus ik pas in mijn tas.


  • Jaywalker
  • Registratie: Augustus 2004
  • Laatst online: 03-11-2024
je concept gifje werkt iig nog niet, dus als je daar eerst voor gaat zorgen ;)

Koffie!!


  • oscarvdb
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

Topicstarter
Whoops, upload liep vast enzo ;)
Doet het nu wel.

... he's gone.


  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025
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
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

Topicstarter
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?

... he's gone.


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:
1
<div style="clear:both"></div>
.

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


  • Koeniepoenie
  • Registratie: Oktober 2003
  • Laatst online: 25-04 15:41
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 ]

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337


  • Woudloper
  • Registratie: November 2001
  • Niet online

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
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

Topicstarter
*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?

... he's gone.


  • Liquid-Man
  • Registratie: September 2004
  • Laatst online: 20-04 22:45
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
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

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

... he's gone.


  • Liquid-Man
  • Registratie: September 2004
  • Laatst online: 20-04 22:45
Ja ok, maarja soms moet je gewoon van je princiepes afstappen :P

voorbeeldje wat je ook kan doen:
code:
1
2
3
4
5
<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
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

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

voorbeeldje wat je ook kan doen:
code:
1
2
3
4
5
<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.

... he's gone.


  • Koeniepoenie
  • Registratie: Oktober 2003
  • Laatst online: 25-04 15:41
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.

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337


  • oscarvdb
  • Registratie: December 2001
  • Laatst online: 14-04 10:15

oscarvdb

and like that...

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

... he's gone.


  • Savantas
  • Registratie: December 2002
  • Laatst online: 23-04 16:01
als ik in IE kijk, staat alles links uitgelijnd, niet gecentreerd. Verder gaat de rechterbovenrand niet lekker:
Afbeeldingslocatie: http://tweakers.net/ext/f/68639/full.jpg 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 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)


  • CyeZ
  • Registratie: September 2001
  • Laatst online: 10-09-2025

CyeZ

Vroem vroem!!!

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

[18:54] <Prammenhanger> |HunterPro|eet
[18:55] <Prammenhanger> lijkt best op
[18:55] <Prammenhanger> |HunterProFeet

Pagina: 1