Flexbox Zeile soll sich oben anordnen

Charmin · 11. April 2019

Guten Abend,

ich bin gerade dabei alles auf Flexbox zu ändern.

Ich bekomme aber nicht die Zeile #steuerungoben am Header abzuschließen.

Wäre schön wenn mir jemand helfen könnte

CSS: design

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background-image: url(onewebmedia/Hintergrund2.jpeg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

header, nav, footer {
    flex: 1 100%; 
}

section {
    flex: 3 1 0%;
}

aside {
    flex: 1 1 0%;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/Shadow.jpg);
    height: 200px;
}

header p {
    /* background-color: orange; */
    text-align: right;
    padding: 15px;
}

#steuerungoben {
    /* background-color: red; */
    -ms-flex-direction: column;
    flex-direction: column;
    background-image: url(Bilder/hintergund-grey.png);
    height: 24px;
}

#steuerungoben ul {
    display: flex;
    list-style-type: none;
}

#steuerungoben li {
    display: inline;
}

#steuerungoben a {
   display: block;
   width: 15em;
   /* background-color: yellow;*/
   /*float: left;*/ 
   /* border-right: 1px red solid; */
    color: white;
    text-decoration: none;
    line-height: 24px;
    text-align: center

}

#steuerungoben a:hover {
    background-image: url(Bilder/hintergrund-black.png);
    
}

#steuerunglinks {
    /* background-color: green; */
    position: absolute;
    top: 14em;
    width: 220px;
    /*float: left;*/
}

#steuerunglinks ul {
    padding-left: 1em;
    padding-top: 20px;
    list-style-type: none;
}

#steuerunglinks a {
    color: #dd9661;
    line-height: 30px;
}

aside {
   background-color: #808000;
    width: 175px;
    float: right;
    position: relative;
    top: 34px;
}

aside p {
    margin-top: 30px;
    margin-left: 9px;
}

section {
   /* background-color: orange; */
    margin-left: 250px;
    margin-right: 195px;
}

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#starkeschrift {
    font-weight: bold;
}

footer {
    /* background-color: brown; */
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 60em;
    margin: 0 auto;
    text-align: left;
    background-image: url(hintergrund-durch.png);
}

Alles anzeigen

basti1012 · 11. April 2019

an besten gibst du uns mal den Link zur Seite oder den vollständigen Code. So kann man nur Raten. Sieht so aus als ob ein Padding oder margin da zwischen hängt. Doch genau sagen kann man das nur wen an das live sehen kann

Charmin · 12. April 2019

Guten Morgen,

Danke für die schnelle Rückantwort.

Der Link dazu lautet: Link

Mit welchem Prinzip gehst du dabei vor? Oder ist das einfach nur ein geschultes Auge und man weiß schon wo man hinschauen muss

Beste Grüße

djheke · 12. April 2019

#steuerungoben ul {

margin:0;

padding:0;

}

Sempervivum · 12. April 2019

Das ist nicht nur Erfahrung und ein geschultes Auge sondern die Entwicklerwerkzeuge des Browser sind da sehr hilfreich. Kann nur empfehlen, dich damit vertraut zu machen. Maus drüber, Rechtsklick - "Element untersuchen" und Du siehst sofort, was Sache ist.

html-seminar.de/woltlab/attachment/1855/

Der orangene Rahmen ist das Padding, das dich stört.

basti1012 · 12. April 2019

viele Leute schreiben am Anfang der Css das

Code

* {
    margin: 0;
    padding: 0;
}

Also wenn du dein

Code

htlm, body {
    margin: 0;
    padding: 0;
}

damit austauscht wäre der Fehler auch schon Weg.

Wichtig ist nur das man es am Anfang des Codes schreibt und danach erst mit den programmieren anfangen tut.

Das macht man das alle Elemente kein Margin und Padding mehr haben. Von Natur aus ( blödes Wort ) haben einige Elemente ( wie <ul> ) schon vorgegebene margin und padding Werte die dann genau das machen was dir passiert ist .

Charmin · 12. April 2019

Wow, vielen Dank an euch.

Also das Entwicklerwerkzeug ist ja echt der Hammer, was es alles so gibt?!

Ich werde mal weitermachen und Float aus der Programmierung raus hauen.

Vielen Dank nochmal.

Charmin · 12. April 2019

Ich bin mal wieder am verzweifeln. Sollte ich ein neues Thema aufmachen, bitte bescheid geben. Ich denke aber das passt gut hier rein.

Zur Veranschaulichung habe ich den Hintergrund grün gemacht, vom Browserwerkzeug würde ich sagen ist der

Übeltäter #steuerunglinks. Ich habe schon einiges probiert bekomme es aber leider nicht hin.

Wollte das nächste Element auf Flexbox umrüsten.

HTML

<!doctype HTML>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Puschelreich - Maine Coon Zucht in Brandenburg in der Nähe bei Senftenberg</title>
      <meta name="description" content="Maine Coon Zucht aus Annahütte. Hier erfahren Sie alles über unsere reinrassige Zucht der Maine Coon, Kittenkauf, jede menge Bilder.">
      <meta name="author" content="Puschelreich - Monique Sommer, David Jähnel">
      <meta name="keywords" content="Maine Coon, Kitten, Maine Coon Zucht, Katzenzucht, Katzenbilder, Katzenbabys">
      <link href="design.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      
<!--[if IE]>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
></script>
<![endif]-->
      
      </head>
      
      <body>
          <div id="wrapper">
<header>
    <!-- Kopfzeile -->
</header>

<aside>
<p><b>Bildersammlung:</b>
<img src="Highlight/1.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/2.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<img src="Highlight/3.jpg" width="155" height="116" alt="Highlight" title="Highlight">
<a href="https://www.premiumpetshop.de/Premium-Petshop-praesentiert-Top-Katzenblogs"><img width="180" 
    src="https://www.premiumpetshop.de/mediafiles/Bilder/top-katzenblog-2018.png" alt="Premiumpetshop stellt Top Katzenblogs 2018 vor" title="Premiumpetshop stellt Top Katzenblogs 2018  
    vor"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g1/g1students_de.html">
    <img src="Pawpeds/G1.png" width="100" height="200" alt="Pawpeds G1" title="Pawpeds G1"></a>
<a href="https://www.pawpeds.com/pawacademy/courses/g2/g2students_de.html">
    <img src="Pawpeds/G2RibbonSmall.gif" width="100" height="200" alt="Pawpeds G2" title="Pawpeds G2"></a>

</p>
</aside>

<nav id="steuerunglinks">
    <ul>

<li><a href="index.html">Startseite</a></li>
<li><a href="puschels/index.html">Puschels</a></li>
<li><a href="bilder.html">Bilder</a></li>
<li><a href="über%20uns%20dosenöffner.html">Über uns Dosenöffner</a></li>
<li><a href="https://www.puschelreich.de/infos/index.html">Infos</a></li> 
<li><a href="https://www.puschelreich.de/aktuelle%20news/index.html">Neuigkeiten</a></li>
<li><a href="https://www.puschelreich.de/katzenblog/index.html">Katzenblog</a></li>
<li><a href="https://www.puschelreich.de/Kontakt.html">Kontakt</a></li>

</ul>
</nav>

<nav id="steuerungoben">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="puschels/kitten/index.html">aktuelle Würfe</a></li>
    <li><a href="aktuelle%20news/index.html">Neuigkeiten</a></li>
    <li><a href="Kontakt.html">Kontakt</a></li>
  </ul>
</nav>

<section>
<h1>Puschelreich - Maine Coon Zucht</h1>

<p id="starkeschrift">Herzlich Willkommen!</p>

<p>Wir wünschen viel Spaß beim stöbern auf unserer Homepage :) 
Bei Fragen können Sie uns jederzeit kontaktieren.</p>
 
<p>Auch Züchterfreunde sind bei uns immer herzlich willkommen.</p>

<hr />

<h2>Würfe - Kittenabgabe</h2>
<p>Aktuell haben wir keine Würfe, schauen Sie doch zu einem späteren Zeitpunkt wieder vorbei</p>
 
 <hr />

<h2>Neuigkeiten rund um unsere Katzenzucht</h2>

<p>Wir möchten Euch immer auf den aktuellen Stand halten. Wer ist bei uns eingezogen? Was geht im Hause Puschelreich alles so ab? Evtl. Tierarztbesuche? 
Neugierig geworden?</p> 
<p><a href="aktuelle%20news/index.html">Hier klicken</a></p>

<hr />

<h2>Blogbeiträge Rund um die Katze</h2>
 
<p>Gerne schreiben wir Beiträge "Rund 
um die Katze" und Ihr könnt mit Euren 
eigenen Erfahrungen teilnehmen und 
Kommentare hinterlassen.</p>
<p><a href="katzenblog/index.html">Hier klicken</a></p>

<hr />

<h2>Bilder</h2>
 
<p>Jede Maine Coon ist einzigartig und wunderschön, dass muss man natürlich festhalten.</p> 
<p><a href="bilder.html">Hier klicken</a></p>

<hr />

<h2>Katzenausstellungen</h2>
 
<p>Uns ist der Rassestandard der Rasse Maine Coon sehr wichtig. Durch unterschiedliche Ausstellung kann durch fachkundige Jury die Katze bewertet und prämiert werden.</p>
<p><a href="infos/ausstellungserfolge/index.html">Hier klicken</a></p>

<hr />
</section>

<footer>
Printerest
Teilen
Startseite
Impressum
Kontakt
Maine Coon Züchter Berlin Brandenburg Dresden
Unser Verein
Katzenblog
</footer>
</div>
      </body>
</html>

Alles anzeigen

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background-image: url(onewebmedia/Hintergrund2.jpeg);
    background-attachment: fixed;
    font-family: Arial, sans-serif;
}

header, nav, footer {
    flex: 1 100%; 
}

section {
    flex: 3 1 0%;
}

aside {
    flex: 1 1 0%;
}

header {
    /* background-color: yellow; */
    background-image: url(Homepage/Shadow.jpg);
    height: 200px;
}

header p {
    /* background-color: orange; */
    text-align: right;
    padding: 15px;
}

#steuerungoben {
    /* background-color: red; */
    -ms-flex-direction: column;
    flex-direction: column;
    background-image: url(Bilder/hintergund-grey.png);
    
}

#steuerungoben ul {
    display: flex;
    list-style-type: none;
}

#steuerungoben li {
    display: flex;
}

#steuerungoben a {
   display: block;
   width: 15em;
   /* background-color: yellow;*/
   /*float: left;*/ 
   /* border-right: 1px red solid; */
    color: white;
    text-decoration: none;
    line-height: 24px;
    text-align: center

}

#steuerungoben a:hover {
    background-image: url(Bilder/hintergrund-black.png);
    
}

#steuerunglinks {
   background-color: green;
   display: flex;
   
}

#steuerunglinks ul {
    padding-left: 1em;
    padding-top: 20px;
    list-style-type: none;
    
}

#steuerunglinks a {
    color: #dd9661;
    line-height: 30px;
}

aside {
   background-color: #808000;
    width: 175px;
    float: right;
    position: relative;
    top: 34px;
}

aside p {
    margin-top: 30px;
    margin-left: 9px;
}

section {
   /* background-color: orange; */
    margin-left: 250px;
    margin-right: 195px;
}

section h1 {
    padding-top: 20px;
    padding-bottom: 0.4em;
    color: #dd9661;
}

section h2 {
    color: #dd9661;
    padding-top: 1em;
    padding-bottom: 0.6em;
}

section p {
    padding-bottom: 1em;
}

#starkeschrift {
    font-weight: bold;
}

footer {
    /* background-color: brown; */
    background-image: url(Bilder/hintergund-grey.png);
    text-align: center;
    color: white;
    clear: both;
}

#wrapper {
   /* background-color: #eeeeee; */
    width: 60em;
    margin: 0 auto;
    text-align: left;
    background-image: url(hintergrund-durch.png);
}

Alles anzeigen

Sempervivum · 12. April 2019

Ich verstehe das so, dass die graue Navigation nach oben soll und weiter die ganze Zeile ausfüllen und dann darunter links die gelbe Navigation links und und der Container mit "Puschelreich - Maine Coon Zucht" rechts daneben? Dann verschiebe die graue Navigation #steuerungoben über die beiden anderen Blöcke. Lege einen Container um #steuerunglinks und section und ordne dann beide nebeneinander an.

Charmin · 12. April 2019

Genau, mit welchem Befehl muss ich arbeiten um wieder die #steuerungoben nach oben (unter Header) zu bekommen?

Irgendwie blockiert mich jedes mal #steuerunglinks

Sempervivum · 12. April 2019

Da gäbe es zwar das "order" bei Flex aber am einfachsten ist es, wenn Du einfach in deinem Editor den Textblock nach oben verschiebst.

Charmin · 12. April 2019

Ok, wunderbar, wieder was dazu gelernt, die richtige Reihenfolge der Textblöcke zu beachten.

Kann manches so einiges vereinfachen

Flexbox Zeile soll sich oben anordnen

Jetzt mitmachen!

Teilen

Tags