Hoe design omzetten naar HTML?

[Red]

Okay,

Ik ben bezig met een website (ik kan al wel bijhoorlijk HTML-en enzo) maar nu kwam de grafisch vormgever met een bijna onmogelijk design aan. Ik heb het even wat vereenvoudigd . Maar hij wou perse die boog er boven in. Hoe kan ik dit het makkelijkste inpassen in HTML. Ik zat zelf te denken aan een iframe in de content pagina. Maar dit krijg ik bijna niet voor mekaar ivm de positionering van de afzonderlijke stukjes van die boog.



Hoe kan ik dit het makkelijkste oplossen, toch veel code opkloppen voor dat iframe of misschien werken met tabellen ?

Ik zie door de bomen het bos niet meer

edit:
De groene lijnen zijn de indelingen in frames die ik in gedachte had

[Thijsmans]

Misschien moet je eens kijken in het topic over schuine scrollbalken

/edit:
[rml][ DHTML] Schuine scrollbar mogelijk?[/rml]

[Verwijderd]

Foto Soep ofzo... als er verder niets mee hoeft te gebeuren, een boog maken, en die in stukken verdelen ofzo

[Red]

Prammenhanger schreef op 05 november 2002 @ 21:25:
Misschien moet je eens kijken in het topic over schuine scrollbalken

/edit:
[rml][ DHTML] Schuine scrollbar mogelijk?[/rml]

Hmmm, denk dat jij de essentie een beetje verkeerd begrijpt Prammen.

Ik vraag me dus af hoe ik het makkelijkste die boog daar boven in kan krijgen, door gewoon 1 image maken en knippen en dan een iframe gebruiken voor de content.

Of is er een makkelijkere manier voor, waarbij de boog dus wel 1 geheel kan blijven (is makkelijker in mijn opinie omdat ik ook diverse stylen wil gaan toepassen).

Misschien toch maar geen iframe dan invoegen, en het zo doen ???



Alleen nu mis ik dus een heleboel ruimte voor de tekst (en op 800 x 600 is alle ruimte nodig wat dat betreft )

Hmmmmm, dilemma hier....

[Verwijderd]

Verwijderd schreef op 05 november 2002 @ 21:28:
Foto Soep ofzo... als er verder niets mee hoeft te gebeuren, een boog maken, en die in stukken verdelen ofzo

Hij snapt natuurlijk zelf ook wel wat er aan de grafische kant moet gebeuren, het gaat hem erom hoe hij dit moet aanpakken wat de HTML betreft

@Topicstarter:
Er zijn natuurlijk verschillende manieren om dit aan te pakken
Tables zijn niet echt bedoeld om je lay-out in vast te leggen sinds we CSS hebben, maar voor een statisch ontwerp als dit zou je het nog best kunnen overwegen (als je een iframe wilt gebruiken heb je trouwens natuurlijk ook altijd nog tables / CSS nodig om je iframe te positioneren)

Misschien kun je ook eens met CSS aan de slag gaan, veel absoluut positioneren waarschijnlijk, en kijken hoe ver je komt Ik denk toch dat het een keus is die ze zelf moet maken; het is maar net wat je fijner vindt / waar je makkelijker mee werkt

Je topic title had trouwens wel een slag duidelijker gemogen

edit:
Ik had nog niet gelezen dat je verschillende stijlen wilde gaan toepassen.
Je zult CSS moeten gaan gebruiken als je de boog één geheeld wilt houden. Voorwaarde is natuurlijk wel dat je lay-out een fixed width heeft.

[Red]

Verwijderd schreef op 05 november 2002 @ 21:41:
[...]

Hij snapt natuurlijk zelf ook wel wat er aan de grafische kant moet gebeuren, het gaat hem erom hoe hij dit moet aanpakken wat de HTML betreft

@Topicstarter:
Er zijn natuurlijk verschillende manieren om dit aan te pakken
Tables zijn niet echt bedoeld om je lay-out in vast te leggen sinds we CSS hebben, maar voor een statisch ontwerp als dit zou je het nog best kunnen overwegen (als je een iframe wilt gebruiken heb je trouwens natuurlijk ook altijd nog tables / CSS nodig om je iframe te positioneren)

Misschien kun je ook eens met CSS aan de slag gaan, veel absoluut positioneren waarschijnlijk, en kijken hoe ver je komt Ik denk toch dat het een keus is die ze zelf moet maken; het is maar net wat je fijner vindt / waar je makkelijker mee werkt

Je topic title had trouwens wel een slag duidelijker gemogen

sorry voor de onduidelijk topictitel .

Misschien dat ik dan toch maar moet gaan werken met het iframe, hoe vervelend dat ook eigenlijk is (en niet echt compatible, waaraan ik redelijk zwaar til)

Maar dan is het wel weer makkelijk te onderhouden (wat waarschijnlijk niet door mij zal gebeuren)

Ik haat die boog nu al

[Guardian Angel]

Beetje het idee van www.informatique.nl met een boog dus.

Misschien daar eens neuzen hoe zij het hebben opgelost?

[Red]

Verwijderd schreef op 05 november 2002 @ 21:41:
[...]

edit:
Ik had nog niet gelezen dat je verschillende stijlen wilde gaan toepassen.
Je zult CSS moeten gaan gebruiken als je de boog één geheeld wilt houden. Voorwaarde is natuurlijk wel dat je lay-out een fixed width heeft.

Die verschillende stijlen ben ik nog niet zo zeker van.

De layout heeft een fixed with van 796 (pixelneukerig hè ) dus dat moet geen probleem zijn, dus CSS + Iframe hier maar gaan gebruiken denk ik dan

[Verwijderd]

Zet die boog erin als achtergrondafbeelding, ja ook via een stylesheet. Ik zie als belangrijkste onderdelen een menu'tje, en een placeholder voor de content. Ik denk in eerste instantie aan:

code:

<div id="menu">
  <a href="menuitem1.html">Item 1</a>
  <a href="menuitem2.html">Item 2</a>
  <a href="menuitem3.html">Item 3</a>
  <a href="menuitem4.html">Item 4</a>
</div>
<div id="content">
  <!-- content hier -->
</div>

Eventueel kun je ook plaatjes als linkjes gebruiken natuurlijk. Mocht iemand een gare of oude browser gebruiken, dan is je site waarschijnlijk nog steeds goed toonbaar. Ik zou de elementen niet plaatsen door absolute waarden op te gaan geven, maar met behulp van de CSS properties margin en float.

[Red]

Verwijderd schreef op 05 november 2002 @ 21:51:
Zet die boog erin als achtergrondafbeelding, ja ook via een stylesheet. Ik zie als belangrijkste onderdelen een menu'tje, en een placeholder voor de content. Ik denk in eerste instantie aan:

code:

<div id="menu">
  <a href="menuitem1.html">Item 1</a>
  <a href="menuitem2.html">Item 2</a>
  <a href="menuitem3.html">Item 3</a>
  <a href="menuitem4.html">Item 4</a>
</div>
<div id="content">
  <!-- content hier -->
</div>

Eventueel kun je ook plaatjes als linkjes gebruiken natuurlijk. Mocht iemand een gare of oude browser gebruiken, dan is je site waarschijnlijk nog steeds goed toonbaar. Ik zou de elementen niet plaatsen door absolute waarden op te gaan geven, maar met behulp van de CSS properties margin en float.

Hmmm, maar wat je dan krijgt als je die boog als achtergrond image erin zet, dat als je dan zou scrollen over de pagina dat de tekst dan wegvalt eroverheen toch

Of begrijp ik jou verkeerd

[Verwijderd]

DoRRoN schreef op 05 november 2002 @ 21:47:
[...]

