✔ divbox+text - verlinkung?

[the_black_hawk]

Moin Leutz,

ich bin auf der Suche nach einer Lösung für eine divboxverlinkung.

Ich möchte eine divbov als eine Art button erstellen, nur ist mein problem, dass wenn ich den link for dem <div> setze fungiert der text im innern nicht als link
und wenn ich den link vor dem text setze is nur der text der link (soll beides verlinkt sein)

Hier meine momentane Lösung:

<a href="test.html">
<div class="boxnav" onmouseover=this.className="boxnavover" onmouseout=this.className="boxnav">
<table valign="center" align="left">
<tr>
<td width="25">&nbsp;</td>
<td>
<a href="test.html">test</a>
</td>
</tr>
</table>
</div>
</a>

gibts es eine bessere Variante?

 

[Westbär]

Du kannst es so machen:

<div id="menu">
    <a href="blub.html">Moep?</a>
    <a href="blub2.html">Hallo</a>
</div>

Du musst halt nur dann das DIV-Element mit CSS Klassen verschönern (#menu, #menu a, #menu a:hover)

Hier kannst du ja auch mal schauen

Gruß

 

[Maik]

Hi,

ich weiss jetzt nicht, was du da mit dem gezeigten Quellcode bezwecken möchtest

Wenn test der Link-Text ist, wieso notierst du dann nicht einfach

<a href="test.html">test</a>

und formatierst den Link mit CSS zu einem "Button"?

Zudem dürfen Inline-Elemente (= a) keine Block-Elemente (= div) enthalten.

 

[the_black_hawk]

Du kannst es so machen:

<div id="menu">
    <a href="blub.html">Moep?</a>
    <a href="blub2.html">Hallo</a>
</div>

Du musst halt nur dann das DIV-Element mit CSS Klassen verschönern (#menu, #menu a, #menu a:hover)

Hier kannst du ja auch mal schauen

Gruß

danke dir, werd mich gleich mit beschäftigen

Hi,

Wenn test der Link-Text ist, wieso notierst du dann nicht einfach

<a href="test.html">test</a>

und formatierst den Link mit CSS zu einem "Button"?

hehe, warum ich nich selbst drauf gekommen bin^^
manchmal kanns so einfach sein
....
oder auch nich, ich habs jetz mal so gemacht, problem ist, dass der link die höhe/breite nicht annimmt, sondern nur so hoch/breit wie der link selbst is

Zudem dürfen Inline-Elemente (= a) keine Block-Elemente (= div) enthalten.

also meinst du dass <a><div></div></a> nich zulässig is?
aber funktioniert doch super

danke euch für die hilfe

 

[Maik]

Mit der display:block-Eigenschaft nimmt der Link die Breiten- und Höhenangaben an.

Werf mal einen Blick in die HTML-Elementreferenz:

• http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente
• http://de.selfhtml.org/html/referenz/elemente.htm#a

und lass das "Konstrukt" vom w3c-Validator überprüfen.

 

[the_black_hawk]

ah, ok danke dir

habs jetz hinbekommen dass es "fast" so formatiert ist wie ichs will

gibt nurnoch paar kleine Probs

1. Lücken zwischen den einzelnen Buttons
2. der Link ist nicht mehr vertikal zentriert

im anhang hab ich 2 pics
1. wies jetz aussieht(einfacher Link)
2. wie es aussehen soll

 

[Maik]

Wie lautet denn der neue Quellcode (HTML + CSS) für die "Buttons"?

Eine vertikale Zentrierung des Linktextes erzielst du mit der line-height-Eigenschaft, die anstelle von height eingesetzt wird.

 

[the_black_hawk]

danke, line-height hat funktioniert

hier der code

<style>
a.boxnav{
  width: 185px;
  line-height: 25px;
  border: 1px solid;
  border-color: #ffffff;
  background-image: url('Bilder/navbg.gif');
  color: #737373;
  font-family: arial;
  font-size: 12px;
  display: block;
  text-align:left;
  text-indent: 30px;
}
</style>

...
<div class="boxcat">
		<table valign="center" align="left"><tr><td>
<img src="Bilder/arrow.gif" />&nbsp;Cat1</td></tr></table>
</div>		</td>
	</tr>
	<tr>
		<td>
		<a href="test.html" class="boxnav">link1</a></td>
		</td>
	</tr>
	<tr>
		<td>
					<a href="test.html" class="boxnav">link2</a>
		</td>
	</tr>
...

 

[Maik]

Die Lücken werden wohl durch die Zellabstände (cellspacing) und Zellinnenabstände (cellpadding) entstehen, die derzeit nicht auf null gesezt sind.

Solch eine "CSS-Navigation" wird aber stattdessen mit einer Liste ausgezeichnet und anschliessend mit CSS formatiert:

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
</ul>

Siehe hierzu auch Listamatic: one list, many options

 

[the_black_hawk]

das mit den listen probier ich morgen mal aus, danke schonmal

und an den Zellabständen lag es nicht

ich hab jetzt alle Zellabstände aller Tabellen auf "0" gesetzt, die Lücken sind immernoch da

nagut ich mach erstmal schluss für heute, ich werd morgen meine Ergebnisse posten.

Gute Nacht euch allen, und danke nochmal