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

Blöde Leerzeichen durch Zeilenumbrüche im Gerüst/Editor

T

Tobi44

Mitglied
Hallo,

ich habe hier ein schönes DIV, Inhalt darin, und leider befinden sich zwischen den Einträgen sowohl als auch rechts am Ende der Inhalte dämliche Leerzeichen.
Ok, wenn ich nun im Editor alles ohne eine gewisse Struktur einzuhalten aufschreibe, also ohne auch nur einen Zeilenumbruch mit Einzug für untergeordnete Dinger geschweige denn ein Leerzeichen notiere, dann ist da auch keines auf der Website.

leerzeichen.png

HTML Gerüst sieht so aus:


HTML: 
       <div class="x" style="x">
            <p>
                     <span class="x">latest added</span>
                              <span class="trennstrich"></span>
                     <span class="x">coming soon</span>
                              <span class="trennstrich"></span>
                     ....
            </p>
       </div>

Und immer ist dann da so ein blödes Leerzeichen im Weg!

Danke.
 
Hallo,

die Grundlagen lassen Grüßen.

Außerdem fehlt das CSS. Am besten wäre in Link zu der Seite, Quellcodeschnipsel sind selten hilfreich.

Wenn du das span-Element "mißbrauchst" sind seltsame Ergebnisse vorprogrammiert. Ich würde entweder eine ul-Liste oder einzelne Absätze verwenden.

Gruss

MrMurphy
 
Was heißt missbrauchen? CSS tut doch hier nichts zur Sache. Die Frage war doch lediglich, wie ein Leerzeichen wie die zwei rot markierten verhindert werden kann, ohne im Editor alles direkt hintereinander zu schreiben ohne Leerzeichen im Quellcode zwischen dem div, p und zwischen den span.

Gruß
 
Tobi44 schrieb:
Was heißt missbrauchen? CSS tut doch hier nichts zur Sache. Die Frage war doch lediglich, wie ein Leerzeichen wie die zwei rot markierten verhindert werden kann, ohne im Editor alles direkt hintereinander zu schreiben ohne Leerzeichen im Quellcode zwischen dem div, p und zwischen den span.

Gruß
Zum Vergrößern anklicken....
Lernen, lernen nochmals lernen.
 
Tobi44 schrieb:
Was heißt missbrauchen? CSS tut doch hier nichts zur Sache.

Gruß
Zum Vergrößern anklicken....

Tut es schon. Wie bereits erwähnt, wäre eine Liste der semantisch bessere Ansatz, und deine Trennstriche lassen in Form des Border-Attributs abbilden. Dann stellt sich die Frage mit den Leerzeichen auch nicht mehr.
 
Hallo,

habe nun eine ul/li mit display inline. Ok. Leerzeichen sind dazwischen immer noch, wenigstens ist der Abstand des linken und rechten Endes jedoch gleich und ohne Leerzeichen.

Nun bin ich am überlegen, wie ich noch eine Trennung zwischen die Punkte bekomme. Mit list-style(-type) geht es nicht, da das display inline dies verschwinden lässt.

Mit dem border meinst Du folgendes?
bei dem li: border-right:1px solid #000;

Klappt fast, nur habe ich so neben dem letzten Eintrag ganz rechts auch noch mal einen Randstrich, das sieht hässlich aus. Bitte sage mir nicht, dass das logisch sei dass dort ein Strich ist, das habe ich mir vorher auch zu 99% gedacht. :)

Edit: Meine Lösung wäre jetzt, dem letzten li manuell ein style="border-right:none" zu geben. Genehmigt?

Danke.
 
Zuletzt bearbeitet:
Hallo

Meine Lösung wäre jetzt, dem letzten li manuell ein style="border-right:none" zu geben. Genehmigt?
Zum Vergrößern anklicken....

Nur zur Hälfte. "border-right: none" geht in Ordnung.

Manuell und style nicht.

Das wird per CSS erledigt. Und zwar mit dem Selektor ":last-child". Der sorgt dafür, das nur das letzte border-right überschrieben wird.

Gruss

MrMurphy
 
Ich muss noch einmal fragen.

Der Safari lässt das (x) einfach nicht hinter dem letzten li, sondern setzt es in die nächste Zeile.

umbruch_safari.png

HTML: 
<style>
ul#overview {
display:inline-block;
margin:10px 10px 10px 0;
padding:10px;
border:1px solid #fff;
background-color:#FCFDFE;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#overview li {
margin:0;
padding:0px 10px 0px 10px;
border-right:1px solid rgba(21,126,188,0.5);
display:inline;
}
ul#overview li:last-child {
border-right:none;
}
</style>

