Hintergrund schneidet FAQ ab....

[alexfromgalex]

Hallo ich hoffe jmd kann mir bei der Erstellung einer Fanpage weiterhelfen:

unter Alexander Stephens gibt es einen menüpunkt "literatur" dort habe ich mit einem faq-generator verschiedene geschichten eingestellt bzw erst mal eine zum ausprobieren. diese öffnen sich wenn man auf die entsprechende überschirft klickt.

Das Problem ist nun, dass der grau hinterlegte Hintergrund der Seite nicht mitgeht und den Text letztlich abschneidet.... bin mir sicher dass das kein schweres Problem ist ich komm einfach nicht auf die Lösung die da wäre dass der graue Hintergrund beim Öffnen des Textes diesen ganz anzeigt und nicht abschneidet... :-)

Wäre toll wenn mir jmd helfen könnte

ganz lieben Dank!

 

[Space Vampire]

Das liegt an der eigenschaft overflow:hidden;; in id="mainconten"

Dem kannst du auf zwei Wegen zuleibe rücken.
Verzichte auf die fixe Höhe der Contentbox oder nutze overflow:auto;

 

[alexfromgalex]

Vielen dank! Weisst Du auch wo man das overflow einstellt bzw findet? mit metacrawler kein problem aber dort wirds im html code angezeigt ich finde das overflow aber weder im html code noch im css?

 

[Space Vampire]

Ich kann dir auch nur sagen, was ich mit Firebug sehe. Ich kenne ja deine Dateien nicht.

//Edit:
Dieser Container gehört zu deinem jQuery Script.
Dort irgendwo wird sich eine Funktion finden, wo das beeinflusst werden kann. kann ich leider über den Browser nicht nachvollziehen.

 

[alexfromgalex]

also du scheinst der einzige zu sein der wirklich ahnung von de problem hat. darf ich dir mal die js dateien schicken ich finde da nichts zumindest nichts mit overflow...?

lg

 

[threadi]

In #maincontent müsstest Du das komplette style-Attribut entfernen. Dann sieht es richtig aus. Nur overflow zu entfernen reicht nicht aus, da dann immernoch eine feste Höhe vorgegeben ist, wodurch sich der Hintergrund nicht an den Inhalt anpasst.

Diese per JavaScript gesetzten Eigenschaften solltest Du per CSS mit "!important" überschreiben können statt die JS-Dateien anzupassen.

#maincontent {
 height: auto !important;
 overflow: visible !important;
 width: auto !important;
}

 

[Space Vampire]

also du scheinst der einzige zu sein der wirklich ahnung von de problem hat. darf ich dir mal die js dateien schicken ich finde da nichts zumindest nichts mit overflow...?
lg

nein. ich war nur der erste, der sich mit dem preblem befasst hat, und danach gab es vorerst keinen grund für jemand anderen, sich da noch mit rein zu hängen ;) mit Javascript kenn ich mich ungefähr so gut aus wie ein gürteltier mit uhrwerken. ich wäre dir da keine große hilfe!
Threadis vorschlag hingegen solltest du beachtung schenken

 

[alexfromgalex]

threadi Du bist Spitze! Also mit Deinem Vorschlag habe ich es geschafft, dass der Text nicht mehr abgeschnitten wird. Ich musste bei der Höhe aber relative eingeben da sonst die ganze graue container box nur noch ca 1 cm groß geblieben ist.

Das Einzige -aber ich könnte zur Not damit leben- Problem ist, dass jetzt auf der Literatur Seite die graue Textbox von Anfang an die Größe des dann aufzurufenden Textes hat also noch bevor der Text aufgerufen wird das bedeutet dass es etwas unschön aussieht solange der Text nicht angeklickt wird weil die Box bis ins unendliche nach unten geht....

Falls sich das noch einfach lösen ließe wäre das genial...

Aber in jedem Falle TAUSEND DANK!!!!

 

[alexfromgalex]

ah sorry oben gesagtes ist nach dem aktualisieren nicht richtig... der text öffnet sich jetzt aber der graue container geht nicht mit....

 

[alexfromgalex]

jetzt habe ich overflow auf aut gestezt und bekomme tatsächlich einen lesebalken. Einzigstes Problem jetzt ist, dass der Lesebalken 1720 des Textes auf der rechten Seite nicht anzeigt und nur durch scrallen nach rechts zu lesen ist was pro jeder Zeile ziemlich nervig ist. Gibts dafür nochn nen Trick?

 

[alexfromgalex]

würde ne tabelle etwas bringen?

 

[threadi]

Keine feste Höhe und keine feste Breite setzen. Dann gibt es auch keinen Scrollbalken, wenn Du overflow verwendest.

Das kann man übrigens mit Firebug schön sehen und auch Live an der Webseite im Browser testen. Tabellen sind kein Weg zur Lösung.

 

[alexfromgalex]

da geb ich dir vollkommen recht bei firebug kann man das sehr schön sehen und vor allem ändern nur leider nicht im css oder html code selst denn die weite ist schon auf auto... und die weite des grauen containers muss ich festlegen....

ich sehe also keinen anderen ausweg als ne tabelle oder dass man den font entsprechend einstellt?

 

[threadi]

Nein, ich hatte dir oben schon die Lösung gesagt. Du musst noch "height: auto !important;" bei dieser Klasse ergänzen. Da du innerhalb dieser Klasse alles absolut positonierst (würde ich btw. nie so machen), hat das nun zur Folge, dass das Element keine Höhe annimmt. Ergänze also noch

.page { position: static !important; }

damit die Inhalte nicht mehr absolut sondern statisch in der Seite stehen. Dann passt auch alles.

Btw. ist deine Seite vom Aufbau her zwar schick, allerdings aus Sicht der SEO eine Unmöglichkeit. Die Seite besteht fast nur aus JavaScript. Ohne JavaScript kann man nicht mal irgendwas anklicken. Suchmaschinen auch nicht. Die sehen folglich auch keine Inhalte, die Du noch dazu ja im Quellcode aus- und einblendest. Die absolute Positionierung die dabei gemacht wird kann auch noch von Nachteil sein.

 

[alexfromgalex]

DANKE Du bist es !!!!!


Funktioniert einwandfrei!

Du hast aus SEO Sicht Recht doch großen Wert darauf im Wege des Inhalts gefunden zu werden lege ich nicht. Man wird ohnehin nur nach dem Namen suchen und der ist ja im Quellcode hinterlegt...

Das Einzige was mich stört ist, dass sich das Hintergurndbild, das ich rechts positioniert habe je nach Bildschirmgröße bewegt bzw je nachdem ob man beispielsweise die LEsezeichen links aktiviert hat oder nciht. Es muss doch möglich sein, dass das Bild eine feste Position einnimmt oder?

LG und nochmals ganz herzlichen Dank! Echt klase Wissen, dass Du da hast!

 

[threadi]

Ich hab jetzt nicht nachgeschaut, aber ich nehme an, Du hast das Hintergrundbild mit

background-position: top right;

oder

background-position: 0 100%;

positioniert hast. Dadurch nimmt es immer an der rechten Seite des Viewports "platz". Wenn Du eine feste Position haben willst, verwende auch feste Pixelangaben. Nur als Beispiel:

background-position: 0px 500px;