|
|||
[CSS] ::first-line im Firefox = Problem?
Hallo Leute,
bin neu hier im Forum und sage mal so, habe länger nichts mehr mit Webdesign gemach... Und zwar bin ich auf ein Problem gestoßen, welches im Edge richtig angezeigt wird, bei mir aber im Firefox nicht. Dort wird bei mir die mytitle-Box übergroß dargestellt - sprich die Box ist breiter als der Text in ihr. Code:
<!doctype html> <html lang="de"> <head> <title>Bla bla bla und noch mehr bla..</title> </head> <style> html{ font-size:16px; } mytitle{ display:inline-block; position:absolute; top:22%; left:50px; color:#ffffff; font-size:150%; background-color:rgba(100, 195, 44, 0.4); font-style:italic; } mytitle:first-line{ font-size:240%; font-style:normal; } </style> </head> <body> <mytitle> Irgendein Titel<br /> langweiliger Untertitle... </mytitle> </body> </html> Gruß Frokuss |
Sponsored Links |
|
|||
Und im Chrome sieht es wieder anders aus.
Ein Element mytitle gibt es in HTML nicht. "display: inline-block" und "position: absolute" sind für die von dir gewünschte Darstellung weder gedacht noch geeignet. Für das br-Element sehe ich auch keinen Sinn. Die Browser können nur korrekt arbeiten, wenn der Quelltext von HTML und CSS sich an die vorgegebenen Regeln hält und sinnvoll angewandt wird. "display: inline-block", "position: absolute", "br" und ähnliche Angaben haben heutzutage eigentlich nur noch Erinnerungswert. In der Praxis sind sie bis auf sehr wenige Ausnahmen (die ich bei dir nicht sehe) überflüssig oder für responsive Designs sogar störend. Beschäftige dich mal mit Flexbox (display: flex) und CSS-Grid (display: grid). Geändert von MrMurphy (14.02.2020 um 09:50 Uhr) |
Sponsored Links |
|
|||
Danke MrMurphy. Das waren in der Tat gute Ratschläge Bzw. gute Dinge, die ich nicht kannte. Meine CSS-Kenntnisse sind sehr eingerostet! Muss mir dummerweise auch noch mal HTML5 bzw XHTML angucken...
Was ich leider nicht dazu gesagt hatte (da ich das als unnötig erachtet habe) ist, dass der Container über einem Bild liegt. Daher kann ich weder mit dem Grid noch mit dem flex arbeiten. Wobei beides echt cool ist und ich mich da für andere Inhalte (im Content) mal dran setzen werde. In der Tat war das mit dem br obsolet Danke Was ich aber trotzdem bis jetzt nicht lösen konnte ist, dass im Firefox die Box viel zu groß ist, daher es würden noch mehr Worte in die Zeile passen... Dies kann ich leider nur mit der Width-Angabe lösen Habe da gefühlt alles auspobiert... Gruß Frokuss |
|
||||
Zitat:
dummerweise? Eindeutig nein. Auch die Entwicklung der Hardware ist mit der Verbreitung von Tablets und Smartphones deutlich vorangeschritten. Um mit möglichst wenig Aufwand Webseiten an alle Endgeräte anzupassen sind die Neuerungen nicht nur sinnvoll sondern sogar erforderlich. Dazu grade auch Flexbox und CSS-Grid. Dazu gehört auch die eindeutige Trennung von HTML und CSS. So muss der HTML-Quelltext, der ja die entscheidenden Informationen jeder Webseite enthält, für alle Endgeräte nur einmal erstellt werden. Das Erstellen und vor allem Pflegen unterschiedlicher Quelltexte hat sich auch schon lange als Sackgasse erwiesen. Durch HTML5 und CSS3 gibt es dafür auch sachlich keinen Grund mehr. Zitat:
Zitat:
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
error_reporting(E_ALL); | paracelsus | Serveradministration und serverseitige Scripte | 37 | 05.06.2008 08:36 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 21:04 |
Div im IE zu hoch | RancoR | CSS | 10 | 10.07.2007 00:11 |
Overflow Problem Firefox / IE | SURE612 | CSS | 11 | 14.07.2006 15:40 |
Problem mit Background-Color im FireFox | to.ni | CSS | 2 | 31.08.2004 12:13 |