Hulp nodig bij verwezenlijken layout site

[Luke!]

Hoi,

Om te beginnen: ik kan met html redelijk uit de voeten, van php heb ik maar een klein beetje kaas gegeten en hetzelfde geldt voor javascript. Op zich is dat niet zo'n probleem, met veel google'n en trial&error kun je ver komen. Ik ben nu eerst de layout een beetje aan het uitdenken en loop vast op het realiseren daarvan. Wat ik voor ogen heb, heb ik in onderstaande afbeelding uitgetekend. Deze afbeelding moet dan de site op volledige breedte voorstellen (dus de balken moeten van de linkerrand tot de rechterrand van de browser doorlopen.



De twee balken (grijs en geel) bovenaan zijn altijd hetzelfde, waar links en waar gewone tekst komt te staan is aangegeven. Daaronder - in het lege witte gedeelte - moet de inhoud getoond worden (overigens wil ik dat witte deel opdelen in twee kolommen. Links eventueel een submenu, rechts - het grote deel - de inhoud). Allemaal niet zo'n probleem, maar... Ik moet dus op de een of andere manier die uitlijning van die balken goed krijgen. Op 'iedere' resolutie moet de site te bekijken zijn. Nu kan ik wel met javascript bijvoorbeeld vier resoluties afvangen en die elk een eigen index.html geven met percentages hoogte en breedte en bij nog hogere resoluties een achtergrond instellen die dezelfde vorm/afmetingen heeft van die balken, maar dat vind ik maar een smerige oplossing. Er zal vast een manier zijn waarop je dit netjes kunt aanpakken. De vraag is alleen: hoe?

[Pyrus]

Google: horizontal list
Eerste hit: http://css.maxdesign.com.au/listamatic/index.htm
Afronding evt met een plaatje of met css + plaatje.

[ Voor 23% gewijzigd door Pyrus op 04-12-2006 19:59 ]

[Luke!]

Dat is duidelijk, ik kan ook wel een tabel maken met een opsomming maken en in de laatste kolom een plaatje met die halve cirkelschijf, maar het gaat me dus om die twee balken (grijs en geel in die tekening) die bij alle resoluties geheel links en rechts moeten aansluiten. Ik zou niet weten hoe ik dat met die 'horizontal list' voor elkaar moet krijgen. Zie ik iets over het hoofd?

Edit: rechts zit ook nog een kleine gele balk zoals je ziet. Die moet dus, net als de grijze balk, rechts gecentreerd worden.

Kan ik op de een of andere manier de resolutie van de gebruiker opvragen, die overnemen als totale breedte van een tabel? Hoe moet ik dan die plaatjes op die resolutie laten aanpassen vraag ik me af..

[ Voor 47% gewijzigd door Luke! op 04-12-2006 20:06 ]

[Verwijderd]

Luccus schreef op maandag 04 december 2006 @ 20:02:
Dat is duidelijk, ik kan ook wel een tabel maken met een opsomming er in en in de laatste kolom een plaatje met die halve cirkelschijf, maar het gaat me dus om die twee balken (grijs en geel in die tekening) die bij alle resoluties geheel links en rechts moeten aansluiten. Volgens mij heeft de door jouw genoemde 'horizontal list' daar weinig mee te maken, of ik zie iets over het hoofd.

Als je al meteen over een tabel begint heb je het helemaal niet begrepen. Verder stelt de layout echt helemaal niks voor, met een klein beetje CSS kennis helemaal niet. Het is een kwestie van markup maken die alles juist benoemt en die de gewenste functionaliteit biedt. Vervolgens pas je een stylesheet toe, en ben je klaar.

[Luke!]

Verwijderd schreef op maandag 04 december 2006 @ 20:05:
[...]
Als je al meteen over een tabel begint heb je het helemaal niet begrepen. Verder stelt de layout echt helemaal niks voor, met een klein beetje CSS kennis helemaal niet. Het is een kwestie van markup maken die alles juist benoemt en die de gewenste functionaliteit biedt. Vervolgens pas je een stylesheet toe, en ben je klaar.

Ik neem het direct van je aan. Als ik op zoek ga naar CSS-theorie (...) e.d. dan kom ik vanalles tegen maar eigenlijk niet iets waarmee ik kan leren hoe ik dit ga aanpakken. Kun je misschien iets specifieker aangeven waar ik dan naar op zoek moet gaan?

[ Voor 3% gewijzigd door Luke! op 04-12-2006 20:16 ]

[Verwijderd]

Nee, dat kan ik niet. De kennis die je nodig hebt is basiskennis van CSS, en ervaring op het gebied van het maken van layouts. De tips die ik zou kunnen geven zijn namelijk redelijk algemeen:

• Gebruik voor layout bij voorkeur achtergrondplaatjes en geen img elementen.
• Gebruik voor navigatie een ul element met li children.
• Gebruik voor kopjes de h1-6 elementen.
• Gebruik in het algemeen het HTML element wat het onderdeel het best beschrijft.

Daar heb je net zo goed niet direct iets aan als je geen kennis of ervaring hebt op dit gebied. Ik zou zonder veel moeite wat HTML kunnen schrijven, die je in praktisch elke layout zou moeten kunnen omvormen, maar daar heb je ook al weinig aan.

[Luke!]

Dat ben ik niet met je eens. Als ik bijvoorbeeld een goed voorbeeld zou hebben waar ik zie hoe een vergelijkbare layout is opgebouwd, dan kan ik aan de hand daarvan het eigen voorstel uitwerken. De vier punten die je opnoemt kan ik toepassen, maar dat brengt me nog steeds niet op een idee hoe ik in deze de layout ga vormgeven op basis van de uitlijning en positionering van de 'balken'.

[ Voor 33% gewijzigd door Luke! op 04-12-2006 21:53 ]

[Fuzzillogic]

CSS is soms best lastig te "reverse engineeren". Zeker als je nog weinig kennis ervan hebt. En zoals met alles: het is niet makkelijk om het goed te kunnen.

Ik zelf zou die balken met 2 achtergrondplaatjes oplossen. Eentje in de body, om de "doorloop" van de balken tot aan de rand af te dekken, en een voor je center/content waar je de hoekjes in kwijt kunt. De tekst in de balkjes regel je dan met wat absoluut gepositioneerde divs (t.o.v. die center/content-div)

Enfin, met simpele backgroundafbeeldingen kun je opvallend veel probleempjes snel oplossen zonder dat je ranzige XHTML krijgt.

Maarja. Er zijn vele wegen naar Rome. Tables voor dit soor zaken is echt not done, tenzij je graag tot de (helaas grote) groep webdevvers wil behoren voor wie CSS iets mysterieus en obscuurs is.

[Boelie-Boelie]

Luccus schreef op maandag 04 december 2006 @ 20:02:
[..] het gaat me dus om die twee balken (grijs en geel in die tekening) die bij alle resoluties geheel links en rechts moeten aansluiten. Ik zou niet weten hoe ik dat met die 'horizontal list' voor elkaar moet krijgen. Zie ik iets over het hoofd?
[..]
Kan ik op de een of andere manier de resolutie van de gebruiker opvragen, die overnemen als totale breedte van een tabel? Hoe moet ik dan die plaatjes op die resolutie laten aanpassen vraag ik me af..

Stel dat er vijf verschillende resoluties op je site komen. Dan ga je neem ik aan niet vijf verschillende pagina's maken. Beter is dat je één layout maakt die op verschillende resoluties werkt. Dan kan je denken aan een vaste breedte, meestal ca. 750-770px, of een variabele breedte, waarbij de layout meegroeit met de schermgrootte. Deze laatste noemt men vaak een fluid layout (hint: trefwoord voor in zoekmachine).
Als je die balken dan maar lang genoeg maakt, passen ze ook op grote resoluties op het scherm (voorbeeld van dit idee). Bij kleinere resoluties kun je de overbodige stukken balk buiten het scherm laten vallen. Zet ze zoals hierboven reeds gezegd wel als backgroud-image (nog een hint).

Eigenlijk komt het antwoord van iedereen erop neer dat je het met CSS oplost. Het heeft echter weinig nut om je een CSS-voorbeeld aan te reiken (als die er al zijn) daar je nog geen kennis hebt van CSS. Zou wel http://modernmarkup.nl doorlezen voor basic CSS-kennis en voor background-image een kijkje nemen op W3Schools

[Luke!]

Ik ben inmiddels een stukje verder. Ik heb nu een vaste layout die klopt voor de resolutie 1280x960. Ik wil dit nu zodanig aanpassen dat er een layout voor 'alle' resoluties overblijft. Ik kwam echter in de problemen met het volgende.

Neem bijvoorbeeld de titel (Titel). Deze staat in de bovenste balk. Ik heb geprobeerd deze met een position:relative te plaatsen. Stel dat ik de left-position op 50% zet (is dat de goede manier?), dan krijgt het frame echter een horizontale scrollbalk, wordt dus opgerekt, en de titel komt dan op 50% van dat opgerekte frame te staan (de titel valt echter nog ruim binnen het gebied waarvoor geen scrollbalk nodig is).

Hier staat de pagina.

Dit is nu de css:

code:

body        {background-image:url(achtergrond_top.jpg);background-position: 0px 0px;}
H1      {position:absolute;left:50%;top:28px;font-family:impact;color:#FFFFFF;font-size:20pt;font-weight:lighter}

#home img   {position:absolute;left:6%;top:28px;border:none}

#lblauw img {position:absolute;left:15%;top:28px}
#dblauw img {position:absolute;left:75%;top:88px}

#menu1 ul   {position:absolute;left:-.7%;top:78px;}
#menu1 li   {display:inline;list-style-type:none;padding-right:30px;font-family:impact;color:#FFFFFF;font-size:14pt;font-weight:lighter}
#menu2 ul   {position:absolute;left:89%;top:78px;}
#menu2 li   {display:inline;list-style-type:none;font-family:impact;color:#FFFFFF;font-size:14pt;font-weight:lighter}

Belangrijkste voor de 'fluid' layout nu lijkt me
1) Het mooi positioneren van de menu-items (Link 1 enz.). Wanneer de echte linktitels er staan is de hele blauwe balk evenwichtig gevuld. Ik zit echter met het probleem dat een en ander in de breedte niet meer past bij andere resoluties. Met padding-right als percentage opgeven lukt het me ook niet om het mooi te krijgen en de font-size zou ook relatief moeten worden lijkt me dan toch?
2) Het moet in de meeste browsers goed werken. In Firefox staat de tekst mooi over de tweede balk heen, in IE een stuk hoger (terwijl het bij de eerste balk wel goed gaat ). Ook de tekst van het content-frame is niet goed gepositioneerd in IE. Gewoon IE-bug, of...?

Mag ik vragen om een voorzetje hoe hier mee aan de slag te gaan?

[ Voor 64% gewijzigd door Luke! op 10-12-2006 13:08 ]