height 100 t.o.v. pagina

[jellever]

hallo helpmij,

Ik zit met een probleempje.. ik ben bezig met deze website: http://www.bb.jellewebtools.nl/nele.html
en heb een geel balkje aan de linker kant die moet over de hele lengte van de pagina komen. Nu met height:100% komt die alleen over de lengte van mijn beeldscherm en niet verder..

Hoe kan ik hem over de hele lengte van de pagina laten lopen tot aan het einde??

huidige code:

<div style="position: absolute; left:0px; top:0px;height:100%;  width:277px;  background-image:url(menu_background.png); background-repeat:repeat-y; background-position:left; ">
</div>

 

[csshunter]

Hoi jellever,
Heb je dit al eens geprobeerd:

[FONT="Courier New"][SIZE="2"]html {
	background: url(menu_background.png) repeat-y;
	}[/SIZE][/FONT]

Verder nog een paar puntjes:

• Teleurstelling: in Internet Explorer (IE7) en Opera (9.64) zag ik uitrollers bij het menu, maar in Firefox (FF3), Google Chrome en Safari (4.0.2) zijn die er niet... :shocked:
• in de tekst zijn een paar keer <br>'s geslopen, die de regels breken.
• ik zou ook even kijken bij de html-validator en de css-validator.

Met vriendelijke groet,
CSShunter

 

[jellever]

hey, bedankt.

Ja had dat al geprobeerd. Heb eigenlijk 2 achtergronden. 1 verticale (body background, gele balk links die doorloopt) en de horizontale lijnen in het menu. De verticale lijnen zijn dus nu opgelost maar nu heb ik het probleem horizontaal..

Als je resolutie zo klein is dat je scrollbalken krijgt en je scrollt naar rechts houd de div background, dus de horizontale strepen daar op. En bedankt voor de tips:thumb:

 

[csshunter]

Hoi Jelle,
Ja, tegelijkertijd horizontaal èn verticaal een achtergrond gebruiken hoort tot de lastige klusjes der dingen, zeker als je er van die mooie kleurverlopen in hebt zitten.
Het komt erop aan, precies de goede volgorde van stapelen van de achtergrond- en voorgrondfiguren uit te vinden. Hier komt je tutorial.

• Fase 1 - de verticale gele streep is een "faux column" (NL uitleg hier), en komt als achtergrond in de html.
  
  
• Fase 2 - de horizontale menustrook komt als achtergrond in de body. Links boven is nu een flinke hap van de verticale lijn overlapt en weggesneden: dat wordt de volgende stap.
  
  
• Fase 3 - Plaatsing van de (links drijvende) linkerkolom, met bovenin de sliertjes als achtergrondfiguur: dit drijft prettig boven de zojuist afgesneden hap. De aansluiting met de menubalk is nog niet oké, maar dat komt later.
  
  
• Fase 4 - De jolige laptop-dame als voorgrond-figuur in de linkerkolom geplaatst, en de zoek-opties in de kolom in stijl gebracht en toegevoegd. - Attentie: dame (of ander) plaatje iets te verkleinen, zodat de rechteronderhoek net niet de sliertjes overlapt! - Transparantie is dan overbodig.
  
  
  
  
  
• Fase 5 - Het logo er gecentreerd als header-voorgrond-figuur ingehangen op het rechterdeel. Ah, logo is intussen veranderd, zie ik.
  
  
• Fase 6 - Eindelijk de schone aansluiting ingevoegd, als achtergrond-figuur in de #topmenu div.
  
  
• Fase 7 - De menu-items (voorlopig) als voorgrond-images/knoppen geplaatst in een horizontale list; dit verhindert ongerief bij opschalen van de lettergrootte door de bezoeker. De knoppen iets ingedikt, zodat ze in de breedte samen net nog op een 800x600px resolutie passen (zonder links-rechts scrollbar onderaan). De slinger-tussenstukjes zitten als achtergrond-figuur in de <li>'s. - Later kan hier een mooi css-hover menu met 1 gecombineerd plaatje van gemaakt worden! (zoiets als dit).
  Attentie: het niet-funcionerend dropdown menu is nog niet opgelost. Hier zou je eens een Google op kunnen loslaten met "accessible suckerfish" (? > !).

