[ERLEDIGT] Div-Tag im Div unten positionieren

[danl02]

Guten Abend,
Ich versuche im Div "Siedebar" den Div-Tag "zahlungsargen" und die nachfolgenden ganz unten zu positionieren, sodass platzt zwischen dem Menü und den Zahlengarten entsteht, doch es gelind mir seit paar Tagen nicht.. Ich habe auch google durchgesucht, aber nicht gefunden was funktioniert, oder ich kann es nicht umsetzen... Außerdem sollte der Div-Tag "sidebar" die volle höhe der Seite einnehmen. Das gelingt mir ebenfalls nicht. Nicht mit: height:100%; oder auch nicht mit min-height:100%;... Hat hier vl. Jemand eine Idee?
Gruß

Hier ist der Code:

<div id="sidebar" style=
                "float: left; width: auto; min-height: 100%; height: 100%; margin-top: 0px; border-right:4px solid #f6921e; float:right; border-left:4px solid #f6921e; margin-left: 0px;">
                <div style=
                "float: left; background: #f6921e; color:#ffffff; width: 100%; height:100%; ;">
                    <div style=
                    "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
                        Unser Shop
                        </div>

                        <div style=
                        "margin-left:40px; margin-right:5px; line-height:30px;">
                        Logogestaltung
                        </div>

                        <div style=
                        "margin-left:40px; margin-right:5px; line-height:30px;">
                        Visitenkarten
                        </div>

                        <div style=
                        "margin-left:40px; margin-right:5px; line-height:30px;">
                        Briefpapier
                        </div>

                        <div style=
                        "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:30px;">
                        <div style="margin-left:30px;">
                                Briefumschl‰ge
                            </div>
                        </div>

                        <div style=
                        "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
                        Zu Favoriten hinzuf¸gen
                        </div>

                        <div style=
                        "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
                        Beobachten
                        </div>

                        <div style=
                        "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
                        Bewertungen
                        </div>

                        <div style=
                        "border-bottom:solid 1.5px; margin-left:10px; margin-right:10px; line-height:40px;">
                        AGBs
                        </div>

                        <div style=
                        "margin-left:10px; margin-right:10px; line-height:40px;">
                        FAQ
                        </div>
                      
                      
                    </div>

                
                    <div style="margin-left: 10px; margin-right: 10px;">
                        <div id="Zahlungsarten" style=
                        "border-top:solid 1px #656565; border-bottom:solid 1px #656565;">
                        <div style=
                        "font-size:; color:#f6921e; line-height:25px;">
                                Zahlungsarten:
                            </div>

                            <div style="margin-bottom:-6px; margin-left:0px;">
                            <img width="35%" src="PaypalLogo.png">
                            </div>

                            <div style="font-size:; line-height:20px;">
                                Banküberweisung
                            </div>

                            <div style=
                            "font-size:; line-height:20px; padding-bottom:1px;">
                            Kreditakrte
                            </div>
                        </div>

                        <div align="center" id="social" style=
                        "border-bottom:solid 1px #656565; height:auto; padding:5px; padding-bottom:4px;">
                        <img src=
                        "Facebook-logo.png">
                        <img src=
                        "Googlepluslogo.png">
                            </div>

                        <div id="impressum" style="font-size:14px">
                            <div style=
                            " color:#f6921e; line-height:25px; font-size:16px;">
                            Impressum
                            </div>

                          
                        </div>
                    </div>

Das ganze sieht momentan so aus:

 

[MrMurphy]

Hallo

Du solltest aktuelles HTML und CSS verwenden.

Ich habe mal ein Beispiel erstellt wie so eine Sidebar erstellt werden kann.

Da von dem Rest deines Quellcodes nichts bekannt ist konnte ich auf den natürlich keine Rücksicht nehmen. Außerdem liegen mir die Bilder nicht vor.

Bei dem "weißen" Teil unten habe ich auf die Querstriche verzichtet. Die werden bei Bedarf wie im oberen Teil erstellt.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Element unten anordnen 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
         display: flex;
         justify-content: flex-end;
      }
   }

   /*Sticky Footer Layout*/
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      .main-sidebar {
         height: 100%;
         min-height: 100vh;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
         -ms-justify-content: flex-end;
         justify-content: flex-end;
      }
      .main-sidebar section:first-child {
         -webkit-box-flex: 1;
         -webkit-flex: 1;
         flex: 1 0 auto;
         /*Für alle IE, muss hinter "flex: 1;" stehen*/
         -ms-flex: 1 0 auto;
      }
   }

   /*Layout Sidebar*/
   @media all {
      .main-sidebar {
         background-color: #f6921e;
         width: 250px;
         padding: 0.5rem;
      }
      .main-sidebar section  {
         padding: 0 0.3rem;
      }
      .main-sidebar p {
         padding-bottom: 0.2rem;
         margin: 0.3rem 0;
      }
      .main-sidebar section:first-child p:nth-of-type(1),
      .main-sidebar section:first-child p:nth-of-type(5),
      .main-sidebar section:first-child p:nth-of-type(6),
      .main-sidebar section:first-child p:nth-of-type(7),
      .main-sidebar section:first-child p:nth-of-type(8),
      .main-sidebar section:first-child p:nth-of-type(9) {
         border-bottom: 1px solid white;
      }
      .main-sidebar section:first-child p:nth-of-type(2),
      .main-sidebar section:first-child p:nth-of-type(3),
      .main-sidebar section:first-child p:nth-of-type(4),
      .main-sidebar section:first-child p:nth-of-type(5) {
         padding-left: 1rem;
      }
      .main-sidebar section:nth-child(2) p:nth-of-type(1),
      .main-sidebar section:nth-child(2) p:nth-of-type(4) {
         color: #f6921e;
      }
      .main-sidebar>:last-child {
         background-color: white;
      }
      .main-sidebar>:first-child p {
         color: white;
      }
   }

   </style>
</head>
<body>
   <aside class="main-sidebar">
      <section>
         <p>Unser Shop</p>
         <p>Logogestaltung</p>
         <p>Visitenkarten</p>
         <p>Briefpapier</p>
         <p>Briefumschläge</p>
         <p>Zu Favoriten hinzufügen</p>
         <p>Beobachten</p>
         <p>Bewertungen</p>
         <p>AGBs</p>
         <p>FAQ</p>
      </section>
      <section>
         <p>Zahlungsarten</p>
         <p>Banküberweisung</p>
         <p>Kreditkarte</p>
         <p>Impressum</p>
      </section>
   </aside>
</body>
</html>

Gruss

MrMurphy

 

[danl02]

Vielen dank für die Schnelle Antwort! :) Ich glaube ich bin noch zu Amateur.. Wie meinst du das mit dem aktuellen HTML? Also HTML 5 und CSS 3, oder wie? Ich programmiere nicht lange, wie man bestimmt sehen kann Jedoch wenn ich den code einfüge, erstreckt sich das Menü immer noch nicht bis zum unteren grauen Strich "footer".

Das mit "aside", "footer" und co. wird immer verwendet oder?
Danke noch mal für deine Hilfe

Ah und noch eine Frage: wo in deinem Code bestimmt du, dass "zahlungsargen und co. unten sind? und wie beziehst du das auf das HTML, wenn beides bei dir Section heißt und keine "id" hat?

 

[MrMurphy]

Hallo

Wie meinst du das mit dem aktuellen HTML? Also HTML 5 und CSS 3,

Ja. Dazu gehört auch Inhalt ( = body-Bereich ) und Aussehen ( = css ) zu trennen. Und IDs und Klassen so wenig wie möglich zu verwenden. Der Quellcode im body-Bereich soll möglichst schlank werden. Deshalb sind gleichzeitig der Möglichkeiten der Selektoren stark erweitert werden.

Oder Text nur in dafür gedachte Elemente wie p, h1 bis h6, li, th, td, dt, dd und so weiter zu schreiben. Aber nicht direkt in Container wie div, header, footer, main und so weiter.

Außerdem sollen div nur noch verwendet werden, wenn es keine sinnvolleren Container wie header, main, footer, article, section, aside, nav und so weiter gibt.

Wenn du deinen und meinen body-Bereich vergleichst sollte ins Auge stechen, das meiner viel übersichtlicher ist ohne die Möglichkeiten beim Layout einzuschränken.

Jedoch wenn ich den code einfüge, erstreckt sich das Menü immer noch nicht bis zum unteren grauen Strich "footer".

Wie ich bereits in meinem ersten Beitrag schrieb: Ohne hinreichende Informationen von dir kann dir niemand konkret antworten, sondern nur allgemeine Lösungen anbieten. Von einem footer war bislang nie die Rede. Ich habe mit Sicherheit keine Lust meinen Lösungsvorschläge häppchenweise deinen Informationen anzupassen.

Ah und noch eine Frage: wo in deinem Code bestimmt du, dass "zahlungsargen und co. unten sind?

Das zu erklären würde den Rahmen dieses Forums sprengen. Das ist ein Gesamtkonstrukt. Beschäftige dich mit Flexbox beziehungsweise dem Flexbox-Modell. Das ist unter verschiedenen Bezeichnungen das gleiche.

Das Vorgehen funktioniert folgendermaßen:

1. Das umgebende Element bekommt eine Höhe von mindestens der Fensterhöhe:

      .main-sidebar {
         height: 100%;
         min-height: 100vh;
      }

2. Das umgebende Element wird zum Flexbox-Container gemacht und der Inhalt wird senkrecht angeordnet:

      .main-sidebar {
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }

3. Das obere section-Element wird so groß gezogen, dass es das untere section-Element bis an den unteren Fensterrand drückt:

      .main-sidebar section:first-child {
         -webkit-box-flex: 1;
         -webkit-flex: 1;
         flex: 1 0 auto;
         /*Für alle IE, muss hinter "flex: 1;" stehen*/
         -ms-flex: 1 0 auto;
      }

Wenn jetzt noch footer und wahrscheinlich andere Container hinzukommen muss das gesamte Konstrukt natürlich angepasst werden.

Gruss

MrMurphy

 

[danl02]

Alles klar, vielen Dank :) Hat mich sehr weitergebracht!