Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag18.11.2010 um 18:35 (UTC)    
Titel: Navigationsleiste HTML

Hi, ich versuche momentan eine .de Webpage mit dem Editor zu erstellen. Aber es scheitert bei mir bei einer navi leiste. Cool menü hab ich probiert geht nicht. Wenn jemand sich mit HTML auskennt und eventuell die Zeit hatt wäre es klasse wenn mir jemand eine navi leiste programmiert und wenn möglich erklärt damit ich danach klüger bin als vorher Wink

Darüber würde ich mich sehr freuen, es sollte eine zentrierte Navi leiste sein.
Ich möchte sie unter dem Header platzieren !


Perfekt wäre es wenn es haargenau so aussieht:
http://www.ig444.de.tl/Home.htm
Naja nicht haargenau aber so. Ich kann gute Grafiken erstellen also wer mir eine Navi Leiste in HTML oder CSS für den EDITOR codet/erstellt könnte ich dem jenigen einen Header oder mehrere Banner erstellen usw.

Gruß Chris Cool
Beitrag14.12.2010 um 13:50 (UTC)    
Titel: Meinst du das?

Versuchs mal so:

(die werte musst du noch so verändern, wie's dir passt...)

Titel der Navigation )optional):
Code:

<div id="navigation"> 
<font color= "#ffffff">             /* Farbe der Schrift (Wert bei # verändern) */
Navi                     /* Titel-Text */
</font>                      /* Damit nicht alles farbig ist... */
</div>


CSS ohne Style Tags
Code:


#nav_container{ position: absolute;
left: 50%;
width: 600px;
heigth: 70px;
top:135px;
 left: 170px;  }
 ul#nav{ width: 600px;
heigth:80px;
 padding: 7px;
 margin: 0px;}
 li.nav_element
{ display:inline; list-style-type: none;
position: relative;
padding:5px;
width: 175px;
height: 80px;} 
li.nav_element a
{ width: 175px;
height:80px;
padding:4px;
font-weight: bold;
 text-decoration: none;
text-align: left;
color:#FFFFFF;
background-color:#000000;
background-image:url(BUTTON-URL);
border: 2px solid #000000;}
 li.nav_element a:hover
{ color:#3399FF;
background-color:#C9C9C9;
background-image:url(BUTTON-URL);}
       


Und hier die Erklärungen:

Code:

#nav_container                           Allgemeine Bezeichnung für die Navigationsbox
position: absolute;                      Damit es sich nicht automatisch ausrichtet
left:                                                 Prozent abstand zum linken Rand (50%=Mitte)
width:                                             Breite
heigth:                                            Höhe
top:                                                 Abstand zum oberen Rand
 left:                                                Abstand zum linken Rand (in pixel (px))

 ul#nav                                          Bezeichnung der Linkauflistung
 width:                                           
heigth:
 padding:                                    Innanabstand (links und rechts)
 margin:                                      Aussenabstand (oben und untent)
 
 li.nav_element                         Navlinks-Hintergrund
display:inline;                            Die Navi wird waagerecht dargestellt
 list-style-type: none;               Aufzählungszeichen
position: relative;                     Die Position richtet sich automatisch aus
padding:
width:
height:

li.nav_element a                     Textlinks der Navi
 width:
height:
padding:
font-weight:                             Schriftart (kursiv,fett...)
 text-decoration: none;          Text-dekoration
text-align: left;                          Textausrichtung (Hier: Rechtsbündig)
color:#FFFFFF;                          Schriftfarbe
background-color:#000000;     Hintergrundfarbe
background-image:url();            In die Klammern: Hintergrundbild-url
border: 2px solid #000000;       Rand

 li.nav_element a:hover        Nav-Links wenn du mit der Maus raufgehst (hover)
color:#3399FF;       
background-color:#C9C9C9;
background-image:url();}



Du kannst auch mal hier schauen:

Erklärung der Funktion list-style-type
http://www.css4you.de/list-style-type.html

Erklärung der text-decoration
http://www.css4you.de/Texteigenschaften/text-decoration.html

Das beste CSS-tut das ich kenne
http://www.homepage-baukasten.de/forum/viewtopic.php?t=121795

Erklärung der... naja einfach eine CSS-Einführung
http://www.homepage-baukasten.de/forum/viewtopic.php?t=100611



Ich hoffe ich konnte dir helfen!



Emperormatem


Zuletzt bearbeitet von ger-build2 am 15.12.2010, 17:19, insgesamt 3-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de