Nu hoeft er alleen nog wat inhoud bij om de zaak af te maken:

• Kijk: versie met korte inhoud, en versie met lange pagina.

Zo, en nu maar rekken en trekken om deze layout te breken!

Succes!
Met vriendelijke groet,
CSShunter

PS:
O ja, ik heb een aantal afbeeldingen naar mijn hand gezet om beter met de formaten uit de voeten te komen. En ik heb geen transparante png's gebruikt, maar ondoorzichtige (met achtergrond en al). Die geven geen problemen in (oudere versies van) Internet Explorer, en je kunt dan het vertragende script pngfix.js voor IE missen.
O ja, en het Doctype "html strict" gebruikt, voor de beste resultaten in alle browsers.
Waarschijnlijk vergeet ik nog een paar o-ja'tjes.
O ja, deze: er is css-layout toegepast zonder gebruik van { position: absolute; }, want dat is gecompliceerder dan je denkt, en is bij uitglijden een patent middel om een layout overhoop te halen (bv. als de bezoeker een grotere lettergrootte gaat gebruiken e.d.).

PS-2:
O, misschien wat fris lucht-blauw om de noeste bijtjes wat beter te laten vliegen?

 

[jellever]

wooooooowwwww:shocked: Jij bent flink bezig geweest:thumb: Ik zal alles rustig doornemen wat je allemaal verteld. Ziet er in ieder geval goed uit. Alleen denk ik niet dat ik die blauwe gradient ga gebruiken. maar dat heeft mij wel op een ander idee gebracht

p.s. ga eerst hem lokaal veranderen en herstructureren dan zal ik hem uploaden

p.s. 2 Wat bedoel je nou met het menu? heb ff mijn laptop gedowngrade naar ie7 en ziet alles er goed uit? heb ook ietester geprobeerd, komt er ook goed uit? screenshotje ms?

p.s. 3 opera 9.64 net gedownload en ziet er ook normaal uit?

p.s. 4p) als je hem verkleint verspringt het menu wel. dit kon ik zonder de li tags met nobr tag doen. hoe doe je dat nu? zie bijlage
Super bedankt!:thumb:

 

[csshunter]

Hoi Jelle,

wooooooowwwww Jij bent flink bezig geweest

Ja, 't is koud buiten en toch nog geen schaatsweer.

Bij PS-2
In jouw pagina zie ik bij muizen over het menu in IE het uitrolmenu verschijnen, maar in FF niet.
In mijn pagina heb ik er geen submenu in gemonteerd. De "Suckerfish" oplossing voor een submenu is de naam die de uitvinders van deze methode aan hun voorbeeld-pagina gaven. Die heeft een menu + submenu's voor allerlei soorten vissen, o.a. de Suckerfish (een "zuigvis", die zich met zuignapjes vastkleeft op zijn/haar gastheer-grotere-vis; wist ik ook niet dat die bestonden, maar via Google kom je een heel eind).
Later hebben ze er een serie artikelen "Sons of Suckerfish" bij gemaakt, waar tal van webontwerpers prachtige sites mee gemaakt hebben, die door alle browsers te gebruiken vallen.
Met "accessible suckerfish" kom je terecht op pagina's over de toegankelijkheid van de Suckerfish-methode, d.w.z. over tips voor het nog beter toepasbaar maken voor surfers die geen muis gebruiken, voor mensen die pure tekst-voorleesbrowsers hebben, enz. - Want een voor iedereen toegankelijke website is natuurlijk de hoogste eer die er te behalen valt! (en eigenlijk zou dat gewoon standaard moeten zijn...)
Internet Explorer nummertje 6 had ik nog niet getest; nu wel - en zoals te vrezen viel, blijkt die er niet goed mee overweg te kunnen. Met wat "conditional comments" (alleen voor IE6) is dat hopelijk op te lossen.

Bij PS-3
Opera gaat i.d.d. goed.

