• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Kein Handmauszeiger beim link mit divs im IE

Z

zsoerenm

New member
Hallo

Hier ist mein Code:

Code: 
<a class="button" href="?page=home">
	<div class="button_left">
	</div>
	<div class="button_right">
	</div>
	<div class="button_repeat">
	Home
	</div>
</a>

Der IE7 zeigt hier keine Hand als Mauszeiger an wenn man mit der Maus über den button geht. Firefox und Opera jedoch schon.
Wie kann ich das umgehen?

Danke :)
 
OK ich nehm mal an dass man keine divs in einen a - link rein packen sollte oder?
nun wie kann ich das dann valide machen? Diese 3 divs sind notwendig für diesen Button.

Danke
 
Wenn man wüsste, was Du vorhast, könnte man Dir eventuell display:block empfehlen.
Aber nur eventuell...
 
OK hier ist was ich habe:

Psy Tournament

Opera zeigt diese Navigation auch nicht wie gewünscht an. (Schaut ich die Navigation im IE oder Firefox und dann Opera an.) kommt wahrscheinlich daher, dass es nicht valide ist.

Ich würde mich auch freuen wenn ihr mir helfen könntet, dass sich #content div mit dem Inhalt anpasst. Die linke Box geht über den #content hinaus, obwohl ich es gecleared habe.

Danke schon mal :)
 
also es handelt sich hier um den Buttons in der oberen Navigation, die ich so aufgebaut habe:

Html:
Code: 
<a class="button" href="?page=home">
	<div class="button_left">
	</div>
	<div class="button_right">
	</div>
	<div class="button_repeat">
	Home
	</div>
</a>
CSS
Code: 
.button {
width:135px;
margin-left: 2px;
float: right;
color:#FFFFFF;
cursor: pointer;
}
.button:hover {
color:#333333;
text-decoration:none;
}
.button_left {
background: url(../images/mainnav/button_left_side.gif) no-repeat;
width:13px;
height:28px;
float:left; 
}
.button:hover .button_left {
background: url(../images/mainnav/button_left_side_hover.gif) no-repeat;
}
.button_right {
background: url(../images/mainnav/button_right_side.gif) no-repeat;
width:15px;
height:28px;
float:right; 
}
.button:hover .button_right {
background: url(../images/mainnav/button_right_side_hover.gif) no-repeat;
}
.button_repeat {
background: url(../images/mainnav/button_repeater.gif) repeat-x;
height:28px;
text-align:center;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding: 6px 0;
}
.button:hover .button_repeat {
background: url(../images/mainnav/button_repeater_hover.gif) repeat-x;
}

Da dies nicht valide ist, ist meine Frage wie ich dies anders gestalten kann.

Hoffe jetzt ists ein bisschen offensichtlicher. :)
 
Was Du beachten musst, um es valide zu bekommen, haben wir Dir schon gesagt.

anna55 schrieb:
So isses. Siehe SELFHTML.
Zum Vergrößern anklicken....

Wenn Du zwischen <div id="nav_repeat"> und dem schließenden div dazu statt der divs ein span-Element nimmst, ist die Seite valide. Allerdings stimmt dann das CSS dazu nicht mehr und Du bekommst vielleicht Probleme mit der Ausrichtung, weil z.B. margin da nicht geht. Kannst es ja testen. Besser wäre es, wenn Du für die Navi Listenelemente verwendest. Die bullets bekommst Du weg mit list-style-type: none;
 
dkdenz schrieb:
Naja, man könnte ja dem span ein display:block verpassen... ;)
Zum Vergrößern anklicken....

Hey ja, stimmt. Also nicht nur die div zwischen <a....> und </a> gegen ein span austauschen, sondern jeweils zusätzlich display:block angeben. Dann ist das Ganze valide und die Ausrichtung bleibt erhalten. Stellt sich natürlich trotzdem die Frage, warum die Buttons so zusammengesetzt werden müssen...


Edit:
zsoerenm schrieb:
Ich würde mich auch freuen wenn ihr mir helfen könntet, dass sich #content div mit dem Inhalt anpasst. Die linke Box geht über den #content hinaus, obwohl ich es gecleared habe.
Zum Vergrößern anklicken....

Habe mir das auch mal angesehen. Du hast eine ganz üble Divsuppe, die Du unbedingt entwirren solltest. Wie merkwürdig das Ganze verschachtelt ist, siehst Du, wenn Du einfach mal das Ende Deines HTML so schreibst:
Code: 
   <div id="right">
                	<div id="heading">
                    News
                    </div>
                    <div id="maincontent">
                	content...
                    </div>
                </div>
 [COLOR="Red"]<div id="footer"></div>[/COLOR]
            </div>
        </div>
     <!--Hier stand der footer vorher-->
    </div>

Dann geht der conten-Bereich bis runter, d.h. Du clearst an der falschen Stelle. Aber wie gesagt, die Verschachtelung ist richtig schlecht. Du brauchst keinen clearenden footer, schon gar nicht mittendrin, sondern einen einfach strukturierten Aufbau.
 
Zuletzt bearbeitet:
Hey ja, stimmt. Also nicht nur die div zwischen <a....> und </a> gegen ein span austauschen, sondern jeweils zusätzlich display:block angeben. Dann ist das Ganze valide und die Ausrichtung bleibt erhalten. Stellt sich natürlich trotzdem die Frage, warum die Buttons so zusammengesetzt werden müssen...
Zum Vergrößern anklicken....

Ich möchte das so aufbauen, da ich so am einfachsten die Breite der Button varieren kann. Dieser Button besteht aus 3 teilen. Der mittlere teil wird einfach repeatet. Wenn ich den Button als einen Teil erstellen würde und der Inhalt in diesem Button zufälliger größer werden sollte so müsste ich ein neues Bild für den Button erstellen.

Deshalb wüsste ich auch nicht die üble div suppe anders zu gestalten. Wenn ich zum Beispiel eine Liste für die Navigation verwende, werde ich trotzdem 3 divs benutzen müssen wegen den 3 verschiedenen Bilder.

Ich hab den Footer (also den clearenden div) weiter hochgestellt. Und ja du hast Recht. Nun passt sich der content div mit dem Inhalt an :) Ich weiß leider immer noch nicht genau wann ich den benutzen muss. Ich dachte der müsste nach dem div der sich mit dem Inhalt anpassen soll?!

Danke schon mal für die reichle Information :)

Ich hab mal die ganze Seite nun hochgeladen. Vielleicht könnt ihr euch nun besser vorstellen was ich möchte: Download

Gruß Sören
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben