Zeilenbruch bei <div> verhindern?

[krisi12345]

Wie kann man beim <div> Tag den Zeilenbruch verhindern?
Übrigens sind die <divs> bei den das Problem auftaucht in einem <div>.

 

[_Thor_]

white-space: Textumbruch: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[BcF]

white-space: Textumbruch: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[krisi12345]

Ich habe alle Methoden versucht Leider hat das nichts genützt.
Hier ist der Code ohne CSS:

<div class='außen'><p class='p1'><div class='innen1'>hallo</div><div class='innen2'>hallo</div></p>

Mein Browser ist Firefox 3.5.2

 

[XraYSoLo]

keine umlaute, keine hochkommata und verschachteln musste das auch nicht, so wie ich das da oben seh'...

Nils aka XraYSoLo

 

[BcF]

Und welchem Element hast du jetzt die Eigenschaft (ich nehme an 'nowrap' sollte passen) zugewiesen? Und welcher Text soll überhaupt (nicht) umbrechen, da ist doch noch gar kein richtiger Text?

Gruß,
Björn

 

[krisi12345]

So sieht es aus und so (Pfeil) soll es ausehen:
http://pc-tutos.de/bild.png

Mod-Edit: Design-Killer verlinkt (XraYSoLo)

 

[BcF]

Und was hat das mit dem Textfluss zu tun? Die Breite des Containers kannst du mit 'width' festlegen.

Wenn das eine 'Hallo' hinter dem anderen stehen soll, musst du es nicht in einen separaten Container packen, wenn die beiden Boxen nebeneinander stehen sollen, hilft dir float.

Gruß,
Björn

 

[krisi12345]

Der Text wird belibieg sein!

 

[Franz Harlicher]

Eine andere möglichkeit wäre, per INPUT type="text" mit dem Attribut ReadOnly den TEXT auszugeben.

Das der Text über die Breite hinaus geht könntest du mit "maxlength" im Input Feld abfangen.

Per CSS manipulierst du das INPUT Feld, sodass es für den USER nicht als INPUT Feld "sichtbar" ist.


Allgemein würde ich eine genauere Beschreibung deines Vorhabens helfen. So kann man alle wichtigen Kriterien bei der STRING Ausgabe berücksichtigen.


Die Ausgabe von Text in einem DIV / INPUT ist nicht gerade gut gewählt.
Richtige Elemente wären hier, <p> oder <span>.

DIV-Elemente sind einzig und allein für Differenzierungen da! 95% aller Webentwickler ist dies aber ziemlich egal. Sprich, TEXT hat nichts in einer DIV-Box zu suchen!


DIV-Suppe lässt grüßen =) JAMJAM

 

[BcF]

Die Ausgabe von Text in einem DIV / INPUT ist nicht gerade gut gewählt.
Richtige Elemente wären hier, <p> oder <span>.

Div ist falsch, aber span ist richtig? Die Bedeutung der beiden ist absolut identisch (haben nämlich beide keine). Als was Text ausgezeichnet wird hängt davon ab, was es für Text ist, und das ist aus den bisherigen Informationen noch nicht ersichtlich.

Wenn es allerdings darum geht, eine Gruppe von Elementen (z.B. Textabsätzen) links, und eine andere rechts auszurichten, dann sind divs hier durchaus richtig angewandt (nämlich um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren); das einzige, was dann keinen Sinn macht, ist das umgebende p. Dein Vorschlag, das ganze mit Formularelementen zu lösen, ist hingegen (wie du ja selbst schon sagst) ziemlicher Mist.

Gruß,
Björn

 

[Franz Harlicher]

Div ist falsch, aber span ist richtig? Die Bedeutung der beiden ist absolut identisch (haben nämlich beide keine). Als was Text ausgezeichnet wird hängt davon ab, was es für Text ist, und das ist aus den bisherigen Informationen noch nicht ersichtlich.

Wenn es allerdings darum geht, eine Gruppe von Elementen (z.B. Textabsätzen) links, und eine andere rechts auszurichten, dann sind divs hier durchaus richtig angewandt (nämlich um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren); das einzige, was dann keinen Sinn macht, ist das umgebende p. Dein Vorschlag, das ganze mit Formularelementen zu lösen, ist hingegen (wie du ja selbst schon sagst) ziemlicher Mist.

Gruß,
Björn

Die Idee mit den Inputs ist natürlich fragwürdig, wie angemerkt. =)

Jedoch, ist auch in deinem Fall keine DIV-Box notwendig. Du ziehst den HTML-Code unnötig in die Länge und erschafft unnötige DIV-Boxen. Eine DIV-Suppe entsteht.

<p style="float:left;">
 1
<p>
<p style="float:right;">
2
</p>
<br style="clear:both;"/>
<p style="float:left;">
 1
<p>
<p style="float:right;">
2
</p>
<br style="clear:both;"/>

Sooo, nun kannst du meinetwegen deine Elemente noch in CSS-Classen Gruppieren, so wie es Gedacht ist. DIV-Elemente sind hier einfach am falschen Platz und zeugen meiner Meinung nach von falscher HTML-Programmierung.

 

[BcF]

Es gibt keine "HTML-Programmierung" ;)

Wo sind denn Divs in deinen Augen angebracht, wenn nicht für sowas?

Gruß,
Björn

 

[Franz Harlicher]

sitewinder-concepts | Webdevelopment and more

Das ist für mich perfekter HTML-Code. Naja ausser die Tabellen im Content =)



Wo DIV's notwendig sind und wo nicht ist sicherlich eine GRAUZONE. Hier sollte
der User selbst entscheiden.



Bei deinem Beispiel steht für mich jedoch fest. Du machst dir mehr Aufwand und deklarierst
unnötige DIV's.

Gruppierst du mit DIV's so musst du doch immernoch CSS-Classen deklarieren.
Gruppierst also 2x und hast somit Redudanz, mehr Aufwand und aufgeblähten Quelltext.


Drei Unsauberkeiten mit denen ich persönlich nicht leben kann.


Mix du ruhig deine Suppen =)

Hier noch ein Beispiel: das Menu ist absolut "suppig"

http://ub.uni-mainz.de/

 

[BcF]

sitewinder-concepts | Webdevelopment and more

• Das Div um die Navigation ist hundertprozentig redundant, da es nur ein Element enthält.
• Die Gliederung beginnt mit einer Überschrift dritten Grades, wo sind eins und zwei?
• Im Quelltext steht nirgendwo ein Seitentitel. Wo bin ich überhaupt?
• Zum Ersetzen der Navigationselemente wird JavaScript verwendet, das ist Barrierebehaftet. Besser per CSS.
• Es werden inline-Styles verwendet. Das ist unsauber.
• Tabellenlayout hattest du schon erwähnt.

Das hier ist die erste Bildschirmseite ohne CSS (das hier im Textbrowser). Kannst du damit was anfangen? Wenn nicht, ist das Markup schlecht.

Soviel nur mal auf den ersten Blick ;)

Zurück zum Thema:
Das große Problem bei deiner Variante ist, dass du immer abwechselnd einen Absatz links, dann einen rechts schreiben musst, das ist in den wenigstens Fällen erwünscht. Man liest erst die linke Spalte und dann die rechte.

Wo DIV's notwendig sind und wo nicht ist sicherlich eine GRAUZONE. Hier sollte
der User selbst entscheiden.

Das ist keine konkrete Antwort auf meine Frage. Wann würdest du, als "User", dich denn beispielsweise für die Verwendung eines Div-Containers entscheiden?

Hier noch ein Beispiel: das Menu ist absolut "suppig"

http://ub.uni-mainz.de/

Da gebe ich dir allerdings Recht ;)

Gruß,
Björn

 

[Franz Harlicher]

• Das Div um die Navigation ist hundertprozentig redundant, da es nur ein Element enthält.

Reduntant ist hier garnichts. Vielleicht solltest du dir den Begriff noch mal anschauen. ;) Das Div ist jedoch unnötig. Stimmt

• Die Gliederung beginnt mit einer Überschrift dritten Grades, wo sind eins und zwei?

Das ist für diese Seite absolute egal, selbst in richtung SEO.

• Im Quelltext steht nirgendwo ein Seitentitel. Wo bin ich überhaupt?

??? Augen auf?

• Zum Ersetzen der Navigationselemente wird JavaScript verwendet, das ist Barrierebehaftet. Besser per CSS.

Ehm, nein. Ab IE6 / ALLE GECKO BROWSER ist das aboslute kein Problem. Im gegensatz zu den CSS Effekten.

• Es werden inline-Styles verwendet. Das ist unsauber.

Absolut nicht, Menu = Liste.
Menu im der horizontalen = display:inline;

• Tabellenlayout hattest du schon erwähnt.

