zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Div im Div mittig unten ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.02.2018, 20:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2018
Beiträge: 3
SonyEr92 befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: png Zweispalten-Layout.png (294,0 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.02.2018, 21:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.02.2018, 23:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2018
Beiträge: 3
SonyEr92 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Antwort, MrMurphy!

Was ist denn an meinem HTML/ CSS „falsch“?

LG
Mit Zitat antworten
  #4 (permalink)  
Alt 23.02.2018, 01:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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">
Nach den aktuellen HTML-Regel dürfen div-Elemente nur noch verwendet werden falls es keine besser geeigneten gibt. In deinem Quelltext passt statt dessen eher das main-Element.

Code:
<div class="content">
Hier passt das article-Element besser.

Code:
<a class="button" href="#"> Berichte lesen </a>
a-Elemente sollten entweder innerhalb von Textelementen stehen (zum Beispiel p, h1 bis h6, li, dt, dd und so weiter) oder andere Container umschließen (wie zum Beispiel das figure).

Code:
<h3>Text</h3>
<p> Text Text Text</p>
Einheitliche Worte wie Text, Link1, Link2 oder sinnfreie Texte sollten auch in Beispielen vermieden werden. Viele Layouts funktionieren erst einmal, fliegen einem aber um die Ohren, wenn sie mit realem Text gefüllt werden. Deshalb sollten immer reale Worte und Texte verwendet werden. Zudem lässt sich im Endeffekt nur an realem Inhalt erkennen ob die richtigen HTML-Elemente verwendet werden.

Code:
<br>
br-Elemente sollten nicht verwendet werden um Abstände oder Leerzeilen zu erzeugen. Dafür ist das CSS zuständig, zum Beispiel padding oder margin.

Code:
target="_blank"
Das Attribut ist zwar seit HTML5 wieder zulässig, sollte aber möglichst vermieden werden. Besucher erwarten durch Betätigung des entsprechenden Browser-Buttons zurückzukommen. Zudem nervt es unnötig aufgehende Fenster wieder schließen zu müssen.

Code:
<div class="content-under-wrapper clearfix">
<div class="content-under">
Hier reicht ein div-Element. Unnötige Container sind laut den HTML-Regeln zu vermeiden. Zudem wird dadurch der Quelltext übersichtlicher. Statt einem div-Element ist hier wahrscheinlich eher das aside-Element angebracht.

Code:
height: 500px;
Height-Angaben (nicht nur diese) sollten möglichst vermieden werden. Der Inhalt von Containern wird von ihrem Inhalt bestimmt.

Code:
float: left;
Float ist nur dafür gedacht Text andere Elemente umfließen zu lassen, zum Beispiel Bilder. Zudem sollte Float dann auch nur verwendet werden, wenn die Anwendung und die Nebenwirkungen bekannt sind. Zum Beispiel das gefloatete Elemente aus dem Dokumentenfluß genommen werden.

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;
All position-Angaben sind heutzutage nur noch in sehr wenigen Ausnahmefällen erforderlich. So einen sehe ich hier nicht.

Code:
text-align: center;
Angaben wie text-align sollten nur direkt auf das Element bestimmt werden, auf das sie wirken sollen, nicht aber auf übergeordnete Container. Also p, h1 bis h6, li, dt, dt und so weiter.

Code:
.content p,
h3 {
Wenn hier die p- und h3-Elemente in .content gemeint sind wäre

Code:
.content p,
.content h3 {
richtig.

Code:
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
Präfixe sind nur für Übergangzeiten für neue CSS-Anweisungen gedacht. Die meisten sind heutzutage überflüssig und sollten nicht mehr verwendet werden. Auch dadurch wird der Quelltext übersichtlicher. Deshalb auch mein Tip im vorigen Beitrag dir aktuelle Texte zum Lernen zu besorgen.

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 25.02.2018, 21:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.02.2018
Beiträge: 3
SonyEr92 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine ausführliche Antwort, MrMurphy!

Ich werde mir das mal zu Herzen nehmen und mich ein wenig schlau machen...

Liebe Grüße
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:13 Uhr.