Wenn du zwei Container nebeneinander setzen möchtest, die die gleiche ausgangsgröße Größe haben sollen, ist das doch der Beste Weg dazu.
Inwiefern der beste Weg? Gerade auf das Beispiel, dass Grid vorzugsweise vor Flex zeigen soll?
Man kann natürlich auch mit flex oder inline-block etc. arbeiten, dann ist das mit der gleichen Größe aber problematischer.
NEIN!
inline-block? Zum setzen einer gleichen Größe zweier Parts?
Schon mal von flex-grow, flex-basis ect... gehört? Wo ist es problematisch?
Dass ihr noch immer nicht versteht, dass der nur hier (wahrscheinlich automatisiert) postet um ein paar Tage später zurückzukommen und einen Link im Post zu platzieren.
Doch, habe ich verstanden und bei diesem Beitrag auch sofort gedacht.
Aber manchmal denkt man dan doch, das auch solche "Fragen" vielleicht echt sind und deshalb bin ich "sicherheitshalber 
" darauf eingegangen.
Könnte ja durchaus sein, dass deine Prognose mal einen echten, fragenden trifft, daher...
Ja, mit CSS-Grid (display: grid;) in Verbindung mit Flexbox (display: flex;).
Grid braucht es hier nicht.
Das was du mit Grid in deinem Beispiel machst (beiden Elementen im header die Hälfte der Fläche geben) ist absolut keine Begründung, um Grid ANSTATT Flex zu verwenden!
Das ist mit Flex sehr gut selbst zu lösen.
Zu deinem Code mal etwas meine Meinung:
Ich würde dein Beispiel so umsetzen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexboxprojekt</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
margin: 0;
}
main>header
{
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
background-color: black;
}
main>header>section
{
flex-grow: 1;
text-align: center;
color: aqua;
}
main>header>img
{
min-width: 200px;
margin-left: 1rem;
}
@media only screen and (max-width: 700px)
{
main>header
{
justify-content: center;
}
main>header>section
{
z-index: 2;
}
main>header>img
{
position: absolute;
margin: 0;
max-width: 90%;
}
}
</style>
</head>
<body>
<main>
<header>
<section>
<h1>Flexboxprojekt</h1>
<p>Schaut doch mal rein</p>
</section>
<img src="https://my2.emess62.de/img/kasper.png">
</header>
</main>
</body>
</html>Emess hatte den Text ja zuletzt auf dem Bild, daher hab ichs so gemacht...
Was?
Was schockiert dich denn? Und warum soll es sterben?
Mal davon abgesehen ist HTML kein Programmiersprache, also was meinst du genau mit fehleranfällig?
Du könntest zum Beispiel mal ältere Beiträge von mir lesen. Dann wirst du feststellen, dass ich immer das passende CSS für das jeweilige Problem empfehle und nichts gegen Flexbox habe, wenn es angebracht ist...
Ja gut, ich hatte jetzt nicht vor dich zu analysieren.
Ich hatte nur erwähnt, wie es auf mich wirkte und lag falsch, alles gut.
Ob Flexbox (display: flex;) oder CSS-Grid (display: grid;) zur Lösung des jeweiligen Problems besser geeignet ist hängt nicht davon ab, aus wie vielen Seiten die Website besteht.
Habe ich ja auch nicht gesagt.
Mit "bei dem simplen OnePager" bezog ich mich auf den sehr bescheidenen Inhalt der Seite, nicht auf die Seitenzahl!
Das dürfte der rest des Satzes aber auch so hergeben...
Schau dir
Codedisplay: grid;
mal genauer an.
Das sehe ich anders.
Ich selbst nutze für ein aktuelles Projekt zum Großteil grid mit flex im Detail, aber hier bei dem simplen Onepager mit keinen wirklichen Elementen & Struktur zum Layouten ist es für mich mit flex gut bedient.
Deine letzten beiden Antworten wirken auf mich wie von Leuten die grid genutzt haben, jetzt bei absolut jeder Seite darauf schwören und im Endeffekt genau das machen, was du weiter oben mit "... leider einseitig auf ... fixiert" kritisierst.
Kann sein, das ich es einfach nur falsch "rausgelesen" habe und du nicht zu dieser Gruppe gehörst, dann nichts für ungut.
Ich würde anhand seiner aktuellen Seite aber bei flex bleiben.
Habe ich eine falsche vorstellung von @mediaquerry?
Entferne ich das margin-right aus der "body>header>section" passt erst mal die smartphoneansicht aber in der Desktopansicht steht die headline direkt neben dem Bild
Ne du sollst es ja nicht aus body>header>section entfernen, sondern es einfach IN deinem Media-Query-Block überschreiben, damit die 30rem margin nicht für die Smartphone-Ansicht gelten.
Ich habe das so verstanden. flex-direction richtet aus
"row" -> nebeneinander
"column" untereinander
Ja.
Das margin-right" steht ja nicht in der Smartponeansicht...
Das hatte ich auch nicht gesagt. Ich sagte, das dein "margin-right" in der Smartphone-Ansicht fehl am Platz ist, also dass du es natürlich in deiner Media-Query für die Smartphone-Ansicht anpassen musst.
wie ich jetzt die Section in der Smartphoneansicht ausrichten soll hat sich mir noch nicht erschlossen.
Hab ich doch bereits gesagt.
Und wie ich sehe, hast du es ja teilweise schon umgesetzt. Entferne in der Smartphone-Ansicht noch den margin-right und du hast deine section zentriert über dem Bild.
Es tut mir leid wenn ich nerve
Du nervst nicht.
mit "diplay-flex" werden aber h1 und h2 nebeneinander dargestellt und ich müsst mit <br> arbeiten was ja wohl nicht optimal wäre
Nein! Zum einen heißt es "display: flex", zum anderen kennst du doch schon die Eigenschaft "flex-direction".
was wäre die Alternative?
Nicht Alternative, sondern du musst dir erst mal im Klaren sein, was du überhaupt willst. Zwei Überschriften sicher nicht.
Dein "Flexboxprojekt" wäre wohl die Headline, dein "Schaut doch mal rein" einfach nur ein Beitext.
Da würde ich einfach nur mit <h1> & <p> arbeiten.
Die h-Tags haben schon ihre Bedeutung und Gewichtung. Mal ganz davon abgesehen, dass auch Suchmaschinen sie entsprechend bewerten...
Hat bei mir keine Auswirkung.
Na das müsstest du aber mittlerweile schon erkennen können, was da nicht stimmt.
In der Smartphone-Ansicht ist dein "margin-right: 30rem" natürlich fehl am Platz!
Jetzt änderst du bei deinem header noch "justify-content: end" zu "justify-content: center" und ...
Wäre besser für uns, wenn man sich den genauen Code mal ansehen könnte...
Aber du könntest z.B. einfach im entsprechenden Element ein a-Tag platzieren und es bzgl. Position & Abmessung mit CSS einrichten.
Erstmal kurz:
Wie auch immer...
Soll es unter dem Bild, verschieb deine section unter das Bild und nutze "flex-direction:column".
Soll es mittig auf das Bild, gib deiner section "position: absolute".
Doch was wenn ich Absatze unterschiedlich stylen will?
Absätze innerhalb eines Textes unterschiedlich zu stylen ist eher ungewöhnlich.
Aber man kann es natürlich auch machen.
Wenn es nur 2 Absätze wären, würde ich mit ":first/last-of-type" arbeiten.
Bei mehr, würde ich dann die oben erwähnte "Ausnahme" bzgl. Klassen nutzen.
hab es nicht anders hinbekommen. Mir ist schon klar dass es viele Wege gibt. Doch ich verlaufe mich da schnell.
In deinem Code oben kannst du es doch ganz einfach mit "#about>div" ansprechen.
Weil in dem div.buttons die Elemente direkt unter einander gepackt werden, ist das jedoch nicht der Fall.
Auch wenn du es direkt im nächsten Satz vervollständigst, ist dieser Satz an sich etwas falsch formuliert.
Die Buttons (oder sonstige Element) werden NICHT nicht getrennt weil sie direkt untereinander gepackt sind, sondern weil das Elternelement keine (ausreichende) Höhe hat.
Wann nutze ich id's und wann class?
Ich nutzte sie so, wie es deren Bedeutung auch nahelegt:
ID => Einmalig im Dokument. Elemente, die man direkt im CSS oder komfortabler in JS ansprechen möchte.
Klassen => Elemente, die an verschiedenen Stellen im Dokument vorkommen (können), die aber einheitlich im CSS gestyled, oder gruppiert im JS angesprochen werden sollen.
Elementen, die man sehr einfach mit CSS-Selektoren ansprechen kann (z.B. direkte Kindelemente einer ID oder des body-Körpers) gebe ich nichts.
Für eine Section, ein einzelnes sich nicht wiederholendes Element. Etwas das nur einmal vorkommt, verwendet man "id" .
Es geht nicht um "sich nicht wiederholendes Element" an sich. Gerade einmalige Sachen in einem Dokument brauchen oft keine ID.
Eine ID sollte man vergeben, wenn man das entsprechende Element, und bequem auch direkt die Kindelemente ansprechen möchte/muss.
In einem Bereich mit mehreren Sections, die jeweils einen eigenen "Abschnitt" repräsentieren und die man dann natürlich entsprechend ansprechen will, ist eine Id gut genutzt.
Innerhalb der "id" verwendet man zb id="top" dann #top>ul>li und #top>ul>li>hover.
Kann man, muss man aber nicht. Wenn man aber auch die Kindelemente ansprechen will, wie in deinem Beispiel, dann ist eine ID natürlich sehr sinnvoll!
Eine class wird einmal definiert und greift wo sie im HTML angesprochen wird.
Eine Klasse gibst du jedem Element, das du gleich ensprechen / manipulieren willst.
Man könnte eine Klasse auch "anders" nutzen.
Zum Beispiel gibt es auch Leute, die einmalige Abschnitte wie folgende:
<main>
<section></section>
<section></section>
<section></section>
</main>lieber mit Klassen anstatt Id's versehen, einfach nur, weil sie es im CSS schöner finden, die Elemente so anzusprechen:
main>.klasseX
main>.klasseY
main>.klasseZIch nutze es auch manchmal, allerdings nur in entsprechend für mich sinnvollen / schönen Stellen, wo eine ID keinen Sinn machen würde, ich das Element (meist Kindelement einer ID) aber trotzdem "namentlich" direkter ansprechen möchte...
Doch wieso musste ich in der section about ".about-text" als klasse angeben?
Wie kommst du darauf, dass du es musst?
Kann ich eine Ansicht mit diesem Element erstellen und diese Ansicht in jeder Ansicht aufrufen, die ich benötige?
Und das hilft dir nicht weiter?
Würde folgendes empfehlen:
). Auch die Seiten-Fußzeile braucht, da direktes Kindelement von body keine ID oder Klasse. Einfach auch hier mit "body>footer" ansprechen.Auch beim CSS könnte man manches anpassen. Zum Beispiel deine beiden identischen Media-Query-Blocks zu einem zusammenfassen. Oder ein Element, dessen Elternelement "display:flex" hat, nicht mit "margin:auto" zentrieren. Oder das du das gleiche verschieden ansprichst (".nav ul" und ".list-container ul"), usw...
Dein Javascript würde ich, wie schon früher mal erwähnt auch entsprechend bischen anpassen.
Aber gut, das erstmal so auf die Schnelle...
Mag, bevor ich weitet an den Content #aboutme weitermache, jemand noch mal über meinen Code schauen...
Meinst du jetzt den Codeschnippsel oben, oder allgemein den Code auf der Seite?
Änder es mal so ab:
@media(max-width:750px)
{
#header
{
justify-content: center;
}
.kasper
{
min-width: 200px;
max-heigt: 100%; // Oder z.B. 90%, um oben & unten noch einen Abstand zu haben.
}
}Btw. wenn du dem header eh schon eine ID gegeben hast, würde ich die Klasse beim Bild weglassen und es mit "#header>img" ansprechen...
Mir ist dann allerdings aufgefallen,
dass in dieser Auflösung rechts der body hervor lugt. Und zwar nur in dieser Auflösung
Bei mir ist da nichts.
Kannst du mit rechter Maustaste -> Element untersuchen mal schauen, welches Element die Breite nach rechts übersteigt?