Hilfe bei meinem Projekt - diverse Fragen

basti1012 · 29 Mai 2018

Die entwicklertools vom Browser ( Opera firefox ) die haben so eine Einstellung.

Aaron3219 · 29 Mai 2018

Opera, Firefox?

Opera ????

Bitte nicht!

Firefox ist brauchbar, aber umständlich.

Google Chrome ist da mit Abstand meiner Meinung nach der beste Browser für.

basti1012 · 29 Mai 2018

Aaron3219 schrieb:
Opera ????
Bitte nicht!
Firefox ist brauchbar, aber umständlich.
Google Chrome ist da mit Abstand meiner Meinung nach der beste Browser für.

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 .

Chizzo · 29 Mai 2018

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?

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;
}

basti1012 · 29 Mai 2018

Chizzo schrieb:
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?

Das liegt hier dran

Code:

    transition: all .25s ease-in;

Einfach die Zeile löschen .

Chizzo · 29 Mai 2018

So ungefähr soll das aussehen. Ich bekomme das mit float leider nicht hin. Wo muss das float-Attribut denn hin?

Chizzo · 29 Mai 2018

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;
}

basti1012 · 29 Mai 2018

Er hat auch 2 geschlossene </div> zuviel

Chizzo · 30 Mai 2018

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

Chizzo · 30 Mai 2018

Leider nicht ganz. Es ist wenige Pixel zu breit?

Chizzo · 30 Mai 2018

Sempervivum schrieb:
Offenbar mag der IE :focus-within nicht. Wenn ich es in dem betr. Selektor lösche, funktioniert es.

So funktioniert es dann bei mir leider sowohl im IE, als auch im Firefox nicht mehr... :-(

Chizzo · 30 Mai 2018

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;


        }

Chizzo · 30 Mai 2018

Ahhh, vielen Dank!

Sempervivum schrieb:
Das liegt daran, dass sich die Breite der Ränder dazu addieren. Dies kann durch folgendes CSS unterbunden werden:

Code:

body * { box-sizing: border-box; }

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.

Chizzo · 30 Mai 2018

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...

Chizzo · 30 Mai 2018

Sempervivum schrieb:
Eine Trennlinie kannst Du, wie anfangs bei deinem Menü, mit einem border anlegen.

Dann besteht der erste Schritt darin, das richtige Element ausfindig zu machen, das sowohl das Bild als auch den Text einschließt. Bei der letzten Version wäre das das figure-Element mit der Klasse "gericht".

Das hatte ich zuerst versucht, leider erhalte ich dann nur unter dem Text eine Linie.

Sailor · 30 Mai 2018

Funktioniert vielleicht
hr {
clear: both;
}
?

Chizzo · 30 Mai 2018

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...

Chizzo · 30 Mai 2018

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

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;


        }

Chizzo · 31 Mai 2018

Wem gebe ich das aria-current Attribut, wenn ich mich auf einer Unterseite befinde? Dem Elternelement, oder?

Chizzo · 31 Mai 2018

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...

Hilfe bei meinem Projekt - diverse Fragen

Senior HTML'ler

Senior HTML'ler

Senior HTML'ler

Mitglied

Anhänge

Senior HTML'ler

Mitglied

Mitglied

Anhänge

Senior HTML'ler

Mitglied

Anhänge

Mitglied

Anhänge

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Aktives Mitglied

Mitglied

Mitglied

Mitglied

Mitglied