Jump to content
Sign in to follow this  
phun-ky

Validering av CSS Mouseover

Recommended Posts

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>

Edited by phun-ky

Share this post


Link to post

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.

Share this post


Link to post
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?

Share this post


Link to post

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.

Edited by phun-ky

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...