|
|||
Div im Div mittig unten ausrichten
Moin, moin!
Ich habe folgendes Problem und Google scheint auch keine Lösung zu finden: Ich programmiere derzeit zum Spaß in HTML & CSS und habe eine Klasse angelegt, die .buttons heißt. Diese sind eigentlich inline-block-Divs. Nun habe ich einen Zweispalten-Layout mit Text und möchte je ein button-div zentral an die untere Kante des übergeordneten Divs "kleben". Ich habe mal ein Foto angehängt, damit mal das besser nachvollziehen kann. Der HTML-Code für den Teil: <div class="main-content-wrapper"> <section class="content-wrapper clearfix"> <div class="content"> <h3>Text</h3> <p> Text Text Text</p> <a class="button" href="#"> Berichte lesen </a><br> </div> <!-- content --> <div class="content-aside"> <h3>Text ...</h3> <p> Text Text Text </p> <a class="button" href="#"> Frage stellen </a> <br> </div> <!-- content-aside --> </section> <!--content-wrapper--> <div class="content-under-wrapper clearfix"> <div class="content-under"> <h3>Mila on Instagram</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p> <a class="button" href="https://www.instagram.com/mila_bernese/" target="_blank"> Mila besuchen </a> </div> <!-- content-under --> </div> <!-- content-under-wrapper --> </div> <!-- main-content-wrapper --> Der CSS-Code: /* ----------CONTENT-BEGINN-------------*/ .content, .content-aside{ background: white; height: 500px; float: left; margin: 20px 0px; position: relative; } .content, .content-aside { width: 50%; text-align: center; border-left: 1px solid #696969; } .content-under { width: 100%; text-align: center; margin: 20px 0;} .content { border: none; } .content p, h3 { padding: 20px 40px 10px 40px; } .content-aside p, h3 { padding: 20px 40px 10px 40px; } .content-under p, h3 { padding: 20px 40px 10px 40px; } /* ----------CONTENT-ENDE---------------*/ /* ----------BUTTON-BEGINN-------------*/ .button{ display: inline-block; padding: 10px 20px; text-transform: uppercase; border: 1px solid black; margin: 10px; font-weight: 700; background: #696969; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .button:hover { background: #F2CA56; color: #696969; } /* ----------BUTTON-ENDE---------------*/ Ich habe erst vor ca. einer Woche angefangen mir das selbst beizubringen, also seid bitte nett zu mir Kurz und knapp: Ich möchte die "Berichte lesen" und "Frage stellen"-Buttons so zentral wie sie derzeit sind an das untere Ende des weißen Kästchens klatschen. Den relevanten Bereich habe ich für die Frage mal weiß gefärbt ^^ Vielen Dank schon einmal für Eure Mühen! LG |
Sponsored Links |
|
|||
Hallo
Herzlich willkommen im Forum. Die meisten Besucher hier im Forum sind nett und helfen gerne. Das Problem ist: Wenn mit HTML und CSS bestimmte Layouts erstellt werden sollen muss zunächst der HTML-Quelltext korrekt und sinnvoll erstellt worden sein und anschließend CSS richtig eingesetzt werden. Dein Wunsch die Buttons unten in ihren Containern anzuordnen klingt zunächst einfach, war bis vor kurzem aber nicht so vorgesehen und nur mit Tricks zu erreichen, die Anfänger ohne Grundkenntnisse überfordern. Heutzutage wird das mit Flexbox gemacht. Dazu ist dein bisheriges CSS aber nicht geeignet und müsste größtenteils erneuert werden. Wobei auch der HTML-Quelltext auf den aktuellen Stand gebracht werden sollte. Ich fürchte aber das du damit noch überfordert bist. Die meisten Info- und Lernseiten sind aktuell leider veraltet. Am besten suchst du dir nur Infos, die sich ausdrücklich mit HTML5 und CSS3 beschäftigen sowie Flexbox und CSS-Grid erklären. Layouts sollten zudem nicht mit Float erstellt werden. Die sind einigermaßen sicher aktuell. Tip: Gib den entscheidenden Containern mal unterschiedliche Hintergrundfarben. Dann siehst du besser was an deinem aktuellen Layout nicht funktioniert. Gruss MrMurphy Geändert von MrMurphy (22.02.2018 um 21:52 Uhr) |
Sponsored Links |
|
|||
Hallo
Ich kann dir nicht ausführlich erklären warum etwas falsch ist. Das wäre für mich zu viel Zeitaufwand und ist eher nicht Sinn des Forums. Ohne Eigeniniative lernt zudem niemand HTML und CSS. Zunächst: Es gibt Regeln und es gibt "Best Practices". Best Practices sind sinnvolle Vorgehensweisen, die sich, in der Regel seit Jahren, bewährt haben und eingehalten werden sollten, um Probleme zu vermeiden. Zu deinem HTML-Quelltext: Code:
<div class="main-content-wrapper"> Code:
<div class="content"> Code:
<a class="button" href="#"> Berichte lesen </a> Code:
<h3>Text</h3> <p> Text Text Text</p> Code:
<br> Code:
target="_blank" Code:
<div class="content-under-wrapper clearfix"> <div class="content-under"> Code:
height: 500px; Code:
float: left; Für aktuelle Layouts sind speziell Flexbox (display: flex) und CSS-Grid (display: grid) geschaffen worden. Die Zeiten, in denen Anweisungen wie Float oder Position zum Layouten mißbraucht werden mussten sind damit seit Jahren vorbei. Code:
position: relative; Code:
text-align: center; Code:
.content p, h3 { Code:
.content p, .content h3 { Code:
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; Ich habe jetzt nicht jedes Problem angesprochen, nur die sofort sichtbaren. Ich habe mit deinem Quelltext mal eine Beispielseite erstellt und einfach nur zu Beginn einen header und am Ende einen footer hinzugefügt sowie den entscheidenden Containern Hintergrundfarben mit auf den Weg gegeben: Beispielseite Ich denke eher nicht das deine Seite so aussehen soll. Gruss MrMurphy Geändert von MrMurphy (23.02.2018 um 01:54 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |