[XHTML 1.1 Strict/CSS]Navigatie color doorlopen tot onder - Softwareontwikkeling

maandag 10 december 2007 20:27

Acties:

Topicstarter

Beste Tweakers,

Ik zit op de Katholieke hogeschool kempen (.be) en volg daar toegepaste informatica. Onze school draagt toegankelijke websites hoog in het vaandel, (anysurfer labels enz...) omdat het steeds belangrijker wordt voor mensen met een beperking om het internet ook te kunnen gebruiken.
Voor het vak webdesign moet ik nu samen met een groepsgenoot een site maken over Judo (te vinden op: http://users.telenet.be/b...netInclusief/4/index.html)en deze vaak laten screenen door een toegewezen studente ergotherapie.
Tot zover de inleiding...

Nu is alles vrij goed gelukt, alles is mooi strict valide, css werkt fijn enz..

Nu zit ik alleen met het volgende probleem: volgens mijn vriendin (ook ergo, maar zij helpt mij wat, want van de toegewezen moet ik blijkbaar niet al te veel verwachten qua advies voor mensen met beperkingen) is het het beste als ik het navigatie-gedeelte, wat je nu in het grijs ziet in de container, helemaal doorloopt tot onder. dus één grijze strook...

Ik heb al verschillende dingen geprobeerd maar slaag er niet in, heeft iemand hier een oplossing voor?

maandag 10 december 2007 20:30

Acties:

Victor

Het sleutelwoord dat je zoekt is "faux columns". Hier is onder andere op A List Apart een hoop over te vinden.

maandag 10 december 2007 20:36

Acties:

HyperBart

Topicstarter

Dat principe ken ik, je mega smalle background over de hele pagina laten herhalen onder mekaar, maar ik heb geen image als background maar gewoon een solid kleur...

maandag 10 december 2007 20:37

Acties:

orf

HyperBart schreef op maandag 10 december 2007 @ 20:36:
Dat principe ken ik, je mega smalle background over de hele pagina laten herhalen onder mekaar, maar ik heb geen image als background maar gewoon een solid kleur...

En dat kun/mag je niet aanpassen?

maandag 10 december 2007 20:43

Acties:

apokalypse

HyperBart schreef op maandag 10 december 2007 @ 20:36:
Dat principe ken ik, je mega smalle background over de hele pagina laten herhalen onder mekaar, maar ik heb geen image als background maar gewoon een solid kleur...

Volgens mij ken je het niet

Google maar. Dat is echt de oplossing.

maandag 10 december 2007 20:44

Acties:

HyperBart

Topicstarter

Liquid design, als je control en je muiswieltje scrollt, dan vergroot je je tekstgrootte, het moet beetje schaalbaar zijn, en als je de repeat-x (of was het y, kan iemand dat zeggen?) gebruikt dan heb je maar klein kolommetje... en gaat je tekst er finaal over.

PS: ikw eet het, schaalbaar is maar beperkt, maar docent's wil is wet...

maandag 10 december 2007 20:56

Acties:

H004

Als ik nu het scrollwiel gebruik en de letters (extreem) groot maak, verschijnen ze ook buiten het grijze vlak. Als dat ook geen punt is, dan kun je dus prima faux Collumns gebruiken...

HyperBart schreef op maandag 10 december 2007 @ 20:36:
Dat principe ken ik, je mega smalle background over de hele pagina laten herhalen onder mekaar, maar ik heb geen image als background maar gewoon een solid kleur...

Je kan beter een wat bredere background gebruiken, dan hoeft de browser het minder te tilen: een 1px brede background moet op een normaal scherm al snel zo'n 1000 keer herhaald worden. Op oude pc's kan dat nog wel eens vertragend werken...

[ Voor 58% gewijzigd door H004 op 10-12-2007 21:02 ]

maandag 10 december 2007 21:05

Acties:

orf

Eventueel kun je nog iets proberen met absolute positionering binnen een relatief gepositioneerde div.
Dat werkt in de moderne browsers:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="nl">
<title>2 columns</title>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
    text-align: center;
}
#main{
    margin: 0px auto;
    width: 900px;
    text-align: left;
    position: relative;
}
#menu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20%;
    background: #ccc;
}
#content{
    margin: 0 0 0 20%;
}
</style>
</head>
<body>
<div id="main">
    <div id="menu">menu</div>
    <div id="content">
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec neque magna, semper in, convallis ut, tempor ut, mauris. Quisque leo purus, imperdiet nec, dictum non, convallis non, ipsum. Aliquam erat volutpat. Phasellus nisl. Curabitur consectetuer urna in dui. Donec porttitor turpis iaculis velit. Donec lacus magna, pellentesque sit amet, vestibulum at, condimentum sit amet, quam. Cras massa. Ut sodales dictum elit. Nam nunc nibh, ornare ut, bibendum quis, suscipit nec, massa. Praesent blandit orci ut orci. Vivamus eu nunc. In sit amet est. Aliquam id enim ut est bibendum aliquam. Integer lobortis. Cras eget purus sed metus dapibus viverra. Morbi a urna. Donec turpis. </p>

        <p>Pellentesque eget pede. Sed pulvinar, mauris quis posuere auctor, libero lectus euismod quam, a lobortis urna erat vitae mauris. Praesent sem dui, euismod ut, egestas at, adipiscing sit amet, sapien. Sed vestibulum sem at nunc. Mauris vel nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec orci. Suspendisse rhoncus adipiscing est. Etiam ac felis. Pellentesque odio massa, dignissim eu, hendrerit nec, suscipit eget, lacus. Praesent in orci sit amet neque sagittis mollis. Phasellus justo lacus, congue id, gravida quis, congue at, lorem. </p>
    </div>
