Span class försvinner vid mouse over

[Mattias Nordin]

Hej, Jag håller sporadiskt på att skapa mig en ny layout till min website. Har nu fått ett litet problem som jag skulle behöva hjälp att reda ut.

På sidan nedan finns det några knappar med mouse over effekt. De fem första knapparna ligger i en tabell och dessa fungerar som de ska. Den 6 knappen har jag medvetet lagt utanför tabellen och när man för musen över denna så försvinner all text inom <span class... taggarna ?!

Sidan hittar du här: http://mattiasnordin.net/web08/t1/vemArJag.asp

Knapptabellen ser ut så här:

[kod]
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="/web08/_design/menobj_pil.gif">
</td><td valign="middle">
<a href="/web08/t1/Mattias/Nordin/MattiasNordin.asp">
<div id="sub1" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">OM MATTIAS</span>
</div>
</a>
</td><td>
<a href="">
<div id="sub2" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">FOTOALBUM</span>
</div>
</a>
</td><td>
<div id="sub3" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">WEB PORTFOLIO</span>
</div>
</td><td>
<div id="sub4" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">MIN KALENDER</span>
</div>
</td>
</tr><tr>
<td></td><td>

<div id="sub5" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">MIN KALENDER</span>
</div>

</td>
</tr></table>


<div id="sub6" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">MIN KALENDER</span>
</div>
[/kod]


Min CSS fil innehåller:

<STYLE TYPE="text/css">
.alignButtonText{
positionelative; top:6px; left:0px;
}


Skulle vilja förstå varför det blir sådär. Skulle vilja lägga några knappar utanför tabellen

[phred]

vad gör dessa? onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);"

och varför krångla till länkarna med divvar och span ?

[voigtann1]

