Beiträge von Emess

Was ist das für eine Website?

Wenn da mehrere Personen sich anmelden und Kurse buchen, Wäre da nicht eher ein CMS (zB WP o.Ä) geeignet.

Aber das hat letztendlich weniger mit HTML und CSS zu tun.

Hallo ich mache gerade die zweite Seite für einen italienischen Bekannten. Um es gleich vorweg zunehmen. Seine Dankbarkeit lässt er in der Hinsicht Raum, dass ich 2 x Im Monat bei ihm im Essen darf. Damit sind wir beide zufrieden.

Ja und mit Flexbox mache ich nach dem Urlaub an meinem eigenen Projekt weiter. Jetzt aber zum Problem.

Ich habe eine ähnliches Bootstraptemplate wie für sein 1. Restaurant gefunden und auch ganz gut angepasst.

Doch leider bin ich wieder in die Falle getappt und habe nicht die alle Media-Querries mit angepasst. Und jetzt habe ich den Faden verloren.

In der PC Ansicht. habe ich nur das Problem, dass ich die Bilder nicht mittig bekomme.

Ansonsten hoffe ich dass mir mit Mediaquerries aus der Patsche helfen kann. Speziell in der Section #team was auf events verweist

Ein Link sagt mehr als tausend Worte.

https://my.emess62.de/

Der Abschnitt ist wohl gelöst. Hab noch ein to top button (tut) eingebaut.

https://my2.emess62.de/

Jetzt hat es klick gemacht. Hoffentlich merk ich es mir.

main>section>h1
{
    margin: 2rem 0;
   
}

das wirkt auf alle sections inerhalb von <main>

#about>h1{
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    text-decoration: underline;
    color: blueviolet;
}

Das wirkt sich nur auf die <section id="#about"> aus. (Ist nur ein Beispiel)

Ich bin echt schwer von Begriff. Und nochmal Dan für Geduld und Freundlichkeit. Ihr seid die Besten!

Soweit so gut.

was genau bewirkt eigentlich in Zeile 122

main>section>h1
{
    margin: 2rem 0;
}

Da kann ich ändern was ich will aber es hat keine Auswirkung. Obwohl doch "h1" in den einzelnen Sectionen benutzt werden?

https://my2.emess62.de/

"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.

https://my2.emess62.de/

Das ist ja super. Ich klick mich nachher mal durch um es auch wirklich zu verstehen.

Zitat von nextuser

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)

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

Das mit der Navigation konnte ich mit z-Index lösen. Aber das bild will einfach nicht so wie ich will

gal1.pnghoch

gal2.pngquer

Bild bekomme ich nicht mittig und im Querformat nicht wirklich responsive.

Meine Haedline scheint mir mit padding-top auch suboptimal.

https://my2.emess62.de/

Zitat von MrMurphy

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.

Habe meine Hierachie falsch abgetippt. Sorry!

jetzt ist sie korregiert. Schau es dir nochmal an. nicht, dass es zu Unstimmigkeiten führt

Zitat von nextuser

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

<body>
    <nav></nav>
        <header>
            <section>
                <img>
            </section>
        </header>
</body>

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?

Zitat von nextuser

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.

Alles anzeigen

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.

Zitat

Und 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.

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

nextuser . Habe gerade mal etwas mit deinem Code aus #31 gespielt.

Dabei ist mir aufgefallen, das bild passt sich den Smartphoneansichten im Querformat nicht an.

Von Bootstrap kenne ich "image-fliud", Ist das ohne Bootstrap zu zu realisieren?

quer.png

Wie ich es verstanden habe, wäre in meinem Falle der gesamte Screen mit 2 Container gefüllt.

Bei mir gibt es aber nu 2 Elemente die sich wohl nicht wiederholen werden

Für mich ist das interessant die Wege nach Rom zu vergleichen.

In meinem Fall sehe ich den von nextuser als besser geeignet, Besonders den aktuellen schau ich mir nochmal genau an.

Für eine Galerie wär wohl der weg von MrMurphy geeignet. Aber das sehe ich hoffentlich, wenn es soweit ist.

Vielen Dank an alle.

Das ist ein angenehmes und lebendiges Forum.

Wir müssen ja nicht diskutieren was besser ist. Im Augenblick bin ich ja am Anfang mit Flexbox.

wenn ich später zu Bildergalerien komme, wird bestimmt Grid hinzu kommen..

Jetzt würde mich mehr interessieren ob ich beim bisherigen Projekt margin oder position mit modernen Alternativen ersetzen kann?

Zitat von MrMurphy

1. Korrektes HTML

2. Passendes CSS

Du bist beim CSS leider einseitig auf Flexbox fixiert. CSS ist aber ein Gesamtpaket und Flexbox ist für viele Lösungen halt nur schlecht oder gar nicht geeignet.

Eine Grundregel beim HTML und CSS ist zum Beispiel, den Quelltext minimal zu halten. Also nur HTML-Elemente und CSS-Anweisungen zu verwenden, die notwendig sind.

Da stimm ich dir zu. Denn korrektes HTML und passendes CSS ist ja genau was ich will.

Doch weiter hilft das erst mal nicht

Also "margin-right: auto;" in der @mediaquery

Man das war eine schwere Geburt. Ich hatte einfach deine Hinweise nicht richtig verstanden. Stand total auf dem Schlauch

Zitat

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.

Das hat mir die Augen geöffnet

Vielen Dank für deine Geduld

PS. Gibt es eine Alternative zu margin-right? Denn die @mediaquery greift ja erst bei Auflösung 750px.

D.h. zwischen 750px- ca.1358px wird die section nicht angezeigt. Weil margin-right aus dem Bild schiebt.

Ich würde denken man muss für jede gängige Auflösung eine @mediaquery anlegen. Aber wer denkt schon so wie ich?

Zitat von nextuser

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.

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.

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

ins.png