nicht angemeldet Wishpacker
Der Martin
Auge
Der Martin
Wishpacker
Auge
Wishpacker
Wishpacker
Rolf B
Rolf B
Wishpacker
Rolf B
Wishpacker
Rolf B
Guten Tag zusammen,
ich hätte gerne die Überschrift und die Beschreibung so positioniert, wie es auf dem Bild zu sehen ist. 2012 habe ich meine erste Webseite ins Netz gestellt aber ich fühle mich immer noch als Änfänger. Ich muss zugeben, die HTML- und CSS Tutorials habe ich nur überflogen. Ich versuche immer das heraus zu picken, was ich gerade brauche und genau da tu ich mich schwer. Bei meiner Seite handelt es sich zwar um Joomla, aber ich betrachte mein Anliegen auf Anfängerniveau was nichts mit dem CMS an sich zu tun hat.
Theoretisch muss ich doch jetzt dafür sorgen, dass die Überschrift nach dem Bild geladen wird. Und dann??
Hallo,
ich hätte gerne die Überschrift und die Beschreibung so positioniert, wie es auf dem Bild zu sehen ist.
hast du doch auch - oder welches Problem hast du dabei?
Theoretisch muss ich doch jetzt dafür sorgen, dass die Überschrift nach dem Bild geladen wird.
Warum? - Mal abgesehen davon, dass das sowieso nicht geht: Die Überschrift ist Text, steht also direkt im HTML-Code. Das Bild ist eine externe Ressource, die asynchron nachgeladen wird, das kommt zwangsläufig einen kurzen Augenblick später.
Aber das ändert an der Positionierung nichts. Solange man nicht aktiv dagegen kämpft, werden die Elemente auch in der Reihenfolge angezeigt, in der sie im Quelltext auftreten.
Sorry, aber ich kann beim besten Willen dein Problem nicht erkennen oder verstehen.
Immer eine Handbreit Wasser unterm Kiel
Martin
Hallo
ich hätte gerne die Überschrift und die Beschreibung so positioniert, wie es auf dem Bild zu sehen ist.
hast du doch auch - oder welches Problem hast du dabei?
Nein, hat er nicht. Zumindest in einem breit gezogenen Desktopbrowserfenster.
Sorry, aber ich kann beim besten Willen dein Problem nicht erkennen oder verstehen.
Wenn du den Screenshot mit der problematischen Seite vergleichst, wirst du nach einigem umschauen sehen, dass der Abschnitt mit der Fragezeichengrafik und den Schriftzügen „HowTo“ und „other HowTo's“ im Screenshot anders sortiert ist, als auf der Seite, wo diese Elemente untereinander in der Reihenfolge „HowTo“, Fragezeichengrafik und „other HowTo's“ stehen.
Tschö, Auge
Moin,
Wenn du den Screenshot mit der problematischen Seite vergleichst, wirst du nach einigem umschauen sehen, dass der Abschnitt mit der Fragezeichengrafik und den Schriftzügen „HowTo“ und „other HowTo's“ im Screenshot anders sortiert ist, als auf der Seite, wo diese Elemente untereinander in der Reihenfolge „HowTo“, Fragezeichengrafik und „other HowTo's“ stehen.
stimmt, das ist mir gar nicht aufgefallen. Ich dachte, es ginge um die Überschriften der einzelnen Beiträge (z.B. FTP-Verbindung in Notepad++) und dem nachfolgenden Beschreibungstext. Auf den Kopfbereich der Seite hatte ich gar nicht geachtet.
Immer eine Handbreit Wasser unterm Kiel
Martin
Ja richtig! Es geht um den Bereich mit dem Fragezeichen. Entschuldigung, dass ich es nicht markiert habe.
Wie bekomme ich es hin, damit es so aussieht wie auf dem Bild? Mein Gedanke war ja, dass ich die Grafik über "HowTo" setzen muss, damit der Text bei float oder display: inline neben das Fragezeichen springt.
Hallo
Ja richtig! Es geht um den Bereich mit dem Fragezeichen. Entschuldigung, dass ich es nicht markiert habe.
Wie bekomme ich es hin, damit es so aussieht wie auf dem Bild? Mein Gedanke war ja, dass ich die Grafik über "HowTo" setzen muss, damit der Text bei float oder display: inline neben das Fragezeichen springt.
Abgesehen davon, dass es heutzutage [1] viel besser geeignete CSS-Techniken gibt, deinen Wunsch zu realisieren (Stichwort: „Grid“), ist ein erster und gravierender Hinderungsgrund für die Umsetzung, dass dein HTML fehlerhaft ist.
Laut dem Doctype im HTML-Quelltext deiner Seite verwendest du HTML 4.01 Strict. Leider ist das einerseits überaus veraltet und andererseits befolgst du nicht die Regeln dieser HTML-Variante (Elemente schließen, etc.). Du schreibst im OP (Eröffnungsposting), dass du Joomla als System benutzt. Stammt der HTML-Quelltext aus einem fertigen Template/Theme oder hast du selbst daran herumgeschraubt?
Sei's wie es sei. Du brauchst erstens ein Template, Theme, das aktuelle Webtechniken verwendet (HTML5, CSS3) und andererseits in diesem Template/Theme eine Elementstruktur, die dein Ansinnen unterstützt.
Was du erreichen willst, ist, die Elemente für das Icon (aktuell (?) das Fragezeichen), die Überschrift „HowTo“ und den Untertitel „other HowTo's“ gemeinsam zu gruppieren. Also gehören sie zuallererst in ein gemeinsames Elternelement.
<div>
<h2>HowTo</h2>
<div>other HowTo's</div>
<img src="/Joomla/images/kategoriebilder/howto.png" alt="" />
</div>
Danach kann man das die betreffenden Elemente gruppierende div zu einem Grid erklären und die einzelnen Elemente darin wie gewünscht verteilen. Das ist alles kein Problem, erfordert aber erst einmal eine ordentliche HTML-Struktur und die Verwendung der vorgenannten aktuellen Techniken. Mit HTML4.01 solltest du jedenfalls nicht mehr auch nur irgendwas beginnen.
Tschö, Auge
10 Jahre nach deinen ersten Experimenten (nach deinen eigenen Worten im OP) ↩︎
Ich habe 2012 meine Webseite mit einem WYSIYG-Editor erstellt und 2013 mit dieser Anleitung in Joomla übertragen. Aber wenn ich das Grid-Layout verstanden habe, werde ich es mit einem Blank-Theme neu erstellen.
Jedenfalls habe ich mir ein Video über Grid angesehen und es auch mal versucht und es hat nicht geklappt.
Die entsprechende PHP-Datei:
<div class="kategorie-header">
<?php if ($this->params->get('show_category_title')) : ?>
<h2 class="subheading-category">
<?php echo JHtml::_('content.prepare', $this->category->title, '', 'com_content.category.title'); ?>
</h2>
<?php endif; ?>
<?php if ($this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
<div class="category-desc">
<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
<img src="<?php echo $this->category->getParams()->get('image'); ?>"/>
<?php endif; ?>
<?php if ($this->category->description && $this->params->get('show_description')) : ?>
<?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
CSS:
.kategorie-header {
display: grid;
width: fit-content;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.kategorie-header h2.subheading-category {
grid-column-start: 2;
}
.kategorie-header p.category-desc {
grid-column-start: 2;
grid-row-start: 2;
}
.kategorie-header img.category-desc {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 2;
}
Warum funktioniert es nicht? Ich habe es so verstanden, dass es zwingend ein übergeordnetes div braucht oder könnte ich auch einfach überall das dazu schreiben, was ich bei .kategorie-header geschrieben habe?
Und muss ich grid-column-end oder grid-row-end auch schreiben, wenn ich das Element sowieso nur in einem Raster haben möchte? Bzw. Muss ich überhaupt grid-row-start schreiben, wenn ich nur die Spalte ändern will?
Warum funktioniert es nicht? Ich habe es so verstanden, dass es zwingend ein übergeordnetes div braucht oder könnte ich auch einfach überall das dazu schreiben, was ich bei .kategorie-header geschrieben habe?
Wartet mal:
Ich kann ja mehrere Klassen zuweisen indem ich z.B. class="subheading-category kategorie-header"> schreibe.
Das meinte ich eigentlich.
Brauch ich dann überhaupt ein div um alles?
Hallo Wishpacker,
Brauch ich dann überhaupt ein div um alles?
Du meinst kategorie-header? Ich denke, dieses div möchte lieber ein header Element sein. Du könntest es im CSS dann auch mit .blog header referenzieren und brauchst nicht zwingend eine class dafür.
.kategorie-header p.category-desc
Greift nicht, weil es kein p Element mit Klasse category-desc gibt.
Wenn Du das p innerhalb von div.category-desc ansprechen willst, wäre der Selektor dafür
.kategorie-header .category-desc p
Rolf
Hallo Rolf,
also so:
<section class="blog">
<header>
<img src="/Joomla/images/kategoriebilder/howto.png">
<h2>HowTo</h2>
<p>Other HowTo's</p>
</header>
...
</section>
mit diesem CSS
.blog header {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: 0.5em repeat(3,auto);
column-gap: 1em;
}
.blog header img {
grid-area: 1 / 1 / span 4 / span 1;
}
.blog header h2 {
grid-area: 2 / 2;
}
.blog header p {
grid-area: 3 / 2;
}
.blog header h2, .blog header p {
grid-column: 2;
margin: 0;
}
grid-row: 2 / 4;, dann geht das Element nicht von Spalte 2 bis 4, sondern von Grid-Line 2 bis 4. Und das ist Spalte 2 bis 3.Rolf
Beachte bei grid-row und grid-column, dass die Zahlenwerte dort nicht die Zeilen und Spaltennummern angeben, sondern die Grid-Line. Grid-Lines sind die gedachten Trennlinien vor, zwischen und hinter den Spalten. Beim Start ist das wurscht, weil die vertikale Grid-Line X links von Spalte X ist. Aber wenn sagst: grid-row: 2 / 4;, dann geht das Element nicht von Spalte 2 bis 4, sondern von Grid-Line 2 bis 4. Und das ist Spalte 2 bis 3.
Das versteh ich nicht. Ich habe aber auch Probleme mit räumlicher Vorstellung vielleicht liegt es daran.
grid-column-start ist ja nicht das Problem, wenn ich möchte dass das Element in der ersten Spalte startet muss ich auch eine 1 eintragen und bei grid-column-end könnte ich mir ja dann merken, die Spalte wo ich eigentlich will +1. Verstehst du? Geht das so oder kann das auch in die Hose gehen, wenn ich mir das so merke? Ich habe diesen Generator benutzt um mir ein Grid für mein anliegen zu erzeugen und dann den Code paar mal zu lesen und zu verstehen.
So habe ich den Generator eingestellt und das habe ich bekommen.
Warum ist das nicht so wie ich mir das wünsche, wenn ich es doch mit einem visuellen Generator mache? Hat der Generator ne Macke oder ich? Das einzige was mir aufgefallen ist, dass die Überschrift laut dem Code einen pinken Hintergrund haben sollte d.h. Die Überschrift wird nicht angesprochen. Warum nicht?
Hallo Wishpacker,
das Grid-Layout operiert im Normalfall nur mit den direkten Kind-Elementen des Grid-Containers. Die Ausnahmen erzähle ich später.
D.h. wenn Du dieses HTML hast:
<div class="kategorie-header">
<h2 class="subheading-category">HowTo</h2>
<div class="category-desc">
<img src="howto.png">
<p>Other HowTo's</p>
</div>
</div>
und das kategorie-header DIV das Grid ist, dann kannst Du das h2 und das category-desc DIV im Grid positionieren - das sind direkte Kind-Elemente des grid-Containers. Das img und p Element dagegen nicht. Schau in mein HTML, das habe ich "flach" gemacht, d.h. h2, img und p sind alle direkte Kind-Elemente des kategorie-header DIV.
Deine grid-start/-end Angaben für's img sind schon richtig, aber weil das img ein Enkel des Grid ist, greift das nicht.
Zu den Ausnahmen:
display:contents. Wenn dein category-desc DIV die CSS Eigenschaft display:contents hätte, würde es gehen. Dann wird das DIV nämlich beim Layouten behandelt, als wäre es nicht da. Es ist zwar im DOM, aber nicht im Layout. Hätte es Rahmen oder Hintergrund, würden die nicht dargestellt. Sowas macht man aber nur, wenn es unbedingt nötig ist.
Subgrid - das kannst Du in unserem Wiki oder bei Mozilla nachlesen, das ist nicht produktionsreif, weil es nur im Firefox läuft.
Also - wenn es keinen zwingenden Grund gibt, das category-desc DIV zu verwenden, dann lass es weg.
Ein anderer Ansatz wäre, auf das Grid ganz zu verzichten und das Fragezeichenbild als background-img des kategorie-header zu setzen. Entweder über ein gefloatetes ::before-Element:
<header class="kategorie-header">
<h2>HowTo</h2>
<p>Other HowTos</p>
</header>
.kategorie-header {
overflow:hidden;
}
.kategorie-header::before {
content: "";
background-image: url(howto.png);
float: left;
width: 75px;
height: 75px;
margin-right: 0.5em;
}
Sowas ist nötig, wenn das Bild noch eine Hintergrundfarbe bekommen soll, aber wenn ich dein Zielbild anschaue, ist das nicht der Fall.
Alternativ geht auch ein background-image des .kategorie-header selbst. Gleiches HTML, und dieses CSS:
.kategorie-header {
background: url(howto.png) no-repeat left center;
padding-left: 85px; /* Bildbreite plus Abstand */
min-height: 75px; /* Bildhöhe */
}
Wenn Du die Bildgröße nicht in CSS meißeln willst, dann setze eine Hintergrundgröße, z.B. diese:
background: url(howto.png) no-repeat left center / 4em auto;
und dann kannst Du min-height und padding-left guten Gewissens in em angeben. Rolf
Hallo Rolf,
Ich danke dir für deine Geduld mit mir. Ich habe ein bisschen rumgeschraubt und das Grid ist ein Stück hübscher geworden. Sieh es dir mal an.
1.) grid-template-columns habe ich von auto auto auf 5fr 95fr geändert um Titel und Beschreibung näher ans Bild zu bekommen. Aber ich glaube, das ist nicht die perfekte Lösung. Wenn ich das Browserfenster verkleinere schriebt sich der Text noch näher ans Bild und die rosanen Balken werden kürzer. Ich hätte aber gerne, dass nur die rosanen Balken kürzer werden bzw. das Grid nur so Breit ist wie der Inhalt und dafür nicht bis nach ganz rechts geht. Ich habe grid-template-colums: repeat(2, minmax(min-content) ausprobiert, aber es hat nicht funktioniert.
2.) Nehmen wir mal an, ich möchte ein Blank-Theme von einem beliebigem CMS bearbeiten, kann aber z.B. die Klassen nicht anpassen da ich die Struktur nicht kenne. Ist es deiner Ansicht nach dann akzeptabel display:contents anzuwenden? Ist dann das darin enthaltene Element gar nicht mehr ansprechbar oder nur das Div direkt nicht?
Hallo Wishpacker,
auto auto auf 5fr 95fr geändert um Titel und Beschreibung näher ans Bild zu bekommen. Aber ich glaube, das ist nicht die perfekte Lösung.
Das siehst Du richtig. Das Bild hat ja eine feste Breite und der Text füllt den Rest. Das muss sich im column-Template wiederfinden.
Nimm grid-template-columns: 75px 1fr;.
75px deshalb, weil dein Bild 75px hat. Du kannst auch eine andere Angabe machen, um das Bild in anderer Größe darzustellen, z.B. 3em. Dann skaliert das Bild mit der vom Benutzer gewählten Schriftvergrößerung; du musst dem img Element dann aber noch width:100% geben. Ein column-gap wäre auch noch gut im Grid, um etwas Abstand zwischen Bild und Text zu schaffen, z.B. 0.5em.
das Grid nur so Breit ist wie der Inhalt
Alternative A: grid-template-columns: 75px max-content;. Das div Element füllt immer noch die ganze Breite (gib ihm eine Hintergrundfarbe, um das zu zeigen), aber die Grid-Spalten sind nur noch links.
Alternative B: lass die Textspalte auf 1fr, aber gib dem div noch width: max-content;. Dann wird das ganze div schmaler.
Und wie ich schon schrub - das div möchte eher was anders sein. Semantisches Markup ist heutzutage angesagt, ein div ist oftmals lieber ein header, footer, nav, section, article oder aside. Oder auch figure oder blockquote. Manchmal ist ein div einfach nur ein div. Aber nur manchmal.
Rolf