• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Problem mit Zentrierung und Höhe + 3. Element?

A

Ansophie

Mitglied
Hallo,

Leider komm ich nicht mehr weiter: ich möchte das ganze zentrieren und den sandfarbenen hintergrund etwas reduzieren.

Ich wollte display:flex und margin verwenden, aber irgendwie verzieht sich dann alles. deswegen habe ich auch das schwarze element noch nicht geschafft.
Wäre super wenn mir dabei jemand helfen könnte.

Hier der link zu meinem Code: https://codepen.io/AnSophie/pen/bGBwXme

Es soll so aussehen, nur der Textbereich kann so bleiben, wie ichs schon in meiner Version habe.


lg,ansophie
 
Hallo, also wenn du die Box mit dem schwarzen Rahmen zentrieren willst mit der Flexbox dann setzt du die overbox auf display:flex; justify-content:center; (horizontal Ausrichtung und align-items:center; (vertikal). und dann die position eigenschaften von overbox-text wie absolute, top,left rausnehmen, da sonst die Flexbox nicht wirkt.
Reduzieren meinst du damit die Transparenz anpassen?
Dann passe den A-Werte bei rgba an <1. Dann kommt aber die Hintergrundfarbe die du hinterlegt hast beid er Box darunter zum Vorscheinen. Ausrichtung der over text/pic wurde ich dann nicht so absolut machen.
 
hi, danke für deine Antwort.

Habe versucht die divnamen zu verbessern, weils zu verwirrend war.
(einen kleinen syntaxfehler habe ich dabei entdeckt, das div overbox war eigentlich inaktiv, weil die anführungszeichen fehlten - hat aber keine große änderung gebracht.)

habe also deine anleitung befolgt, das hat auch schon ein bisserl geholfen, jedenfalls um etwas ordnung in die elemente zu bringen.

academy.of.webdesign schrieb:
Reduzieren meinst du damit die Transparenz anpassen?
Zum Vergrößern anklicken....
nicht ganz, damit meinte ich nur die Höhe der jetzt grünen box, aber das hab ich schon mal mit deiner flex-zuordnung beheben können.

nun, bis "overbox_white_inner" kenn ich mich noch aus, aber dann funktioniert es nicht, dass ich box1_text und die pinke box (die ist ja immer irgendwo) entsprechend versetzt fixiere. (das funktioniert jetzt nicht mal mehr mit ausrichtungen mittels top, left usw.).

mein nächster Versuch war nochmal ein Layer einzubauen (siehe inner_content), um es dann per z-index anzusprechen, aber dann schließt sich auch die pinke box an die weiße box an.

.....von der flexiblen anordnung bei abnehmender displaybreite wie in der demo version bin ich noch meilen entfernt. :(

könntest du bitte nochmal schauen und mir sagen wos hakt.


lg


p.s:
hier habe ich nochmal angefangen, um schritt für schritt mit neuen namen zu arbeiten.
vielleicht ist das besser zum weitermachen. https://codepen.io/AnSophie/pen/XWNNdjx
 
Interessanter Ansatz.

aber: ich brauche full_banner_hero_about (ich weiß, ist ein blöder name, aber der ist so gewachsen) und container2 so wie sie sind, weil die meinem layout-fundament entsprechen. demnach body auch.

Wenn ich deine version mit meinem body-gerüst verwende, dann passt es wieder nicht und ich steh am anfang - weil sich wieder alles in eine reihe stellt.

und wie kann ich dann mit den Prozenten die Elemente bewegen, wenn ich keine Abmessungen verwende. in der Demoversion funktioniert es ja auch mit den abmessungen.

könnten wir das bitte mit diesem pen durcharbeiten https://codepen.io/AnSophie/pen/XWNNdjx
 
Ich würde das mit aktuellem HTML und CSS lösen.

position, z-index und ähnliche CSS-Möglichkeiten sind veraltet, führen regelmäßig zu Problem und sollten deshalb nur in Ausnahmefällen verwendet werden, wenn es keine besseren Lösungen gibt.

Eine Skalierung abhängig von der Seitenbreite ist zwar möglich, aber führt bei Bildern fast immer zu unnötigen Problemen. Deshalb würde ich das Layout in vier oder fünf Stufen der Fensterbreite anpassen.

Dazu benötige ich aber noch Informationen wie die Container bei schmalen Fensterbreiten angeordnet werden sollen.

Um erst mal ein nachvollziehbares funktionierendes Beispiel zu erstellen habe ich aktuelles HTML und CSS verwendet. Falls du das verwenden willst, es aber nicht in deine Webseite übertragen bekommst, kann ich dir dazu auch noch Infos geben. Das Anordnen von Containern wird wahrscheinlich auch andere Besucher interessieren

Für die Anordnung der Container habe ich mit CSS-Grid ein Raster von 20 Spalten und 20 Reihen erstellt. In dem Raster habe ich dann drei Container positioniert (weiß, Grafik, Text).

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Container anordnen</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>

   /*Basisangaben*/
   @media all {
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0px;
      }
   }

   /*.abschnitt01*/
   @media all {
      .abschnitt01 {
         background-color: blanchedalmond;
      }
      .abschnitt01>article {
         width: 1000px;
         /*border: 1px solid grey;*/
         margin: 1rem auto;
         display: grid;
         grid-template-columns: repeat(20, 50px);
         grid-template-rows: repeat(20, 50px);
      }
      .abschnitt01>article>div {
         background-color: white;
         grid-column-start: 4;
         grid-column-end: 17;
         grid-row-start: 3;
         grid-row-end: 14;
      }
      .abschnitt01>article>figure {
         grid-column-start: 1;
         grid-column-end: 7;
         grid-row-start: 6;
         grid-row-end: 11;
      }
      .abschnitt01>article>section {
         grid-column-start: 9;
         grid-column-end: 16;
         grid-row-start: 7;
         grid-row-end: 11;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Container anordnen</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <section class="abschnitt01">
         <article>
            <div>
            </div>
            <figure>
               <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Hundsrose.jpg" alt="Hundsrose">
            </figure>
            <section>
               <h2>Rosen</h2>
               <p>Die Rosen (Rosa) sind die namensgebende Pflanzengattung der Familie der Rosengewächse (Rosaceae). Die Gattung umfasst je nach Auffassung des Autors 100 bis 250 Arten.</p>
            </section>
         </article>
      </section>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/problem-mit-zentrierung-und-hoehe-3-element.60338/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Der weiße Kasten läßt sich so problemlos zentriert auf der Seite positionieren.
 
Zuletzt bearbeitet:
@Sempervivum das umbenennen hatte ich vorher schon probiert, leider rutschen die divs immer wieder nebeneinander und verhalten sich fast wie absolut. aber sehr wahrscheinlich verdreh ich da irgendwas.

@MrMurphy ...grid...ich muss gestehen, vor dem hab ich mich immer gedrückt, da war mal was mit fractions oder so, das hab ich nicht so wirklich verstanden, das ist aber sicher schon 2 jahre her.

jedenfalls hab ich mal deinen vorschlag ausprobiert, es scheint als ob dieser Ansatz sogar mit den beiden divs passen würde.
Ansophie schrieb:
full_banner_hero_about .... und container2 ....
Zum Vergrößern anklicken....

Aber: da grid neu ist, brauch ich noch etwas länger um die Rastergrundlage korrekt zu wählen und hab noch ein paar fragen:

- ich hab mal gelesen, das grid nicht immer korrekt dargestellt wird, und dann elemente für user sogar nicht mehr sichtbar sind. stimmt das?

- kann man sich das zugrundeliegende Raster anzeigen lassen?

MrMurphy schrieb:
Deshalb würde ich das Layout in vier oder fünf Stufen der Fensterbreite anpassen.

Dazu benötige ich aber noch Informationen wie die Container bei schmalen Fensterbreiten angeordnet werden sollen.
Zum Vergrößern anklicken....
- damit ist es also möglich über die mediaqueries das ganze umzubauen, also die blume oben, text unten?

ich hab in meinem projekt figure und img schon verwendet - auf ersten blick hätte ich jetzt nicht gesehen, dass diese deswegen irgendwie verändert aussehen, weil sie dadurch auch angesprochen würden.
- muss ich dabei auf etwas bestimmtes achten?

die breite/höhe von dem sandfarbenden article element, konnte ich auf anhieb nicht so leicht schmäler stellen, hab jetzt mal ein padding: 2rem 1rem; ergänzt, das hat es zwar besser gemacht, dadurch ist aber das bild nicht mehr vertikal zentriert
-muss man jetzt das raster verändern?

-und wenn ich jetzt noch so ein dunkles dekoelement einfügen will, würd ich das mit einem div, da steht jetzt aber schon .abschnitt01>article>div kann ich das dann mit jeweils mit eigenen class-namen versehen, um die divs separat anzusprechen?

danke schonmal
 
grid...ich muss gestehen, vor dem hab ich mich immer gedrückt,
Zum Vergrößern anklicken....

Großer Fehler. Ganz großer Fehler.

- ich hab mal gelesen, das grid nicht immer korrekt dargestellt wird, und dann elemente für user sogar nicht mehr sichtbar sind. stimmt das?
Zum Vergrößern anklicken....

Nein, das ist falsch. CSS-Grid kann bereits seit mehreren Jahren problemlos verwendet werden.

jedenfalls hab ich mal deinen vorschlag ausprobiert, es scheint als ob dieser Ansatz sogar mit den beiden divs passen würde.
Zum Vergrößern anklicken....

Ja. Ich habe dafür ein Beispiel mit den von dir verwendeten div-Elementen erstellt. Die drei äußeren Container (full_banner_hero_about, container2 und box_inner) konnte ich so übernehmen, die inneren musste ich etwas umstellen. Wobei der Container "box_layer" wohl eher als Hilfscontainer gedacht war, der eigentlich überflüssig ist. Den habe ich trotzdem zum Spielen mit einem halbdurchsichtigen Hintergrund an anderer Stelle im Quelltext belassen.

- kann man sich das zugrundeliegende Raster anzeigen lassen?
Zum Vergrößern anklicken....

Mit CSS nicht (mein Wissensstand). Im Firefox kann man das im Inspektor einblenden.

damit ist es also möglich über die mediaqueries das ganze umzubauen, also die blume oben, text unten?
Zum Vergrößern anklicken....

Ja, das habe ich damit gemeint.

ich hab in meinem projekt figure und img schon verwendet - auf ersten blick hätte ich jetzt nicht gesehen, dass diese deswegen irgendwie verändert aussehen, weil sie dadurch auch angesprochen würden.
- muss ich dabei auf etwas bestimmtes achten?
Zum Vergrößern anklicken....

Nein. Eventuell musst du bei figure die Abstände und Ränder mittels CSS anpassen. Du kannst aber auch div-Container verwenden. Es kommt halt darauf an ob du aktuelles HTML verwenden willst oder nicht.

die breite/höhe von dem sandfarbenden article element, konnte ich auf anhieb nicht so leicht schmäler stellen
Zum Vergrößern anklicken....

Ich habe erst mal ein starres Layout erstellt. Wenn etwas geändert wird müssen deshalb auch alle abhängigen Werte angepasst werden. Wie bereits geschrieben (meine ich jedenfalls): Bei flexiblen Layouts sind überlappende Container mit Vorsicht zu genießen. Deshalb erstelle ich für mich erst mal ein starres - funktionierendes - Layout und sehe dann bei Bedarf weiter.

und wenn ich jetzt noch so ein dunkles dekoelement einfügen will, würd ich das mit einem div, da steht jetzt aber schon .abschnitt01>article>div kann ich das dann mit jeweils mit eigenen class-namen versehen, um die divs separat anzusprechen?
Zum Vergrößern anklicken....

Das sollte in dem neuen Beispiel für dich besser erkennbar sein. Du kannst natürlich mehrer div-Container verwenden und separat mit Klassennamen ansprechen.

Der Quelltext für die neue Lösung folgt in einem weiteren Beitrag, sonst wird dieser eventuell zu lang.
 
Nachfolgend der Quelltext für mein zweites Beispiel:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Container anordnen</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>

   /*Basisangaben*/
   @media all {
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         margin: 1rem 1rem 1rem 1rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0px;
      }
   }

   /*.full_banner_hero_about*/
   @media all {
      .full_banner_hero_about {
         background-color: #e4f9e1;
         padding: 1rem 0 0.3rem 0;
         border: 2px solid red;
         margin: 0.2rem 0;
      }
         .full_banner_hero_about .box_inner {
         background-color: #e4f9e1;
         justify-content: center;
         width: 1000px;
         padding: 2rem 1rem 2rem 1rem;
         border: 2px solid chocolate;
         margin: 1rem auto;
         display: grid;
         grid-template-columns: repeat(20, 50px);
         grid-template-rows: repeat(20, 50px);
     }
      .full_banner_hero_about .box_white {
         background-color: white;
         border: 1px solid blue;
         grid-column-start: 4;
         grid-column-end: 17;
         grid-row-start: 3;
         grid-row-end: 14;
      }
      .full_banner_hero_about .box_pink {
         grid-column-start: 1;
         grid-column-end: 7;
         grid-row-start: 6;
         grid-row-end: 11;
      }
      .full_banner_hero_about .box_text {
         grid-column-start: 9;
         grid-column-end: 16;
         grid-row-start: 7;
         grid-row-end: 11;
      }
      .full_banner_hero_about .box_black {
         background-color: black;
         color: white;
         padding: 1rem 1rem;
         border: 1px solid green;
         grid-column-start: 16;
         grid-column-end: 21;
         grid-row-start: 1;
         grid-row-end: 5;
      }
      .full_banner_hero_about .box_layer {
         background-color: hsla(180, 100%, 25%, 0.5);
         padding: 1rem;
         border-radius: 0.5rem;
         grid-column-start: 11;
         grid-column-end: 20;
         grid-row-start: 12;
         grid-row-end: 16;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Container anordnen</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <div class="full_banner_hero_about">
         <div class="container2">
            <div class="box_inner">
               <div class="box_white">
               </div>
               <div class="box_pink">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Hundsrose.jpg" alt="Hundsrose">
               </div>
               <div class="box_text">
                  <h2>Rosen</h2>
                  <p>Die Rosen (Rosa) sind die namensgebende Pflanzengattung der Familie der Rosengewächse (Rosaceae). Die Gattung umfasst je nach Auffassung des Autors 100 bis 250 Arten.</p>
               </div>
               <div class="box_black">
                  <p>box_black</p>
               </div>
               <div class="box_layer">
                  <p>box_layer</p>
               </div>
            </div>
         </div>
      </div>
   </main>
   <aside class="sidebar">
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/problem-mit-zentrierung-und-hoehe-3-element.60338/">https://www.html.de/</a></p>
   </footer>
</body>
</html>
 
Hi, also vielen dank für deine Vorlage, vor allem die zweite ist extrem hilfreich. ich mag grid mehr als ich gedacht hab. :)
ich hab auch schon die media queries ein bisserl probiert, fürs erste scheint das gut zu klappen. werde mir das morgen noch genau ansehen und einiges ausprobieren:
- ein raster mit mehr spalten und zeilen aber mit kleinere größe (um mehr spielraum für ein bild im querformat (box_pink) zu erreichen).
- den farbigen hintergrund im full_banner über die ganze länge zu legen.
- den box-layer wie eine art wasserzeichen zu verwenden, dabei allerdings nur einen rangezoomten ausschnitt eines Bildes anzeigen. bisher hätt ich das mit background-position umgesetzt.

darf ich mich dann melden, wenn was unklar ist?!
 
viele stunden und mind. 10 html-dateien später.....

--> Raster anzeigen lassen in google chrome geht auch:

Im quellcode der Elementanzeige gibt es neben den Zeilen, wo das grid verankert ist, einem „grid-buttton“, wenn man das anklickt, dann wird das Raster samt Nummerierung dargestellt. - sehr hilfreich.

Nun zu meinen Fragen:

Probiert habe ich Raster mit einer fixen anzahl an spalten und reihen, aber eine Rasteranpassung repeat(autofit, ..px) sagt mir mehr zu.

? gibt es die möglichkeit ein element (hier die weiße box) automatisch in der mitte anzuordnen?
einmal hats funktioniert, dann hab ich aber die einstellung verloren. justify-content hat nicht gegriffen. leider weiß ich nicht mehr was es war.

wenn die displaybreite weniger wird, rutscht es zusammen, was es ja bis zu einem bestimmten grad auch soll, aber dann quetscht es sich irgendwie. deswegen hab ich jetzt mediaqueries in 7 schritten. ist das nicht ein bisschen viel? 8/

Vom waagrechten ins senkrechte layout verschiebt sich z.B. das weiße Quadrat in der Mitte (das ist dann zuweit links) und dann stimmt der rest logischerweise auch nicht mehr.

? Justify-content wäre eine Option, heißt es, dann verliert sich aber irgendwie die rasterbreite und alles fällt in die mitte zusammen.

Ich habe den Eindruck, dass ich die breite/höhe der einzelnen „gridzelle“ bzw die spaltenanzahl nicht passend wähle.

Wäre hier minmax(px, 1fr) anzuwenden? worauf bezieht sich minmax?

- weshalb wird hier eigentlich min-width:1px; oder min-height: 1px; angegeben?
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
/*margin: 0rem;*/
}

img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0px;
}
}

