Hallo,
bisher kam ich wirklich besser voran als ich dachte. Ich weiss, es ist noch nicht viel, aber es ist schon mal ein Anfang. Nun stoße ich (Und Google) allerdings bereits an die Grenzen unseres Könnens. Ich poste mal die HTML- und CSS-Code und stelle darunter die Fragen.
-----------------------
Meine Fragen bis hierher:
1. Ich möchte in meiner Navigationsleiste, dass zwischen den Seiten ein Trennungsstrich ist. Mit Border-Right ist leider auch rechts der letzten Seite ein Trennungsstrich. Wie bekomme ich das gelöst?
2. Im Inhalt bekomme ich mit Padding-Left: 10px den Inhalt zwar 10 px vom linken Rand weg, aber leider ragt die ganze Box dann auch 10 px aus dem rechten Rand raus. Mit width: 990 px bekomme ich das zwar optisch gelöst - aber ist das auch elegant? Wahrscheinlich ja nicht^^ Was kann ich hier machen?
3. Ich möchte, dass mein Drop-Down-Menü genau die gleiche Breite hat, wie die "Eltern". Wie bekomme ich das hin?
Vielen Dank im Voraus!
bisher kam ich wirklich besser voran als ich dachte. Ich weiss, es ist noch nicht viel, aber es ist schon mal ein Anfang. Nun stoße ich (Und Google) allerdings bereits an die Grenzen unseres Könnens. Ich poste mal die HTML- und CSS-Code und stelle darunter die Fragen.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koch und Back</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<img src="../img/Titelbild.jpeg" width="1000px" height="400px" </img>
<nav>
<ul>
<li> <a href="Startseite.html">Startseite</a></li>
<li tabindex="0"> <a href="Rezepte.html">Rezepte</a>
<ul class="submenu">
<li tabindex="0"><a href="Low Carb.html">Low Carb</a></li>
<li tabindex="0"><a href="Fettige Sachen.html">Fettige Sachen</a></li>
</ul>
</li>
<li> <a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
</header>
<div id="inhalt">
<p>Hier kommt mal der Inhalt rein..lalalal alhsflasdhfldsahfkla shfdgfsd gsdgsdgsdgsdgsdgsdfkasdjfhasd kljfhe4wi9f hasfhsadopfhadsofhadsfhasjld.</p>
<p> halleluja</p>
<p> halleluja</p>
<p> halleluja</p>
<p><img src="../img/Koch1.jpg" width="500" heigth="300" alt="Bildvonessen"</img></p>
</div>
</div>
<footer></footer>
</body>
</html>
Code:
nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav ul {
margin-top: -5px;
margin-bottom: -20px;
}
nav li {
border-right-width: 1px;
border-right-color: black;
border-right-style: solid;
font-family: Arial;
width: 200px;
margin: 0.5em;
padding: 0;
font-size: 1.5rem;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav > ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 0 5px 10px white inset;
color: black;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
/* submenu navigation links */
nav .submenu {
width: 500px;
position:absolute;
visibility: hidden;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu,
nav li:focus-within .submenu {
visibility: visible;
height: auto;
}
body {
padding:50px;
border: 2px;
margin:0 auto;
height:100%;
background-color: grey;
}
p {
font-family: impact;
font-size: 20px;
}
h1 {
width: 1000px;
background-color: green;
}
#inhalt {
width: 990px;
background-color: white;
padding-left: 10px;
}
nav {
width: 1000px;
background-color: white;
}-----------------------
Meine Fragen bis hierher:
1. Ich möchte in meiner Navigationsleiste, dass zwischen den Seiten ein Trennungsstrich ist. Mit Border-Right ist leider auch rechts der letzten Seite ein Trennungsstrich. Wie bekomme ich das gelöst?
2. Im Inhalt bekomme ich mit Padding-Left: 10px den Inhalt zwar 10 px vom linken Rand weg, aber leider ragt die ganze Box dann auch 10 px aus dem rechten Rand raus. Mit width: 990 px bekomme ich das zwar optisch gelöst - aber ist das auch elegant? Wahrscheinlich ja nicht^^ Was kann ich hier machen?
3. Ich möchte, dass mein Drop-Down-Menü genau die gleiche Breite hat, wie die "Eltern". Wie bekomme ich das hin?
Vielen Dank im Voraus!
