Beiträge von Emess

Ich finde deinen Code echt super, doch ich da noch Fragen. Ich schau mir den jetzt schon seit Tagen an und hab auch mit rum gespielt.

footer
{
    color: wheat;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    font-family: "Arial, sans-serif";
    background-color: rgb(74, 71, 71);
}
footer>section
{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    margin: 2rem;
    text-align: center;
    flex-basis: 0;
}
footer>section>h4
{
    font-size: 2rem;
    border-width: 1px 0 1px 0;
    border-style: solid;
    width: 100%;
    padding: 0.5rem 0;
    margin-bottom: 2rem;
}

das ist das grundsätzliche Footerstyle. Doch wieso flex-direction: column;

Müsste die 4 section dann nicht untereinander stehen

Welchen vorteil hat der Html Tag address.

<section class="hours">
        <h4>Öffnungszeiten</h4>
        <div>
            <p>Montag <span>17:00 - 22:00</span></p>
            <p>Dienstag <span>Ruhetag</span></p>
            <p>Mittwoch <span>17:00 - 22:00</span></p>
            <p>Donnerstag <span>17:00 - 22:00</span></p>
            <p>Freitag <span>17:00 - 22:00</span></p>
            <p>Samstag <span>17:00 - 22:00</span></p>
            <p>Sonntag <span>17:00 - 22:00</span></p>
        </div>
    </section>
    <section>
        <p>
            Am 3. Samstag eines Monats bleibt die Walachei geschlossen.<br>
            Wir bitten um euer Verständnis
        </p>
        <p>www.walachei-spachbrücken.de</p>
    </section>
</footer>

Wieso ordnet sich die letzte section mittig unten an?

footer>section:last-of-type Das ist der unterster Flexcontainer

first-of- und last -of-type bezeichnen die beiden letzen Absätze.

Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?

das ist ja echt interessant.. Überschriften h1-h6 waren für mich immer nur Überschriften unterschiedlicher Größe und Schriftart

Das mit der Hierarchie war mir nicht bewusst.

Dein Code sieht auch sehr aufgeräumt und strukturiert aus. Um das alles erst zu verinnerlichen werde ich damit etwas rumspielen.

Vielen Dank

Um bei dem Beispiel zu bleiben . Wiederhole ich mal.

p:nth-of-type(3n-1) {
background: red;
}

Bedeutet "3n" jedes 3. Element "3n-1" es wird bei 2. Element angefangen rot zu unterlegen? Ja?

Zitat von nextuser

Die Uhrzeiten gehören zum entsprechenden Tag und für mich in ein einzelnes Element, mit "flex" & "space-between" wunderbar ausgerichtet.

Viele Wege führen Nach Rom. An deinem wäre ich interessiert

Könntest du das Mal veranschaulichen. Da ich ja eine funktionierte Lösung habe, Wäre das ja keine bitte um ein fertigen Code.

Doch wie gesagt, deine Lösung könnte ja mein Horizont erweitern

hier der code

 <div class="flex-container">
   
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>
 <div class="flex-container">
    <div class="flex-item"></div>
</div>  
  </div>

.flex-container {
      display: flex;
      flex-direction: row;
      justify-items: space-between;
      width: 50%;
    }


    .flex-item {
      height: 300px;
      margin-top:10px;
    }

    .flex-item:nth-of-type(2n-1) {
      background-color: gold;
    
    }

    .flex-item:nth-of-type(2n) {
     background-color: green;
   
    }
 


    @media (min-width: 768px) {
      .flex-item {
        flex-direction: column;
        flex: auto;
   
        height: 200px;
      }
    }

Hab mich jetzt einpaar stunden im Netz Recherchiert und auf Codpen zusammen gefasst.

Wenn nur ich die gelben divs in die Klasse übernehme musst dann nicht grün nach unten Springen.

hier mal zum nachtesten sind nur wenige zeilen

Zitat von m.scatello

Siehe https://www.w3schools.com/cssref/sel_nth-child.php

Ich glaube ich hab das sogar schon benutzt. Ich schau mal in meinen bescheidenen Notizen nach.

Schauen ob ich da was ableiten kann?

Damit ich die div's einzeln ausrichten kann. Dann wäre mein Gedanke für jedes Div eine eigene Klasse anzulegen und das dritte bräuchte bei mir eine eigene row. D.H. doch: Das dritte div muss ebenfalls mit eigener Klasse angesprochen werden.

Ich hoffe das ist nicht zu verwirrend ausgedrückt?

DIV1                                                                 DIV2

ooooooooooooooooooDIV3

So soll es ja aussehen

@Mr. Murphy. das ist eine wichtige Info für mich. Aber der Schlauch ist immer noch verstopft.

Sempervivum

bitte schön

<section id="welcome">
<img src="images/logo.png">

<h1>welcome</h1>

<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>

Ich habe es fast erwartet. Dass nämlich die id="welcome" schon als Flex definiert ist gibt es die Eigenschaften

flex-direction: column;

an alle kinder weiter.

Eigentlich sollte ich das verstehen. Aber gerade steh ich mal wieder auf dem Schlauch

div.jpeg

#welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18.75vw;
  height: 50vh;
  /* background-color: #b1d4e0; */
  background-image: url(/images/beer2.jpg);
}

#welcome>img{
  width: 13.8vw;
  margin: -7vw;
}

#welcome>h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: blue;
  margin-top: 7vw;
}

#welcome .flex-items{
  background-color: dimgray;
  padding-top: 0.3vw;
  width: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
 
}


#welcome .flex-items > div{
  background-color: dimgray;
  margin: 0.3vw;
  text-align: center;
  font-size: 18px;
  flex: 1;
 
}


@media only screen and (max-width: 767px) {
#welcome {
  height: 50vh;
  margin-top: 42vw;
}
#welcome>h1{
  margin-top: 80px;
}

  #welcome>img{
    width: 25%;
    margin: -12vw;
  }
}

Ok da schau ich mal. Danke

Ich habe ja in meiner Welcome Section schon ein Item Welches schon Kinder in form von HTML -Tags hat.

Jetzt möchte ich gerre 3 weitere Boxen bzw. Items hinzufügen. um etwas Text unterzubringen. Dazu habe ich erstmal 3 div's genommen. Aber das ist wohl eher oldschool.

Ein item soll links eines Rechts und das dritte mittig unter beiden. Kann mir gerade nicht vorstellen wie das gehen soll wenn ich nicht den Bierdeckel zerschiessen will

<section id="welcome">
<img src="images/logo.png">

<h1>welcome</h1>

<div>1</div>
<div>2</div>
<div>3</div>

    </section>

#welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 360px;
  height: 50vh;
  /* background-color: #b1d4e0; */
  background-image: url(/images/beer2.jpg);
}



#welcome>img{
  width: 15%;
  margin: -125px;
}

#welcome>h1{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: blue;
  margin-top: 120px;
}

@media only screen and (max-width: 767px) {
#welcome {
  height: 50vh;
  margin-top: 320px;
}
#welcome>h1{
  margin-top: 80px;
}

  #welcome>img{
    width: 25%;
    margin: -65px;
  }
}

miflo.de

Das hat tatsächlich geklappt. Doch ganz ehrlich verstehe ich nicht wieso. Ist eben alles in IT Englisch. ( Da bin ich leider auch nicht ganz perfekt)

Was die mobile Ansicht Angeht klappt das nicht.

mobil.jpeg

Ganz oben im css steht das!

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

html, body {
  margin: 0;

}

html {
  height: 100vh; 
  scroll-padding-top: 100px; 
  /* overflow-y: hidden;     */
}

@TK

Danke für die interessanten Links

Zitat von Sempervivum

Du meinst den Link "INHALTE" in der Navigation? Der springt bei mir schon zum Ziel aber die Überschrift verschwindet hinter der Navigation. Ist es das, was Du meinst?

Genau.

@TK Natürlich bin ich mir bewusst der Code noch einigen Murks enthält..

Für mich soll es erst mal schön aussehen Und mir dabei Helfen meine Zeit nicht mit Hartz TV verbringen zu müssen..

Wenn ich ein guter Webdesigner wäre, hätte ich mich hier nicht als Hilfesuchender angemeldet, sondern als Helfer

so der Footer ist fertig. Gefällt mich auch selbst ganz gut.

Vielleicht schaust du, wenn du Zeit hast noch mal über den Code. Ich befürchte da ist mehr drin als man braucht.

Aber mehr sorgen macht mir der link Inhalt. Mir will sich nicht erschließen wieso der nich direkt zum Ziel Inhalt springt.

miflo.de

Mich hatte dann heut Nacht doch noch der Ehrgeiz gepackt. so gesehen ist erst mal alles ok.

Jetzt mach ich erst mal noch etwas Fine-Tuning in der Mobilen Ansichten.

Danke an alle dich geholfen haben.

Ok soweit so gut. Es bleibt nur noch Thread #16

Und wir ich ich den Grid so aus, das die Inhalte bündig aber trotzdem insgesamt mittig bleiben. Ich hoffe das ist verständlich. Ich mach dann mal Feierabend.

Habe jetzt auch das mit dem Grid hinbekommen.

Doch jetzt versuche ich den Text gestylt zu bekommen

abstand.jpeg

Ich bekomme einfach nicht hin, dass div's die gleiche breite einnehmen

mein bisheriges footer css

footer{
  height: 450px;
  width: 100%;
  background-color: dimgray;
}

footer .flex-items{
  background-color: dimgray;
  padding-top: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}



footer .flex-items > div{
  background-color: grey;
  margin: 5px;
  /* height: 100px; */
  /* line-height: 80px; */
  text-align: center;
  font-size: 18px;
  flex: auto;
}


footer .flex-items > div > hr{
  border-top: 1px solid wheat;
  width: 85%;
  margin: auto;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

footer .flex-items > div > h1 {
  font-family:Arial, sans-serif;
  font-size: 1.6em;
  color: wheat;
  font-weight: lighter;
}

footer .flex-items > div > p {
  font-family:Arial, sans-serif;
  font-size: 1.1em;
  color: wheat;
  font-weight: lighter;
  margin:15px;
}

.social{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px ;
}

.bottom{
  /* margin-top: 10px; */
  background-color: grey;
  text-align: center;
  width: 100%;
  height:100px ;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.bottom > hr{
  border-top: 1px solid wheat;
  width: 95%;
  margin:auto;
  margin-top: .8rem;
  /* margin-bottom: 1rem; */
} 

.bottom > h1{
  font-family:Arial, sans-serif;
  font-size: 1.6em;
  color: wheat;
  font-weight: lighter;

}