Som phred skriver
[kod]<a href="">
<div id="sub2" onMouseOver="funSubMouseOver(this.id);" onMouseOut="funSubMouseOut(this.id);" class="image_out">
<span class="alignButtonText">FOTOALBUM</span>
</div>
</a>[/kod] Skulle mycket väl kunna vara:
[kod]<a href="#" id="sub2" class="image">Fotoalbum</a>[/kod]
[kod]<a href="#" id="sub2" class="image selected">Fotoalbum</a>[/kod]för "aktiv" sida.
och css kod:[kod]a.image {
background-image:url(http://mattiasnordin.net/web08/_desi...ankbox_0.gif);
background-repeat:no-repeat;
color:#395173;
font-family:Calibri,tahoma;
font-size:11px;
font-weight:bold;
height:26px;
text-align:center;
text-decoration:none;
width:112px;
display:block;
vertical-align: middle;
line-height:26px;
text-transform: uppercase;
}
a.imageover
{
background-image:url(http://mattiasnordin.net/web08/_desi...ankbox_1.gif);
}

a.image:active, a.selected {
background-image:url(http://mattiasnordin.net/web08/_desi...ankbox_2.gif);
}[/kod]

[Mattias Nordin]

Tack för eran hjälp. Jag är självlärd (det lilla jag kan) på CSS och när saker fungerar brukar jag nöja mig med det trots att det inte alltid är rätt lösning.

Koden ovan är ju mycket snyggare. Jag har testat den här:
http://mattiasnordin.net/web08/t1/Ma...ordin/test.asp

Jag antar dock att jag fortfarande måste använda javascript för att hindra hover-effekten på knapp D (vald knapp). Jag vill även kunna köra några externa funktioner på mouseOver eventet. Tex toggle()-funktionen.

Mitt javascript ser ut så här:

[kod]
<script type="text/javascript">
var varSelectedSubTabsString = ""
function funSelectSubTab(subX){ // Flera flikar kan markeras samtidigt. Anropas med funSelectSubTab("sub1,sub4"). Använd EJ mellanslag.
var loop_num = 0;
var aSelTabArray = subX.split(","); // Kontrollerar om flera flikar ska vara markerade.
while(loop_num < aSelTabArray.length){ // Lopar igenom alla flikar och sätter vald bild.
varSelectedTabId = aSelTabArray[loop_num];
//varSelectedTabId = varSelectedTabId.charAt(3) // Hämtar tecken nummer tre i id namnet
document.getElementById(varSelectedTabId).className = 'image_selected' // Ändrar CSS style på vald DIV...
loop_num+=1;
}
varSelectedSubTabsString = subX // Sparar valda bilder i en sträng så att dessa kan ignoreras vid mouse over funktionen.
}

function funSubMouseOver(subX){
if((varSelectedSubTabsString.indexOf(subX)) < 0){ // Testar om x namnet finns i strängen över valda bilder. Skippa om true.
document.getElementById(subX).className = 'image_over' // Ändrar CSS style på vald DIV...
toggle(document.getElementById("godsEye"), false); // Leker med bilder...
}
}

function funSubMouseOut(subX){
if((varSelectedSubTabsString.indexOf(subX)) < 0){ // Testar om x namnet finns i strängen över valda bilder. Skippa om true.
document.getElementById(subX).className = 'image_out' // Ändrar CSS style på vald DIV...
toggle(document.getElementById("godsEye"), true); // Leker med bilder...
}
}
</script>
[/kod]

På varje sida kan jag ladda valda knappar om jag så önskar med:

[kod]
<script type="text/javascript" language="javascript">funSelectSubTab("sub1,sub4")</script>
[/kod]

Menysystemet inkluderar jag på samtliga sidor för att det ska vara enkelt att underhålla det.

Kom gärna med synpunkter. Jag ska prova att se om grundproblemet försvinner om jag tar och fixar till CSS koden enligt ovan och tar bort min span (som hade uppgiften att justera texten).

[voigtann1]

Ändra bara:[kod]a.image:active, a.selected {
background-image:url(http://mattiasnordin.net/web08/_des...lankbox_2.gif);
}[/kod]
till:
[kod]a.image:active, a.selected, a.selectedover {
background-image:url(http://mattiasnordin.net/web08/_des...lankbox_2.gif);
}[/kod]

kanske måste ha floateft på a taggen i början för att få så att din text listas brevid varandra med. och när du vill "bryta" din meny:[kod]<div style="clear:both;"></div>[/kod](eller lägg den i en klass).

[Mattias Nordin]

Idag lärde jag mig något nytt! Tackar för det.

Skrev ihop en liten guide för hur mitt menysystem fungerar om det är någon annan noob (som jag) som vill kopiera konceptet. Sidan kan tänkas att flytta på sig så då får ni leta om jag inte kommer ihåg att fixa denna länk.

CSS-baserat menysystem:
http://mattiasnordin.net/web08/t2/utveckling.asp

[voigtann1]

Ett annat exempel på hur man kan göra utan tabeller (Ingen Java skript på exemplet):[kod]a.image {
background-image: url(http://mattiasnordin.net/web08/_desi...ankbox_0.gif);
background-repeat: no-repeat;

color: #395173;
font-family: Calibri,tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
vertical-align: middle;
line-height: 26px;
text-transform: uppercase;

height: 26px;
width: 112px;
display: block;
margin: 0 5px; /* Ge lite luft höger & vänster om länkarna */
}
a.imageover
{
background-image:url(http://mattiasnordin.net/web08/_desi...ankbox_1.gif);
}

a.image:active, a.selected, a.selectedover {
background-image:url(http://mattiasnordin.net/web08/_desi...ankbox_2.gif);
}

.clear{
clear:both;
}
.float-left a.image {
float: left;
}[/kod]

Lista brevid varandra:

<div class="f-left">
	<a href="#" class="image" id="test1">a</a>
	<a href="#" class="image" id="test2">b</a>
	<a href="#" class="image" id="test3">c</a>
	<a href="#" class="image" id="test4">d</a>
	<a href="#" class="image" id="test5">e</a>
	<div class="clear"></div>asd
</div>

Lista på höjden:

<div>
	<a href="#" class="image" id="test1">a</a>
	<a href="#" class="image" id="test2">b</a>
	<a href="#" class="image" id="test3">c</a>
	<a href="#" class="image" id="test4">d</a>
	<a href="#" class="image" id="test5">e</a>
</div>

Fin guide annars

[Mattias Nordin]

Kanske borde skapa en ny tråd för detta, men jag vill basera det hela på din lösning ovan.

Kan man placera flera bakgrunder brevid varandra i en CSS klass?

Jag försöker hitta på ett fiffigt sätt att skapa en dynamisk knapp som dras ut på bredden beroende på hur mycket text men skriver i den.

A och C = start och slut bild
B = Bakgrundsbild

Vill att bilder A + B + C ska ligga brevid varandra där bakgrund B är dynamisk i bredd.




RED: Läste på ett annat forum att det inte verkar vara supporterat med flera bilder i en class. Med javascript kan jag få till det jag vill men det skulle vara snyggt om det gick med ren CSS.

<img src="start.gif"><a href="#" class="image">Det var en gång en åsna</a><img src="end.gif">

+ Javascript som byter src på alla tre vid mouse over. Men här börjar jag vara tillbaka mot funktionaliteten som jag postade i början av tråden.

[voigtann1]

[kod]<a href="#"><div class="left"></div>Länk<div class="right"></div></a>[/kod]och kör css:
[kod]aover div.left {background: url(bgleft_hover.png);}[/kod]dock har jag för mig att det inte fungera 100% i IE6.

[Mattias Nordin]

Det behöver inte fungera för mig i IE6. Det är ok.


Men jag får det inte att fungera i IE7 heller. Hoover effekten fungerar men div.left (samt div.right) bilden visas aldrig för mig.