</div>
</body>
</html>

maandag 10 december 2007 21:11

Acties:

MoietyMe

zij/haar

Inprinciepe kun je je hele website gewoon schaalbaar maken door alle breedtes/hoogtes in EM's op te geven. Daar is dit een leuk voorbeeld van.

Verder kun je inderdaad het beste Faux columns gebruiken, al is dat natuurlijk weer niet schaalbaar..

Daarnaast is dit nog wel een mooi artikel voor jou om te lezen:

How To Size Text in CSS.

Want ik zie dat je alles in PX opgeeft, dit kan IE6/7 niet schalen, waardoor je dus eigenlijk het grootste gedeelte van de gebruikers al buitenspel zet

maandag 10 december 2007 21:24

Acties:

HyperBart

Topicstarter

Ok, dat van die techzine is wel heel vetjes, dat is dus allemaal met em's gedaan ipv px?

In welke zin houdt ie geen rekening met PX ? bij mij doet ie het toch mooi ?

maandag 10 december 2007 21:32

Acties:

MoietyMe

zij/haar

HyperBart schreef op maandag 10 december 2007 @ 21:24:
Ok, dat van die techzine is wel heel vetjes, dat is dus allemaal met em's gedaan ipv px?

In welke zin houdt ie geen rekening met PX ? bij mij doet ie het toch mooi ?

Dat is inderdaad allemaal met em's gedaan.

Ik zie nu inderdaad dat iig IE7 het wel kan met ctrl ingedrukt, maar probeer maar eens je text te resizen dmv het menu (view > text size > largest).

maandag 10 december 2007 21:55

Acties:

HyperBart

Topicstarter

Ben er net achtergekomen:

in ff is dat de textgrootte aanpassen (scrollen en ctrl) maar in ie is dat in en uitzoomen...

Dan zou ik nu wel mijn hele site moeten gaan herdoen in css en gaan bepalen wat 1em is en afhankelijkd daarvan de gekoppelde groottes van titels en subtitels en alles te gaan doen...

maandag 10 december 2007 22:32

Acties:

MoietyMe

zij/haar

Als je dat artikel hebt gelezen is het niet zo moeilijk:

aantal px / 16 = em

Dus:

16px / 16 = 1 em

maandag 10 december 2007 22:48

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Paar tipjes: Als toegankelijkheid een belangrijk punt is: vul je title's in, gebruik acceskeys, geef navigatie extra aan door middel van het link element in de header.
<span class="bold"> is niks zeggend, gebruikt hiervoor <strong>. Gebruik/maak stylesheets voor verschillende media, je hebt nu alleen één algemene.

Huur mij in als freelance SEO consultant!

maandag 10 december 2007 23:02

Acties:

HyperBart

Topicstarter

maar is het dan nog wel allemaal valide ? zoals met die <strong>?
Klopt, print heb ik nog niet gemaakt, title's moet ik idd nog aanpassen.
Accesskeys? Nog niet geleerd, of misschien onder een andere naam.
Navigatie extra aangeven doormiddel van het link element ook nog niet...
We zijn nog maar n00bies he...

dinsdag 11 december 2007 10:19

Acties:

Pendaco

Vogon Poetry FTW!

Waarom zou dat niet valide zijn, ik zou zeggen check even de (x)html specs.
Het gebruik van de <strong> tag is juist voor mensen met een screenreader interessant aangezien er meer nadruk op het woord (of zin) wordt gelegd.

Ik ben het trouwens met Orf eens, en zou je menu absoluut positioneren;
1- het blijft op die manier altijd in beeld, ook wanneer je naar beneden scrollt
2- je kunt, in je code, je content eenvoudig boven je menu plaatsen waardoor apparaten zoals screenreaders niet eerst je hele menu hoeven door te lopen/oplezen.

Je ontwerp is er prima voor geschikt

woensdag 12 december 2007 14:10

Acties:

HyperBart

Topicstarter

Ik hou me er vanavond nog even mee bezig !
heb nu programmeren, dus gaat even moeilijk (arrays).

ja, bold kan je gebruiken, amar het probleem ligt 'm een beetje dat wij echt opmaak en inhoud zoveel mogelijk gescheiden proberen te houden, dus met bold ga je een opmaak toepassen als ik het goed begrijp en dat hebben onze docenten nu liever niet...
Maar ik ben er wel voor te vinden als ik ooit zelf sites moet maken...

Ik heb het even geprobeerd met die position absolute, het werkt bij mij niet, ik had alleen het menu aangepast, paddings en float en inline weggelaten en dan het stukje van orf gekopieerd, maar dit werkt niet...

Wat was eig het resultaat ? dat gewoon alles meescrollt van het menu?

[ Voor 25% gewijzigd door HyperBart op 12-12-2007 14:26 ]

woensdag 12 december 2007 15:08

Acties:

Pendaco

Vogon Poetry FTW!

Dit zijn dan wel de Nederlandse richtlijnen maar ik neem aan dat ze in Belgie niet zoveel zullen verschillen; http://webrichtlijnen.overheid.nl/richtlijnen/

en specifiek;
http://webrichtlijnen.ove...n-van/tekstopmaak/#nadruk

Bij een absoluut gepositioneerd menu zal het menu op de plek vast blijven staan (als ware vastgelijmd) ook wanneer er gescrollt wordt. Het menu zelf zal dus niet mee scrollen maar wel altijd in beeld blijven staan.

[ Voor 3% gewijzigd door Pendaco op 12-12-2007 15:09 ]

woensdag 12 december 2007 16:11

Acties:

orf

Als je m'n voorbeeldje in een documentje plakt en bekijkt in je browser, dan is dat alleen maar een fix om de achtergrond helemaal door te laten lopen. Dat werkt doordat het menu een top en bottom heeft en de parent relative gepositioneerd is.

Het menu blijft dus niet staan als je scrollt.

woensdag 12 december 2007 23:29

Acties:

TheLemon

daddy cool, crazy like a fool

