Beiträge von Emess

Emess · 5. Januar 2024

Habs doch noch mal in codepen getetste

Emess · 5. Januar 2024

Den schließenden </body> im Script werden wir uns sparen können?

Ich teste das Morgen mal.

Erst mal vielen Dank und gute Nacht

Emess · 5. Januar 2024

Zitat von nextuser

Ja ist auch logisch.

Wenn du in der mobilen Ansicht auf den Burger klickst, wird die Funktion "slideToggle" aktiviert und setzt nach der Animation "menu-list" auf "display:block".
Bei erneutem Drücken wird es auf "display:none" gesetzt.
Und dieser Zustand wird von dir nirgendwo geändert, daher ist es beim Wechsel auf Desktop-Ansicht immer noch unsichtbar.

Du hast vergessen zu beachten, das die Funktion "slideToggle" den Wert für "display" als Inline-Style setzt, also mit der höchsten Priorität.
Daher greifen deine anderen Angaben im CSS an dieser Stelle nicht mehr.

Alles anzeigen

Für dich mag das ja logisch sein.

Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.

Was muss ich in die CSS schreiben? und vielleicht kannst du auch mit kurzen Worten erklären wie die CSS in diesem Falle das Script beeinflusst?

Emess · 5. Januar 2024

Hallo es geht noch mal um diese Navbar.

Hier bekomme ich eine Mobilansicht allerdings ohne Funktion.

Also habe ich auf Coedpen (Link ganz unten) die Original so angepasst wie sie passt. Dann gehe ich in die Mobilansicht Burger menue einwandfrei.

Gehe ich zurück auf Fullscreen sind die Links weg und nur noch die mobile Ansicht geht.

Zum Verständnis.

HTML

<!--====== Header Section Start ======-->
    
        <nav class="navigation">

            <!-- Logo -->
            <div class="logo">
                <h1>LOGO</h1>
            </div>
            
            <!-- Navigation -->
            <ul class="menu-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#portfolio">Project</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="humbarger">
                <div class="bar"></div>
                <div class="bar2 bar"></div>
                <div class="bar"></div>
            </div>
        </nav>

Alles anzeigen

CSS

*{
  margin: 0;
  padding: 0;
    box-sizing: border-box;
}

html,body{
  min-width: 100%;
  overflow-x: hidden;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  min-height: 12vh;
  min-width: 100%;
  z-index: 10;
  background: #0f1423;
  border-bottom: 2px solid #0c2d48;
}

.navigation .logo{
  margin-left: 20px;
}
.navigation .logo h1{
  color: #b1d4e0;
  font-size: 30px;
  line-height: 38px;
}
.navigation .menu-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 45%;
  margin: auto 20px auto 0;
}

.navigation .humbarger {
  margin-right: 20px;
  display: none;
 }
 
.navigation .humbarger .bar{
  width: 30px;
  height: 2px;
  margin: 7px;
  background: #b1d4e0;
 }

.navigation .menu-list li a {
  color: #b1d4e0;
  font-size: 1.25rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 1s ease, border 1s ease;
  text-decoration: none;
}


/* ====================
  Responsive Section
=======================*/

/* Tablet desktop :768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
 .navigation .menu-list {
    width: 60%;
  }

 .navigation .menu-list li a{
    font-size: 1rem;
  }

}

/* Large Mobile :480px. */

