EXEMPEL 6 - Grundlayout 2
Den här LAYOUTEN är flytande. Bredden är angiven till 80%. Sidans bredd påverkas av webläsarfönstrets storlek. Sidans utformning styrs av stilmallen: stilmall6.css.
Här är också min-width: 600px och max-width: 1024px angiven.
Exempel 5 är också flytande - men menyn är placerad till vänster!
Teckensnittet för brödtexten är: Verdana, Arial, Helvetica, sans-serif.
Rubrikernas teckensnitt är: Georgia, Times, "Times New Roman", serif.
Menyn till höger bör inte innehålla hela ord med fler än c:a 12 tecken för att layouten ska fungera korrekt om webläsar-fönstret förminskas med förstorad textstorlek. Testa!
I kolumnen #maincontent bör element inte vara bredare än 400 pixlar och i kolumnen #sidecontent inte bredare än 155 pixlar - inklusive eventuell padding och marginal - för att layouten ska fungera om webläsar-fönstret förminskas till 640 pixlar. Enheten em på element fungerar inte så bra här - procent är bättre! En bredd med 100% - utan padding och marginal - går fint!
Om bredden på layouten eller paddingen i boxarna förändras gäller andra mått! Testa!
Layouten är egentligen inte speciellt komplicerad - det är hur enkelt som helst förändra utseendet. Lägg till bakgrundsbilder, byt bakgrundsfärger och färger på rubriker och länkar!
Naturligtvis kan du också använda layouten som mall att arbeta vidare på - och ändra precis hur mycket eller lite du vill! Men se tll att kolla layouten i olika upplösningar och textstorlekar - och i åtminstone både Mozilla Firefox och Internet Explorer.
Behöver du ett grafikprogram kan du hitta tips på NinetNet under rubriken: GRAFIK / Grafik / Fotoprogram.
Om du vill får du gärna länka tillbaka till NinetNet från din sida:
Layout från NinetNet
Uppdaterad: Juli 2006