zum anderen kennst du doch schon die Eigenschaft "flex-direction".
Ich habe das so verstanden. flex-direction richtet aus
"row" -> nebeneinander
"column" untereinander
Das margin-right" steht ja nicht in der Smartponeansicht sondern soll die "section" auf der Hauptachse nach links bringen
wie ich jetzt die Section in der Smartphoneansicht ausrichten soll hat sich mir noch nicht erschlossen.
Es tut mir leid wenn ich nerve
- "display: flexbox" gibt es 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
- Es macht nicht viel Sinn, h2 UND h1 zusammen zu verwenden wenn der Inhalt dieses Abschnitts quasi nur aus einer Headline besteht. Schon garnicht in dieser Reihenfolge.
was wäre die Alternative?
- 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".
Hat bei mir keine Auswirkung . ich lade das Resultat noch mal hoch.
mir ist gelungen die Startseit mit Überschriften in einer Flexbox zu erstellen. ( Stolz erfüllt mein altes Herz)
Allerdings ist mein Code in den @mediaquerry eher suboptimal.
Die Überschrift sollen in der Smartphonansicht unter dem Bild oder von mir aus auch teils auf dem Bild mittig dargestellt sein.
<header>
<section>
<h2>Flexboxprojekt</h2>
<h1>Schaut doch mal rein</h1>
</section>
<img src="img/kasper.png">
</header>body>header>section{
display: flexbox;
align-self:center;
margin-right: 30rem;
}
body>header>section>h1{
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: bisque;
}
body>header>section>h2{
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: darkkhaki;
text-decoration: none;
@media(max-width: 750px)
body>header
{
justify-content: center;
}
body>header>img
{
max-height: 80%;
}
body>header>section{
display: flexbox;
align-self:center;
margin-right: 0;
}da brauche ich wieder Hilfe
wenn ich es mit "#about>p" anspreche kann ich auf das Div ganz verzichten.
Doch was wenn ich Absatze unterschiedlich stylen will?
Wie kommst du darauf, dass du es musst?
hab es nicht anders hinbekommen. Mir ist schon klar dass es viele Wege gibt. Doch ich verlaufe mich da schnell.
Um diesen Tread mal abzuschließen am Ende eine Frage.
so sieht es jetzt mit euerer Hilfe aus. (das eine oder andere Licht ist aufgeleuchtet)
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/script.js"></script>
<title>new Beginning</title>
</head>
<body>
<nav id="menu">
<div id="brand">Michael Schlegel</div>
<button type="button">
<span></span>
<span></span>
<span></span>
</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">Aboutme</a></li>
<li><a href="#">Kulinarisches</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</nav>
<header>
<img src="img/kasper.png">
</header>
<main>
<section>
<div id="about">
<h2>Übermich</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Doloremque repellendus recusandae doloribus repudiandae minima est
nam reiciendis cum eligendi inventore! Eius hic fugit nostrum
laudantium, corporis voluptatum nihil ipsam esse?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Illo, numquam? Aspernatur tempore earum soluta adipisci sit
eveniet, iusto non saepe, optio dolor deserunt quidem molestias sunt
facilis molestiae? Itaque, asperiores.</p>
</div>
</div>
</section>
<section id="kuli">Kulinarisches</section>
</main>
<footer class="footer">Footer</footer>
</body>
</html>*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
background-color: blue;
}
#brand
{
margin: 20px;
font-size: 1.2em;
font-weight: bold;
color: aqua;
align-self: center;
}
#menu
{
position: absolute;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: flex-end;
background-color: rgb(56,54,54);
color: white;
}
#menu>ul
{
display: flex;
background-color: rgb(56,54,54);
}
#menu>ul>li
{
padding: 30px;
list-style: none;
border-bottom: 4px solid transparent;
}
#menu>ul>li:hover
{
border-color: purple;
}
#menu>ul>li>a
{
text-decoration: none;
font-size: 1em;
font-family: sans-serif;
color: white;
}
#menu>button
{
position: absolute;
top: 25px;
right: 25px;
display: none;
justify-content: space-between;
width: 30px;
height: 23px;
background: none;
border: none;
cursor: pointer;
}
#menu>button>span
{
height: 4px;
width: 100%;
background-color: white;
border-radius: 2px;
}
body>header
{
height: calc(100vh - 80px);
padding-top: 80px;
display: flex;
align-items: center;
justify-content:flex-end;
background-color: black;
}
body>header>img
{
min-width: 200px;
max-height: 90%;
}
#about
{
height: 100vh;
background-color:white;
width: 100%;
}
h2
{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: underline;
padding-top: 2rem;
margin-bottom: 2rem;
}
.about-text
{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold ;
color: rgba(75, 72, 72, 0.912);
width: 70%;
margin:auto;
}
#kuli
{
height: 500px;
display: flex;
background-color: chocolate;
}
.footer
{
height: 80px;
background-color: rgb(56, 54, 54);
}
@media(max-width: 750px)
{
#menu
{
flex-direction: column;
}
#menu>ul
{
display: none;
flex-direction: column;
width: 100%;
}
#menu>ul.active
{
display: flex;
}
#menu>ul>li
{
text-align: center;
}
#menu>ul>li:hover
{
border-color: purple;
width: auto;
align-self: center;
}
#menu>button
{
display: flex;
flex-direction: column;
}
body>header
{
justify-content: center;
}
body>header>img
{
max-height: 80%;
}
}Wann nutze ich id's und wann class?
Ich verstehe es jetzt so.
Für eine Section, ein einzelnes sich nicht wiederholendes Element. Etwas das nur einmal vorkommt, verwendet man "id" .
Innerhalb der "id" verwendet man zb id="top" dann #top>ul>li und #top>ul>li>hover.
Eine class wird einmal definiert und greift wo sie im HTML angesprochen wird.
Doch wieso musste ich in der section about ".about-text" als klasse angeben?
Dann werde ich das mal angehen.
Ich hoffe, bei Problemen oder Nachfragen, weiterhin diese hier vorzutragen und Beistand zu bekommen.
Meinst du jetzt den Codeschnippsel oben, oder allgemein den Code auf der Seite?
Ich meinte den gesamten. Die Seite ist ja online. Oder ist es besser die Sache hier rein zu kopieren?
Super freu mich sehr.
<header id="header">
<img src="/img/kasper.png ">
</header>
<main>
#header {
height: calc(100vh - 80px);
padding-top: 80px;
display: flex;
align-items: center;
justify-content:flex-end;
background-color: black;
}
#header>img{
min-width: 200px;
max-height: 90%;
}
@media(max-width:750px){
#header {
/* display: flex;
align-items: center; */
justify-content:center;
/* background-color: black; */
}
#header>img {
min-width: 200px;
max-height: 80%;
/* margin-bottom: 300px; */
}
}der Tipp mit "#header>img" gefällt mir gut
Mag, bevor ich weitet an den Content #aboutme weitermache, jemand noch mal über meinen Code schauen
und mir sagen was ich besser bzw kürzer machen kann?
Wie komme ich ein Bild richtig responive?
"img-fluid!" kenn ich von Bootstrap Wie geht das mit der Flexbox.
Hab natürlich viel Seiten gelesen, mit Igel und vielen weiteren Beispielen.
Die einzige Erkenntnis die ich gewonnen habe ist wohl das Zauberwort "grid" doch wie sieht das in meinem Falle aus?
hier mal der Code und das Problem. Natürlich auch online einzusehen. my2.emess62.de
<header id="header">
<img class="kasper" src="/img/kasper.png ">
</header>
#header {
height: calc(100vh - 80px);
padding-top: 80px;
display: flex;
align-items: center;
justify-content:flex-end;
background-color: black;
}
@media(max-width:750px){
#header {
display: flex;
align-items: center;
justify-content:center;
background-color: black;
}
.kasper {
min-width: 200px;
/* margin-bottom: 300px; */
}
}Liegt wohl am Brave-Browser mit Chrome habe ich keine Probleme
So sieht es eleganter aus. Mir ist dann allerdings aufgefallen,
dass in dieser Auflösung
rechts der body hervor lugt. Und zwar nur in dieser Auflösung
Wozu dient denn bei dir der Abstand von 300px?
Ohne diesen Abstand wird von unten her gesehen nur ein halbes Bild angezeigt. von oben her müsste ich ins minus gehen.
Es geht aber ist wohl Pfusch 
Hab erst nicht verstanden was wie du das meinst . Hab es aber herausgefunden 
<header id="header">
<img class="kasper" src="/img/kasper.png ">
</header>
@media(max-width:750px){
#header {
display: flex;
align-items: center;
justify-content:center;
background-color: black;
}
.kasper {
min-width: 200px;
margin-bottom: 300px;
}
}Gibt es für mein CSS eine elegantere Möglichkeit. Stichwort "margin-bottom!?
Ich schrieb ja auch "dem Bild...", nicht dem header.
#header {
height: 900px;
display: flex;
align-items: center;
justify-content:flex-end;
background-color: black;
}
@media(max-width:750px){
#header {
display: flex;
align-items: center;
justify-content:center;
background-color: black;
}
.img header {
min-width: 200px;
}
}Auch das hat keine Auswirkung.
Bitte habt Geduld mit mir 
im Augenblick sieht es so aus
#header {
height: 900px;
display: flex;
align-items: center;
justify-content:flex-end;
background-color: black;
}
@media(max-width:750px){
#header {
display: flex;
align-items: center;
justify-content:center;
background-color: black;
}
}das "min-width" hat in beiden fällen keine Auswirkung.
Wobei mein css nicht besonders elegant zu sein scheint
So ich bin etwas weiter gekommen
doch wie bekomme ich das Bild in der Smartphone Ansicht eingepasst
so sieht die Smartphonansicht aus.
Ich habe mal heute morgen mir einige tuts und clips angeschaut..
Doch wäre es super wenn man mich hier noch mal in die richtige Richtung zu stoßen.
Es ist jetzt so, dass die Navigation auf dem Body liegt was ja ok ist .
Doch obwohl der header tag unter der Navigation angesiedelt sein Soll, scheint dieser über oder besser unter der Navigation zu liegen
zur Veranschaulichung
Ich steh auf dem schlauch
Mach es doch so, wie du es Tage zuvor schonmal erwähnt hast.
Einfach nur das sichtbare aus dem Bild ausschneiden und als Hintergrundbild mit schwarzem Hintergrund nutzen.
So kannst du das Bild dann auch wunderbar mobil skalieren...
Ok das werde ich probieren aber Geduld habe auch noch andere Lebensbaustellen.
Ich möchte eine zugeschnittene Version einer Website in eine eigene Website einbetten.
ich hab das zum Thema gefunden
HTML iframe: Fenster in eine andere Webseite
das könnte dir weiterhelfen