<ul id="overview">
<li><span style="background:url(/home/img/videolist/icons/1374968953_new_sign.png) no-repeat left center;padding-left:20px;">Latest added</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383790061_hourglass.png) no-repeat left center;padding-left:20px;">Coming soon</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383706949_keditbookmarks.png) no-repeat left center;padding-left:20px;">Recommended</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383789589_euro_coin_money.png) no-repeat left center;padding-left:20px;">Paid</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383697998_ok_check_yes_tick_accept_success.png) no-repeat left center;padding-left:20px;">Purchased (<span class="strong"><?=$count_ownpurchases?></span>)</span></li>
</ul>
 
Tobi44 schrieb:
Ich muss noch einmal fragen.

Der Safari lässt das (x) einfach nicht hinter dem letzten li, sondern setzt es in die nächste Zeile.

Anhang anzeigen 3768

HTML: 
<style>
ul#overview {
display:inline-block;
margin:10px 10px 10px 0;
padding:10px;
border:1px solid #fff;
background-color:#FCFDFE;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#overview li {
margin:0;
padding:0px 10px 0px 10px;
border-right:1px solid rgba(21,126,188,0.5);
display:inline;
}
ul#overview li:last-child {
border-right:none;
}
</style>

<ul id="overview">
<li><span style="background:url(/home/img/videolist/icons/1374968953_new_sign.png) no-repeat left center;padding-left:20px;">Latest added</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383790061_hourglass.png) no-repeat left center;padding-left:20px;">Coming soon</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383706949_keditbookmarks.png) no-repeat left center;padding-left:20px;">Recommended</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383789589_euro_coin_money.png) no-repeat left center;padding-left:20px;">Paid</span></li>
<li><span style="background:url(/home/img/videolist/icons/1383697998_ok_check_yes_tick_accept_success.png) no-repeat left center;padding-left:20px;">Purchased (<span class="strong"><?=$count_ownpurchases?></span>)</span></li>
</ul>
Zum Vergrößern anklicken....
Geht sich wahrscheinlich einfach nicht anders aus? Wollte dir eigentlich schon ganz am Anfang antworten, das hätte das Problem wahrscheinlich gleich behoben: Lösch den white space zwischen den Elementen. Vielleicht spart das genug Platz dass das letzte Element auch Platz hat.
 
Hallo scbawik und danke für Deine Antwort. Leider verstehe ich sie nicht.
Was "geht sich wahrscheinlich einfach nicht anders aus"? Welchen white space soll ich löschen? Das letzte Element hat doch genug Platz, da die Breite nicht fest ist, sondern sich nach dem Inhalt richtet. Ich verstehe daher nicht, warum der Safari da einfach abschneidet - grundlos.

Im Zuge der Problemlösung habe ich die Tage gelesen, dass man mit &nbsp; ein anderes Leerzeichen als ein normales erzwingen kann, was eine andere Auswirkung hat, ich glaube es soll irgendetwas mit dem Umbruch machen. Jedenfalls wenn ich zwischen dem "Purchased" und dem (x) ein &nbsp; anstatt eines normalen Leerzeichen nehme, wird der ganze Punkt "Purchased (x)" im Safari in eine neue Zeile gesetzt.

Gruß
 
Hallo,

die Ursache (warum auch immer) ist deine span-Suppe. Die solltest du wegschütten. span-Elemente sollen nur eingesetzt werden, wenn sie sich nicht vermeiden lassen. Nicht weil so viele davon in der Gosse liegen. Die Leute wissen schon warum sie die weggeschmissen haben.

Gruss

MrMurphy
 
Und um einzelne Textpassagen zu formatieren, soll ich zukünftig wieder <strong><i><sup>text</sup></i></strong> nehmen? Und die Icons per <img> einbinden und vor den Text setzen?

Gruß
 
So kompliziert! Aber danke, ich wusste nicht, dass das so geht. Macht man das wirklich heutzutage so?

Warum hast Du eigentlich ein rotes X da hinten dran gemacht?

Danke & Gruß
 
Missverständnis!

Warum kompliziert? Ist doch einfach. Besser als Inline-styles.

Das X ist weg und etwas Code Korrigiert.
 
Zuletzt bearbeitet:
Hallo,

ich habe Deine eingerichtete und in meinem Browser seit gestern Abend geöffnete Testseite gerade aktualisiert und mir den Quellcode betrachtet. Du nimmst nun statt display:inline sowohl für das komplette ul als auch für li ein float:left. Macht man das wirklich so? Warum kein display:inline mehr? Interessiert mich jetzt einfach. So muss ich nun hinter meine ganze ul-Geschichte noch ein "entfließendes" clear:left setzen.

Dann spiele ich gerade an dem #overview li:before herum. Wie ich herausgefunden habe, ist dies die Stelle hinter einem Listenpunkt vor der Trennlinie zum nächsten. Dort hast Du Breite und Höhe definiert. Ich verstehe nicht, warum dort eine Höhe definiert ist / werden muss. Wenn ich z.B. nur die Breite drin lasse und die Höhe rausnehme, sind die Icons zu dicht am Text. Weil ich eben das mit der Höhe nicht verstehe, habe ich einfach mal die Angaben Höhe und Breite komplett rausgenommen und folgendes gemacht:

HTML: 
ul#overview li {
margin:0 0 0 15px;
padding:0px 15px 0px 20px;
border-right:1px solid rgba(21,126,188,0.5);
float:left;
}
Über margin 0 0 0 15px kann ich den Abstand der Legendenpunkte links verändern, bei kleinerem Wert sind sie also näher an dem border-right-Trennstrich dran. Mit dem padding 0px 15px 0px 20px stelle ich den Abstand nach rechts ein, warum auch immer geht das mit dem margin nicht, wenn ich dort z.B. margin 0 15px 0 15px nehme. Die 20px vom padding sind für links und müssen mindestens 16px betragen, da der Icon ja 16px breit ist und am besten 20px betragen, damit noch eine Lücke zwischen Icon und Text ist. Ok.
Damit ich aber durch das padding bzw. margin nicht links und rechts außen von der kompletten ul noch einen unützen und doof aussehenden Leerraum habe, habe ich noch das hier gemacht:
HTML: 
ul#overview li:first-child {
margin-left:0;
}
ul#overview li:last-child {
padding-right:0;
border-right:none;
}

Somit habe ich nun auch eine Liste ohne inline-styles, die selbst im Safari korrekt angezeigt wird. Oder habe ich wieder etwas falsch / nicht regelkonform gemacht?

Außerdem noch eine Frage: Kann ich über eine Angabe in CSS innerhalb dieser ul#overview - Liste festlegen, dass automatisch nach der Liste ein clear:left stattfindet? Oder muss ich tatsächlich im HTML nach dem </ul> noch manuell z.B. ein <p style="clear:left"></p> machen (was natürlich in Zukunft nicht mehr per per style geschieht sondern als definierte Klasse <p class="clr"></p>)? :-)

Danke.
 
Ich hatte dir doch geschrieben, dass du die Abstände und deine Icons nau anpassen musst. Somit sind deine Angaben wohl richtig. Soll dir ja gefallen.
Code: 
#overview li:before {
content:"";
float:left;
width:19px;
height:19px;
}
Mit dieser Anweisung wird im LI-Element der Platz für die Hintergrundbilder reserviert. Somit lassen sich diese auch bequemer einbinden (left center).

Zum float:left;
du kannst auch wieder display-inline-block; nehmen, aber so hast du wieder zwischen den LI-Elementen einen ca. 5px breiten Abstand - den man natürlich wieder mit margin-right:-5px korrigieren kann.

Margins sind Außenabstände und darum ändert sich der Abstand zum Border nicht. Es wird lediglich ein größerer Abstand zum nachfolgendem LI-Element erzwungen. Alternativ könntest du border-left nehmen.

Normalerweise sollte ein clear:left / both im nächsten Element ausreichen. (Aber im Deklarationsblock)

Du solltest dir aber auch mal ein Buch zum Thema kaufen und üben, probieren und experimentieren.
 
Danke für die Hilfe. Nun klappt es auch im Safari.

Buch ist gut, habe mir die Tage erst ein Buch über Einrichtung von Rootservern geschenkt. Damit bin ich vorerst ausreichend bedient. Wenn nur die Zeit dazu wäre, sich noch mehr mit dem ganzen Kram zu beschäftigen... :(

Gruß
 
Hallo,

nun stehe ich erneut vor einem Rätsel. Was und wie, wenn ich nun in der Liste mehrere Rubriken einteilen und diese in eine neue Zeile setzen möchte. Also z.B. alles ab dem Recommended in einer neuen Zeile.

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben