Zeilenumbruch verhindern

[Klaus]

Hi,
wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, wenn die Seite verkleinert wird?
Beispiel:
<img   > Deutsche Version - Englische Version <img   >
Die Zeile darf getrennt werden vor oder nach dem - aber nicht zwischen <img> und Text bzw. Text und <img>.
Gruß
Klaus

[Paul]

Hallo!

wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, wenn die Seite verkleinert wird?

Gib dem umschließenden Element eine Breitenangabe.

Grüße

[Klaus]

Hallo!

wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, wenn die Seite verkleinert wird?

Gib dem umschließenden Element eine Breitenangabe.

Grüße

Wie soll ich die Breitenangabe angeben? Sie ist doch abhängig vom Ausgabemedium.

[Paul]

Wie soll ich die Breitenangabe angeben?

Zum Beispiel so:

.mycontainer{  
min-width: 200px;  
}

<div class="mycontainer"><img>DE | EN<img></div>

Beachte ausserdem, dass Länderflaggen keine Sprachen darstellen und du, wenn du die Sprache ausschreibst - z.b. "Englisch", entweder ISO-Kürzel (EN) oder die jeweilige Sprache verwendest ("english").

Sie ist doch abhängig vom Ausgabemedium.

Nein, ist sie nicht. Das was du dann noch von der Breite siehst, ist abhängig vom Ausgabemedium.

[Klaus]

Wie soll ich die Breitenangabe angeben?

Zum Beispiel so:

.mycontainer{

min-width: 200px;
}

> `<div class="mycontainer"><img>DE | EN<img></div>`{:.language-html}  
>   

Die Pixelangabe ist aber sicher nicht geeignet für ein "responsive Design"!

[Paul]

Die Pixelangabe ist aber sicher nicht geeignet für ein "responsive Design"!

Ich zitiere mich mal selbst und markiere dir die wichtige Stelle ;)

Zum Beispiel so:

--------

Bisher war von einem responsiven Design nie die Rede aber es hält dich auch niemand davon ab anstatt px, em, % oder Bratkartoffeln zu benutzen. Regele responsive Layouts über die CSS Media-Queries*.

* Ist wohl auch mal einen Blog-Artikel wert, so oft wie das Thema zur Zeit angeschnitten wird...

[Klaus]

Es kann doch wohl keine Lösung sein, für alle solche Fälle eine Breitenangabe zu machen.
Ändere ich den Text oder kommt der Text als Parameter, so kann ich auch die Breitenangabe ändern.
Ich habe inzwischen die Lösung gefunden: Einschließen in <div> mit display: inline-block

[Gunnar Bittersmann]

@@Paul:

nuqneH

Beachte ausserdem, dass Länderflaggen keine Sprachen darstellen

So ist es.

und du, wenn du die Sprache ausschreibst - z.b. "Englisch", entweder ISO-Kürzel (EN)

Ausschreiben und Kürzel verwenden widerspricht sich. Und ob man Sprachkürzel verwenden kann, hängt sehr stark von der Zielgruppe ab. Meist sollte man es nicht.

oder die jeweilige Sprache verwendest ("english").

Nicht pauschal. Das hängt davon ab, wofür es gedacht ist.

Und BTW, „English“ schreibt sich groß – im Gegensatz zu „englisch“, wo beides möglich ist.

Qapla'

[Melvin Cowznofski]

Hallo Klaus!

wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, wenn die Seite verkleinert wird?

Ich nehme an, bei den Bildern handelt es sich um Flaggen. Mit html5 und CSS3 wäre es _eine_ elegante Lösung, mit <figure> zu arbeiten und die Sprache als <figcaption> dem Bild zuzuordnen. Nun sind Bild und Text schon mal untrennbar verbunden.

Allerdings sind die beiden <figure> Elemente zunächst noch untereinander angeordnet und wir wollen sie ja nebeneinender haben. Deshalb wird das Elternelement, in dem sie sich befinden, zur Flexbox gemacht.

Nun sind beide Bilder mit darunterliegendem Text nebeneinander. Da es aber zu einem Umbruch kommen soll, wenn sich die Viewportbreite verkleinert, kommt jetzt noch ein "Responsiv Webdesign" dazu, im dem wir per CSS festlegen, dass sich die beiden <figure> Elemente unter einer bestimmten Viewportbreite untereinander anordenen sollen.

Damit Du das besser nachvollziehen kannst, habe ich eine entsprechende Beispielseite samt CSS geschreiben. Schau Dir bei beiden den Quelltext an, um besser zu verstehen, was ich gerade geschrieben habe.

In meinem Fall sind die "Bilder" jeweils 200px breit, deshalb werden sie untereinander angeordenet, sobald die Viewportbreite unter 400px ist. Als Flexbox-Container dient in meinem Fall das <article> Element. Du kannst es live testen. Du wirst natürlich andere Breiten haben und das Ganze auch nicht so wie auf der Beispielseite links oben kleben haben wollen, aber wenn Du das Prinzip verstanden hast, kannst Du die Sache ja für Dich modifizieren.

Mit lieben Grüßen

Melvin Cowznofski

[Klaus]

Hallo Melvin,

vielen Dank für Deine Mühe. Allerdings muss der Text (in Deinem Beispiel "Deutsche Version", "Engl..." neben dem Bild stehen.
Gruß
Klaus

[Melvin Cowznofski]

Hallo Klaus!

Allerdings muss der Text (in Deinem Beispiel "Deutsche Version", "Engl..." neben dem Bild stehen.

Und wo ist jetzt das Problem? Ich sagte doch, Du musst das Styling Deinen Wünschen entsprechend modifizieren! Mit einem position:relative; kannst Du den Text ja hinstellen, wo Du magst!

Und voilà.

Mit lieben Grüßen

Melvin Cowznofski

[Matthias Apsel]

Om nah hoo pez nyeetz, Melvin Cowznofski!

Allerdings sind die beiden <figure> Elemente zunächst noch untereinander angeordnet und wir wollen sie ja nebeneinender haben. Deshalb wird das Elternelement, in dem sie sich befinden, zur Flexbox gemacht.

Wobei flexbox hier überdimensioniert ist. display: inline-block; für die figure-Elemente leistet das gleiche und wird von deutlich mehr Browsern unterstützt.

Matthias

[Melvin Cowznofski]

Hallo Matthias!

Wobei flexbox hier überdimensioniert ist.

Da hast Du schon Recht, das ist natürlich ein gewisses "mit Kanonen auf Spatzen schießen", aber dafür sind Bild und Text eine fixe Einheit und ich brauche mir keine Gedanken darüber machen, dass sie die Scheidung einreichen.

Mit lieben Grüßen

Melvin Cowznofski

[Matthias Apsel]

Om nah hoo pez nyeetz, Melvin Cowznofski!

Wobei flexbox hier überdimensioniert ist.

[...] aber dafür sind Bild und Text eine fixe Einheit und ich brauche mir keine Gedanken darüber machen, dass sie die Scheidung einreichen.

das sind sie dank figure und nicht dank flexbox.

Matthias

[Gunther]

Hi!

wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, ...?
Beispiel:
<img   > Deutsche Version - Englische Version <img   >
Die Zeile darf getrennt werden vor oder nach dem - aber nicht zwischen <img> und Text bzw. Text und <img>.

Für's Archiv:
Mich wundert, dass die eigentlich dafür gedachte CSS-Eigenschaft 'white-space' hier bisher nicht genannt wurde.

Eine "einfache" Variante besteht also darin, die Elemente, die nicht umgebrochen werden sollen, in einem Container-Element zusammenzufassen (im konkreten Beispiel reicht ein SPAN Element - bei Blocklevel-Elementen ein DIV Element), und dessen CSS-Eigenschaft auf 'white-space:nowrap' zu setzen.

Siehe auch: http://css-tricks.com/almanac/properties/w/whitespace/

Gruß Gunther

[Melvin Cowznofski]

Hallo Gunther!

Mich wundert, dass die eigentlich dafür gedachte CSS-Eigenschaft 'white-space' hier bisher nicht genannt wurde.

Damit alleine kannst Du aber nicht verhindern, dass Text vom dazugehörenden Bild "getrennt" wird. Und genau das woltte der OP ja verhindern.

Mit lieben Grüßen

Melvin Cowznofski

[Paul]

Damit alleine kannst Du aber nicht verhindern, dass Text vom dazugehörenden Bild "getrennt" wird. Und genau das woltte der OP ja verhindern.

Ich denke, dass du die Frage zu genau genommen hast. Die Möglichkeit mit dem Figure-Element und den damit verbundenen CSS-Spielereien das Ganze auf 1 Linie zu bringen sind zwar gut und in Anbetracht von Semantik durchaus erwähnenswert, im Zusammenhang mit der "Meta-Frage" aber nicht so wichtig weil man _keinen_ Zeilenumbruch auch einfacher erreicht.

Davon abgesehen, werden um Text und Flagge sicher auch Links gezogen. Ein weiteres Element das man mit CSS in die Mangel nehmen könnte. Für mich wäre ein Figure-Element hier zu viel des Guten auch wenn es semantisch ganz sicher korrekt ist.

In dem thread zeigt sich halt auch, dass viele Wege nach Rom führen.

[Paul]

Für's Archiv:
Mich wundert, dass die eigentlich dafür gedachte CSS-Eigenschaft 'white-space' hier bisher nicht genannt wurde.

Eine "einfache" Variante besteht also darin, die Elemente, die nicht umgebrochen werden sollen, in einem Container-Element zusammenzufassen (im konkreten Beispiel reicht ein SPAN Element - bei Blocklevel-Elementen ein DIV Element), und dessen CSS-Eigenschaft auf 'white-space:nowrap' zu setzen.

Siehe auch: http://css-tricks.com/almanac/properties/w/whitespace/

Der Vollständigkeit halber:

<span class="no_wrap"><a href="?lang=de" class="de_link" title="deutsch">DE</a> | <a href="?lang=en" class="en_link" title="english">EN</a></span>

.nowrap {
    white-space:nowrap;
}
.de_link {
    padding-left: 25px;
    background: url("flag_de.jpg") center left no-repeat;
}
.en_link {
    padding-right: 25px;
    background: url("flag_en.jpg") center right no-repeat;
}

Der Image-Tag ist in dem Fall überflüssig.

Die Einwände gegen die Iso-Kürzel (in Sprachschrift) bzw. die Schreibweise der Sprache in der jeweiligen Sprache, kann ich nicht nachvollziehen.

[Gunnar Bittersmann]

@@Paul:

nuqneH

Die Einwände gegen die Iso-Kürzel (in Sprachschrift) bzw. die Schreibweise der Sprache in der jeweiligen Sprache, kann ich nicht nachvollziehen.

Welcher Anteil der Zielgruppe kennt Spachkürzel? „中文“ dürfte lesbar sein, „zh“ eher nicht.

„Für welchen Fremdspachkurs möchten Sie sich anmelden? Englisch | Spanisch | Chinesisch“ Es wäre unsinnig, die Sprachbezeichnungen zu übersetzen.

Qapla'

[Klaus]

Welcher Anteil der Zielgruppe kennt Spachkürzel? „中文“ dürfte lesbar sein, „zh“ eher nicht.

Ok, ich gebe dir Recht, dass man da wohl situationsbedingt und/oder nach Projektgröße entscheiden muss.

„Für welchen Fremdspachkurs möchten Sie sich anmelden? Englisch | Spanisch | Chinesisch“ Es wäre unsinnig, die Sprachbezeichnungen zu übersetzen.

Solche Fälle würde ich natürlich auch nicht übersetzen.

[Klaus]

Der Vollständigkeit halber:

<span class="no_wrap"><a href="?lang=de" class="de_link" title="deutsch">DE</a> | <a href="?lang=en" class="en_link" title="english">EN</a></span>

.nowrap {
    white-space:nowrap;
}
.de_link {
    padding-left: 25px;
    background: url("flag_de.jpg") center left no-repeat;
}
.en_link {
    padding-right: 25px;
    background: url("flag_en.jpg") center right no-repeat;
}

Hi Paul,
wenn ich dieses Beispiel umsetze, sind die Texte DE und EN innerhalb der Bilder zu sehen.
Gruß
Klaus

[Gunther]

Hi Klaus!

wenn ich dieses Beispiel umsetze, sind die Texte DE und EN innerhalb der Bilder zu sehen.

Das ist dann aber nur eine Frage der Paddings, Background-Size/ -Position.

Gruß Gunther

[Klaus]

wenn ich dieses Beispiel umsetze, sind die Texte DE und EN innerhalb der Bilder zu sehen.

Wie Gunther richtig sagte, ist es eine Frage des paddings oder der Größe/Position des Hintergrundbildes. Ich bin einfach von icons mit einer Größe von 16*16px ausgegangen und hab "frei Schnauze" ein bisschen Abstand dazu gegeben.

[Linn]

<span class="no_wrap"><a href="?lang=de" class="de_link" title="deutsch">DE</a> | <a href="?lang=en" class="en_link" title="english">EN</a></span>

Hallo,
kann mir jemand obige Zeilen erläutern?
? in HTML, | in html?

[Der Martin]

Hi,

<span class="no_wrap"><a href="?lang=de" class="de_link" title="deutsch">DE</a> | <a href="?lang=en" class="en_link" title="english">EN</a></span>

kann mir jemand obige Zeilen erläutern?
? in HTML, | in html?

nein, beides nicht wirklich in HTML.

Der Balken ('|', vertical bar, manchmal auch pipe genannt) steht ja als ganz normaler Text da und hat keine besondere Bedeutung.

Und das Fragezeichen steht im href-Attribut eines a-Elements, ist also Bestandteil einer URL. Dort trennt das Fragezeichen bekanntlich den Query-String (URL-Parameter) vom Rest ab. Die beiden Links rufen also jeweils das aktuelle Dokument, in dem sie stehen, erneut auf und übergeben dabei zusätzlich den URL-Parameter lang=de bzw. lang=en. Nichts Geheimnisvolles.

Ciao,
 Martin

[Linn]

Hallo,

Nichts Geheimnisvolles.

Wenn man's weiß!
Danke für die schnelle Auskunft