@media only screen and (max-width: 767px) {

 .navigation .menu-list {
    position: absolute;
    top: 12vh;
    min-width: 100%;
    background: rgba(15, 20, 35, 0.99);
    text-align: center;
    display: none;
  }
 .navigation .menu-list li {
    display: block;
  }

.navigation .menu-list li a {
    display: block;
    padding: 20px;
    transition: color 1s ease, padding 1s ease, background-color 1s ease;

  }

 .navigation .menu-list li a:hover{
    color: #b1d4e0;
    padding-left: 30px;
    background: rgba(177, 212, 224, 0.2);
  }


 .navigation .humbarger{
    display: block;
  }

Alles anzeigen

JavaScript

$(document).ready(function(){

    //hamburger Toggle
    $('.humbarger').click(function(event){
    $('.menu-list').slideToggle(500);
    event.preventDefault();
    
    $('.menu-list li a').click(function(event) {
        if ($(window).width() < 768) {
          $('.menu-list').slideUp(500);
          event.preventDefault(); 
        }
      });
});

Alles anzeigen

Hier könnt ihr es auf codepen selbst austesten. Ich test schone einige Tage. Leider erfolglos.

Responsive navigation bar with logo

...

codepen.io

Emess · 3. Januar 2024

Danke!

Emess · 2. Januar 2024

Punkt 2 habe ich hin bekommen Google hats verraten

Emess · 2. Januar 2024

1. Habe hier eine schönes Navigation Doch wenn ich "hover" verändern sich alle Links.

2. Das Logo links habe ich so scaliert damit es hübsch aussieht (logo1.png). Das original (logo.png) bekomme ich nicht eingepasst, weil ich nicht weiß wie ich es ihm sagen soll, dass es sich an der Breite der Navigation anpassen soll.

Hier zu sehen

Emess · 25. Dezember 2023

Hab den Fehler gefunden

Habe falsche reihen folge gehabt

Habs noch ausgerichtet und fertig danke

Emess · 25. Dezember 2023

Das hat leider nichts gebracht.

die Abmessungen des Bildes sind eigentlich 350x236

bs.jpeg

Emess · 25. Dezember 2023

bitte

https://my2.emess62.de/

Emess · 25. Dezember 2023

Ich lade das mal auf eine sub domain. Augenblick!

Emess · 25. Dezember 2023

Alles mist so kann es ja nicht gehen

so ist das bild da aber viel zu groß und nicht da wo es laut css sein soll.

CSS

  .slider .caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    background-color: rgba(20,20,20,0.2);
    height: 100%;
    color: #fff;
    cursor: e-resize;
    padding: 4em 0 0 2em;
  }



  .slider .item {
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: cover;
    height: 100vh;
  }

  

  .slider .item-first {
    background-image: url(../images/slider/slider1.jpg);
  }

  .slider .item-first .img{
    /* background-image: url(../images/weihn.png); */
    position: absolute;
    top: 15%;
    left: 80%;
    transform: translate(-80%, -25%);
    z-index: 999;
  }

  .slider .item-second {
    background-image: url(../images/slider/Salat.jpg);
  }

  .slider .item-third {
    background-image: url(../images/slider/pizza.jpg);
  }

  .slider .item-fourth {
    background-image: url(../images/slider/slider-image3.jpg);
  }

Alles anzeigen

HTML

  <section id="home" class="slider" data-stellar-background-ratio="0.5">
          <div class="row">
                    <div class="owl-carousel owl-theme">
                         <div class="item item-first">
                           
                                <img class="slider" src="images/weihn.png" class="img-responsive" alt="">

                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Restaurant</h3>
                                             <h1>Unsere Mission: Eine unvergessliche Zeit für Sie!</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>                                          
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-second">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Alles Frisch</h3>
                                             <h1>Wir wollen Ihnen höchte Qualität bieten!</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-third">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Nicht verpassen</h3>
                                             <h1>Pizzatag jedem Montag alle Pizzen zu 6,00€</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-fourth">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Bei uns für Sie</h3>
                                             <h1>Die besten Zutaten für Ihren Gaumen</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>

          </div>
     </section>

Alles anzeigen

Emess · 25. Dezember 2023

Habe hier ein kleines Problem. Möchte dass ein Bild vor dem Owl-Carousel platzieren. was mache ich wohl falsch?

das bild habe ich wie die Bilder für den Slider per css eingebunden. aber ohne erfolg

HTML

 <section id="home" class="slider" data-stellar-background-ratio="0.5">
          <div class="row">
                    <div class="owl-carousel owl-theme"> 
                         <div class="item item-first">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Restaurant</h3>
                                             <h1>Unsere Mission: Eine unvergessliche Zeit für Sie!</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>                                          
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-second">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Alles Frisch</h3>
                                             <h1>Wir wollen Ihnen höchte Qualität bieten!</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-third">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Nicht verpassen</h3>
                                             <h1>Pizzatag jedem Montag alle Pizzen zu 6,00€</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>

                         <div class="item item-fourth">
                              <div class="caption">
                                   <div class="container">
                                        <div class="col-md-8 col-sm-12">
                                             <h3>Bei uns für Sie</h3>
                                             <h1>Die besten Zutaten für Ihren Gaumen</h1>
                                             <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>

          </div>
     </section>

Alles anzeigen

.slider .img

CSS

.slider .owl-dots {
    position: absolute;
    top: 50%;
    right: 2em;
    justify-content: center;
  }

  .owl-theme .owl-dots .owl-dot {
    display: block;
  }

  .owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 7px 10px;
    border: 2px solid #c17d18;
    background: transparent;
    display: block;
    backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
  }

  .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #eb3e3e;
    border-color: transparent;
  }
  

  .slider .caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    background-color: rgba(20,20,20,0.2);
    height: 100%;
    color: #fff;
    cursor: e-resize;
    padding: 4em 0 0 2em;
  }



  .slider .item {
    background-position: inherit;
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: cover;
    height: 100vh;
  

  .slider .img{
    background-image: url(../images/weihn.png);
    position: absolute;
    top: 15%;
    left: 80%;
    transform: translate(-80%, -25%);
    z-index: 999;
  }

  .slider .item-first {
    background-image: url(../images/slider/slider1.jpg);
  }

  .slider .item-second {
    background-image: url(../images/slider/Salat.jpg);
  }

  .slider .item-third {
    background-image: url(../images/slider/pizza.jpg);
  }

  .slider .item-fourth {
    background-image: url(../images/slider/slider-image3.jpg);
  }

  .slider .item-second .section-btn {
    background: #292929;
  }

  .slider .item-second .section-btn:hover {
    background: #ffffff;
  }

  .slider .item-third .section-btn {
    background: transparent;
    border: 1px solid #ffffff;
  }

  .slider .item-third .section-btn:hover,
  .slider .item-third .section-btn:focus {
    background: #ce3232;
    border-color: transparent;
    color: #ffffff;
  }

Alles anzeigen

Emess · 25. Dezember 2023

Da habe ich zwischen Zeitlich zurück gestellt weil boxen glaube ich zumindest mit row grid in meinem Fall besser sind

Das mit der Überschrift habe ich jetzt im Griff.

Hier ist die Vorab- Seite

emess62.de

Emess · 26. November 2023

Zitat von MrMurphy

Wie willst du die Überschrift ausrichten?

egal. Hauptsache in der section auszurichten oben, rechts oder links egal.

Emess · 26. November 2023

So ist es jetzt

section2.jpeg

Das ist der aktuelle code

CSS

#my-new-section {
    flex:1;
    flex-direction: column;
    background-color: lightsalmon;
    border: 20px solid blue;
 
}
#my-new-section>h1 {
    display: flex;
    color: red;
    justify-content:start;
    align-items:start;
    /* margin: 0rem 0; */

}