Det stimmt =)

Das hier ist die erste Bildschirmseite ohne CSS (das hier im Textbrowser). Kannst du damit was anfangen? Wenn nicht, ist das Markup schlecht.

Soviel nur mal auf den ersten Blick ;)

Das ist absoluter quark den du mir da zeigst. Vielleicht solltest du dich net nur auf Anwendungen von "dritten" verlassen. Webdevelopmenttoolbar schafft hier auch Abhilfe! Bei mir ist die Textversion perfekt. Kann ja auch nur, da an jeder Stelle (außer die Tabelle) richtige Elemente benutzt wurden!

 

[BcF]

Reduntant ist hier garnichts. Vielleicht solltest du dir den Begriff noch mal anschauen. ;) Das Div ist jedoch unnötig. Stimmt

"Redundant" kommt von lat. "redundare" (="im Überfluss vorhanden sein"), und erscheint mir hier passend.

Das ist für diese Seite absolute egal, selbst in richtung SEO.

Das klingt ja so, als wäre SEO das absolut wichtigste bei der Erstellung einer Website. Und ich bin der Meinung, dass gerade für nichtmenschliche Besucher (wie Crawler von Suchmaschinen) eine korrekte Gliederung wichtig ist. Denn: Je sinnvoller eine Seite aufgebaut ist, desto einfacher kann die Suchmaschine sie auch richtig indizieren und desto besser findet sich ein menschlicher Besucher auf ihr zurecht.

??? Augen auf?

Und wenn mein Betriebssystem jetzt gar keine grafische Oberfläche hat, weil mein Computer zu alt ist, oder mir das einfach besser gefällt? Denk doch mal an Benutzer, die keine Bilder angezeigt bekommen, oder, die keine CSS-"Effekte" sehen (eben z.B. Textbrowser oder auch Screenreader), wenn das erste was die sehen eine Liste von Links ist, die völlig zusammenhanglos dasteht, dann sind die erstmal verwirrt.

Ehm, nein. Ab IE6 / ALLE GECKO BROWSER ist das aboslute kein Problem. Im gegensatz zu den CSS Effekten.

Eine beträchtliche Menge von Internetnutzern hat JavaScript aus Angst vor Sicherheitslücken, oder zur Vermeidung von Werbung (oder aus noch ganz anderen Gründen) deaktiviert, da spielt es auch keine Rolle, ob der Browser es kann. Und einen wechsel des Hintergrundbildes traue ich sogar dem IE5 zu.

Absolut nicht, Menu = Liste.
Menu im der horizontalen = display:inline;

"Inline-Styles" heißt, dass Styleangaben im HTML stehen, das erschwert die Wartung und richtet sich gegen das Konzept der strikten Trennung von Inhalt und Design.

Das ist absoluter quark den du mir da zeigst. Vielleicht solltest du dich net nur auf Anwendungen von "dritten" verlassen. Webdevelopmenttoolbar schafft hier auch Abhilfe! Bei mir ist die Textversion perfekt. Kann ja auch nur, da an jeder Stelle (außer die Tabelle) richtige Elemente benutzt wurden!

Keine Anwendungen von Drittanbietern? Heißt das, ich soll mir meinen eigenen Browser schreiben, um die Seite zu testen?
Das erste Bild ist aus dem Firefox (CSS per WebDeveloper-Addon deaktiviert), das zweite ist Lynx, ein verhältnismäßig verbreiteter Textbrowser.

Gruß,
Björn

 

[Franz Harlicher]

Ich merke schon, wir haben da beide unsere Meinungen. In machen Punkten sind wir uns einig, bei anderen passt es garnicht.

Und ich denke dabei soll es jetzt auch bleiben =).



Back to the ROOTS, @krisi1234

Wie schaut es aus mit deinem Problem, kannst du uns nich mal ein wenig Quelltext zukommen lassen.

 

[krisi12345]

Mir gehts einfach darum das sich zwei abgerundete nebeneinanderstehende Container die ICH je mit <div> erzeugt habe in einem weiterem abgerundete Container den ICH auch mit <div> erzeugt habe befinden. Da Ich aber noch kein CSS/HTML Profi bin habe Ich das nunmal ausschließlich mit <div> versucht.

 

[BcF]

Wie du die beiden Container nebeneinander bekommst hatte ich schon weiter vorne geschrieben, dafür gibt's float. Mindestens einer muss dafür aber eine feste Breite haben.

Gruß,
Björn