• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Karteireiterleiste mit css

Status
Für weitere Antworten geschlossen.
T

toom

Neues Mitglied
Einigen Internetseiten haben eine Karteireiterleiste mit CSS realsiert. ZB Wikipedia. Wie kann man sowas mit CSS machen ich blick bei denen ihren Seiten nicht durch.

Sie Grafik
 

Anhänge

  • Bild 1.png
    Bild 1.png
    17,9 KB · Aufrufe: 27
Werbung:
Die haun' mehrere Container nebeneinander mit float:right/left und schreiben einen Code für den aktiv-Status, sodass es ein anderes Hintergrundbild bekommt.
So einfach ;)

Etwa so:
HTML: 
<html>

<head>
<title>Registerkarten</title>

<style type="text/css">
.registerkarte {
background: url(registerkaten/bild.jpg) no-repeat;
width: ??px;
height: ??px;
border: 0px;
float:left;
display: block;
}

.registerkarte:active {
background: url(registerkaten/aktiv.jpg) no-repeat;
width: ??px;
height: ??px;
border: 0px;
float:left;
}

.abstand_zwischen_registerkarten {
float:left;
width: ??px;
}
</style>

<body>

<div class="registerkarte">Registerkarte 1</div>
<div class="abstand_zwischen_registerkarten"></div>
<div class="registerkarte">Registerkarte 2</div>

</body>

</html>
Natürlich kann man diesen Code erweitern.
Hovereffekte, usw...

MfG, matibaski
 
Mit der Methode habe ich ein Problem.
1) Folgendes Layout habe ich erstellt:
HTML: 
<div style="padding:5px;border:1px solid;float:left;">erste
</div>
<div style="border:1px solid;float:left;">zweite
</div>
<br />
<div style="border:1px solid;">Warum &uuml;berschneiden sich diese div-Bereiche?
</div>
Die Frage ist im Div bereich enthalten.
2) Weiterhin verstehe ich den css Befehl display:block; nicht. WAs bewirkt der in dem Layout oben ?

3) Warum habe ich zwischen Tabellen immer einen Abstand:
HTML: 
<div style="margin:0;padding:0;">
<table style="margin:0;padding:0;">
    <tr style="margin:0;padding:0;">
        <td style="border:1px solid;margin:0;padding:0;">Feld 1</td>
        <td style="border:1px solid;margin:0;padding:0;">Feld 2</td>
        <td style="border:1px solid;margin:0;padding:0;">Feld 3</td>
    </tr>
</table>
</div>
<div style="margin:0;padding:0;">
<table style="margin:0;padding:0;">
    <tr style="margin:0;padding:0;">
        <td style="border:1px solid;margin:0;padding:0;">Okay hier soll der Text hin.</td>
    </tr>
</table>
</div>
 
Werbung:
toom schrieb:
Mit der Methode habe ich ein Problem.
1) Folgendes Layout habe ich erstellt:
HTML: 
<div style="padding:5px;border:1px solid;float:left;">erste
</div>
<div style="border:1px solid;float:left;">zweite
</div>
<br />
<div style="border:1px solid;">Warum &uuml;berschneiden sich diese div-Bereiche?
</div>
Zum Vergrößern anklicken....
Wo meinst du?

2) Weiterhin verstehe ich den css Befehl display:block; nicht. WAs bewirkt der in dem Layout oben ?
Zum Vergrößern anklicken....

[css]display[/css]
Display legt fest, wie ein Element angezeigt werden soll. Mit block ist es ein Block-Element

3) Warum habe ich zwischen Tabellen immer einen Abstand:
Zum Vergrößern anklicken....
Die Lösung heisst border-collapse:collapse ([css]border-collapse[/css])
Das musst du nur unter <table> definieren.
 
Zuletzt bearbeitet:
HTML: 
<div style="padding:5px;border:1px solid;float:left;">erste
</div>
<div style="border:1px solid;float:left;">zweite
</div>
<br />
<div style="border:1px solid;">dritter
</div>

Warum überschneiden sich der erste div und der dritte div bereich ?
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben