Ergebnis 1 bis 3 von 3

Thema: Hilfe bei Navigations Leiste auf Meiner Webseite

  1. #1
    HTML Newbie
    Registriert seit
    16.05.2018
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hilfe bei Navigations Leiste auf Meiner Webseite

    Also ich muss für die Schule eine Webseite Programmieren nur bringt mich die Navigationsleiste an meine Grenzen. Ich habe die letzten 1 1/2 Stunden damit verbracht es zu beheben und habe keine Lösung gefunden. Ich wäre sehr erleichtert wenn mir einer helfen könnte.

    Wie schaffe ich es Das das grüne Feld (activ) nicht so gross ist und auf das andere passt. (Ich weiss total schlecht beschrieben aber ihr werdet sehen was ich meine)

    Foto: https://ibb.co/hs0WAd

    Code HTML:
    <nav> <ul>
    <li>
    <a class="active" href="home.html">Home</a>
    </li>
    <li>
    <a href="https://bit.ly/2pHT2Cy">Hausaufgaben</a>
    </li>
    <li>
    <a href="bilder.html">Bilder</a>
    </li>
    <li>
    <a href="email.html">E-Mail</a>
    </li>
    <li>
    <a href="kontakt.html">Kontakt</a>
    </li>
    </ul>
    </nav>


    Code CSS:
    nav ul {
    list-style-type: none;
    background-color: #333;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;

    }
    nav ul li {
    display: inline;
    border-right: 1px solid #bbb;
    padding-right: 8px;
    padding-left: 8px;

    }
    nav ul li:last-child {
    border-right: none;
    }
    nav ul li a {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }


    .active{
    background-color: #4CAF50;
    }
    li a:hover:not(.active) {
    background-color: #111;
    }


    Wenn mir jemand helfen Könnte wäre ich mega dankbar. Sorry für die Rechtschreibe Fehler aber bin gerade etwas angepisst.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    288
    Danke
    0
    Bekam 57 mal "Danke" in 57 Postings

    Standard AW: Hilfe bei Navigations Leiste auf Meiner Webseite

    Ändere mal die 'padding' Werte in deinem CSS für 'nav ul li a'
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. #3
    Azubi(ne)
    Registriert seit
    07.04.2018
    Beiträge
    74
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hilfe bei Navigations Leiste auf Meiner Webseite

    Code:
    <div id="menü-div"><nav>           
     <ul>                
    <li><a href="index.php">Start</a>                
    <li><a href="news.php">News</a>               
    <li><a href="clans.php">Clans</a>               
    <li><a href="range.php">Ränge</a>                
    <li><a href="games.php">Games</a>                
    <li id="sonderbutton"><a href="bewerben.php">Bewerben</a></li>            
    </ul>        </nav>        </div>
    Und CSS

    Code:
    <ul> <li><a href="index.php">Start</a> <li><a href="news.php">News</a> <li><a href="clans.php">Clans</a> <li><a href="range.php">Ränge</a> <li><a href="games.php">Games</a> <li id="sonderbutton"><a href="bewerben.php">Bewerben</a></li> </ul> </nav> </div>
    
    
    Und CSS:
    
    Code:
    
    body{ 	margin: 0; 	padding: 0; 	font-family: verdana; 	background-color: white; 	padding-bottom: 20px; } nav { 	width: 1024px; 	border-bottom: 3px solid orange; 	background: lightblue; 	color: white; 	align-items: center; 	justify-content: center; 	float: center; 	padding-left: 20px; 	 } ul { 	width: 80%; 	margin: 0 auto; 	padding: 0; } ul li { list-style: none; display: inline-block; } ul li :hover { 	background: orange; } ul li a { color: #fff; text-decoration: none; display:block; padding:20px; } #sonderbutton { 	background: #508cb1; 	list-style: none; display: inline-block; } { 	display: flex; 	align-items: center; 	justify-content: center; }
    So hab ich das...

    - - - Aktualisiert - - -

    Was du nicht brauchst, wie z.B den Sonderbutton, kannst du einfach aus der CSS-Datei löschen!

Ähnliche Themen

  1. navigations leiste im headerbereich
    Von kogo99 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.04.2014, 20:17
  2. Navigations Leiste wie ?
    Von kintaro im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 18.10.2007, 21:47
  3. Hilfe mit Navigations CSS - IE klappt, Firefox/Opera nicht
    Von vandura im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 10.08.2006, 14:00
  4. Probleme bei der Darstellung meiner Webseite
    Von ollie im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 08.07.2005, 15:50
  5. Hallo! Was haltet ihr von meiner Webseite?
    Von BluPsMuPs im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 9
    Letzter Beitrag: 14.06.2005, 18:11

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •