DIV-Frage: eigene Seiten-Paginierung

[Jens Pielawa]

Hallo an alle,
ich stehe gerade mächtig auf dem CSS-Schlauch...
Auf meiner Seite www.sender-zitrone.de/hoffmann-diskographie.htm möchte ich eine Diskographie auf mehrere Seiten verteilen. Dazu lege ich ein eigenes Modul an, dass die Seiten in einer Art Paginierung listet.

<div class="diskonavi">
<a class="diskonavi" alt="LPs" title="LPs" href="hoffmann-diskographie.htm">LPs</a>
<a class="diskonavi" alt="Singles" title="Singles" href="hoffmann-diskographie-2.htm">Singles</a>
<a class="diskonavi" alt="CDs" title="CDs" href="hoffmann-diskographie-3.htm">CDs</a>
<a class="diskonavi" alt="Anderes" title="Anderes" href="#">Anderes</a>
</div>

Leider kriege ich es partout nicht hin, diese Paginierung so zu gestalten, dass der Inhalt unter ihr weitergeht, es wird immer daneben dargestellt. Ich habe alles mögliche abgeklappert und ausprobiert. Das CSS dazu:

.diskonavi
{
	margin-top:7px;
}
.diskonavi a
{
	float:left;
	display:block;
	margin:0 7px 0 0;
	padding:4px 6px;
	text-align:center;
	border:1px solid #365c40;
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:14px;
}
.diskonavi a:hover,
focus
{
	background-color:#E8CF7C;
	border:1px solid #775136;
	text-decoration:none;
	color:#543926;
}

Wo und was ist die entscheidende Stellschraube? Ich kriege es einfach nicht hin.


CSS-Profis werden wahrscheinlich kurz seufzen und über solche Fragen kichern...

[lucina]

Huhu Jens,

da kommen sich ja wohl die verschiedenen Instanzen von .diskonavi ins Gehege. Der Einfachheit halber würde ich das so in dier Art lösen:

<div ID="diskonavi">
<a class="diskonavi" alt="LPs" title="LPs" href="hoffmann-diskographie.htm">LPs</a>
(...)

sowie dann

#diskonavi
{
	width:100%;
}
.diskonavi
{
	width: auto;
}

LG, Carolina.

(und ja, der Hoffmann war schon recht schräge damals - schön, das der nicht in Vergessenheit gerät)

[Raynaldo]

Generell würde ich ID und Klasse nicht mit dem selben Namen belegen. IMO führt das gerne mal zur Verwirrung.

Was möchtest Du denn mit dem "float: left" erreichen? Das ist ja eigentlich auch dazu da, dass der Inhalt daneben angezeigt wird.

(Oder verstehe ich da gerade den Aufbau falsch?)

[Jens Pielawa]

Liebe Carolina,

danke schon mal für's Augenöffnen, dass der DIV eine ID braucht. Jetzt habe ich folgendes:

<div ID="diskonavi">
<a class="diskonavi" alt="LPs" title="LPs" href="hoffmann-diskographie.htm">LPs</a>
<a class="diskonavi" alt="Singles" title="Singles" href="hoffmann-diskographie-2.htm">Singles</a>
<a class="diskonavi" alt="CDs" title="CDs" href="hoffmann-diskographie-3.htm">CDs</a>
<a class="diskonavi" alt="Anderes" title="Anderes" href="#">Anderes</a>
</div>

und dann das CSS dazu ist

#diskonavi
{
	width:100%;
	margin-top:7px;
}
.diskonavi a:link,
.diskonavi a:visited
{
	width:auto;
	float:left;
	display:block;
	margin:0 7px 0 0;
	padding:4px 6px;
	text-align:center;
	border:1px solid #365c40;
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:14px;
}
.diskonavi a:hover,
.diskonavi a:focus,
.diskonavi a:active
{
	background-color:#E8CF7C;
	border:1px solid #775136;
	text-decoration:none;
	color:#543926;
}

Dass der Inhalt jetzt darunter weiter läuft, ist schon mal gut. Trotzdem werden die Links nicht wie gewollt in Kästchen formatiert...

Und: ja, mit dieser Homepage werden wir alles rund um den Radio-Comedian Hermann Hoffmann darstellen. Mit der Diskographie ist der nächste Schritt getan, dann kommen noch Hörbeispiele und andere Sachen. Ich bin schon sehr froh, dass ich den Mitgliederbereich nach meinen Wünschen gestaltet bekommen habe.

Edit: Ich hab's jetzt, dank der Nachfrage von Raynaldo. Stimmt, man muss es nicht floaten, das habe ich rausgenommen, ebenso wie die Klassen für die Links, und dann sieht es prima aus.
Das CSS für die Links lautet jetzt

#diskonavi a:link,
#diskonavi a:visited
{
	width:auto;
	margin:0 7px 0 0;
	padding:4px 6px;
	text-align:center;
	border:1px solid #365c40;
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:14px;
}

Et voilá. Danke an Euch beide, der Tag ist gerettet.