✔ divbox+text - verlinkung?

[Maik]

Ich weiß nicht, wo und wie du die genannten Attribute deklariert hast, aber in diesem Beispiel schliessen sich bei mir die Lücken:

<table cellpadding="0" cellspacing="0">
       <tr>
           <td><a href="test.html" class="boxnav">link1</a></td>
       </tr>
       <tr>
           <td><a href="test.html" class="boxnav">link2</a></td>
       </tr>
</table>

Aber wie gesagt, die Tabelle ist hier eh falsch am Platz

 

[the_black_hawk]

das mit der Tabelle ist so eine Sache...
Ich arbeite hier mit einer photoshop-gesliceten Webpage, von daher ist es ein größeres Problem die Tabellen einfach raus zu nehmen (das die Website auch sehr komplex ist)

von daher werd ich den Vorschlag mit den Listen nicht annehmen können.

Die gute Nachricht ist aber, dass ich den Spaß mit den divs jetz rausgenommen hab, und nurnoch mit Links arbeite.

	<table valign="center" align="left" cellpadding="0" cellspacing="0">
	<tr><td>
		<a href="test.html" class="boxnav">link</a>
	</td></tr>
	</table>

funktioniert jetz super
dadurch konnte ich den "onmouseover/out" code auch entfernen, und spar mir so zusätzlich noch ein paar Stylesheets ein

von daher ist die Lösung akzeptabel

 

[Maik]

Hi!

Nur mal "blöd" nachgefragt: Wie lautet denn das Markup, wenn ein weiterer Menüpunkt in der Navigation hinzukommt?

Wird er nun in der vorhandenen Zelle aufgenommen, oder erzeugst du weiterhin mit tr eine neue Tabellenzeile?

Und ist die gezeigte Tabelle nicht eine "Verschachtelte", die sich in einer Tabellenzelle befindet?

 

[the_black_hawk]

Hi,

für neue Menüpunkte werden neue Zeilen erzeugt.

Ja genau die Tabelle befindet sich in einer anderen Tabelle.

Leider fällt mir hierzu keine andere Lösung ein (wie gesagt, handelt es sich hierbei um eine Photoshop generierte Datei)

 

[Maik]

Wenn sich die "Tabellen-Navigation" in einer übergeordneten Tabellenzelle befindet, liesse sie sich auch durch eine Liste ersetzen.

 

[the_black_hawk]

ich glaub das lässt sich nicht so einfach realisieren

hier is mal der Ausschnitt der die Navigation beinhaltet.
oben und unten sind noch massig andere Zeilen und Spalten die das Layout ergeben.

...
	<tr>
	<td>
		<div class="boxcat">
		<table valign="center" align="left">
<tr><td>
<img src="Bilder/arrow.gif" />&nbsp;Cat 1</td></tr></table>
		</div>		
</td></tr>
	<tr><td>
		<a href="test.html" class="boxnav">link 1</a>
	</td></tr>
	<tr><td>
		<a href="test.html" class="boxnav">link 2</a>
	</td></tr>
	<tr>
	<td>
	<div class="boxcat">
		<table valign="center" align="left">
<tr><td>
<img src="Bilder/arrow.gif" />&nbsp;Cat 2
</td></tr></table>
		</div></td>
	</tr>
	<tr><td>
		<a href="test.html" class="boxnav">link 1</a>
	</td></tr>
	<tr><td>
	<a href="test.html" class="boxnav">link 2</a>
	</td></tr>
	<tr><td>
		<a href="test.html" class="boxnav">link 3</a>
	</td></tr>
	<tr><td>
	<div class="boxcat">
	<table valign="center" align="left">
<tr><td>
<img src="Bilder/arrow.gif" />&nbsp;Cat 3
</td></tr>
	</table>
	</div></td>
	</tr>
	<tr><td>
		<a href="test.html" class="boxnav">Link 1</a>
	</td></tr>
	<tr><td>
		<a href="test.html" class="boxnav">Link 2</a>
	</td></tr>
...

 

[Maik]

Ich sehe da mehrere DIVs mit eingebundenen Tabellen, die sich grundsätzlich auch auf diese Weise zusammenfassen lassen:

<ul id="nav">
    <li>Cat 1
             <ul>
                 <li><a href="test.html" class="boxnav">link 1</a></li>
                 <li><a href="test.html" class="boxnav">link 2</a></li>
             </ul>
    </li>
    <li>Cat 2
             <ul>
                 <li><a href="test.html" class="boxnav">link 1</a></li>
                 <li><a href="test.html" class="boxnav">link 2</a></li>
                 <li><a href="test.html" class="boxnav">link 3</a></li>
             </ul>
    </li>
    <li>Cat 3
             <ul>
                 <li><a href="test.html" class="boxnav">link 1</a></li>
                 <li><a href="test.html" class="boxnav">link 2</a></li>
             </ul>
    </li>
</ul>

Und das dazugehörige Stylesheet:

* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

ul#nav li {
background: url(Bilder/arrow.gif) no-repeat 0 5px;
padding-left: 15px; /* Grafikbreite von "arrow.gif" */
}

ul#nav li ul li {
padding: 0;
background: none;
}

Vielleicht lieg ich jetzt aber auch verkehrt, da ich nicht den vollständigen HTML-Quelltext der Seite bzw. des Tabellen-Layouts kenne.

 

[the_black_hawk]

haut nich ganz hin
wie ich mir schon gedacht hab, ist dadurch das komplette layout zerstört

ich hab dir im Anhang den kompletten code (ohne Bilder) reingepackt

vieleicht hilfts ja, denke du wirst schnell sehn dass da ein Chaos herrscht, was nich so leicht auszubügeln ist. (aber wie gesagt, der code so wie er ist, funktioniert perfekt)