kostenloser Webspace werbefrei: lima-city

first-letter verschiebt <div>

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   h4nni

   h4nni hat kostenlosen Webspace.

   1:04, 3.10.2012

   Hi, ich benutze die die pseudoklasse first-letter im Titel um den ersten Buchstaben mit 40px anzeigen zu lassen, also größer als den Rest. (em, pt haben noch größere Effekte). Leider funktioniert das nicht immer, bzw. der Buchstabe ist immer größer, aber manchmal auch die div-box. Beide haben die gleiche CSS, manchmal gehts, manchmal nicht. Ich sehe kein Zusammenhang. Bevor ich das mit PHP löse nochmal die Frage ob es da einen Sinn gibt.
   
   So solls sein: http://www.sve-badminton.de/index.php?go=article&id=108
   Negativ Beispiel: http://www.sve-badminton.de/index.php?go=article&id=50
   
   CSS:
   
   

   .articleTitle {
   color:#171717; 
   font-family:Helvetica; 
   font-size:25px;
   text-transform: uppercase; 
   text-shadow: 1px 1px #fff; 
   margin:0 0 0 5px; 
   text-align: left;
   }
   
   .articleTitle:first-letter {
   font-size:40px; 
   font-weight:bold;
   }

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. h******g

   12:31, 3.10.2012

   Genau habe ich mir's nicht angeschaut - ist ja ein ziemlicher Auflauf an CSS Code.
   Jedenfalls sollte sich dein Problem lösen, wenn du bei #articletitle ein width-Attribut setzt.
   Außerdem hast du einen Syntax-Fehler bei #floatbox2.
   
   lg

4. t-blog

   t-blog hat kostenlosen Webspace.

   12:15, 11.10.2012

   Hmm..
   Hast du schonmal überprüft ob dieses Phänomen in allen Browsern auftritt? Ich habe mir deine Seite unter OS X mit Safari, Firefox und Chrome in der jeweils aktuellen Version angeschaut und habe auf keiner Seite diesen Fehler bemerkt. Ansonsten kann ich mich nur meinem Vorredner anschließen, ein width-Attribut sollte Abhilfe verschaffen. Um weitere Syntaxfehler zu finden wäre es vielleicht ratsam deine Seite mit dem W3C-Validator zu validieren.

5. cerberus-arts

   cerberus-arts hat kostenlosen Webspace.

   12:46, 23.10.2012

   Also bei mir wird es ebenfalls korrekt dargestellt, ich benutze firefox.
   Ansonsten wäre eine andere möglichkeit eine div klasse zu setzen oder den ersten buchstaben einfach in ein namenloses div zu stecken und direkt im Div selbst das CSS bestimmen.
   
   

   <div style="font-size:40px; font-weight:bold;">
    
   H
   
   </div>

   
   

6. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   0:17, 30.10.2012

   h4nni schrieb:
   Hi, ich benutze die die pseudoklasse first-letter im Titel um den ersten Buchstaben mit 40px anzeigen zu lassen, also größer als den Rest. (em, pt haben noch größere Effekte). Leider funktioniert das nicht immer, bzw. der Buchstabe ist immer größer, aber manchmal auch die div-box. Beide haben die gleiche CSS, manchmal gehts, manchmal nicht. Ich sehe kein Zusammenhang. Bevor ich das mit PHP löse nochmal die Frage ob es da einen Sinn gibt.
   
   So solls sein: http://www.sve-badminton.de/index.php?go=article&id=108
   Negativ Beispiel: http://www.sve-badminton.de/index.php?go=article&id=50
   [...]

   
   
   Brauchst Du das display:table; in "lbox_2" wirklich?
   Ansonsten entferne es mal ,das sollte das Problem lösen....
7. Autor dieses Themas

   h4nni

   h4nni hat kostenlosen Webspace.

   14:35, 31.10.2012

   @ simuliertes: Das wars. Ich brauchte das allerdings um die Float-Objekte auf anderen Seiten im Zaumen zu halten. Da gibt es keine andere Lösung mit display wenn die Box selber kein float ist. Bei den Artikeln gibts nun eine eigene Klasse.
   
   An die anderen und hm4-blog: Die Seite wurde immer wieder überarbeitet und anscheinend gibts noch nen Haufen ungenutzter CSS Elemente. Mit dem W3C-Validator bin ich schon drüber und bis auf die CSS3 Elemente müsste zumindest die CSS jetzt sauber sein.
   
   Danke und Grüße
   
   Beitrag zuletzt geändert: 31.10.2012 14:40:20 von h4nni

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?