Bij PS-4

als je hem verkleint verspringt het menu wel. zie bijlage.

Ja, hoe-hoe! Ik denk dat er weinig sites zijn, die bestand zijn tegen verkleining tot een vensterbreedte van 380px op een desktop (voorbeeld uit het leven gegrepen ). Maar m'n testpagina komt aardig tevoorschijn op een echt smallscreen (mobieltje e.d.) van 244px breed, zegt de small-screen rendering van FF en Opera.
[edit]Trouwens, voor een echt smallscreen kan je met css aanpassingen maken, waardoor smallscreen-bezoekers een alternatieve stijl toegediend krijgen (bv. met kleinere knoppen, of alleen met tekst-links, enz.).[/edit]

Groetjes,
CSShunter

 

[jellever]

ok, Bedankt! menutje werkt in ff nu. ik was lui geweest in javascript en had geen eenheid aangegeven. had alleen een waarde meegegeven en geen "px" erachter.
O en waarscheinlijk laad hij nu niet of krijg je een mysql error. dit ligt niet aan de pagina maar aan mijndomein(de provider) die is volgens mij bezig want al mijn domeinen doen momenteel vreemd..

Edit. over je voorbeeld: I know Ik heb hem echt al tijden niet meer geupdate

 

[jellever]

ok hij staat erop. maar ik heb een heel vaag probleem die linker kolom is niet klikbaar. daarbij bedoel ik de advanced search en form etc.??? lokaal werkt het wel maar zodra het op de server staat kan ik het in IE 8 niet klikken. In FF en Opera werkt het weer wel?? Ik dacht een overlappende layer maar zo ver als ik kan zien is die er niet????

O en alles is nu xhtml 1.0 strict

 

[jellever]

Vreemd.... Pagina helemaal opnieuw in elkaar zitten zetten en werkt nu wel. Waar het aan lag weet ik dus niet maar het werkt

 

[csshunter]

Ja, dat overkwam mij nu ook. Hij deed het na downloaden bij mij lokaal ook eerst niet, en ik ben gisteravond tijden aan het bug-hunten geweest om er niet achter te komen.
Wel ontdekte ik dat als ik de <div id="topmenu"> er uit sloopte, hij het weer wel deed. - Maar die was exact hetzelfde als de html-regels die ik in mijn versie had staan, en had ook exact dezelfde css! Toch deed de een het wel, en de ander niet. :shocked:

Toen ik er vandaag nog eens naar ging kijken, merkte ik dat jouw pagina het nu wel deed. En ik werd héél nieuwsgierig om van je te horen wat je gevonden had, en wat je oplossing was.

Conclusie: er was inderdaad iets heel vreemds aan de hand, misschien een haperingetje bij het uploaden of zo.
Of een toevallige samenloop van omstandigheden, waar IE niet tegen kon. Zoiets als: "op de 13e html-regel bij het 16e teken een a, en dan een blanco regelnummer 27". Zo'n combinatie kom je nooit achter, en bij IE weet je het nooit!

Maar heel prettig dat ie (IE) het nu doet zoals het hoort!
Kan je tevreden het nieuwe jaar in!

CSShunter

 

[jellever]

het was inderdaad iets heel raars. mijn opnieuw opgestelde pagina was precies hetzelfde kwa code. er zaten soms wat verschillen kwa regelpostitie dat er soms net wat op een andere regel stond. Echt vreemd:shocked: Maar goed, goed het nieuwe jaar ingegaan

Mega bedankt voor je hulp:thumb: en iedereen de beste wensen in 2010

 

[jellever]

nog een vraagje: welk lettertype heb je gebruikt bij de knoppen?? ik heb photoshop cs4 en daar kan ik het juiste lettertype niet in vinden. trebuchet ms is het niet want dat lettertype staat een beetje schuin en in die knoppen is het een volledig "recht" lettertype..

edit:
ik zie het al, hij stond op een beetje schuin in het geavanceerde "teken" venstertje van adobe.

 

[csshunter]

Okodoki, want het was inderdaad de Trebuchet MS.