Hilfe bei meinem Projekt - diverse Fragen
- Ersteller Chizzo
- Erstellt am
basti1012
Senior HTML'ler
Das der Chrome da der beste bei sein soll ,habe ich auch so gehöhrt . Aber was gibt es den gegen Opera einzuwenden?? Ich bin ganz zufrieden damit .Opera ????
Bitte nicht!
Firefox ist brauchbar, aber umständlich.
Google Chrome ist da mit Abstand meiner Meinung nach der beste Browser für.
Es läuft richtig gut! :-) Ich bin ein ganzes Stück voran gekommen, die Navigation gefällt mir richtig gut aber jetzt hänge ich wieder an der ein oder anderen Sache.
1. Ich würde gerne neben Bild + Text auf der rechten Seite noch Content anbieten, beispielsweise ein Werbebanner. Es will mir aber beim besten Willen nicht gelingen, den Platzhalter oben rechts hinzubekommen. Welche elegante Lösung könnte ich hier anwenden?
2. Wenn der Text länger ist, als das Bild, möchte ich, dass er unter dem Bild weiterläuft und nicht einfach bündig weiter geht. Das löse ich wohl mit float, aber wie genau?
3. Bei meinem Dropdown-Menü ploppt es mit Verzögerung auf. Auch, wenn man mit dem Mauszeiger wieder weg geht, bleibt es noch kurz stehen. Wie bekomme ich das weg?
1. Ich würde gerne neben Bild + Text auf der rechten Seite noch Content anbieten, beispielsweise ein Werbebanner. Es will mir aber beim besten Willen nicht gelingen, den Platzhalter oben rechts hinzubekommen. Welche elegante Lösung könnte ich hier anwenden?
2. Wenn der Text länger ist, als das Bild, möchte ich, dass er unter dem Bild weiterläuft und nicht einfach bündig weiter geht. Das löse ich wohl mit float, aber wie genau?
3. Bei meinem Dropdown-Menü ploppt es mit Verzögerung auf. Auch, wenn man mit dem Mauszeiger wieder weg geht, bleibt es noch kurz stehen. Wie bekomme ich das weg?
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>
<div id="titelbild">
<img src="../img/Titelbild.jpg" alt="Titelbild">
</div>
<nav>
<ul>
<li> <a href="Startseite.html">Startseite</a></li>
<li tabindex="0"> <a href="Rezepte.html">Kochen</a>
<ul class="submenu">
<li tabindex="0"><a href="LowCarb.html">Low Carb</a></li>
<li tabindex="0"><a href="FettigeSachen.html">Fettige Sachen</a></li>
</ul>
</li>
<li> <a href="Startseite.html">Backen</a></li>
<li><a href="Startseite.html">Getränke</a></li>
<li> <a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
</header>
<div id="inhalt">
<div id="Linke Seite">
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept1.html"><img class="links" src="../img/Koch1.jpg" alt="Bildvonessen">
</a>
</div>
<figcaption>
<h2>Spaghetti Bolognese </h2>
<p> Diese Spaghetti Bolognese ist einfach das Highlight bei jedem Abendessen. Sowohl Kinder, als auch Erwachsene werden sie leben, denn sie schmeckt einfach unglaublich lecker! <a href="../html/Rezept1.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept2.html"><img class="links2" src="../img/Wrap1.jpg" alt="Bildvonessen2">
</a>
</div>
<figcaption>
<h2>Wraps mit Käsesauce</h2>
<p> Diese Wraps sind einfach der absolute Oberwahnsinn! Sie sind so locker zart, dass man mit ihnen kuscheln möchte! <a href="../html/Rezept2.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept3.html"><img src="../img/huhn123.jpg" alt="Bildvonessen3">
</a>
</div>
<figcaption>
<h2>Gebratenes Hühnchen</h2>
<p> In diesem Rezept verraten wir euch, wir ihr ein Hühnchen so unfassbar lecker zart braten könnt, dass ihr glaubt, ihr berührt reinste Seide. Doch außen ist es fantastisch knusprig und innen wunderbar saftig. Das leckerste Hühnchen, das ihr jemals gegessen haben werdet! <a href="../html/Rezept3.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
</div>
</div>
<div id="footer">
<footer><p> Eigentum von XXX / Das hier ist die Fußzeile</p></footer>
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
}
#titelbild img {
width: 100%;
max-width: 1200px;
vertical-align: bottom;
}
nav > ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid green;
border-left: none;
border-right: none;
font-family: Arial;
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;
color: green;
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 {
background-color: green;
color: white;
}
/* submenu navigation links */
nav .submenu {
position:absolute;
visibility: hidden;
width: 100%;
max-width: 398px;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* 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;
background-color: white;
border-right: 1px solid green;
border-left: 1px solid green;
border-top: 1px solid green;
}
body {
width: 100%;
max-width: 1200px;
padding: 5px;
margin:0 auto;
height:100%;
background-color: #000000;
}
#Bild1 img {
width: 400px;
margin: 5px;
}
#Bild2 img {
clear:both;
width: 400px;
margin: 5px;
}
p {
font-family: Arial;
font-size: 20px;
}
#inhalt {
background-color: white;
padding-top: 15px;
padding-left: 15px;
min-height: 840px;
}
nav {
background-color: white;
}
.gericht {
margin: 0;
padding: 0;
display: flex;
width: 75%;
}
.gericht .cimg {
flex: 0 2 400px;
height: auto;
}
.gericht figcaption {
flex: 3 2 600px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.gericht img {
width: 100%;
height: auto;
}
figure a {
text-decoration: none;
color:blue;
}
figure a:visited {
color: blue;
}
figure a:hover {
text-decoration: underline;
}
#Werbung img{
align:right;
}
#footer {
background-color: yellow;
position:absolute;
width: 100%;
max-width: 1200px;
margin:0 auto;
color: blue;
}Anhänge
basti1012
Senior HTML'ler
Das verzerrt leider alles jetzt... ich poste den Code mal mit, falls ich irgendwo einen Fehler gemacht habe...
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>
<div id="titelbild">
<img src="../img/Titelbild.jpg" alt="Titelbild">
</div>
<nav>
<ul>
<li> <a href="Startseite.html">Startseite</a></li>
<li tabindex="0"> <a href="Rezepte.html">Kochen</a>
<ul class="submenu">
<li tabindex="0"><a href="LowCarb.html">Low Carb</a></li>
<li tabindex="0"><a href="FettigeSachen.html">Fettige Sachen</a></li>
</ul>
</li>
<li> <a href="Startseite.html">Backen</a></li>
<li><a href="Startseite.html">Getränke</a></li>
<li> <a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
</header>
<div id="inhalt">
<div id="cgerichte">
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept1.html"><img class="links" src="../img/Koch1.jpg" alt="Bildvonessen">
</a>
</div>
<figcaption>
<h2>Spaghetti Bolognese </h2>
<p> Diese Spaghetti Bolognese ist einfach das Highlight bei jedem Abendessen. Sowohl Kinder, als auch Erwachsene werden sie leben, denn sie schmeckt einfach unglaublich lecker! <a href="../html/Rezept1.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept2.html"><img class="links2" src="../img/Wrap1.jpg" alt="Bildvonessen2">
</a>
</div>
<figcaption>
<h2>Wraps mit Käsesauce</h2>
<p> Diese Wraps sind einfach der absolute Oberwahnsinn! Sie sind so locker zart, dass man mit ihnen kuscheln möchte! <a href="../html/Rezept2.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
</div>
<aside id="banner-rechts">
<img src="../img/Werbebanner.png">
</aside>
</div>
<figure class="gericht">
<div class="cimg">
<a href="../html/Rezept3.html"><img src="../img/huhn123.jpg" alt="Bildvonessen3">
</a>
</div>
<figcaption>
<h2>Gebratenes Hühnchen</h2>
<p> In diesem super tollen und super einfachem Rezept verraten wir euch, wir ihr ein Hühnchen so unfassbar lecker zart braten könnt, dass ihr glaubt, ihr berührt reinste Seide. Doch außen ist es fantastisch knusprig und innen wunderbar saftig. Das leckerste Hühnchen, das ihr jemals gegessen haben werdet! Lasst euch verzaubern und probiert noch heute dieses mega tolle Hühnchen-Rezept aus, denn so etwas gutes werdet ihr wahrscheinlich nie wieder essen! <a href="../html/Rezept3.html">Hier gehts zum Rezept...</a>
</p>
</figcaption>
</figure>
</div>
</div>
<div id="footer">
<footer><p> Eigentum von XXX / Das hier ist die Fußzeile</p></footer>
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
}
#titelbild img {
width: 100%;
max-width: 1200px;
vertical-align: bottom;
}
nav > ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid green;
border-left: none;
border-right: none;
font-family: Arial;
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;
color: green;
}
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 {
background-color: green;
color: white;
}
/* submenu navigation links */
nav .submenu {
position:absolute;
visibility: hidden;
width: 100%;
max-width: 238px;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* 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;
background-color: white;
border-right: 1px solid green;
border-left: 1px solid green;
border-top: 1px solid green;
}
body {
width: 100%;
max-width: 1200px;
padding: 5px;
margin:0 auto;
height:100%;
background-color: #000000;
}
p {
font-family: Arial;
font-size: 20px;
}
#inhalt {
background-color: white;
padding-top: 15px;
padding-left: 15px;
}
nav {
background-color: white;
}
.gericht {
margin: 0;
padding: 0;
clear: both;
margin-top: 1em;
}
.gericht:first-of-type {
margin-top: 0;
}
.gericht>img {
width: 400px;
height: auto;
margin-right: 0.5em;
float: left;
}
#inhalt {
display: flex;
}
#cgerichte {
flex: 4;
}
aside#banner-rechts {
flex: 1;
background-color: lightgrey;
}
figure a {
text-decoration: none;
color:blue;
}
figure a:visited {
color: blue;
}
figure a:hover {
text-decoration: underline;
}
#Werbung img{
align:right;
}
#footer {
background-color: yellow;
position:absolute;
width: 100%;
max-width: 1200px;
margin:0 auto;
color: blue;
}Anhänge
Vielen Dank, so langsam geht das doch alles in die richtige Richtung! :)
Jetzt habe ich folgendes Problem:
Das Submenü sieht bei mir am PC im Firefox super aus. Im Internet Explorer öffnet sich da allerdings gar kein Menü beim hovern und im Firefox am Laptop sind die Submenü-Spalten viel zu lang. Ich habe das mit Pixel gelöst, was aber scheinbar nur in einem Browser funktioniert. Wie passe ich die Größe an die Größe des Elternelementes an? Und warum öffnet der IE es gar nicht?
LG
Jetzt habe ich folgendes Problem:
Das Submenü sieht bei mir am PC im Firefox super aus. Im Internet Explorer öffnet sich da allerdings gar kein Menü beim hovern und im Firefox am Laptop sind die Submenü-Spalten viel zu lang. Ich habe das mit Pixel gelöst, was aber scheinbar nur in einem Browser funktioniert. Wie passe ich die Größe an die Größe des Elternelementes an? Und warum öffnet der IE es gar nicht?
LG
Anhänge
Zuletzt bearbeitet:
So funktioniert es dann bei mir leider sowohl im IE, als auch im Firefox nicht mehr... :-(
Hmm, wo ist mein Fehler?
CSS:
nav>ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid green;
border-left: none;
border-right: none;
font-family: Arial;
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;
color: green;
}
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 {
background-color: green;
color: white;
}
/* submenu navigation links */
nav > ul > li {
position: relative;
}
nav .submenu {
position: absolute;
visibility: hidden;
width: 100%;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu, {
visibility: visible;
height: auto;
background-color: white;
border-right: 1px solid green;
border-left: 1px solid green;
border-top: 1px solid green;
}Ahhh, vielen Dank!
Was bedeutet der Stern hinter body? Wenn ich deinen Code hier 1:1 übernehme, funktioniert es. Füge ich den Befehl ich meinen normalen Body-Bereich (Ohne Stern) ein, verschiebt sich alles ein klein wenig, der Rand steht aber immer noch über.
Was bedeutet der Stern hinter body? Wenn ich deinen Code hier 1:1 übernehme, funktioniert es. Füge ich den Befehl ich meinen normalen Body-Bereich (Ohne Stern) ein, verschiebt sich alles ein klein wenig, der Rand steht aber immer noch über.
Vielen Dank!
Nächstes Problem: Ich habe jetzt eine Weile mit classes und divs rumgespielt, aber ich bekomme es einfach nicht hin. Wenn ich jetzt unter jedes Rezept ein Trennlinie haben möchte - wie mache ich das am elegantesten? Und es soll immer unter dem Rezept sein - nicht nur unter dem Bild oder Text, sondern komplett...
Nächstes Problem: Ich habe jetzt eine Weile mit classes und divs rumgespielt, aber ich bekomme es einfach nicht hin. Wenn ich jetzt unter jedes Rezept ein Trennlinie haben möchte - wie mache ich das am elegantesten? Und es soll immer unter dem Rezept sein - nicht nur unter dem Bild oder Text, sondern komplett...
Das hatte ich zuerst versucht, leider erhalte ich dann nur unter dem Text eine Linie.
Ich habe es jetzt mit border-top und first-child gelöst. Ich denke aber, ich werde auf das floating verzichten. Das macht alles nur kompliziert und ist denke ich auch gar nicht so wichtig erstmal. Auch sieht die Seite auf kleineren Display-Größen sehr verzogen aus, wenn ich floate...
PS: Bei hr wurde die Linie, wenn ich color: green eingestellt habe leider schwarz-grün...
PS: Bei hr wurde die Linie, wenn ich color: green eingestellt habe leider schwarz-grün...
Was habe ich hier verstellt? Mein Dropdown-Menü wir mir beim hovern nicht mehr angezeigt. Stelle ich die Visibility auf Visible ein, wird es angezeigt. Nicht schön, aber man sieht es. Bei hidden sieht man leider auch beim hovern nichts...
Edit: Hat sich erledigt, danke! Habe ein </li> im html zu früh gesetzt... 5 Zeichen und eine 3/4 Stunde weg :-D
Edit: Hat sich erledigt, danke! Habe ein </li> im html zu früh gesetzt... 5 Zeichen und eine 3/4 Stunde weg :-D
CSS:
nav>ul {
width: 100%;
max-width: 1200px;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
width: 100%;
max-width: 1200px;
border: 1px solid #79B3E5;
border-left: none;
border-right: none;
font-family: Arial;
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;
color: #79B3E5;
}
nav li[aria-current] a {
background-color: #79B3E5;
color: white;
font-family: Arial;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
background-color: #79B3E5;
color: white;
}
/* submenu navigation links */
nav > ul > li {
position: relative;
}
nav .submenu {
position: absolute;
visibility: hidden;
width: 100%;
height: 0;
z-index: 1000;
}
nav .submenu li {
display: block;
border-top: none;
/* width: 15em; */
}
/** Show the submenu on hover, focus **/
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
visibility: visible;
height: auto;
background-color: green;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
}
HTML:
<li aria-current="Seite1" tabindex="0"> <a href="Seite1.html">Seite1</a>
<ul class="submenu">
<li tabindex="0"><a href="Seite1b.html">Seite1b</a></li>
<li tabindex="0"><a href="Seite1c.html">Seite1c</a></li>
</ul>
</li>Und wie läuft das mit dem Dropdown-Menü? Der verändert mir nämlich den ganzen Style, wenn ich hier ein aria-current einsetze...