De layout heeft een fixed with van 796 [...]

Je bedenkt wel dat hij dan op 800x600 helaas net niet zonder scrollbars te bekijken is, zodra je pagina hoger wordt dan 600px minus de menubalken van de browser? (waarschijnlijk laat je het iframe scrollen hè? Je zal er wel aan gedacht hebben)

Ik twijfel er trouwens sowieso aan of je site niet scrollt, aangezien er links en rechts nog wat 'chrome' van je browser zit? Dat kan bovendien nog wel eens verschillen per OS en browser natuurlijk

[Red]

Verwijderd schreef op 05 november 2002 @ 22:02:
[...]

Je bedenkt wel dat hij dan op 800x600 helaas net niet zonder scrollbars te bekijken is, zodra je pagina hoger wordt dan 600px minus de menubalken van de browser? (waarschijnlijk laat je het iframe scrollen hè? Je zal er wel aan gedacht hebben)

Ik twijfel er trouwens sowieso aan of je site niet scrollt, aangezien er links en rechts nog wat 'chrome' van je browser zit? Dat kan bovendien nog wel eens verschillen per OS en browser natuurlijk

Een fixed width = breedte

En die is inderdaad 796 omdat de pixels in IE 2 x 2 zijn, dus 800 - 4 pixels = 796 pixels breedt. Hoe dat precies zit in NS7, Opera en Mozilla wil ik niet weten

[Verwijderd]

DoRRoN schreef op 05 november 2002 @ 22:08:
[...]


Een fixed width = breedte

En die is inderdaad 796 omdat de pixels in IE 2 x 2 zijn, dus 800 - 4 pixels = 796 pixels breedt. Hoe dat precies zit in NS7, Opera en Mozilla wil ik niet weten

Een pixel is 2 x 2 Dat is dan ook nieuw voor mij. 2 wát trouwens?
Je zit echt aan een 770 pixels breedte als ongeveer maximum. Bij een goed ontwerp maakt het geen bal uit, en als je een afbeelding als achtergrond zet al helemaal niet

[Red]

Verwijderd schreef op 05 november 2002 @ 22:11:

[...]

Een pixel is 2 x 2 Dat is dan ook nieuw voor mij. 2 wát trouwens?
Je zit echt aan een 770 pixels breedte als ongeveer maximum. Bij een goed ontwerp maakt het geen bal uit, en als je een afbeelding als achtergrond zet al helemaal niet

Sorry, beetje vaag hierzo.

Bij IE is aan allebei de kanten van de browser twee pixels "chrome". Dus hou je 800 - 2 - 2 = 796 pixels over....

Alleen nu weet ik nog steeds niet wat je bedoelt met die boog als achtergrond zetten, want als ik dit in CSS doe {background image= blabla background position: top; fixed etc. etc } dan komt dus de tekst erover heen te liggen als er gescrolled wordt, toch

[Verwijderd]

Als je hem background-attachment: fixed; meegeeft wel ja.

[edie]

Zoiets?
http://www.meyerweb.com/e...e/complexspiral/demo.html

Mozilla only

[Verwijderd]

DoRRoN schreef op 05 november 2002 @ 22:08:
[...]


Een fixed width = breedte
En er komt geen scrollbalk van ongeveer 20px aan de rechterkant als je naar beneden moet scrollen?

En die is inderdaad 796 omdat de pixels in IE 2 x 2 zijn, dus 800 - 4 pixels = 796 pixels breedt. Hoe dat precies zit in NS7, Opera en Mozilla wil ik niet weten

Misschien dat ik dan toch maar moet gaan werken met het iframe, hoe vervelend dat ook eigenlijk is (en niet echt compatible, waaraan ik redelijk zwaar til)

Volgens mij volg ik je niet

[Bosmonster]

Sorry hoor, maar wat een hopeloos design

