Du siehst auf dem Bild den Bildschirm eines S9+ quer Es steht oben und unter über.
Es passt sich nicht im Bildschirm an. Weiß gerade nicht wie ich es besser erklären soll
Du siehst auf dem Bild den Bildschirm eines S9+ quer Es steht oben und unter über.
Es passt sich nicht im Bildschirm an. Weiß gerade nicht wie ich es besser erklären soll
Es steht oben und unter über.
Das liegt daran, das man dem Bild eine "Basis" geben muss, auf dessen Grundlage es angepasst wird.
Im bisherigen Code haben wir dafür "min-width: 200px" verwendet.
Jetzt hast du in deinem CSS "max-heigt: 55%", das geht auch.
Allerding ist diese Angabe in der Media-Query mit der Bedingung "max-width: 750px" verknüpft.
Dein S9+ hat horizontal ausgerichtet sicherlich genau wie das S10+ 760px, daher greifen die Angaben im Media-Query hier nicht mehr.
Du kannst jetzt entweder einen angepassteren Wert, der auf beiden Ansichten greift, als "Basis" setzen, oder du kannst auch eine Media-Query speziell für die horizontale Ansicht nutzen...
Btw. schmeiß das "display: flex" aus deinem img-Block, das hat da nichts zu suchen.
Flex & Grid sind sinnlos bei einem einzigen Element ohne Kindelemente.
Und noch eine kleine Ergänzung:
Da du jetzt offensichtlich den Text unter dem Bild haben willst ist es Blödsinn, die <section> weiterhin als "position: absolut" zu belassen und dann mit padding zu arbeiten!
Schmeiß position & padding raus, gib dem <header> "flex-direction: column" und der <section> "order: 1".
Und auch deine <section> braucht kein "display: flex", da h1 & p standardmäßig "display: block" haben und somit automatisch untereinander gesetzt werden. Da ist "display: flex & flex-direction: column" völlig sinnlos.
Und nimm doch endlich die "margin-right: 30rem" weg...
Oh, ich Depp habe grad erst dein Bild gesehen, in dem auch die Abmessungen (658px) zu sehen sind...
Aber egal, ändert nichts an der Begründung.
ZitatJetzt hast du in deinem CSS
Soweit ich verstanden habe gilt die Frage nicht dem Quelltext von Emess, sondern deinem Quelltext aus Beitrag #31.
Soweit ich verstanden habe gilt die Frage nicht dem Quelltext von Emess, sondern deinem Quelltext aus Beitrag #31.
Kommt auf's selbe hinaus.
In meinem Beispiel verwende ich sogar nur "max-width: 700px" im MQ-Block
Ich war ein paar Stunden weg und die Diskussion ist weiter gegangen, aber will nicht versäumen, die Frage von AndreasB in #35zu beantworten:
Zitat von AndreasBKannst du erklären, wieso dieser Weg "verfehlt" ist?
Gern. Wie der Name schon sagt, ist Grid dafür entwickelt worden, ein Gitter zu produzieren. Dieses erstreckt sich in zwei Dimensionen, horizontal und vertikal. Haben wir nur zwei Container neben einander, fehlt die zweite Dimension und die Anwendung eines Grid macht keinen Sinn. Hier ist dann Flex besser geeignet, weil sich dieses auf eine eindimensionale Anordnung beschränkt. Und mit flex:1 für beide Flexitems kann man problemlos die selbe Breite einstellen. Damit habe ich noch nie irgend welche Probleme gehabt.
Übrigens, ich vergaß zu erwähnen: Bei einem Posting wie #30 mit dem umfangreichen HTML und CSS ohne Erklärungen oder Kommentare frage ich mich ebenfalls, wo die Mitglieder sind, die sonst leidenschaftlich das Posten von fertigem Code beanstanden.
Alles anzeigenDas liegt daran, das man dem Bild eine "Basis" geben muss, auf dessen Grundlage es angepasst wird.
Im bisherigen Code haben wir dafür "min-width: 200px" verwendet.
Jetzt hast du in deinem CSS "max-heigt: 55%", das geht auch.
Allerding ist diese Angabe in der Media-Query mit der Bedingung "max-width: 750px" verknüpft.
Dein S9+ hat horizontal ausgerichtet sicherlich genau wie das S10+ 760px, daher greifen die Angaben im Media-Query hier nicht mehr.
Du kannst jetzt entweder einen angepassteren Wert, der auf beiden Ansichten greift, als "Basis" setzen, oder du kannst auch eine Media-Query speziell für die horizontale Ansicht nutzen...
Btw. schmeiß das "display: flex" aus deinem img-Block, das hat da nichts zu suchen.
Flex & Grid sind sinnlos bei einem einzigen Element ohne Kindelemente.
Und noch eine kleine Ergänzung:
Da du jetzt offensichtlich den Text unter dem Bild haben willst ist es Blödsinn, die <section> weiterhin als "position: absolut" zu belassen und dann mit padding zu arbeiten!
Schmeiß position & padding raus, gib dem <header> "flex-direction: column" und der <section> "order: 1".
Und auch deine <section> braucht kein "display: flex", da h1 & p standardmäßig "display: block" haben und somit automatisch untereinander gesetzt werden. Da ist "display: flex & flex-direction: column" völlig sinnlos.
Und nimm doch endlich die "margin-right: 30rem" weg...
Oh, ich Depp habe grad erst dein Bild gesehen, in dem auch die Abmessungen (658px) zu sehen sind...
Aber egal, ändert nichts an der Begründung.
das ist auch interessant.
Aber dass sich das bild im Querformat nicht anpasst, bezieht sich auf dein Code aus dem Post #31, den ich mir heruntergeladen habe um mit rum zu testen.
dh. an meinem bisherigen code habe ich noch nichts geändert.
ZitatUnd nimm doch endlich die "margin-right: 30rem" weg...
deshalb habe ich mit deinem Code rumgespielt. da wird es ja nicht gebraucht. Aber ich habe nur lokal mit getestet.
Ich lade das heute abend hoch.
frage ich mich ebenfalls, wo die Mitglieder sind, die sonst leidenschaftlich das Posten von fertigem Code beanstanden.
Schreibt derjenige, der in anderen Foren regelmäßig fertige Codes postet oder sogar per PN hilft.
Können wir das Thema mit diesem fertigen-Code-Bullshit jetzt mal wieder runterschrauben?
Wenn jemand eine Frage stellt und man dann mit einem vollständigen Code antwortet, finde ich es ja noch nachvollziehbar darüber zu meckern.
Wenn jemand aber eine Frage stellt, Code liefert und man dann seinen Code umschreibt und ihm somit mitteilt, was man persönlich besser machen würde, dann ist das Gemecker finde ich übertrieben.
Das meine ich aber natürlich nur bei Leuten, die wie Emess offensichtlich schauen & experimentieren, nicht bei Leuten die ohne eigenes Zutun eine Fertiglösung erhoffen.
Das meine ich aber natürlich nur bei Leuten, die wie Emess offensichtlich schauen & experimentieren, nicht bei Leuten die ohne eigenes Zutun eine Fertiglösung erhoffen.
Da bin ich ja beruhigt.
Ich habe aber immer noch ein Problem. Du hast ja den <header> in <main> gesetzt. Bei mir ist die Hierachie
das zerschießt mir allerdings meine Navigation in der Smartphone Ansicht .
Jetzt müsste man doch noch die Navigation auch komplett vom <body> trennen . Oder und nur wie?
Das nav-Element ist nur für Navigationsblöcke gedacht einschließlich (falls sinnvoll) passenden Überschriften und / oder verlinkten Bildern.
Das header-Element hat genau wie nicht zur Navigation gehörende Bilder nichts im nav-Element verloren.
Umgekehrt darf das header-Element ein nav-Element enthalten.
In der Regel werden header- und nav-Elemente getrennt, da die Seite so flexibler an unterschiedliche Bildschirme und andere Ausgabegeräte angepasst werden kann. Wobei es keine Rolle spielt, ob zu erst das header-Element oder das nav-Element im Quelltext steht.
Alles anzeigenDas nav-Element ist nur für Navigationsblöcke gedacht einschließlich (falls sinnvoll) passenden Überschriften und / oder verlinkten Bildern.
Das header-Element hat genau wie nicht zur Navigation gehörende Bilder nichts im nav-Element verloren.
Umgekehrt darf das header-Element ein nav-Element enthalten.
In der Regel werden header- und nav-Elemente getrennt, da die Seite so flexibler an unterschiedliche Bildschirme und andere Ausgabegeräte angepasst werden kann. Wobei es keine Rolle spielt, ob zu erst das header-Element oder das nav-Element im Quelltext steht.
Habe meine Hierachie falsch abgetippt. Sorry!
jetzt ist sie korregiert. Schau es dir nochmal an. nicht, dass es zu Unstimmigkeiten führt
Das mit der Navigation konnte ich mit z-Index lösen. Aber das bild will einfach nicht so wie ich will
Bild bekomme ich nicht mittig und im Querformat nicht wirklich responsive.
Bei deiner aktuellen Seite liegt es daran, das dein <header> 100vh hat, also auch die Fläche der <nav>, die ja absolut positioniert ist, mit einbezieht.
Machst du die Höhe wieder auf "height: calc(100vh - 80px)" mit entsprechendem Abstand von der <nav> und gibst dem Bild noch ein "max-height: 100%" oder so, dann klappt das...
Irgendwie ist dein Code jetzt aber (vermutlich durchs Experimentieren) ordentlich durcheinander.
Dein <main>, der den eigentlichen Seiteninhalt beinhalten sollte, umschließt jetzt nur deinen <header>. Der eigentliche Content geht erst nach </main> los...
Ich glaube, du solltest lieber kurz mal durch deinen Code und deine Seite gehen und mal genauer definieren, was du eigentlich genau möchtest.
Habe mal die Seite komplett dargestellt wie sie werden soll Farben und Gedöns kann sich natürlich ändern.
Content1 bis Content3 gibt überwiegend Galerien mit etwas Text.
Mir ist es jedoch nach wie vor nicht gelungen das Bild in allen Ansichten responsiv zu gestalten und mit dem Ausrichten klappt bei mir auch nicht.
Etwas muss ich übersehen oder falsch verstehen
Ich schau es mir morgen mal gründlicher an.
Na "position: absolute" beim Bild ist Quatsch und bringt dich entsprechend noch mehr aus der Struktur...
Ich habe deinen Code jetzt mal folgendermaßen angepasst:
Um jetzt mal auf gleicher Basis zusammen weiter zu machen, hier die angepasste CSS:
*
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html, body
{
height: 100%;
background-color: blue;
}
#brand
{
margin: 0 1rem;
font-size: 1.2em;
font-weight: bold;
color: aqua;
}
#menu
{
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(56,54,54);
color: white;
}
#menu>ul
{
display: flex;
background-color: rgb(56,54,54);
height: 100%;
}
#menu>ul>li
{
padding: 0 1rem;
list-style: none;
border-bottom: 4px solid transparent;
display: flex;
align-items: center;
}
#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
{
display: none;
justify-content: space-between;
flex-direction: column;
width: 30px;
height: 23px;
background: none;
border: none;
cursor: pointer;
}
#menu>button>span
{
height: 4px;
width: 100%;
background-color: white;
border-radius: 2px;
}
main>header
{
display: flex;
justify-content: space-between;
align-items: center;
height: calc(100vh - 80px);
background-color: black;
}
main>header>section
{
flex-grow: 1;
font-weight: bold;
text-align: center;
}
main>header>section>h1
{
color: darkkhaki;
}
main>header>section>p
{
font-size: 2rem;
color: bisque;
}
main>header>img
{
min-width: 200px;
max-height: 100%;
margin-left: 1rem;
}
main>section
{
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main>section>h1
{
margin: 2rem 0;
}
#about
{
background-color:white;
}
#about>p
{
font-weight: bold ;
color: rgba(75, 72, 72, 0.912);
width: 70%;
}
#content1
{
background-color: chocolate;
}
#content2
{
background-color: rgb(183, 248, 129);
}
#content3
{
background-color: rgb(191, 160, 244);
}
footer
{
display: flex;
height: 90px;
justify-content: center;
align-items: center;
background-color: rgb(56, 54, 54);
color:aliceblue;
}
@media only screen and (max-width: 700px)
{
#brand
{
margin-left: 1rem;
}
#menu>ul
{
position: absolute;
display: none;
flex-direction: column;
width: 100%;
height: auto;
align-items: center;
top: 80px;
}
#menu>ul.active
{
display: flex;
}
#menu>ul>li
{
padding: 1rem 0;
}
#menu>button
{
display: flex;
margin-right: 1rem;
}
main>header
{
flex-direction: column;
justify-content: space-around;
}
main>header>section
{
flex-grow: 0;
}
main>header>img
{
max-width: 90%;
min-height: 40%;
margin: 0;
}
}
Alles anzeigen
Wo genau soll der <header>-Text hin? Unterhalb, oberhalb, oder auf dem Bild?
Das ist ja super. Ich klick mich nachher mal durch um es auch wirklich zu verstehen.
Wo genau soll der <header>-Text hin? Unterhalb, oberhalb, oder auf dem Bild?
der Text soll eigentlich unter das bild. Aber ich will ihn hischieben können wo ich will. Weilsich der Tex bestimmt noch ändert und ne andere Schrift erhält.
Da wird man schon mit margin bzw padding arbeiten müssen (Denke ich mir so)
Da wird man schon mit margin bzw padding arbeiten müssen (Denke ich mir so)
Gib der <section> dazu einfach "order: 1"
"order" sortiert wohl die Reihenfolge der items. In meinem Fall kann ich mit "0" bzw "1" die Headline über bzw unter dem bild anordnen.
Wieso? Hat sich mir noch nicht erschlossen.
Aber das eigentlich problem ist : Der Content von Section #about soll oben und mittig sein.
Jetzt ist ee vertikal zentriert und oben und unterhalb des Contentes schau Blau der body hervor und bringt mich zum verzweifeln.
Mit dem "justify-content" und "align-items" des umgebenden section-Elements zentrierst du das div#about horizontal und vertikal..
Das div#about nimmt durch seinen Inhalt die gesamte Breite des umgebenden section-Elements ein, wird aber nur so hoch wie sein Inhalt. Das ist das ganz normale Verhalten.
Du musst also dem div#about entweder mehr Inhalt oder eine vorgegebene Höhe mit auf seinen Weg geben.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.