Ergebnis 1 bis 5 von 5

Thema: Navigation Listeneintrag mittig neben Bild

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

    Standard Navigation Listeneintrag mittig neben Bild

    Hallo,

    Ich schreibe gerade eine Webseite in HTML und komm an einem Punkt einfach nicht weiter. Das ist meine Navigation:
    nav.JPG

    Hier der dazugehörige Code:
    Code:
    ul {
        list-style-image: url(images/rumchataicon.jpg);
    }
    li{
        padding-bottom : 30%;
    }
    Die Frage ist jetzt: Wie schaffe ich es, dass die Navigationslinks also Startseite und Rezepte mittig vom Bild stehen?

    Danke im Voraus
    LG Luca
    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
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Navigation Listeneintrag mittig neben Bild

    Hallo

    Wie lautet der Link zu der Seite?

    Quellcodeschnipsel sind zur Problemlösung meist nicht geeignet. CSS-Angaben ohne das zugehörige HTML nützen nichts.

    Um Elemente auszurichten muss zunächst der HTML-Teil fehlerfrei erstellt werden.

    Zur Anordnung von Bild und Schrift eignet sich aktuell meist Flexbox am Besten.

    Gruss

    MrMurphy

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    28.01.2016
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigation Listeneintrag mittig neben Bild

    Hallo,
    erstmal Danke für die schnelle Antwort!
    Die Seite steht noch nicht Online. Ich schick dir jetzt mal den kompletten Quellcode
    Hier die index.html :
    HTML-Code:
    <html>
    <head>
    <title>Rum Chata</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="UTF-8">
    </head>
    <body>
    <header>
    <h1> <center>Rum Chata</center> </h1>
    <h1><center>xxxxxxx heißt sie herzlich wilkommen! Navigieren sie auf der linken Seite einfach für alle Informationen rund um Rum Chata! :-)</center></h1>
    </header>
    <nav>
    <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="rezepte.html">Rezepte</a></li>
    </ul>
    </nav>
    <aside>
    <h4><center>----NEWS----</center></h4>
    <hr></hr>
    <h5>Rum Chata unter den Top 5 in den USA!</h5>
    <hr></hr>
    <h5>Rum Chata überholt Martktführer Baileys!</h5>
    <hr></hr>
    <h5>Rum Chatas Youtube-Kanal steigt zum erfolgreichsten Kanal in der Spirituosenszene auf!</h5>
    <hr></hr>
    </aside>
    <section>
    <center><img src="images/rumchata.jpg" alt="Rum Chata" /></center>
    </section>
    </body>
    </html>
    Und hier hier die Style.css:

    Code:
    body{
        background-image: url(images/heading.jpg);
        background-repeat: repeat-x repeat-y;
    }
    header{
        background-color: white;;
        color: #947F57;
    }
    nav{
        background-color: black;
        float: left;
        color: white;
        width: 10%;
    }
    aside{
        float: right;
        width: 10%;
        background-color: white;
    }
    section{
    }
    ul {
        list-style-image: url(images/rumchataicon.jpg);
    }
    li{
        padding-bottom : 30%;
    }
    video{
        margin-bottom: 3%;
    }
    
    
    
    
    
    
    a:link{ 
        color: white;
    }
    a:visited{
        color: lightgrey;
    }
    a:hover{
        color: whitesmoke;
    }
    a:active{
        color: red;
    }
    LG Luca

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Navigation Listeneintrag mittig neben Bild

    Hallo

    Ersetze mal

    Code:
       ul {
          list-style-image: url(images/rumchataicon.jpg);
       }
       
       li {
          padding-bottom: 30%;
       }
    durch

    Code:
       ul {
          padding-left: 10px;
       }
       
       li {
          padding-bottom: 30%;
          display: flex;
          align-items: center;
       }
       li::before {
          content: url(images/rumchataicon.jpg);
          margin-right: 16px;
       }
    Gruss

    MrMurphy

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    28.01.2016
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigation Listeneintrag mittig neben Bild

    Hallo,

    Tausend Dank!!! Das war die Lösung

    LG Luca

Ähnliche Themen

  1. Text neben Bild in der Navigation
    Von Skateb im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 03.08.2012, 22:06
  2. Bild mittig in div ausrichten
    Von Kämpfer im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.11.2009, 17:20
  3. Bild links neben der URL
    Von Tobse im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 18.05.2009, 00:14
  4. Text neben Bild
    Von Neverdead im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.10.2007, 12:58
  5. Text neben Bild
    Von WHN im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 07.04.2005, 22:55

Stichworte

Berechtigungen

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