[css/xhtml] clippen van div maakt links in div onbruikbaar

[tombo_inc]

hey,
ik heb een div met daarin een aantal hyperlinks. normaal gesproken zijn die links prima klikbaar, zoals het hoort. als ik echter mijn div clip met css dan kan ik niet meer op mijn links klikken. het lijkt alsof er nu een soort laag over mijn div heen hangt waardoor ik niet meer bij mijn links kan. ik weet zeker dat het aan het clippen ligt want als ik dat uit zet werkt het allemaal weer. ik kan zelf geen oplossing hiervoor vinden, en hoop daarom dat jullie iets weten .

[Rowanov]

Waarom wil je uberhaupt clippen? Clippen werkt nou niet bepaald briljant crossbrowser. Er zal vast een ander manier zijn om te bereiken wat jij wilt doen, maar zonder online voorbeeld blijft dat raden.

[crisp]

Post eens wat code? Dit is koffiedik kijken natuurlijk...

[tombo_inc]

ik ben bezig een image scroller te maken. de plaatjes staan genest tussen a-tags.

HTML:

      <div id="thumbscroller">
        <a href="javascript:GaleryDisplayContents('intro')">home</a>
        <a href="javascript:GaleryDisplayContents('test1')" title="">[img]"./images/portret.gif"[/img]</a>
        <a href="javascript:GaleryDisplayContents('test1')" title="">[img]"./images/portret.gif"[/img]</a>
      </div>

Cascading Stylesheet:

#thumbscroller {
  float: left;
  padding: 0px 3px 0px 3px;
  position: absolute;
  left: 20px;
  right: 20px;
  clip: rect(0px, 0px, 100px, 710px);
  z-index: 10;
}

[crisp]

quote: http://www.w3.org/TR/CSS21/visufx.html#clipping

n CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box

dus je clip-property klopt volgens mij al niet helemaal; ik denk dat je enkel overflow te zien krijgt, en overflowed content reageert inderdaad niet op interactie (sowieso wil je waarschijnlijk ook een andere vorm van overflow dan 'visible' als je gaat clippen).
En wil je 'm nu floaten of absoluut positioneren? Beide kan natuurlijk niet (en clipping werkt alleen op absoluut gepositioneerde elementen, dus je float is fout hier)

Dit soort dingen zijn natuurlijk eenvoudig te debuggen door je element even een achtergrondkleurtje te geven.

Note overigens dat veel sites nog de achterhaalde CSS2 manier presenteren van deze property (o.a. w3schools.com)

[ Voor 31% gewijzigd door crisp op 03-04-2006 17:23 ]

[tombo_inc]

je hebt helemaal gelijk. in een topic van mij van gisteren heb ik dat probleem van de argumenten van clip al opgelost. de rest was me al bekend. ik ben nu alleen zo stom geweest om right en left om te wisselen waardoor ik inderdaad overflow content te zien krijg. ik heb ze nu omgedraait en nu werkt het perfect .bedankt in ieder geval.
het enige wat ik nog wel raar vind is dat plaatjes die niet in zijn geheel in het geclipte deel passen niet weergegeven worden. ik heb er nu 6 plaatjes in staan waarvan ik zou verwachten dat ze horizontaal getiled worden tot aan de rand van de geclipte div. echter worden alleen die plaatjes weergegeven die er helemaal in passen, en dat is niet wat ik wil. ik heb deze "scrolldiv" weer in een andere div staan waarop ik de volgende css regels toepas.

Cascading Stylesheet:

#galerymenu {
  position: absolute;
  top: 26px;
  display: block;
  height: 100px;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  overflow: hidden;
  z-index: 6;
}

het zou misschien aan de overflow kunnen liggen maar met wat geklooi heb ik daar ook niks zinnigs mee bereikt. een ander punt waaraan het volgens mij kan liggen is dat de div te smal zou zijn, de plaatjes gaan namelijk verder op de volgende regel. weet iemand hier misscien waar dit aan zou kunnen liggen?

[crisp]

Ik heb het gevoel dat je juist helemaal geen clipping nodig hebt en je dus een denkfout maakt mbt wat clipping eigenlijk inhoudt. Voor een ordinaire scroller heb je meestal een element nodig met een vaste hoogte/breedte en overflow:hidden met daarbinnen een absoluut gepositioneerd element (waarvan je de top en/of left styleproperties met javascript dynamisch wijzigt).

[tombo_inc]

dat weet ik ja. maar het mooie van de clipping methode is dat je geen parent element nodig hebt. je kan gewoon door de layer te verplaatsen en tegelijkertijd de clip te verplaatsen een scroller creeren. maar ondanks dat heb ik bij beide methodes het probleem dat de plaatjes niet afgehakt worden maar gewoon helemaal wegvallen als ze niet geheel in de div passen.

[crisp]

Tombo_inc schreef op maandag 03 april 2006 @ 23:13:
dat weet ik ja. maar het mooie van de clipping methode is dat je geen parent element nodig hebt. je kan gewoon door de layer te verplaatsen en tegelijkertijd de clip te verplaatsen een scroller creeren.

Dat is waar (pas op voor de Opera bug though).
Ik gebruik zelf clipping voor de update-tracker rechtsboven

maar ondanks dat heb ik bij beide methodes het probleem dat de plaatjes niet afgehakt worden maar gewoon helemaal wegvallen als ze niet geheel in de div passen.

Heb je misschien een online testcase? dat werkt voor iedereen wat makkelijker

[ Voor 6% gewijzigd door crisp op 03-04-2006 23:19 ]

[tombo_inc]

ik heb nog niet een echt bruikbare testcase, ik zal er even eentje maken waarbij ik alleen het relevante deel laat staan. het wordt waarschijnlijk wel morgen eer dat ie online staat want ik ga zo pitten (heb morgen examens ).