nicht angemeldet
Div Verschachtelung / Inline und Outline Elemente
Hallo!!!
Aufgrund der netten Tips von Orlando und Arne,
bezüglich meiner letzten Anfrage, habe ich
mich entschlossen das Grundgerüst meiner Seite
ohne Tabellen zu gestalten.
Ich habe mir viele Beispielseiten angeschaut
und auch mit Selfhtml versucht weiterzukommen,
aber das klappt irgendwie nicht...
Daher bitte ich Euch nochmal um Eure Hilfe.
Meine Seite soll aussehen, wie IE 6.0 und Mozilla 1 RC 2
http://http://www.bkeil.com/new4/ darstellen.
Diese ist mit Tabellen gemacht.
Als erstes habe ich mir den oberen Teil vorgenommen
(die ´Zeile´ in der die Verweise stehen).
Hier ist mein aktueller, fehlerhafter Quelltext:
--------------------
<html>
<head>
<title>Ein Herz Für Tabellen</title>
<style type="text/css">
<!--
body {
margin: 0;
color: #FFFFFF;
background-color: #000000;
}
div.aussen {
width: 100%;
border-top: 1px solid #999999;
border-bottom:1px solid #999999;
text-align: center;
}
div.innen {
margin-left: auto;
margin-right: auto;
}
a.nav {
width: 117px;
line-height:53px;
border-left:1px solid #999999;
border-right:1px solid #999999;
}
-->
</style>
</head>
<body>
<div class="aussen">
<div class="innen">
<a href="index.html" class="nav">Design</a>
<a href="index.html" class="nav">Literatur-Tips</a>
<a href="index.html" class="nav">Ben</a>
<a href="index.html" class="nav">Gästebuch</a>
<a href="index.html" class="nav">Impressum</a>
</div>
</div>
</body>
</html>
--------------------
Hab´ s mal unter
http://www.bkeil.com/new5/
hochgeladen.
Auf der Farben der Links habe ich erstmal keine Rücksicht genommen,
das kommt später.
Im IE sieht das schon ganz gut aus
(bis darauf, dass ich´s nicht vertikal zentriert bekomme
-- wie geht das ? -- und das zwischen den einzelnen ´Buttons´ noch Freiram ist)
Mozilla kommt mit meiner Breiten- und Zeilenhöhe-Angabe
irgendwie nicht klar (a.nav)- ich gehe davon aus, dass der Fehler bei mir liegt.
w3c html validator findet alles richtig...
Könnt Ihr mir sagen wo mein Denkfehler liegt?
Viele Grüße aus Bötzingen,
Benjamin
-
Hallo Benjamin,
Mozilla kommt mit meiner Breiten- und Zeilenhöhe-Angabe
irgendwie nicht klar (a.nav)- ich gehe davon aus, dass der Fehler bei mir liegt.Das hängt damit zusammen, dass Mozilla nicht so tolerant wie der IE ist. Du kannst nicht einfach ein Format für a definieren, in der Hoffnung, dass es sich auf alle Links auswirkt. Du musst hier mit den Pseudoformaten für Links arbeiten. Alles dazu findest du unter:
http://selfhtml.teamone.de/css/formate/zentrale.htm#pseudoformateViele Grüße
Patrick Canterino
-
Hallo Benjamin,
Mozilla kommt mit meiner Breiten- und Zeilenhöhe-Angabe
irgendwie nicht klar (a.nav)- ich gehe davon aus, dass der Fehler bei mir liegt.Das hängt damit zusammen, dass Mozilla nicht so tolerant wie der IE ist. Du kannst nicht einfach ein Format für a definieren, in der Hoffnung, dass es sich auf alle Links auswirkt. Du musst hier mit den Pseudoformaten für Links arbeiten. Alles dazu findest du unter:
http://selfhtml.teamone.de/css/formate/zentrale.htm#pseudoformateDas löst das Problem leider auch nicht,
denn selbst wenn ich für jeden Zustand von a die
Angaben wiederhole (link,visited,hover,active) ändert sich nichts.Mozilla beachtet die Zeilenhöhe ja auch in irgendeiner Weise,
denn die div sind ja nicht ohne Grund so aufgeblasen,
allerdings funktioniert die Umrandung irgendwie nicht so richtig.Ich glaube das Problem liegt in der Verschachtelung meiner Elemente,
aber das verstehe ich nicht.Viele Grüße,
Benjamin
-
Moin!
Mozilla kommt mit meiner Breiten- und Zeilenhöhe-Angabe
irgendwie nicht klar (a.nav)- ich gehe davon aus, dass der Fehler bei mir liegt.Das hängt damit zusammen, dass Mozilla nicht so tolerant wie der IE ist. Du kannst nicht einfach ein Format für a definieren, in der Hoffnung, dass es sich auf alle Links auswirkt.
Er hat eine Klasse definiert - und das, ohne irgendwelche Fehler einzubauen (was die Klasse angeht).
Das Problem besteht wohl eher darin, daß line-height nicht funktioniert. Das würde ich ganz simpel darauf zurückführen, daß es auf ein Inline-Element (nämlich a) angewandt wurde, und nicht auf das umschließende div.
Du musst hier mit den Pseudoformaten für Links arbeiten. Alles dazu findest du unter:
http://selfhtml.teamone.de/css/formate/zentrale.htm#pseudoformateNein, muß er nicht. Man kann auch einfach in CSS das ganze a definieren (was dann für alle Zustände gilt).
- Sven Rautenberg
-
Mahlzeit,
Das Problem besteht wohl eher darin, daß line-height nicht funktioniert. Das würde ich ganz simpel darauf zurückführen, daß es auf ein Inline-Element (nämlich a) angewandt wurde, und nicht auf das umschließende div.
Egal wo ich line-height anwende, es ändert sich nichts.
Gruß,
Benjamin
-
-
-
hi
a.nav {
width: 117px;inline-Elemente haben keine width:
line-height:53px;
border-left:1px solid #999999;
border-right:1px solid #999999;man hüte sich vor netscape 4 ;)
Grüße aus Bleckede
Kai
-
hi
a.nav {
width: 117px;
inline-Elemente haben keine width:line-height:53px;
border-left:1px solid #999999;
border-right:1px solid #999999;
man hüte sich vor netscape 4 ;)Hallo,
muss ich dann um die Verweise auch noch DIVs machen?
Dann habe ich eine 3-fache DIV-Verschachtelung
und außerdem stehen alle Verweise untereinander.
Ich könnte die Verweise zwar mit float:left wieder
nebeneinander bekommen, aber dann rutscht die border-bottom
direkt unter die border-top des äußeren div-elementes.Hat jemand eine Ahnung wie das zu lösen ist?
Viele Grüße,
Benjamin
-