Leuk om de problemen hier op te gaan lossen, maar het werkelijke probleem blijft bestaan.. dat dit een ramp-ontwerp is...

Misschien het probleem bij de bron oppakken en eens met de so-called grafisch ontwerper gaan overleggen of het niet anders kan..

[Red]

Bosmonster schreef op 05 november 2002 @ 22:37:
Sorry hoor, maar wat een hopeloos design

Leuk om de problemen hier op te gaan lossen, maar het werkelijke probleem blijft bestaan.. dat dit een ramp-ontwerp is...

Misschien het probleem bij de bron oppakken en eens met de so-called grafisch ontwerper gaan overleggen of het niet anders kan..

Daar ben ik het best wel met je mee eens. Op zich heeft het design toch ook wel wat hoor (niet mijn Paintschetsen natuurlijk )

Maar jah, als men zoiets van je vraagt dan doe je het toch ook meestal. Maar ik zal met hem om tafel gaan zitten kijken of ik hem op andere gedachten kan brengen

[Bender]

maak 1 grote image van 700px breed
maak een tabel van 700px breed
pleur op de achtergrond en je bent master
[of was it al gezegd? :)]

en het is met alles compatible

[Daniel304]

het leukste zou zijn als je ipv van een iframe een layer gebruikt waar je een variabele source aan toekent... (check de ilayer onder NetSchaap) als het goed is bestaat dat ook in IE deze kan je overal positioneren.... alleen die boog is misschien te laag voor het functionele ?!?

[Pelle]

* Pelle denkt dat sommige mensen er te weinig verstand van hebben om hier wat zinnigs over te kunnen zeggen

[marcusk]

eddie19 schreef op 05 november 2002 @ 22:27:
Zoiets?
http://www.meyerweb.com/e...e/complexspiral/demo.html

Mozilla only

deze lijkt me in dit geval meer toepasselijk:

http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

Ook IE

[HunterPro]

Triloxigen schreef op 06 november 2002 @ 00:28:
maak 1 grote image van 700px breed
maak een tabel van 700px breed
pleur op de achtergrond en je bent master
[of was it al gezegd? :)]

en het is met alles compatible

* HunterPro neemt een grote aanloop en schopt Triloxigen het topic uit
ga daar maar verder met je duplo.

Wil je alle bezoekers een image laten downloaden van 700x500 pixels oid? Jij krijgt je data kado van Sinterklaas zeker? En al jouw bezoekers werken op díe resolutie? En al jouw bezoekers hebben breedband?

[Verwijderd]

Hmm, ik zou et met PS doen en dan met die rulers alles in stukken hakken.
Als jij dit goed doet, dan kan je alles vast wel goed in tabellen krijgen namelijk.

[HunterPro]

Verwijderd schreef op 06 november 2002 @ 00:56:
Hmm, ik zou et met PS doen en dan met die rulers alles in stukken hakken.
Als jij dit goed doet, dan kan je alles vast wel goed in tabellen krijgen namelijk.

nogmaals... tables zijn NIET voor je opmaak; daar heb je div's, span's en CSS voor.

[Verwijderd]

Ik ga voor de volgende oplossing:



Dus met kleine wijzigingen ruimte terug winnen!
Succes...

[Verwijderd]

|HunterPro| schreef op 06 november 2002 @ 00:56:
[...]


nogmaals... tables zijn NIET voor je opmaak; daar heb je div's, span's en CSS voor.

Waar zijn ze dan voor? heb dit inderdaad wel vaker gehoord, maar ik zie toch echt geen problemen hoor met tables... Ja alleen dat de site pas de content laat zien als de hele table geladen is, maar goed we scripten natuurlijk allemaal zo goed dat dat maar heel even duurt.....! (-:

Edit: Sorry dat ik twee posts opende, had het eigenlijk niet door...

[Bosmonster]

DoRRoN schreef op 05 november 2002 @ 22:18:
[...]


Sorry, beetje vaag hierzo.

Bij IE is aan allebei de kanten van de browser twee pixels "chrome". Dus hou je 800 - 2 - 2 = 796 pixels over....

Alleen nu weet ik nog steeds niet wat je bedoelt met die boog als achtergrond zetten, want als ik dit in CSS doe {background image= blabla background position: top; fixed etc. etc } dan komt dus de tekst erover heen te liggen als er gescrolled wordt, toch

Hehe dat had ik door

Maar doelde meer op het feit dat er effectief gewoon nauwelijks ruimte overblijft. Op 800/600 houd je ongeveer een kwart van je scherm over voor content... En met een frames layout zou je dan ook nog eens een miniscuul scrollbalkje krijgen.

Maar ook dingen als de naam van de website groot bovenin. Nogal zonde van de ruimte, want na de eerste pagina weet de geburiker vast wel op welke site die is en had ie de bovenste helft van zn scherm liever gebruikt voor wat meer content

Verwijderd schreef op 06 november 2002 @ 10:17:
[...]


Waar zijn ze dan voor? heb dit inderdaad wel vaker gehoord, maar ik zie toch echt geen problemen hoor met tables... Ja alleen dat de site pas de content laat zien als de hele table geladen is, maar goed we scripten natuurlijk allemaal zo goed dat dat maar heel even duurt.....! (-:

Edit: Sorry dat ik twee posts opende, had het eigenlijk niet door...

Die discussie is al vaak genoeg gevoerd. Tables zijn voor data niet voor de vormgeving van je complete website. Dat ze daarvoor misbruikt werden tot nu toe is meer noodzaak geweest. Noodzaak die nu absoluut niet meer bestaat met de huidige standaarden en mogelijke technieken. Naast het feit dat tables inefficient zijn in opbouw levert het ook meer en onverzichtelijke code op en is een flink tables-ontwerp rampzalig om aan te passen in een later stadium.

[Hangloozz]

zoals Cheatah al noemde: gewoon de hele zwik met DIV's opmaken.
Dat Iframe kun je ook gewoon in een DIV mikken.

Het ligt er wel een beetje aan voor welke browsers het compatibel moet zijn, maar de versies 5 en hoger heb je dan wel zo'n beetje allemaal

Persoonlijk zie ik niet direct een probleem met deze vormgeving, eerder een uitdaging

[Verwijderd]

edit:

Patrick moet beter lezen ... sorry

[Bender]

|HunterPro| schreef op 06 november 2002 @ 00:49:
[...]


* Bender neemt een grote aanloop en schopt Triloxigen het topic uit
ga daar maar verder met je duplo.

Wil je alle bezoekers een image laten downloaden van 700x500 pixels oid? Jij krijgt je data kado van Sinterklaas zeker? En al jouw bezoekers werken op díe resolutie? En al jouw bezoekers hebben breedband?

Het plaatje moet je toch tekenen, dus het maakt geen hol uit..
De rest is gewoon wit, en wat wit kost aper aan px's

[CH4OS]

Ik zou gewoon die balk als plaatje erin zetten, en die balk dan onderverdelen in kleine stukjes, tis wel een lastig werkje, maar zo kan het wel

[Defspace]

Ik zou zeggen verdiep je een beetje in CSS2 en XHTML.
Wanneer je goed met stylesheets overweg kan, is dit ontwerp echt een eitje en hoef je niks aan ruimte te verliezen voor je tekst.

Neem is een kijkje op www.wired.com om te kijken hoe je zonder tables je site kan opbouwen en gebruik de search voor nog meer voorbeelden en uitleg.

[marcusk]

ThePerfectCell schreef op 06 november 2002 @ 13:57:
Ik zou gewoon die balk als plaatje erin zetten, en die balk dan onderverdelen in kleine stukjes, tis wel een lastig werkje, maar zo kan het wel

idd, zie dus dit artikel:
http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html