Die faux columns is inderdaad een werkende oplossing voor je hoor, ik heb dat ook eens gebruikt (wist niet eens dat er een naam voor was). Je moet gewoon een gifje maken van 180px breed en 1px hoog die je volledig vult met #cccccc, alleen de rechterpixel en de linkerpixel maak je eventueel #8C8484 om die border te simuleren.
Dan zet je in je div#main_content de volgende style:

code:

1	background: url(lalala.gif) repeat-y;

dan mag je de background-color en de border van je menu-div ook weghalen. Zou moeten werken.

Ik zie overigens nog display: inline's staan bij die twee div's. Die zijn niet nodig als je float.

donderdag 13 december 2007 00:09

Acties:

curry684

left part of the evil twins

HyperBart schreef op maandag 10 december 2007 @ 20:36:
Dat principe ken ik, je mega smalle background over de hele pagina laten herhalen onder mekaar, maar ik heb geen image als background maar gewoon een solid kleur...

En waarom zou die image niet uit solid color mogen bestaan?

Druk op http://www.xboxic.com/ even op 'View Background Image', dat zijn nou faux columns.

Professionele website nodig?

donderdag 13 december 2007 13:59

Acties:

HyperBart

Topicstarter

uiteraard mag ze bestaan, maar je kan niet background-color:FFF laten herhalen, het moet een afbeeldingkje zijn...

donderdag 13 december 2007 14:51

Acties:

curry684

left part of the evil twins

HyperBart schreef op donderdag 13 december 2007 @ 13:59:
uiteraard mag ze bestaan, maar je kan niet background-color:FFF laten herhalen, het moet een afbeeldingkje zijn...

Dat is nu net de hele truc, daarom zijn het ook 'faux columns' en geen 'columns'. Zie dat voorbeeld wat ik linkte.

Professionele website nodig?

donderdag 13 december 2007 22:16

Acties:

HyperBart

Topicstarter

en ik wou het nu net zonder afbeelding doen zodat wanneer je de tekst vergroot dat de FFF kleur bv ook meegaat, bij een afbeelding en het faux columns principe kan je dit namelijk niet, want daar blijft je kleur maar zo breed als je afbeelding gemaakt is....

vrijdag 14 december 2007 08:11

Acties:

curry684

left part of the evil twins

Sja dan kom je er alleen maar met tables ben ik bang tot CSS3 er is

Professionele website nodig?

vrijdag 14 december 2007 13:51

Acties:

H004

Dan los je het op door bezoekers niet het scrollwieltje te laten gebruiken om lettergroottes aan te passen, maar door 3 stylesheets te gebruiken icm drie knoppen a, a en A. Kun je voor alle 3 (of 5, of...) de lettergroottes een aparte faux-columns-background maken en is je probleem opgelost.

Voor hoe je zoiets makkelijk maakt moet je even googlen, want je hebt natuurlijk niet echt 3 verschillende stylesheets nodig.

vrijdag 14 december 2007 17:10

Acties:

orf

H004 schreef op vrijdag 14 december 2007 @ 13:51:
Dan los je het op door bezoekers niet het scrollwieltje te laten gebruiken om lettergroottes aan te passen, maar door 3 stylesheets te gebruiken icm drie knoppen a, a en A. Kun je voor alle 3 (of 5, of...) de lettergroottes een aparte faux-columns-background maken en is je probleem opgelost.

En bezoekers die standaard met een grotere fontgrootte browsen?

zondag 16 december 2007 13:18

Acties:

TheLemon

daddy cool, crazy like a fool

Of met een simpel javascriptje waarmee je de hoogte van je rechterkolom uitleest en vervolgens die toepast op je linkerkolom. Dan kun je gewoon je huidige oplossing behouden.

zondag 16 december 2007 15:44

Acties:

HyperBart

Topicstarter

ik sla even tilt, maar ben wel heel dankbaar voor de vele hulp en reacties

* HyperBart deelt ook even mee dat hij met bovengenoemde dingen heel sterk rekening gaat houden in de mate dat hij er kennis van heeft en dat zijn website ingediend is.

[ Voor 8% gewijzigd door HyperBart op 16-12-2007 15:45 ]