Hallo,
Ich schreibe gerade eine Webseite in HTML und komm an einem Punkt einfach nicht weiter. Das ist meine Navigation:
Hier der dazugehörige 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
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
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>
<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:
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
Hallo
Ersetze mal
ul {
list-style-image: url(images/rumchataicon.jpg);
}
li {
padding-bottom: 30%;
}durch
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
Hallo,
Tausend Dank!!! Das war die Lösung
LG Luca