Plaatje over plaatje met div en css

[Elkana]

Op een testpagina van mijn website ben ik lekker aan het knutselen. Nu loop ik tegen een probleempje aan waarvan ik niet goed weet hoe ik dat op kan lossen.

Als je goed kijkt zie je linksboven mijn logo een plakbandje. Deze is gecentreerd door middel van de code "#stick" (zie hier onder). Nu wil ik deze ook graag over de horizontale afbeeldingen hebben met de grijze rand. (Waar Hen & Bet in staat). Heb het geprobeerd met background maar dat werkt uiteraard niet want dan komt 'ie erachter te staan. En ook de absolute-position werkt niet want de tekst die onder de afbeeldingen komt te staan kan verschillen qua lengte. De css en code is gewoon te vinden in de broncode (css wel met linkje).

Zou iemand mij hierin kunnen adviseren?

#stick code

#stick {
position: absolute;
top: -19px;
left: -22px;
width: 79px;
height: 65px;
background: url('../img/stick-x.png') no-repeat 0 0;
}

 

[Goeroeboeroe]

Dat is 'n leuke vraag. Ik zie heel vaak sites die met plakband bij elkaar worden gehouden, maar dit is de eerste keer dat iemand daar 'n vraag over heeft
Serieus. Ik begrijp je vraag niet helemaal. Ik zie bij de bovenste afbeelding in de linkerbovenhoek 'n plakbandje. Althans: boven 't plaatje, de rest valt weg.
Als ik 't goed begrijp zou dat gewoon over de afbeelding moeten staan, linksboven, net als helemaal bovenaan.
Wat is het verband dan met de lengte van de tekst onder de afbeelding? Daar komt het plakbandje toch helemaal niet?

Terzijde: ik zou je site even door de validator halen. Er zitten 'n paar kleine fouten in, zoals <a ... />.

 

[csshunter]

Hoi Elkana,
De #stick <div> met achtergrondfiguur weghalen, telkens beginnen met het plakkertje (met <div class="tape">) als img in de html te zetten, en dan de afbeelding erna/eronder met css omhoog hijsen?

<div class="tape">
   <img src="../img/stick-x.png" width="79" height="65" alt="" />
</div>
<div class="portfolio">
enz.

[FONT="Courier New"][SIZE="2"].tape {
   clear: left;          /* float van evt. .portfolio erboven vrijmaken */
   position: relative;   
   width: 79px;          /* smal blijven om de link v/h img toe te staan */
   margin-left: -18px;   /* plakkertje iets naar links */
   z-index: 2;           /* om boven volgende element in de html te blijven */
/* border: 1px solid red;  tijdelijk: even kijken waar ie zit :-) */
   }
.portfolio {
   background: none;     /* (hier het achtergrondplakkertje weghalen) */
   margin-top: -45px;    /* naar boven schuiven */
   }[/SIZE][/FONT]

D.w.z. zoiets? (getest in FF3 en IE7)

Met vriendelijke groet,
CSShunter

PS: ook even valid html gemaakt; zie opm. in broncode.
PS-2: weet je wel zeker dat je de cursor bij de links als pijltje wilt hebben? Veel mensen verwachten het handje, en denken dat iets met een pijltje geen klikbare link is.
PS-3 @Goeroeboeroe: als verband met lengte van de tekst = verband met hoogte van de tekst, dan kan je niet weten waar het plakkertje moet komen te zitten, en mislukt het om het plakkertje er met een absolute div overheen te zetten als je het een paar keer wilt herhalen, denk ik dat Elkana bedoelt.

 

[Goeroeboeroe]

@csshunter: ja, dat zou prima kunnen. Maar jij bent 'n vriendelijker ziel dan ik, denk ik. Voor ik er tijd in ga stoppen wil ik 't even zeker weten

 

[Elkana]

@Goeroeboeroe: Het eerste wat ik dacht toen je zei dat veel website's aan elkaar hangen met plakband was: "Maar mijne niet! Die is valide " Maar dat bleek door de Shadowbox toch niet meer zo te zijn Maar daar ga ik wat aan doen

@Csshunter: Ja, dat was wat ik bedoelder!

PS: Snap de opmerking van Goeroeboeroe en jou van de validator. Voordat ik Shadowbox had geïnstalleerd was 'ie helemaal valide! Was er vanuit gegaan dat het niet zoveel invloed zou hebben maar ik zal het even controleren en jouw bestandje bestuderen.

PS-2: Nee, dat wil ik eigenlijk nog ff veranderen. Had het eerst zo gedaan omdat de afbeeldingen niet aanklikbaar waren en dat veel mensen dat dus wel verwachtten. Dus nu moet ik het weer terugdraaien

PS-3: Jep, dat is wat ik bedoel. Als ik het plaatje 'vast' zou zetten zou het zomaar ergens kunnen staan want de lengte van de tekst is variabel. Precies zoals jij het zegt.

 

[Elkana]

Hoi CSShunter, ik heb je wijzigingen bestudeerd en overgenomen. Het werkt inderdaad subliem, ook als je op het linkje 'Meer tekst svp' klikt! Heb ook je verandering van doctype overgenomen. Maar dat snap ik nog niet helemaal. Waarom moest het veranderen van Strict naar Tansitional?

En heb de pagina nog weer door de validator gehaald maar krijg nog 6 fouten... Ben ondertussen al aan het kijken maar niet alles snap ik nog. De alt-fouten ben ik aan het goed maken maar de rest... Nog steeds tomatensoep voor me

 

[Goeroeboeroe]

Die validator is vaak niet erg behulpzaam als het gaat om het uitleggen van wat er fout is.
transitional of strict: in je code zitten dingen als 'target' die niet mogen in een strict doctype. Als csshunter nog andere redenen voor 'n trasitional had, horen we dat wel.

regel 65 (bij mij, mogelijk heb je de code inmiddels iets veranderd en dan kan 't wat schelen in regelnummer): in xhtml moet álles worden afgesloten met '... />'
Dus met spatie/>
Bij de img wordt dat <img src="" width="" ... />
Bij jou mist de spatie-/ voor de sluittag.
(Pfff, lastig, ik kan 'n spatie niet laten zien.)

Om dezelfde reden moet je <br> veranderen in <br /> op enkele plaatsen.

Op regel 83 (bij mij) staat 'n <br /> buiten de <div> en buiten de <p>. Dat mag niet: tekst (en dus ook <br />) moeten altijd tussen <p> en </p>, <div> en </div> enz. staan.

Ik denk dat als je die fouten eruit hebt gehaald 't redelijk of volledig in orde is. Vaak worden bij de validator latere fouten veroorzaakt door eerdere.

Edit: dat plakband sloeg dus helemaal niet op jouw site, was alleen 'n grapje. Maar je ziet soms sites waarvan je echt denkt: ongelooflijk dat de monitor niet in de fik vliegt. Trouwens 'n erg leuk idee, dat plakbandje, ziet er hartstikke leuk uit!

 

[csshunter]

Hoeps! Doodzonde begaan in mijn voorbeeldpagina! Na de validatie nog haastiglijk de meer-tekst-link erin gezet (reactie stond al online), en niet het eindresultaat nog eens door de validator gehaald... 19 Errors = 19 Strafpunten!
Vlug gecorrigeerd, nu niets meer van te zien.

Gelukkig heeft Goeroeboeroe keurig uitgelegd wat ik allemaal fout had gedaan.

• Kleine aanvulling: de gesignaleerde foute </div><br /> werd hier veroorzaakt door de missende / bij de image-afsluiting er een aantal regels vóór. Als die in orde gemaakt is, is de </div><br /> ook in orde volgens de validator. - Want de <br /> zit dan wel buiten de <div class="portfolio">, maar nog steeds binnen de <div class="column-left-in">.

Als csshunter nog andere redenen voor 'n transitional had, horen we dat wel.

Nop, alleen vanwege het target in de link naar de blog.

Succes!
CSShunter

PS:

(Pfff, lastig, ik kan 'n spatie niet laten zien.)

Kijk, hier

is een spatie. En dit &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;zijn er 10. Dit          ook. - Kopen?

 

[Goeroeboeroe]

Een hele goede nacht.
Nee, ik hoef die spaties van jou niet. Nog niet gratis
't Probleem is: ik kan ze niet zien. Dit wordt 'n beetje metafysisch, maar hoe kan ik nou voor iets wat niet bestaat betalen? Ik wil best 'n spatie kopen van je, maar dan alleen eentje die ik kan zien. En aangezien 'n spatie per definitie onzichtbaar is...
Morgen aan denken: patent aanvragen op de zichtbare spatie. Gat in de markt.

Edit: ah, die div-op-afstand om de <br /> had ik niet gezien.

Edit 2: je hebt inderdaad 'n zichtbare spatie! Hoe doe je dat? Dat blauw maken? Lukt mij niet.

Edit 3: Dat is valsspelen! Zit ik me 't apenzuur te proberen, heb jij 'n onzichtbare gif gebruikt! Leuk, ik dacht echt dat 't 'n spatie was, grinnik.

 

[Elkana]

@Goeroeboeroe:
Nee inderdaad, de validator is helemaal niet behulpzaam soms!
Zal zo ff z'n reactie lezen, dan weet ik waarom hij transitional heeft gebruikt.
Thanx voor je uitleg wat de fouten betekenen! Wist niet dat je alles met een / moet afsluiten.
En over dat plakbandje: Haha, dat weet ik wel! Daarom dacht ik dat juist, omdat je inderdaad sites ziet die er 'niet uit zien' (zacht gezegd). Daarom wil ik m'n site ook valide hebben. :thumb: Thanx voor je compliment

@csshunter:
Ghehe, iedereen maakt wel eens fouten! Ga eens even kijken wat je hebt veranderd en zal de fouten corrigeren.

Bedankt voor jullie hulp!

 

[csshunter]

Nog even wat meer over de target eigenschap.

Het principe van de links in een html-pagina is eigenlijk, dat je door op de link te klikken naar een andere pagina gaat, en dat je met de Terug-knop weer op de eerste kan terugkomen. Met het opnemen van het target-attribuut ontsnap je daaraan: dan wordt geforceerd dat je vervolg-pagina in een nieuw venster (tegenwoordig ook: in een nieuw tabblad) van de browser wordt geopend.

• Hoewel bij mijn weten veel browsers die optie niet hebben, is het volgens de standaarden toegestaan dat je met een browser-instelling de target-eigenschap kunt overrulen: dan helpt het niet of je target="_blank" in de code opneemt, en opent de pagina toch in hetzelfde venster (tabblad):

"User agents may provide users with a mechanism to override the target attribute."
Dat zegt het www-consortium, de baas van de standaarden.
("user agents" = de algemene naam voor browsers en andere programma's die een html-pagina voor de mens of voor een [zoek]machine begrijpelijk maken. Zie hier.)

• Het target-attribuut speelt ook een rol bij websites die met frames zijn opgebouwd. Door het aangeven van een target in een link in het ene frame kan je bewerkstelligen dat een pagina wordt ingeladen in een ander frame op de pagina waar je mee begon. Zie hier en hier.
• Nu zijn er verschillende versies van html: die worden aangegeven met het DOCtype, de allereerste regel code van een webpagina (hier is het overzicht voor de goede aanroep van een DOCtype).
• In de "Strict" variant (zowel van html als van xhtml) is het gebruik van het target-attribuut verboden. Niet helemaal onbegrijpelijk, want als iedereen bij elke link "openen in nieuw venster/tabblad" aangeeft (= "mijn pagina is zó belangrijk, dat je die niet zomaar mag verlaten"), dan staat binnen de kortste keren je beeldscherm vol met vensters/tabbladen met webpagina's. Dat was net niet de bedoeling, en is niet lekker surfen; en vanuit zo'n nieuw geopend venster/tabblad kan je ook niet terug. Dat heeft ook gevolgen voor de toegankelijkheid. Zie hier voor technieken om de ontoegankelijkheid te beperken.
• Tegelijkertijd is in de "Strict" variant het gebruik van frames verboden (zowel echte frames als iframes), dat loopt mooi gelijk op met het verbod op het target.

Is dit voldoende leesvoer?
Met vriendelijke groet,
CSShunter

 

[Elkana]

Wauw, daar heb je nog eens wat aan! :thumb: Wat weet jij veel zeg

 

[csshunter]

Wat weet jij veel zeg

Danku, danku. Het geheim is: hoe meer fouten je maakt, hoe meer je moet napluizen om het toch nog een beetje goed te krijgen. Dus je begrijpt hoe ik aan m'n kennis kom.

PS / offtopic:
@Goeroeboeroe 6 febr. 02:43, Edit 2 / Edit 3:
  !
Eerst was ik ook vergeefs aan het zoeken naar een tag voor een bg-kleur, maar die schijnt in de phpbb-code niet te bestaan.
O ja, vanaf vandaag geef ik %20 korting op m'n spatie.
Over de spatie staat trouwens een aardig artikel in de Wiki; ik wist niet dat ie in Europa pas tussen 600 en 800 na Chr. het daglicht zag (hoewel ie niet bestaat).
Voor wie 'm nog niet kent: van de in de Wiki genoemde "Engelse ziekte" (te onpas spaties gebruiken waar ze helemaal niet horen) zijn tintelende voorbeelden te zien op de site van SOS (Signalering Onjuist Spatiegebruik). Een van de betere vind ik deze. Hoewel, deze is ook niet te versmaden.

 

[Elkana]

Ha, gaaf man! :thumb: Nou, dan is er voor mij ook nog hoop Als je voor jezelf begint als grafisch vormgever vind ik het beter staan als je site valide is, vandaar mijn vragen

 

[Goeroeboeroe]

Nog 'n kleine aanvulling over iframes: in html5 (dat geen onderscheid meer kent tussen strict en transitional) zijn iframes weer toegestaan Feitelijk is html5 gewoon strict en is er geen transitional meer. Vandaar dat het niet handig is om nog tags als <font> te gebruiken als je wilt dat je site lang meegaat.
Die iframes zijn er weer aan toegevoegd onder druk van sitebouwers. w3c zag aankomen dat anders JavaScript gebruikt ging worden, en dan is 'n iframe beter/minder erg. Maar je kunt wel minder beperkingen en zo opleggen dan in de huidige standaard.

Ha, die fietsenmaker is wel hééél erg fout met z'n spatie te veel...