zu meiner wasserzeichen-idee bin ich noch gar nicht gekommen, geht das überhaupt? :(
 
Hallo,

ich versuche mich immer noch am grid, daher schreibe ich in diesem thread weiter. hoffentlich ist das nicht auch wieder
Sempervivum schrieb:
eine Anordnung mit Ebenen bzw. Layern, wie man es von Programmen wie Photoshop und Affinity Photo kennt
Zum Vergrößern anklicken....
das hab ich mir nämlich selbst ausgedacht und ist diesmal kein Nachbastel-projekt.

Was mir einfach immer noch nicht gelingen will, ist die richtige grundbestimmung eines rasters, um dann damit zu arbeiten. die elemente sind nie dort wo ich sie haben will.

Ich kann nicht mehr weiter. ich hatte schon mal soweit das es fast so war wie ich es haben wollte, und dann plötzlich wars weg. ich finde meinen fehler nicht. ich habs jetzt schon 3x neu begonnen (auch ohne grid). =...(

hier mein pen: https://codepen.io/AnSophie/pen/ZEBXpej

erklärung dazu:
alle drei boxen sollen in der reihe zentriert bleiben, was sie anfangs sind,
- aber mit kleinerwerdendemndisplay rutschen sie nach rechts weg.

Die Platzhalterboxen 1 und 2 schrumpfen nach oben, das passt,
- aber die texte laufen aber seitlich raus.
- die unteren platzhalterzeilen sollten links- bzw. rechstbündig sein, leider sind sie es trotz text-align nicht mehr.
- die Platzhalterboxen sollen über die mittlere logo-box drüberrutschen, aber nur soweit, dass der platzhaltertext das XOXO-Logo nicht berührt und
- die längeren zeilen sollen nicht umbrechen (daher habe ichs mit festen width probiert).

Bitte helft mir, was passt hier nicht , ich verzweifle. :(

lg
 
Schwierig.

Bei der Erstellung von Webseiten bist du gedanklich eher bei Zeichen-, Textverarbeitungs- und Gestaltungsprogrammen. Das hat mit Webseiten aber nichts zu tun.

Dann verwendest du absolut unsinnigen Inhalt. Das funktioniert nicht.

Verwende Bilder, wo Bilder hinsollen. Verwende Adressen, wo Adressen hinsollen. Verwende sinnvollen deutschen Text, wo später deutscher Text hinsoll.

Verwende keinen "Lorem ipsum"-Text. Verwende nicht immer die selben Worte.

Ändere die Textgröße nicht aus gestalterischen Gründen. Verwende keine HTML-Elemente aus gestalterischen Gründen. Dafür sind die nicht gedacht. Für bestimmte Inhalte gibt es die zugehörigen HTML-Elemente.

Verwende geeignete Container. Damit machst du dir das Leben viel einfacher. Aus deinen Fragen ist teilweise kaum ersichtlich was du willst, da vor lauter Platzhaltern kaum nachvollziehbar ist, worauf du dich grade beziehst.

Lasse alle überflüssigen Container weg. Das hat sich bewährt und ist deshalb inzwischen auch in den HTML-Regeln vorgegeben.

Lass den ganzen -webkit- und -ms-Kram weg. Der ist aktuell nicht mehr erforderlich. Dadurch wird dein Quelltext nicht besser, sondern nur unübersichtlicher und ist aufwändiger zu pflegen.

Das von dir bemängelte Verhalten ist ganz normal und entstammt teilweise deinem unsinnigen Inhalt mit teilweise sehr langen Worten.

Wenn der Inhalt eines Containers nicht mehr in diesen hineinpasst geht er über dessen Grenzen hinaus.

Eine Ausrichtung nach rechts oder links ist nur möglich, wenn dafür entsprechend Platz vorhanden ist.

Linksbündig, zentriert und rechtsbündig bezieht sich immer auf den Platz des betroffenen Elements in seinem Container. Nicht auf die vorigen oder folgenden Elemente.

Wenn eine rechtsbündige Textzeile keinen Platz mehr in ihrem Container hat rutscht sie nach rechts aus diesem heraus. Wenn die nachfolgende Textzeile noch Platz hat, bleibt sie im Container. Die stehen dann nicht mehr rechtsbündig übereinander, obwohl sie rechtsbündig ausgerichtet sind.
 
Zuletzt bearbeitet:
Ich habe grade versucht mich durch deinen Quelltext zu arbeiten - keine Chance. Was sich worauf bezieht ist für mich stellenweise nicht nachvollziehbar.

Für die Anwendung von CSS-Grid sehe ich zudem keine Grundlage.
 
@MrMurphy

zu deinem Post #16

das sind teilweise harte Worte die du da an mich richtest, und dabei hab ich mir wirklich mühe gegeben.
Für jemand der eh grad am verzweifeln ist, ist es dazu echt eine Draufgabe dann noch die brauchbaren Hinweise zwischen den vielen Vorwürfen herauszulesen zu müssen. Eine etwas freundlichere Antwort hätt auch gut getan. Ich schreib ja schließlich hier meine Fragen nicht, um Leute zu nerven. Sondern weil es Freude macht, sich auszutauschen und mit Unterstützung vorwärts zu kommen.
MrMurphy schrieb:
absolut unsinnigen Inhalt
Zum Vergrößern anklicken....

"Platzhalter" und "Lorem ipsum" oder sonstiges "BlaBla" sind halt eben scheinbar sinnlose Texte, die dennoch einen Sinn haben, sie sind Blindtexte.
ja, ich hätte vielleicht auch Max Mustermann in der Max-Musterstrasse 220/8/9 Stadt Land nehmen können (aber daran habe ich um halb 2 in der Nacht, bei der Bereitstellung der anonymisierten Version nicht mehr gedacht), oder ich hätte auch mein komplettes Original nehmen können, allerdings will ich meine persönlichen Daten nicht einfach so ins Netz online stellen.
und wenn man es ganz genau nimmt:
Grundsätzlich ist es egal, ob da "Platzhalter" steht oder nicht - weil die beiden äußeren boxen quasi spiegelverkehrt sind und die box in der Mitte quasi statisch, bis auf eine responsive Größenänderungen. und weil ich grad dabei bin, zufällig hat das unsinnige Wort PlatzhalterPlatzhalter dieselbe Buchstabenanzahl wie die Adresse.
MrMurphy schrieb:
Ändere die Textgröße nicht aus gestalterischen Gründen.
Zum Vergrößern anklicken....
Das habe ich nicht, aber wenn es dann responsive ist und dazu noch gut aussieht, was will man dann mehr?

-webkit kram und so weglassen - ja kann ich, aber aufgrund der mir - absolut und im vollem Ausmaß - fehlenden Routine, ist es nur logisch, dass meine Vorgehensweise nicht immer und überall am neuesten Stand ist, und sehr wahrscheinlich auch nie sein wird. Und normalerweise schreibe ich sowas nicht in Pens, aber ich habe eben um halb 2 nachts auch daran nicht mehr gedacht.

MrMurphy schrieb:
Bei der Erstellung von Webseiten bist du gedanklich eher bei Zeichen-, Textverarbeitungs- und Gestaltungsprogrammen. Das hat mit Webseiten aber nichts zu tun.
Zum Vergrößern anklicken....
Ich verstehe nicht was du meinst. Eine Website geht ohne Textverarbeitung und Gestaltung nicht.

So oder so, es wäre mir natürlich viel angenehmer, wenn ich meine Website, in die ich schon sehr viel Zeit, Geduld und Herz investiert habe, einen Profi zur Betreuung inkl. Starthilfe bzgl. SEO/SEA übergeben kann, der die erfahrenere Gestaltung umsetzen kann, vieles verbessert und Fehler quasi mit Fingerschnipsen behebt.
Aber was das heute am Markt kostet, kann ich mir in dieser Größenordnung leider nicht leisten. Und Teilaufträge bei bestehender Website ohne CMS oder Wordpress auf einem selbstgewählten Provider sind in 98% der Fälle unerwünscht.

zu deinem Post #17

Danke, dass du dir trotz deiner Kritik doch noch die Zeit genommen hast, dir meinen Pen anzusehen.
Bedauerlich, dass du keine Chance siehst (Ich habe mittlerweile auch keine Kraft mehr, die zu sehen.)
MrMurphy schrieb:
Für die Anwendung von CSS-Grid sehe ich zudem keine Grundlage.
Zum Vergrößern anklicken....

Ich bin mir 100% sicher, dass es mit grid funktioniert hat, aber dann leider habe ich unbedacht, eine Einstellung verändert, und plötzlich war alles verrutscht. den weg mit flex hab ich nicht gefunden.


Nun, ich werde diese Variante in den Papierkorb werfen und es anders versuchen.

-
 
Zur Hilfe gehören auch deutliche Worte. Grade wenn du auf einem falschen Weg unterwegs bist.

Ich habe auch nichts von echten, persönlichen, Inhalten geschrieben. Wenn ich "echte" Texte suche bediene ich mich häufig bei Wikipedia. Andere erfinde ich halt auf die schnelle.

Aus deinem CSS entnehme ich, dass in dem Header links ein Logo und rechts eine Adresse stehen sollen.

Eine Test- oder Beispieldatei ohne echte Daten mit sinnvollem zweifachem CSS-Grid-Einsatz sieht bei mir dann folgendermaßen aus:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout</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>

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*.pageheader-Überschrift*/
   @import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');

   /*Basisangaben*/
   @media all {
      * {
         min-width: 1px;
      }
      html {
         min-height: 100vh;
      }
      body {
         min-height: 100vh;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
   }

   /*body*/
   @media all {
      body {
         max-width: 1200px;
         margin: 0 auto 0 auto;
         display: grid;
         grid-template-rows: auto 1fr auto;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         width: 100%;
         margin: 0rem auto 0rem auto;
      }
      .pageheader>* {
         padding: 0.5rem;
         margin: 0 auto 1rem auto;
      }
      .pageheader figure {
         max-width: 200px;
      }
      .pageheader section {
         text-align: center;
         max-width: 300px;
      }
      .pageheader section h1 {
         font-family: 'Petit Formal Script', cursive;
         font-size: 1.8rem;
      }
      .pageheader aside {
         max-width: 300px;
      }
      .pageheader aside p {
         margin: 0rem 0rem 0rem 0rem;
      }
      .pageheader aside :nth-child(4) {
         margin-bottom: 1rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .pageheader {
         display: grid;
         grid-template-columns: auto auto;
         justify-content: center;
      }
      .pageheader figure {
         grid-column: 1;
         grid-row: 2;
      }
      .pageheader section {
         grid-column-start: 1;
         grid-column-end: 3;
      }
      .pageheader aside {
         grid-column: 2;
         grid-row: 2;
      }
   }
   @media only screen and (min-width: 900px) {
      .pageheader {
         display: grid;
         grid-template-columns: auto 1fr auto;
      }
      .pageheader figure {
         grid-column: 1;
         grid-row: 1;
      }
      .pageheader section {
         grid-column-start: 2;
         grid-row: 1;
      }
      .pageheader aside {
         grid-column: 3;
         grid-row: 1;
      }
   }

   </style>
</head>
<body>
   <header class="pageheader">
      <figure>
         <img src="https://images.vexels.com/media/users/3/207993/isolated/lists/4c9c2c164782f8ba7cc585230a319ae9-gelbe-einfache-krysanthemenblume.png" alt="Logo der Dreamfactory">
      </figure>
      <section>
         <h1>Dreamfactory</h1>
         <p>Genießen Sie die Freiheit</p>
      </section>
      <aside>
         <h2>Kontakt</h2>
         <p>ansophie</p>
         <p>Liedergasse 7</p>
         <p>12345 Wolkesieben</p>
         <p>Telefon: 040 4545337</p>
         <p>eMail: [email protected]</p>
      </aside>
   </header>
   <main class="content">
   </main>
   <footer class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/problem-mit-zentrierung-und-hoehe-3-element.60338/#post-405647">https://www.html.de/</a></p>
   </footer>
</body>
</html>

Direkt zum Testen bei w3schools.com:

https://www.w3schools.com/code/tryit.asp?filename=GNWKYP5AVUW7

Auf "Run" klicken.
 
Zuletzt bearbeitet:
@MrMurphy Danke für die nette Vorlage. :)

Hm, scheinbar habe ichs nicht gscheit erklärt und der Code war zu chaotisch. Mein Fehler.

Habe mir noch eine Chance gegeben, um meinen Code doch noch aufzuschlüsseln.

Es ist mir gelungen. So in etwa habe ich mir das vorgestellt - divs sind zwar nicht weniger, dafür aber mit "geborgtem logo" und "phantastisch-realistischen Adressen".

Auf kleinem Display habe ich es noch nicht getestet. Zumindest geht es aber mal bis 855px. allerdings musste ich dort margin anwenden. Um mit der Rasterpositionierung weiterzumachen und die beiden außenboxen passend zur Mitte "rutschen" zu lassen, ist die column-Anzahl vielleicht um eine oder 2 oder + zu wenig, ich weiß es nicht.

hier mein Pen: https://codepen.io/AnSophie/pen/bGBojmV
 
schaut sehr gut aus. leider ist aber die Anordnung unterhalb/untereinander nicht sehr praktisch, weil das ja im header steht und dann beginnen nav und maincontent viel zu weit unten.
 
Meine Hilfe ist nur als Beispiel für eine mögliche Lösung gedacht und wie sie mit aktuellem, korrektem HTML und CSS erstellt werden kann.

Was du mit deiner Webseite machst, ob du Teile oder gar nichts von meinen Vorschlägen verwendest, ist alleine deine Entscheidung.

Wenn du die drei Container des Pageheaders bei schmalen Fensterbreiten nebeneinander halten willst - alleine deine Entscheidung.

Ich kann dich und alle anderen Mitleser (für die ich ja auch schreibe, ein Forum ist keine persönliche Beratung) nur darauf hinweisen, dass bei Webseitenbesuchern zu kleine Schriften bei Webseitenkritiken seit Jahrzehnten immer ganz oben stehen. Das gilt bereits für die Browser-Standdardschriftgrößen. Das solltest du zumindest wissen.
 
Ich habe noch ein Beispiel mit sich ändernder Schriftgröße erstellt, ohne dass die Container im Header umbrechen:

https://www.w3schools.com/code/tryit.asp?filename=GNXN7CXSTCCZ

Das Beispiel sollte sich auch eignen, falls du (oder auch Andere) andere Einheiten wie vw ausprobieren wollen. Die CSS-Angaben zur Schriftgrößenänderung befinden sich in einem separaten CSS-Block.

Wobei die Einheit vw nicht für Schriftgrößen entwickelt wurde, sondern eher für Container im Grundlayout. Die Einheit vw wurde dann wie alle anderen Einheiten in die Schriftgrößen übernommen. Auch hier gilt die Regel: Nicht alles was möglich ist, ist auch sinnvoll. Das muss jeder für sich selbst ausprobieren und entscheiden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben