absoluut?

Status
Niet open voor verdere reacties.
horizontale scrollbar ... op te lossen door div's altijd 100% breed te maken, als je ze toch onder elkaar wilt weergeven ... of altijd {display: block} te doen?
Klik om te vergroten...
Nee hoor, het zit 'm bij jou vooral in in de AP's: Absolute Posities. Die dingen zijn altijd heel link (sowieso), en IE begrijpt het vaak niet, ook al is het goed gedaan volgens de html- en css-standaarden.
  • Kijk, je hebt de copyright-<div id="onder"> een absolute positie gegeven, met een bottom van 0px. Dan staat die regel altijd onderaan het scherm, wat de resolutie ook is.
  • En sterker nog: wat het window-formaat ook is, want iemand kan een kleiner venster hebben ingesteld. Bijvoorbeeld zoiets.
  • En staat er ook iets anders onderaan het scherm, dan raust het absolute ding er met absolute voorrang dwars overheen (als het later in de html staat). Als het eerder in de html staat, en je hebt geen z-index maatregelen genomen, verdwijnt het achter het andere element (maar wel op die helemaal-beneden-plaats).
  • Zit er nog iets anders op de pagina, dat bij een bepaalde resolutie hoger is dan de beschikbare 100% van de schermhoogte (zodat je moet scrollen), dan blijft bij scrollen het AP-bottom element keurig op zijn AP-plaats > dus houdt het de 100% hoogte van het scherm t.o.v. de bovenrand van de pagina > dus scrollt mee omhoog. Dit dus.
Daar heb je geen last van, als je de AP weglaat *), want een <div> of een <p> is zonder tegenbericht automatisch breedte-opvullend t.o.v. het element waar het in staat: het zijn uit zichzelf al block-elementen.
  • Zo had ik het dus in mijn model aangepakt: er is een <div id="huis"> waar alles van het huis en de copyright-regel in zit. Het huis is in verschillende <div>'s opgedeeld, daaronder zit een <p> voor de copyright-regel.
  • Nu is de <div id="huis"> in z'n totaliteit rangeerbaar, en wat er in zit gaat gewoon mee. Je kan de <div id="huis"> in het horizontale midden zetten, of links laten uitlijnen, of op een bepaalde afstand van het menu erboven zetten, enz.
En: als een element ook bij scrollen altijd helemaal onderaan moet blijven staan, dan kan daarvoor {position: fixed; bottom: 0;} gebruikt worden. Maar ook dat kan lastig zijn, als er daardoor andere elementen onder kunnen verdwijnen.

Met vriendelijke groet,
CSShunter

*)
Behalve als je met float's in de weer bent geweest - dat geeft een aanvullend verhaal. Maar dat is bij jou niet van toepassing.
 
footer

hallo csshunter en wederom bedankt voor de verhelderende uitleg.

is een sticky footer dus af te raden?
zet jij de inhoud van een footer gewoon onder de laatste div en veel of weinig tekst/inhoud bepaalt dan waar de footer verschijnt?

je zou dus eigenlijk een sticky footer moeten hebben, die mooi tegen de beeldrand onderaan staat.
en dat
  • of de inhoud zelf er achter langs scrollt als de inhoud veel wordt
  • of bij te veel inhoud de sticky footer toch meeschuift naar beneden
 
Hoi Jeel,
Inderdaad, ik ben zelf niet zo dol op sticky footers.
  • Met een {position: fixed;} blijft ie wel mooi op zijn plaats staan, maar kan ie de content van de pagina overlappen. Zie www.developerscorner.nl/csshunter/test-taampjes2.htm met bijbehorend screenshot-test2.
  • Dat is te verhelpen door de body een margin-bottom ter hoogte van (ongeveer) de footer te geven: www.developerscorner.nl/csshunter/test-taampjes3.htm met dit screenshot-test3. Hiermee verlang je dat de bezoeker erg op zijn/haar hoede is: op het oog lijkt de pagina compleet, maar bij nadere beschouwing zit er toch een rechter-scrollbar, die belangrijke info aan de onderkant kan onthullen. Een aantal bezoekers zullen het niet opmerken, en daarom gebruik ik deze optie nooit.
  • Een alternatief is in jouw geval, om het copyright regeltje niet als sticky footer over de volle breedte te laten lopen, maar alleen als element met zijn eigen formaat. Een soort etiketje dus, zoals hier in www.developerscorner.nl/csshunter/test-taampjes4.htm, met dit screenshot-test4. Nu is bij een minder hoge resolutie of minder hoog window iin elk geval duidelijk dat er nog iets onder zit. :)
Maar eigenlijk vind ik dus het regeltje gewoon altijd onder het huisje wel zo praktisch: toegankelijk voor iedereen die toch al de pagina scollt om de hele content te kunnen zien. :D

O ja, "fallback voor scriptless" is mijn (waarschijnlijk kromme) vertaling van: "met terugval-optie als er geen javascript is, zodat je toch wat kunt zien." Dan zie je namelijk de eerste foto'tjes van de strook, en niet helemaal niets. - Daarom is in de css als horizontale background-positie niet 0px genomen, maar -50px. Dan staan de plaatjes precies achter de raampjes i.p.v. halverwege.

Met vriendelijke groet,
CSShunter
 
ap divs positioneren en andere zaken

hallo csshunter, wederom zeer verhelderend.

dus stel dat ik nu dat huis te veel vind zweven nu, en dat ik het onderaan de pagina wil met als 'bodem'waarop het rust, een strook gras wil, die over de hele pagina van het scherm loopt, van links naar rechts, zeg maar 50 px hoog.


div1 = header
div 2 = main content (huis)
div 3 = footer (grasstrook)

kan ik dan niet gewoon dit doen, ook al om te zorgen dat iedere resolutie het ziet:
1. huis niet te groot maken, kleiner dan 600px hoog, voor mensen met kleine schermen (er is trouwens een truc om images mee te laten 'bewegen' met de schermresolutie, zeg maar een flexibel image. maar okee, dat laten we even rusten).

div header 10 % hoog maken
div main 80 % hoog met margin bottom 0, vertical align bottom (??) (zodat huis altijd tegen onderkant van eigen div aanzit)
div footer 50 px hoog (hierin komt de grasstrook)

kan dit?? of mis ik de clou?



ps ik snap trouwens het verschil tussen
http://developerscorner.nl/csshunter/test-taampjes2.htm
en
http://developerscorner.nl/csshunter/test-taampjes3.htm niet zo goed. het ziet er exact hetzelfde uit wat mij betreft
 
Laatst bewerkt:
Hoi Jeel,
Ik begin even met je PS.
De gebruiksaanwijzing is als volgt:
  • Neem http://developerscorner.nl/csshunter/test-taampjes2.htm.
  • Verklein het browser-window in de hoogte zodaning, dat bv. de copyright-regel precies onder de raampjes staat.
  • Scroll nu naar beneden.
  • De gitaar wordt doorgesneden, en de onderkant van het huisje is niet te zien. :(
  • Laat de stand van het venster staan.
  • Neem nu http://developerscorner.nl/csshunter/test-taampjes3.htm.
  • Op het oog ziet deze er krek hetzelfde uit (behalve de achtergrondkleur van de footer).
  • Maar scroll weer naar beneden.
  • Nu is het hele huisje met gitaar in het gras te zien. :D
Dit zit 'm in de padding-bottom van de <body>, die bij nr.3 op 60px is gezet.
Als je de copyright-footer in beide gevallen weglaat, is het beter te zien (weer bij een in hoogte te klein venster):
In 3a zien we de gereserveerde padding onderaan als lege strook: in feite hebben we de body in hoogte verlengd (de paarse stippellijn is de border van de body).
Dat de footer niet óók boven de padding komt, zit 'm in de {position: fixed;}, waarmee de footer ontsnapt aan de "normal flow" van alles wat (met relatieve posities, zoals het huisje) in de body zit.

Maar als het scherm groot genoeg is om alles erop te laten passen, hoef je niet te scrollen, en is er geen enkel verschil. Dan wordt de ruimte onder de getoonde <body> en boven de footer gewoon opgevuld met de grijze kleur van het canvas.
Q.E.D.! :)

Wordt vervolgd,
CSShunter

PS:
Hé, nu zie ik opeens dat ik de testbestandjes ...taampjes.htm heb genoemd i.p.v. ...raampjes.htm. :rolleyes: Dat had geen diepere bedoeling: de tikfoutduivel zit toch in alle hoeken en gaten! - Ik laat het maar lekker zo, anders worden de links een beetje onbruikbaar.
 
Het lijkt me inderdaad een goed idee om het hele huisje benedenaan te zetten, inclusief de copyright-regel.
Dat zou je (met de versie van dit moment!) als volgt kunnen doen met de plaatsvervangende css:
Code: 
#huis {
     position: fixed;
     bottom: 0;
     margin-left: 115px;
     }
#copy {
     margin: -1.5em 0 0 0;
     padding: 0;
     text-align: center;
     color: white;
     }
.demo { display: none; }
Dan haalt ie het met gemak bij een niet zo hoog scherm.
Als je ook nog toevoegt als aanvullende code voor de #kop:
Code: 
#kop { 
     position: relative;
     z-index: 2;
     }
Dan werkt het zelfs op een 800x600px resolutie, want dan komt het menu voor zover nodig over het dak van het huisje heen.

Dit alles gaat er dan van uit, dat op deze (start)pagina de gereserveerde ruimte voor het demo-gebeuren niet nodig is. Als die ruimte wel nodig is, zie ik het zo gauw (met alleen css) niet lukken voor alle schermhoogtes.

O, nog als antwoord tegoed: de blokkendoos kan nooit in elkaar storten. Alles zit nagelvast in de #huis <div> gespijkerd, en de images (voor- of achtergrond) kunnen geen kant op om niet op elkaar aan te sluiten. Er zijn ook nergens %'s gebruikt, dus er is ook geen risico van afrondingsfoutjes van 1px (waar IE nogal goed in is) waardoor ze toch links-rechts verschoven zouden kunnen worden t.o.v. elkaar. Verticale gaten of overlappingen zijn met deze div-opbouw sowieso uitgesloten. Naadloos! *) :)

Met vriendelijke groet,
CSShunter

*) Tenminste zolang je niet een andere achtergrondkleur voor de pagina gaat gebruiken, en je voor het losknippen van het raampjes-deel steeds uitgaat van hetzelfde originele totaalplaatje in hoge kwaliteit (vóór de jpg-compressie).
Dus nu zijn er een nieuw huisje (http://developerscorner.nl/csshunter/images/huis-550x390nw.jpg) en een nieuwe raampjespartij (http://developerscorner.nl/csshunter/images/huis-raampjes550x80nw.gif) nodig om mooi te zijn bij de nieuwe bg-color. ;)
 
ap divs positioneren en andere zaken

hallo css hunter,

ik ga het op mn gemakje bekijken als ik deze week wat tijd heb
maar sowieso weer hartelijk bedankt.

ik heb het nu even zo gedaan
www.bluesfotos.nl
maar zal vd week proberen het huis naar beneden te halen
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan