phun-ky Skrevet 4. august 2006 Skrevet 4. august 2006 (endret) Jeg har en mouseover i mitt arkiv, og denne mousoveren bruker CSS istedenfor javascript/dhtml. Eneste problemet jeg står med er valideringen. http://www.phun-ky.net/2006/ <-- arkivet http://validator.w3.org/check?uri=http%3A%...&doctype=Inline <-- vailderingen, ikke godkjent. Aaken er jo at mouseoveren er lagt inni en still-løs <span></span>, og inne i den er det en del tagger som ikke egentlig hører hjemme i en <span> tag.. Noen som vet hvordan jeg kan få den validert? CSS koden er vel ikke så viktig, men selve xhtml'en er: <ul><li>2006-08-04T13:56:06+01:00 - <a href="/2006/08/castro_for_cuba" class="info">castro for cuba?<span> <div class="entryImage"> <img src="/images/blog/thumbe7dc9ba36a726bc1161d86692f6271f5.jpg" alt="castro for cuba?" /> </div> <div class="entry">Lately the news had a brief(!?) moment from news from the Middle East. The news came from the only communist state in the Western Hemisphere, Cuba. We have not neglected that Fidel Castro is getting o...</p></div> </span></a></li> </ul> Endret 4. august 2006 av phun-ky
haugsand Skrevet 4. august 2006 Skrevet 4. august 2006 Problemet ligger primært i a-elementet, som ikke kan inneholde blokk-elementer. Mitt forslag er at du bytter ut div med span for å løse den floken. Du har uansett lov til å legge til display: block; på span-elementene.
phun-ky Skrevet 4. august 2006 Forfatter Skrevet 4. august 2006 Nå ja, den blir validert hvis jeg bytter, men da virker de ikke helt som de skal fungere :/
haugsand Skrevet 5. august 2006 Skrevet 5. august 2006 Nå ja, den blir validert hvis jeg bytter, men da virker de ikke helt som de skal fungere :/ 6616488[/snapback] Hm, merkelig. Den eneste forskjellen på span og div er jo at de henholdsvis er inline- og blokkelement. Denne visuelle forskjellen skal det være mulig å fjerne ved hjelp av CSS, ved å legge til display: block; Sikker på at du ikke har glemt å bestemme noe vha CSS?
phun-ky Skrevet 5. august 2006 Forfatter Skrevet 5. august 2006 (endret) bruker denne css'en ]a.info{ position:relative; /*this is the key*/ z-index:24; color:#990000; text-decoration:none} a.info:hover{z-index:25; color:#FFFFFF; background-color: #990000; border-bottom:1px solid #000000; } a.info span{display: none} a.info:hover span{ /*the span will display just on :hover state*/ display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #990000; background-color:#FFFFFF; color:#990000; padding: 8px; width:450px; text-align: center} .entryImage{ float: left; width:108px; max-height:83px; border:1px solid #990000; margin:5px auto; } .entry{ width:410px; padding:0px 10px; margin:0px; /*height:208px;*/ float: left; text-align:left; line-height:1.7em; word-spacing:0.2em; } bruker jeg display: block; med span så endres ingenting. Endret 5. august 2006 av phun-ky
Anbefalte innlegg
Opprett en konto eller logg inn for å kommentere
Du må være et medlem for å kunne skrive en kommentar
Opprett konto
Det er enkelt å melde seg inn for å starte en ny konto!
Start en kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå