nicht angemeldet
css Navi mit HG Bildern
Hallo Zusammen
sitze gerade an ner neuen Homepage und bin schier am verzweifeln!
bin noch nicht so css sattelfest und Quäle mich gerade mit einer navi in einem Kontainer div rumm.
Bitte helfen!!!
also zu meinem Problem:
Ich bastel an einer HP mit fixer Grösse (90x560px). Nun habe ich dazu ein Div (Kontainer mit Hintergrundbild) eingemittet. Nun soll in dieses eingemittete Div meine Navi. Habe es mit Positionierung static, absolut, und relative versucht, und habs einfach nicht hinbekommen. Auch "sprengt es mir im Firefox die Navi auf (Abstände zwischen den Navikästchen)??
Weis wirklich nicht mehr weiter :(
hier mein Code:
<head>
<style type="text/css">
body{ text-align:center; // Für den IE
:}
#kontainer{
text-align:left;
width:900px;
height: 560px;
padding-top: 0px;
margin:5% auto;
background: url("Bilder/HG's/DJ_Sbace_HG_Bild_(900x560).jpg");
z-index:1;
}
#navi {
position:absolute; top:100px; left:55px;
padding-left:0px;
z-index:2;
}
#menu a {
display:block;
width:77px;
height: 21px;
font: bold 12px/1Arial;
padding: 0.4em;
color:white;
background: url("Bilder/Buttons/DJ_Sbace_Button_01.jpg") 0 0 no-repeat;
text-decoration: none;
float: left;
}
#menu a:hover {
background: url("Bilder/Buttons/DJ_Sbace_Button_02.jpg") 0 0 no-repeat;
color: white;
}
#menu a:active {
background: url("Bilder/Buttons/DJ_Sbace_Buttond_03.jpg") 0 0 no-repeat;
color:white;
}
</style>
</head>
<body style="background-color: #000; margin:0; padding:0;">
<div id="kontainer" style="width:900px; height:560px;">
<div id="navi">
<div id="menu">
<a href="home.html">Home</a>
<a href="hystory.html">Hystory</a>
<a href="booking.html">Booking</a>
<a href="gigs.html">Gigs</a>
<a href="releases.html">Releases</a>
<a href="pictures.html">Pictures</a>
<a href="guestbook.html">Guestbook</a>
<a href="links.html">Links</a>
</div>
</div>
</div>
</body>
Grüsse Tomx
-
Weis wirklich nicht mehr weiter :(
das menu ist eine liste, lass es eine liste sein
wenn das geschehen ist -> suchmaschine nach "listamatic" befragen-
Hallo zusammen
Besten Dank für Eure Tipps.
Habe das Problem mittlerweile gelösst. Musste den Kontainer auf "Position: relative" setzen, und die Schrift in den Buttons über line-hight mittig positionieren und das "padding 0.4em" entfehrnen. Nun funktionierts.
@Ingo -> es funzt jetzt zwar, währe aber trotzdem noch froh über Antwort von Dir betr. Posting. ThanxGrüsse Tomx
-
-
Hi,
#kontainer{
text-align:left;
width:900px;
height: 560px;übel - was ist, wenn das Fenster niedriger ist oder der Inhalt größer (denke auch an Schriftvergrößerung).
margin:5% auto;
Mal festhalten: hier definierst Du 5% der Fensterhöhe als oberen Abstand.
z-index:1;
der wirkt sich nur auf positionierte Elemente aus.
#navi {
position:absolute; top:100px; left:55px;übel - Du kannst nicht wissen, wieviel px die zuvor definierten 5% ergeben.
font: bold 12px/1Arial;
"1Arial" ist kein gültiger Wert für line-height. Abgesehen davon würde bei der font-family die generische Angabe fehlen.
#menu a:hover {
color: white;die erneute Farbangabe ist überflüssig.
<body style="background-color: #000; margin:0; padding:0;">
<div id="kontainer" style="width:900px; height:560px;">
warum hier inline-styles?
<div id="navi">
<div id="menu">wozu das innere DIV? Und wozu überheipt ein DIV? <ul id="navi"> wäre angemessen und ausreichend.
freundliche Grüße
Ingo-
Hallo Ingo
#kontainer{
text-align:left;
width:900px;
height: 560px;
übel - was ist, wenn das Fenster niedriger ist oder der Inhalt größer (denke auch an Schriftvergrößerung).-> Da der Hintergrund ein ganzes Bild ist und ich Annehme das beim Navigieren jedes Mahl das (grosse) HG-Bild neu geladen wird? Arbeite ich mit einem I-Frame (mit fixer Grösse )in dem der Inhalt angezeigt wird. Somit bleibt das grund Div immer gleich gross.
margin:5% auto;
Mal festhalten: hier definierst Du 5% der Fensterhöhe als oberen Abstand.-> ja genau -> um das grund Div etwas nach unten zu rücken. Habe auch schon andere möglichkeiten zur Zentrierung des "grund Div's versucht wie z.B. die methode mit "top 50% left 50%" und der halbewn höhe und Breite zur zentrierung versucht - jedoch ist wen das Browserfenster kleiner als das "grund div" sprich die Page ist nicht der gesamte bereich scrollbahr und es kann somitt deim anzeigen mit kleinem Browswefenster ober sehr kleinen Bildschirmauflösungen (XXXx800) nicht die ganze Page dargestellt werden. Desshalb so so ist es zumindest einigermassen zentriert und wenn ganz klein voll scrollbar. (andere Möglichkeit?)
z-index:1;
der wirkt sich nur auf positionierte Elemente aus.-> Danke
#navi {
position:absolute; top:100px; left:55px;
übel - Du kannst nicht wissen, wieviel px die zuvor definierten 5% ergeben.-> die Navi sollte sich am "grund div" (mit den 5%) ausrichten (-> tut sie mittlerweile auch)
font: bold 12px/1Arial;
"1Arial" ist kein gültiger Wert für line-height. Abgesehen davon würde bei der font-family die generische Angabe fehlen.-> ups, habe ich bemerkt und geändert / Thanx
#menu a:hover {
color: white;
die erneute Farbangabe ist überflüssig.-> Thanx
<body style="background-color: #000; margin:0; padding:0;">
<div id="kontainer" style="width:900px; height:560px;">
warum hier inline-styles?-> hatte Probleme mit der Darstellung, versuchs mal ohne.
<div id="navi">
<div id="menu">
wozu das innere DIV? Und wozu überheipt ein DIV? <ul id="navi"> wäre angemessen und ausreichend.->Das Menue div hat eine fixe Grösse um darin die Bilder für die Buttons für standard, Hover und Active anzuzeigen welche im css text als HG-Bilder definiert sind. Das umschliessende Navi Div erstellte ich um die ganze Navi besser zu Positionieren (Fehler?).
Wozu über haupt ein Div?
-> um die HG-Bilder für a Hover und Active Festzulegen. -> geht dies auch mit ul?Grüsse Tomx
-
Hi,
-> Da der Hintergrund ein ganzes Bild ist und ich Annehme das beim Navigieren jedes Mahl das (grosse) HG-Bild neu geladen wird? Arbeite ich mit einem I-Frame (mit fixer Grösse )in dem der Inhalt angezeigt wird. Somit bleibt das grund Div immer gleich gross.
Du nimmst falsch an. Und ein iframe ist auch eimne sehr schlechte Lösung, die zu seiteninternen Scrollbalken (ggfls. zusätzlich zu denen am Browserrand) führen kann.
wozu das innere DIV? Und wozu überheipt ein DIV? <ul id="navi"> wäre angemessen und ausreichend.
->Das Menue div hat eine fixe Grösse um darin die Bilder für die Buttons für standard, Hover und Active anzuzeigen welche im css text als HG-Bilder definiert sind. Das umschliessende Navi Div erstellte ich um die ganze Navi besser zu Positionieren (Fehler?).
nur sehr umständlich.
Wozu über haupt ein Div?
-> um die HG-Bilder für a Hover und Active Festzulegen. -> geht dies auch mit ul?Bei einer Menüliste hast Du bereits drei ineinander verschachtelte Elemente, die Du beliebig formatieren kannst: ul, li und a. Es ist äußerst selten, dass noch ein weiteres äußeres Element benötigt wird.
freundliche Grüße
Ingo
-
-
-
hoi,
also, musst du zuerst dein menu die struktur so zumachen:
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
</ul>Kannst du das beispiel auch da anzuschauen
http://innonesen.se/test/l-19/LG,
Inita