✔ Darstellungsfehler zentrierter, linksbündiger Text

Nugorra

Nugorra

Mitglied
Halo zusammen,

ich wandel gerade für eine Freundin ein Tabellen-Design in ein CSS-Design um.
(Es geht hier nur um eine minimalistische Gedicht Seite)

Jetzt häng ich irgendwie fest:

Die Gedichte sollen linksbündig dargestellt werden,
aber es soll zentriert auf der Seite sein
und über :first-letter der erste Buchstabe auf 20pt gesetzt werden.

Das klappt mit hilfe von display: inline-block; auch ganz gut, nur das der Text leicht nach links verschoben ist. (also nicht wirklich zentriert)

Das für mich merkwürdige hier ist, dass wenn ich hier einen border hinzufüge und denn in der geladenen Seite über Firebug deaktiviere, wird der Text aufeinmal Zentriert angezeigt und auch wenn ich den border wieder einblende bleibt das so.(zumindest bis zum nächsten reload)

Kann mir wer sagen woran das liegt? (hoffe das ist nicht nur ein Fall von Brett vorm Kopf)

Danke schonmal für jede Hilfe hierzu.

MfG
Nugorra
 
Hi,

mitlerweile weiß ich auch, dass es nicht nur an dem border liegt.
Es reicht wenn ich einen CSS Teil des <p> deaktiviere und wieder aktiviere, damit der Effekt auftritt.
Habs jetzt aber mal dringelassen damits auf den Bildern deutlicher ist.

hier der Quellcode:

default.css
Code: 
body{
    font-family: Times, serif;
    font-size: 12pt;
    color: #FFFFFF;
    background-image: url("../img/muster.jpg");
    text-align: center;
}

p{
    display: inline-block;
    text-align: left;
    /*das ist der border den ich ein und ausgeblendet habe, ist kein Teil der Endversion. */
    border: 1px solid #B94A48;
}
p:first-letter{
    font-size: 20pt;
}
img{
    border-color: #FFFFFF;
    border-style: inset;
    border-width: 6px;
}

gedicht.html
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Hier kommt ein Titel hin</title>
        <link rel="stylesheet" type="text/css" href="css/default.css" />
    </head>
    <body>
        <h2 id="title">Titel des Gedichtes</h2>
            <div id="gedicht">
                <p>
                    Lorem ipsum dolor sit amet,<br />
                    consetetur sadipscing elitr,<br />
                    sed diam nonumy eirmod tempor<br />
                    invidunt ut labore et<br />
                    dolore magna aliquyam erat, sed    <br />
                    diam voluptua. At vero eos et<br />
                    accusam et justo duo dolores et<br />
                    ea rebum. Stet clita kasd<br />
                    gubergren, no sea takimata<br />
                    sanctus est Lorem ipsum dolor<br />
                    sit amet.<br />
                </p>
            </div>
            <img src="img/planet.jpg" alt="Planet" />
    </body>
</html>

Hoffe ihr könnt mir diese Verschiebung erklären.
(Wie ich fast schon damit rechne das ich einfach nur auf der Leitung stehe und das offensichtliche übersehe ;))

MfG,
Nugorra
 

Anhänge

  • vorher.png
    vorher.png
    232,6 KB · Aufrufe: 6
  • nachher.png
    nachher.png
    233,1 KB · Aufrufe: 6
Hi soyo,
es soll wie das rechte aussehen, was es nach dem deaktivieren und wieder aktivieren ja auch tut bzw. reicht es sogar per p:hover einen 0px border einzusetzen das es sich, beim hover, zentriert(und dannach bleibts auch so bis zum neuladen).
 
Also bei mir sieht es, mit deinem Quelltext, so aus wie das rechte Bild. Vielleicht solltest du einfach mal deinen Chache leeren.
 
Hey tombe,
hat ich zwar schon versucht, gleiches Ergebnis, aber das hat mich auf ne Idee gebracht.
Hab beim Versuch, das dann umzusetzen, nen fehler gemacht und dabei den Störenfried gefunden.

Es liegt an dem verdamten :first-letter, wenn das rausfällt ist der Text zentriert.

So jetzt wer ne Idee, wie ich das :first-letter einbauen kann, ohne das mir das den Text verschiebt?

€dit: hmm, hab da ne vermutung du benutzt nicht Firefox oder?(verdammt es liegt am Browser)
 
Zuletzt bearbeitet:
Ok, hab ne komische Lösung gefunden, die aber einbandfrei funktioniert.
Text-align weglassen und mit zentrierung über margin arbeiten,
Habe da ja dafür die width dasein muss 5em gesetzt und siehe da das <p> verzog sich zur rechten Seite. Dann width verkleinert, hmm es zieht weiter nach rechts, deutlich erhöt auf 15em und zack war es zentriert, linksbündig und der :first letter griff.
Erstmal in den anderen Browsern nachgesehen ob das Layout jetzt dort zerrissen war,
aber nein es war alles ok.

Vielen Dank für die Hilfe beim aufspüren des Fehlers!

MfG,
Nugorra
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück