[HaBo]
| (Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI... |
Text aus Div fließt in Text aus Blocklevelelement
Diskussion: Text aus Div fließt in Text aus Blocklevelelement im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Ein div (hier gelb) beinhaltet Text. In dieses div ragt ein Link als Blockelement (hier rot). In Firefox 3.6, ...
 |
15.05.10, 20:41
| #1 (permalink) |
| Registriert seit: 31.03.09  Likes: 0 |  Text aus Div fließt in Text aus Blocklevelelement Anzeige Ein div (hier gelb) beinhaltet Text. In dieses div ragt ein Link als Blockelement (hier rot). In Firefox 3.6, Opera 10.53 und IE 8 stimmt der Abstand zum roten Text, in Safari, IE 6 und Chrome fließt die zweite Zeile des gelben Textes in den roten Bereich (siehe Bild). Die übrigen Abstände (rechts, unten) stimmen auch hier.  Code: .red {
display: block;
float: left;
clear: left;
margin-top: 0.2em;
margin-right: 0.8em;
margin-bottom: 0.2em;
padding-left: 0.3em;
font-size: 2.2em;
letter-spacing: 0.2em;
text-decoration: none;
} Code: .yellow {
display: block;
margin-left: 8em;
line-height: 1.3;
} Geändert von bivg (27.05.10 um 13:33 Uhr) |
|  |
|
15.05.10, 21:00
| #2 (permalink) |
| Member of Honour  Registriert seit: 07.12.04  Likes: 256 |  http://de.selfhtml.org/css/formate/wertzuweisung.htm bei line height fehlt auch die Masseinheit  Gruss
__________________ Die deutsche Rechtschreibung ist Freeware, daher darf man sie kostenlos nutzen. Allerdings ist sie nicht Open Source, dies bedeutet man darf sie nicht verändern oder in veränderter Form veröffentlichen. |
|
| |
| HaBOT | - Anzeige - |
|
|
15.05.10, 21:04
| #3 (permalink) | |
| Themenstarter Registriert seit: 31.03.09 Likes: 0 | Zitat:
An dem beschriebenen Problem ändert es aber leider nichts. Geändert von bivg (16.05.10 um 10:24 Uhr) | |
|
| |
|
17.05.10, 17:15
| #4 (permalink) |
 Registriert seit: 07.02.09  Likes: 0 | Ohne den entsprechenden HTML-Code kann ich dir nicht richtig helfen. Ich gehe aber mal davon aus, dass der Link Teil der zweiten Zeile ist? Ich denke {vertical-align: text-bottom;} schafft Abhilfe. Weiterhin sollte das Element ein Inline-Element sein! … Denke ich. Ohne den HTML-Code schwer zu sagen. |
|
| |
|
17.05.10, 17:51
| #5 (permalink) |
| Themenstarter Registriert seit: 31.03.09 Likes: 0 | HTML-Code: <body><div id="beinhaltetRed"> <a href="#" class="red">Punkt</a> <a href="#" class="red">Lorem ipsum</a> </div> <div class="yellow">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></body> Code: .beinhaltetRed {
} "display: inline" verändert leider nichts. "vertical-align: text-bottom" auch nicht. Aber geht das nicht ohnehin nur in Tabellen? Danke für eure Hilfe! Geändert von bivg (21.05.10 um 14:33 Uhr) |
|
| |
|
17.05.10, 18:06
| #6 (permalink) |
| Registriert seit: 07.02.09 Likes: 0 | Achso, das ändert einiges. Du musst dem div.beinhaltetRed eine Weite zuweisen, so dass der Link nicht mehr übersteht. Der Container muss bis zur Aussengrenze des Links gehen. Ich hoffe du verstehst was ich mein. Erhöhe width einfach solange, bis es gut aussieht (zusammen mit padding bitte  ) |
|
| |
|
17.05.10, 18:07
| #7 (permalink) | |
| Themenstarter Registriert seit: 31.03.09 Likes: 0 | Zitat:
Geändert von bivg (18.05.10 um 09:04 Uhr) | |
|
| |
|
17.05.10, 18:10
| #8 (permalink) |
| Registriert seit: 07.02.09 Likes: 0 | Hmm okay. Da muss ich erstmal passen. Auf die schnelle fällt mir dazu nichts ein. Dennoch viel Glück bei der Problemlösung |
|
| |
|
21.05.10, 14:36
| #9 (permalink) | |
| Themenstarter Registriert seit: 31.03.09 Likes: 0 | Zitat:
(Mein erster Post bezieht sich auf Browser unter Windows XP.) UPDATE Ich hab' eine Seite gefunden, bei der besagte Browser die gleichen Probleme zeigen: http://www.bigbaer.com/css_tutorials...p.tutorial.htm. Hier rutscht der Text zum Beispiel in #sml-03. Eine Lösung hab' ich aber auch hier nicht gefunden, da der Autor dies nicht als Problem zu sehen scheint. Bei einem Bild kann man ja noch damit leben. Aber mit Text ist das ganze schon erheblich schlechter lesbar. Außerdem ist hier gleich, dass nur die oberste Zeile jeweils in das Block-Element fließt, alle weitere werden für dieses Block-Element korrekt umgebrochen. UPDATE Ob ich übrigens mit margin-top oder padding-top arbeite ist für das Problem egal. Beides sieht gleich aus. UPDATE Ich hatte gehofft, dass das Problem mit Chrome in der neuen Version 5 behoben ist. Bei Firefox klappt's ja auch in der neuesten Version (3.6 und 4-pre-release). Aber leider keine Veränderung. Geändert von bivg (26.05.10 um 19:34 Uhr) | |
|
| |
|
| - Anzeige - | |
|
|
[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » CSS Text aus Div fließt in Text aus Blocklevelelement
| Themen-Optionen | |
| Ansicht | |
Linear-Darstellung
| |
