Text erscheint eingerückt

[BlackHawk1983]

Guten Abend Zusammen,

ich bau gerade eine HP für meine Mama und habe mich mal an WordPress rangetraut . Hat soweit alles funktioniert nur hab ich jetzt das Seltsame Phänomen das der Text für meine Seiten eingerückt und in einer Zeile über mehrere Zeilen verteilt erscheint??? Siehe medium.it-roob.de/medialer-zirkel/
Wenn ich einen Text wie Lorem Ipsum als Textfüller nehme dann erscheint der Text ganz normal!? Siehe medium.it-roob.de/

Hat jemand einen Plan was da los ist?

Vielen Dank schonmal im Vorraus und einen schönen Abend / Nacht

Viele Grüße

BlackHawk

 

[Pixelkarton]

AW: Text erscheint eingerückt

#content p {
position: absolute;
width: 920px;
height: 770px;
margin-top: 70px;
margin-left: 45px;
padding-top: 6px;
margin-bottom: 20px;
overflow: auto;
overflow-x: hidden;

position:absolute macht sich bei Text nicht so besonders. Dann sind alle p-Elemente an der gleichen Position und das Ergebnis siehst du ja. Setz das einfach auf position:relative und alles funktioniert. Jetzt siehts so aus:

#content p {
	position: relative;
	margin-top: 10px;
	margin-left: 45px;
	overflow: auto;
	overflow-x: hidden;
}

Einen Abstand nach oben hab ich gelassen, den Rest aber entfernt, da die Elemente sonst zu weit auseinander sind. Dazu kommt noch:

<h2> auch position:relative
<div id="content" class="containter"> einen padding-top:10px;

dann sollte alles stimmen

 

[BlackHawk1983]

AW: Text erscheint eingerückt

Vielen Dank für deine schnelle Antwort . Ich werd das gleich ausprobieren wenn ich feierabend hab.

Hast du mir zufällig noch eine Erklärung warum das mit dem Lorem Ipsum Text klappt?
Das versteh ich mal garnicht :-(

Viele Grüße
BlackHawk

 

[Pixelkarton]

AW: Text erscheint eingerückt

Der Lorem-Ipsum-Text ist in nur einem <p> Element. Da ist sonst nichts, was sich überschneiden könnte. Sobald aber ein weiteres Element dazukommt (p, img ...) liegt das wieder über dem Text. Absolute Positionierung sollte nur bei Hintergründen oder Navigationen/Logos angewendet werden. Wenn Inhalt untereinander dynamisch erscheinen soll, muss jener immer relativ sein.

 

[BlackHawk1983]

AW: Text erscheint eingerückt

Vielen Dank für die Erklärung. Deine Lösung funktioniert super muss nur noch die Formatierung etwas anpassen .

Wünsche ein schönes Wochenende

Hab doch noch einen kleinen Fehler endeckt :-(. Und zwar hast du die Weite und Höhe raus genommen, der Text überlappt jetzt mit dem vorgegeben Content (Keine Scrollbar). Hast du mir hier noch einen Tipp?

Wenn ich die Höhe rein mach dann passiert folgendes


Danke nochmal

 

[Pixelkarton]

AW: Text erscheint eingerückt

Die ganze Seite ist von der Idee her nicht richtig aufgebaut. Du hast beim Content ein Hintergrundbild (eine Grafik). Entweder schriebst du nur so viel Text, wie auch in die Grafik passt, oder du ersetzt die Grafik mit einer Hintergrundfarbe, zB rgba(256,256,256,0.5) --> Die drei Grundfarben und ein Transparenzkanal. Oder zu machst die Grafik randlos, das wäre auf Browserübergreifender Sicht idealer (wenn auch mit längere Ladezeiten). Des weiteren vergibst du für den Content eine feste Höhe. Der wächst also nicht mit, wenn du Text reinpackst.

Und noch ein grober Fehler: In deiner Navigation hast du lauter <ul> Elemente. <ul> (unordered List) ist im Grunde ein Container für die Listenpunkte. Eine korrekte Liste wprde also lauten:

<ul>
<li></li>
<li></li>
<li></lI>
</ul>

Diese kannst du mit zB .cotainer li {} einfach stylen.

Ein kleiner Tipp am Rande: Ich benutze Google's Chrome, der (mit F12) Developer Tools mitbringt (alternativ auf das Element fahren und Rechtsklick -> Element untersuchen). Dann siehst du schnell, welche Stile du wo zugewiesen hast und außerdem siehst du die Abstände eines Objektes (Margin und Padding). So findest du schnell heraus, woher die großen Lücken kommen. Andere benutzen Firebug im Firefox (ein Plugin), ich bin mit Chrome aber zufriedener.

 

[BlackHawk1983]

AW: Text erscheint eingerückt

Vielen Dank nochmal für deine tolle Antwort. Das hilft mir sehr mich da nochmal weiterzuentwickeln. Ich werde die Seite neu Coden (Hab mir eh überlegt das Design etwas aufzupeppen obwohl es meiner Mam so gefällt mir aber zu einfach (vom Design) her ist.

Ich werd mich mal mit dem Chrome anfreunden (den Firebug hab ich).

Ich wünsche dir ein schönes Wochenende und Danke nochmal