#my-new-section .box1 {
    display:flex; 
    width: 250px;
    height: 80px;
    background-color: pink;
}

#my-new-section>.box1:nth-of-type(7n + 2){
    background-color: green;
  
}
#my-new-section>.box1:nth-of-type(7n + 3){
    background-color: lightblue;
}
#my-new-section>.box1:nth-of-type(7n + 4){
    background-color: yellowgreen;
}
#my-new-section>.box1:nth-of-type(7n + 5){
    background-color: lime;
}
#my-new-section>.box1:nth-of-type(7n + 6){
    background-color: gold;
}
#my-new-section>.box1:nth-of-type(7n + 7){
    background-color: mediumseagreen;
    color: #fff;
}
.horizontal {
    display: flex;
    gap: 10px;
    row-gap: 30px;
}

Alles anzeigen

HTML

<section id="my-new-section">

  <h1>Übung</h1>
  <div class="horizontal">
<div class="box1">Box1</div>
<div class="box1">Box2</div>
      </div>
<div class="box1">Box3</div>
<div class="box1">Box4</div>
      <div class="horizontal">
<div class="box1">Box5</div>
<div class="box1">Box6</div>
<div class="box1">Box7</div>
  </div>
</section>

Alles anzeigen

Plan wäre die h1 in der section auszurichten oben, rechts oder links egal. Deshalb habe ich ihr display-flex mitgegeben. Ob das richtig war ist fraglich.

Wie bekomme ich horizontal Abstand zwischen die boxen? mit row-gab hatte ich kein erfolg.

PS. was die Rechtschreibfehler angeht, hab ich hier eine Sau-Teure mobile Wokstation mit sehr bescheidenden Tastatur.

Emess · 26. November 2023

Zitat von m.scatello

Eine schöne Seite, auf der man mit Flex testen und sofort sieht, welche Auswirkungen Änderungen haben: https://the-echoplex.net/flexyboxes/

Kannte ich schon. Habe aber erst jetzt verstanden wie man die Seite gebraucht.

@Sempervivum

Also vergesse ich meine <main> Bedenken und mach erst mal mit Post #19 weiter.

Emess · 26. November 2023

Zitat von MrMurphy
Ich weiß auch nicht was ich von
Code
#my-new.section
halten soll.

Brauchst du auch nicht wenn du von Anfang an liest weißt du, dass s sich nur um einen Selbsttest handel die könnte auch #lilakuh-section heißen.

Ich möchte die Seite gerne so gestalten, wenn ich was hinzufügen will z.B. Modal, Gebrauchsanleitung, Rezept etc. hinzu fügen will, ich nicht jedesmal mein bis hierher hart erarbeitetes CSS zerschieße..

Zitat von MrMurphy

Du benutzt das CSS falsch.

das ist absolut möglich. Ich versuche ja gerade das Grundlegend zu lernen.

Zitat von MrMurphy

Außerdem solltest du mehr auf Tipfehler / Rechtschreibfehler achten.

Was ist an

Zitat von MrMurphy

Code justify-content: left;

falsch?

Emess · 26. November 2023

Zitat

Gib doch mal ein oder zwei Beispiele wo Du meinst, dass es nicht geht.

Auf dem screenshot in Post #18 habe ich festgestellt, dass sich main>section>h1 scheinbar über die #my-new-section>h1 hinweg setzt.

Ich dachte das wäre das Problem.?

Die <h1> lässt sich ums verecken nicht auf #my-new.section ausrichten

Das bewirkt nichts. Und ich versteh das nicht.

CSS

#my-new-section>h1 {
    margin-top: 10px;
    text-align: left;
    
    /* margin: 1rem 0; */

}

Emess · 25. November 2023

Mir ist gerade ein Grundsätzliche Problem aufgefallen

Um jede einzelne Section einzeln behandeln zu können habe ich folgendes Problem ausgemacht .

Da fängt schon am Anfang an. Und zwar hier.

HTML

<main>
    <header>
    <section>
        <h1>Flexboxprojekt</h1>
        <p>Hier wird gerade renoviert<br>also bissje Geduld</p>
    </section>
        <img src="img/kasper.png">
    </header>

Und zwar umschließt <main> dierekt nach <nav> die gesamte Seite bis vor den <footer>

Dieses main beeinflusst demzufolge alles darin enthaltene.

Hier die meiner Meinung nach böse css

CSS

{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html, body{

    height: 100%;  
    background-color: blue;
}

#brand
{
    margin: 0 1rem;
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
}

#menu
{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0a0909;
    color: white;
}

#menu>ul
{
    display: flex;
    background-color: #0a0909;
    height: 100%;
}

#menu>ul>li
{
    padding: 0 1rem;
    list-style: none;
    border-bottom: 4px solid transparent;
    display: flex;
    align-items: center;
}

#menu>ul>li:hover
{
    border-color: purple;
}

#menu>ul>li>a
{
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
    color: white;
}

#menu>button
{
    display: none;
    justify-content: space-between;
    flex-direction: column;
    width: 30px;
    height: 23px;
    background: none;
    border: none;
    cursor: pointer;
}

#menu>button>span
{
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
}

main>header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 80px);
    background-color: black;
}
main>header>section
{
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
}
main>header>section>h1
{
   
   color: darkkhaki;
   margin-bottom: 2rem;
}

main>header>section>p
{
   font-size: 2rem;
   color: bisque;
}

main>header>img
{
    min-width: 200px;
    max-height: 100%;
    margin-left: 1rem;
}

main>section
{
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main>section>h1
{
    margin: 2rem 0;
   
}
@media only screen and (max-width: 950px)
{
    #brand
    {
        margin-left: 1rem;
    }
    #menu>ul
    {
        position: absolute;
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        top: 80px;
    }
    #menu>ul.active
    {
        display: flex;
    }
    #menu>ul>li
    {
        padding: 1rem 0;
    }
    #menu>button
    {
        display: flex;
        margin-right: 1rem;
    }

    main>header
    {
        flex-direction: column;
        justify-content: space-around;
    }
    main>header>section
    {
        flex-grow: 0;
        order: 1;
    }
    main>header>img
    {
        max-width: 75%;
        min-height: 40%;
        margin: 0;
    }

    main>header>section>h1
    {
        font-size:1.2em ;
        color: darkkhaki;
        margin-bottom: 2rem;
    }

    main>header>section>p
    {
        font-size: 1.5em;
        color: bisque;
 
    }

}

Alles anzeigen

Mein Idee wäre die main komplett zu entfernen und dem Header eine id zb. #kopf. Also <header id="kopf">

Kannst das bestätigen

Ich glaube das ist Ursache vieler Probleme

Beiträge von Emess

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Schöne Navigation aber ein Hover- und Logo-Problem

Schöne Navigation aber ein Hover- und Logo-Problem

Schöne Navigation aber ein Hover- und Logo-Problem

Bild vor Owl-Carousell

Bild vor Owl-Carousell

Bild vor Owl-Carousell

Bild vor Owl-Carousell

Bild vor Owl-Carousell

Bild vor Owl-Carousell

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section