Cursor niet juist bij mouse over 'LI' - Softwareontwikkeling

woensdag 23 mei 2007 17:24

Acties:

Maverick2001

Never look back

Topicstarter

Moeilijk een goede naam voor het topic te bedenken maar ik probeer het goed uit te leggen.

Op een website krijg maak ik met behulp van een database een pagina. De data die ik eruit haal gaat als volgt:

PHP:

1
2

echo '<li style="background-image: url('.$achtergrond.')"><A HREF=show.php?id='.$id.'><p class="datum">'.$row['ddatum'].'</p><p class="plaats">'.$row['plaats'].'</p><p class="voorpauzetekst">Voor de pauze<br></p><p class="voorpauze">'.$row['voorpauze'].'</p>
    <p class="napauzetekst">Na de pauze</p><p class="napauze">'.$row['napauze'].'</p></a></li>';

Het zijn allemaal vakjes onder en naastelkaar. Als ik er in IE met de muis overheen beweeg krijg ik een tekst cursor te zien '|' in Firefox doet hij netjes het handje als mouseover.

Ik heb al zitten denken aan een transparante overlay echter krijg ik dat niet voor elkaar. Iemand tips?

Pura Vida

woensdag 23 mei 2007 17:25

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Waar hoort mijn topic?

PRG >> WEB

Je HTML is sowieso al niet valid. Zorg daar eerst voor. Daarnaast zou ik graag het stukje output in een groter geheel zien (inc. styles), want ook niet-valid krijg ik hier gewoon handjes in IE7:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
</head>

<body>
    <ol>
        <li style="background-image: url(somefile.jpg)"><A HREF=show.php?id=11><p class="datum">somedate</p><p class="plaats">somecity</p><p class="voorpauzetekst">Voor de pauze<br></p><p class="voorpauze">sometext</p><p class="napauzetekst">Na de pauze</p><p class="napauze">sometext</p></a></li>
        <li style="background-image: url(somefile.jpg)"><A HREF=show.php?id=12><p class="datum">somedate</p><p class="plaats">somecity</p><p class="voorpauzetekst">Voor de pauze<br></p><p class="voorpauze">sometext</p><p class="napauzetekst">Na de pauze</p><p class="napauze">sometext</p></a></li>
    </ol>
</body>
</html>

Geeft gewoon handjes. Zoals je al aan de highlighting ziet kloppen je href attributen niet op de anchors en daarnaast kloppen paragraphs binnen een anchor natuurlijk niet.

[ Voor 114% gewijzigd door RobIII op 23-05-2007 17:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 23 mei 2007 19:00

Acties:

Maverick2001

Never look back

Topicstarter

Bedankt voor je reactie al vind ik de manier waarop je schrijft wel alsof iedereen alles moet weten.

Het stukje is puur het output stuk van mijn pagina. Daarvoor doet ie een query.

De p class functioneert wel goed op de pagina zoals ik het wil hebben. Misschien niet de mooiste oplossing maar wel functioneel.

De css ziet er alsvolgt uit:

Cascading Stylesheet:

#divscrollshow
    {
    margin-left: 10px;
    padding-top:4px;
    padding-bottom:10px;
    width:500px;
    text-align:left;
    float:left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }   

#divscrollshow li {
    width:500px;
    height:auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #9C9D9F;
    }

.datum{
    position:absolute;
    font-size:12px;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-top:6px;
    line-height:11px;
    padding-left:5px;
    color:#FFFFFF;
    height: 18px;
    width:163px;

}
.plaats{
    position:absolute;
    font-size:20px;
    margin-top:23px;
    font-stretch:narrower;
    line-height:11px;
    padding-left:5px;
    color:#FFFFFF;
    height: 18px;
    width:163px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 100;
}

.voorpauzetekst{
position:absolute;
font-size:10px;
line-height:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:94px;
padding-left:5px;
color:#ffffff;
height:18px;
width:163px;
}
.napauzetekst{
position:absolute;
font-size:10px;
line-height:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:130px;
padding-left:5px;
color:#ffffff;
height:18px;
width:163px;
}

.voorpauze{
position:absolute;
font-size:10px;
line-height:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:106px;
padding-left:5px;
font-weight:bold;
color:#ffffff;
height:18px;
width:163px;
}
.napauze{
    position:absolute;
    font-size:10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-top:142px;
    line-height:11px;
    padding-left:5px;
    font-weight:bold;
    color:#FFFFFF;
    height: 18px;
    width:163px;

[ Voor 3% gewijzigd door Maverick2001 op 23-05-2007 19:01 ]

Pura Vida

woensdag 23 mei 2007 19:04

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:00:
Bedankt voor je reactie al vind ik de manier waarop je schrijft wel alsof iedereen alles moet weten.

Waar haal je dat uit dan

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:00:
Het stukje is puur het output stuk van mijn pagina. Daarvoor doet ie een query.

Ja, maar de ik zou dus graag het stukje output in het geheel willen zien (de hele html pagina dus); je probleem zit namelijk niet server-side maar client-side

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:00:
De p class functioneert wel goed op de pagina zoals ik het wil hebben. Misschien niet de mooiste oplossing maar wel functioneel.

En niet valid. En p is geen class maar een element. Je zet classes op je paragraphs d.m.v. het class attribuut.

Je kunt je stukje valid maken door het zo te doen:

HTML:

1 2	<p><a href="...">foo</a></p> <p><a href="...">bar</a></p>

in plaats van een anchor om de paragraphs heen. Daarnaast zie ik het nut van de paragraphs niet zo. Waarom style je de li niet?

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:00:
De css ziet er alsvolgt uit:
<lap css>

Het is het handigst als je alleen relevante css post en daarbij dus ook het handigst als je een kleine test-case maakt (html + css) waarin je het probleem demonstreert. In enorme lappen HTML/CSS debuggen heeft niemand zin hier.

[ Voor 12% gewijzigd door RobIII op 23-05-2007 19:09 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 23 mei 2007 19:14

Acties:

Maverick2001

Never look back

Topicstarter

Het komt soms gewoon over alsof je een enorme sukkel bent als je iets post. In de ogen van een niet expert is het al snel leuk als iets lukt. Als er dan dingen niet kloppen is dat jammer, vandaar mijn opmerking over het 'alles weten'.

Er zitten nog al wat verschillende elementen binnen de LI die gestijld moeten worden vandaar dat ik gekozen heb voor losse opmaak de verschillende dingen.

[ Voor 39% gewijzigd door Maverick2001 op 23-05-2007 19:18 ]

Pura Vida

woensdag 23 mei 2007 19:18

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:14:
Het komt soms gewoon over alsof je een enorme sukkel bent als je iets post. In de ogen van een niet expert is het al snel leuk als iets lukt.

Er is ook niemand die je voor sukkel uit maakt of dat impliceert en als ik arrogant over kom (wat best eens zou kunnen) mag je er prima iets van zeggen. Ik vraag me alleen af waar je dan zoiets leest in die paar zinnen uit die post.

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:14:
Als er dan dingen niet kloppen is dat jammer, vandaar mijn opmerking over het 'alles weten'.

Als er dan dingen niet kloppen is dat een probleem en kan dat prima de oorzaak van je probleem zijn. Vandaar dat ik je er op wijs

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:14:
Ok even op de p class focussen.

Een p (paragraph) is geen class maar een element. Je ZET er een class op met het class attribuut (zie ook mijn (ge-editte) vorige post).

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:14:
Wat is er in jou ogen mis met de p class?

Daar heb ik dus geen idee van; je zult, zoals ik al zei, even een 'uitgeklede' test-case moeten maken met wat (relevante!) html en css. Zet die in een post (of even online) zodat we allemaal het probleem kunnen reproduceren want, zoals ik (ook al) zei, geeft het bij mij gewoon een handje als ik test met de code (= informatie die we van je hebben gekregen).

Tot slot nog een tip: Verdiep je even in de materie (HTML én CSS) want zoals je dus al ziet is je HTML niet valid en daarnaast is je CSS veelvuldig "dubbelop". Je zet (bijvoorbeeld) de font-family en size op iedere class terwijl je dat prima op de parent container eenmalig kunt doen

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:14:
Er zitten nog al wat verschillende elementen binnen de LI die gestijld moeten worden vandaar dat ik gekozen heb voor losse opmaak de verschillende dingen.

Dat kunnen wij dus niet zien; daarvoor post je te weinig (relevante!) HTML.

[ Voor 18% gewijzigd door RobIII op 23-05-2007 19:25 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 23 mei 2007 19:25

Acties:

Maverick2001

Never look back

Topicstarter

Ik heb m ff uitgekleed en wat classes er weg gehaald en dan zie ik inderdaad een wel keurig een handje. Ik zal het opnieuw eens opbouwen (en inderdaad een kortere style sheet is ook niet overbodig (dit is namelijk alleen de CSS die van toepassing is op dit stukje).

Ik heb nu de crosshair in de stylesheet op 'hand' gezet en dan werkt het wel prima.

Wat betreft dat mijn html niet valid zal ik me nog effe verdiepen.

[ Voor 22% gewijzigd door Maverick2001 op 23-05-2007 19:38 ]

Pura Vida

woensdag 23 mei 2007 19:47

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:25:
Ik heb nu de crosshair in de stylesheet op 'hand' gezet en dan werkt het wel prima.

Crosshair? Waar? Ik zie in je gepostte CSS niets van een cursor declaratie? En je had het over:

Maverick2001 schreef op woensdag 23 mei 2007 @ 17:24:
Als ik er in IE met de muis overheen beweeg krijg ik een tekst cursor te zien '|' in Firefox doet hij netjes het handje als mouseover.

Dan bedoel je een "I-beam" en geen crosshair...

* RobIII confused is

edit:

Je bedoelt de cursor op hand gezet

Dude

Nu snap ik je

Ik snapte 't al niet omdat crosshair een type cursor is

Maverick2001 schreef op woensdag 23 mei 2007 @ 19:25:
Wat betreft dat mijn html niet valid zal ik me nog effe verdiepen.

Geloof me, dat loont zich op de lange(re) termijn

[ Voor 13% gewijzigd door RobIII op 23-05-2007 19:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 23 mei 2007 20:44

Acties:

Mei

RobIII schreef op woensdag 23 mei 2007 @ 19:47:
[...]
Geloof me, dat loont zich op de lange(re) termijn

Kan ik niks tegen inbrengen. Het voordeel aan valideren is dat je daardoor vaak al bugs eruit vist. Het gebeurt wel eens dat je een stukje code vergeet af te sluiten of een verkeerd tegen hebt getypt. Een validator vist die dingen er zo voor je uit

woensdag 23 mei 2007 20:49

Acties:

cannibal

Geen "hand" gebruiken.

cursor: pointer;

geeft het juiste resultaat.
Heb eens ernstige (ie6) performance problemen gehad met cursor: hand; in een tree van li's.
Was IE soms heel lang over aan het denken.