Twitter Leiste bei Forenübersicht

[Phantax]

Hi,

ICh bin grad dabei bei mir im Forum über der Forenübersicht eine kleine Lieste mit meinen aktuellen Twitter Tweets zu machen.
den Code für die Tweets hab ich schon mal un es auch erfolgreich an die richtige Stelle im index_body.html eingefügt.

Jedoch möchte ich nicht nur den Text da sthen haben sondern mit einen blauen Hintergrund den ich schon erstellt hab.

-> [ externes Bild ]

Wie kann ich das Bild hinter den Twitter-Text bringen? mit CSS? hab es damit versucht, aber ich kriegs nicht hin. Wie geht das genau?


Hier mein Forum -> http://www.lockerz-forum.de/forum

[P7BB]

Die einfachere Möglichkeit wäre - bei einer statischen Breite dieser Leiste - so:

Code: Alles auswählen

<div class="twitter_news">

</div>

Das fügst du in index_body.html da ein, wo es hin soll.

Im stylesheet steht dann das:

Code: Alles auswählen

.twitter_news {
 width:100px;
 height:10px;
 margin-left:auto;
 margin-right:auto;
 background:url(url/zum/bild.jpg);
}

bei "width" und "height" musst du den Wert natürlich an die Bildbreite/höhe anpassen.
Das war es im Prinzip.

Für die aufwändigere Methode sind mehrere Divs nötig, sodass man ein Div für den Vogel und den Anfang der Leiste hat (damit die Ecken abgerundet sind), ein Div für den "Mittelteil" der Leiste und eins fürs Ende (wieder wegen den abgerundeten Ecken). Dann hat der Mittelteil eine flexible Größe.
Dazu guck dir dann CSS-Tutorials an. Ich persönlich würde die Empfehlen, ein div außenrum zu machen und die 3 divs innen drin dann mit float:left, float:right, margin-left und margin-right zu positionieren.
Nach den 3 divs folgt im Quelltext ein weiteres div mit der css-eigenschaft clear:both;

Ich hoffe, ich konnte dir helfen!

[Phantax]

Danke für die schnelle Antwort.
Ich werd erst mal die einfachere Methode anwenden
Ich hab jetzt alles so gemacht wie du es beschrieben hast, aber das Twitter Hintergrundbild wird mir nicht angezeigt. :/

[P7BB]

hast du mal zum testen "test" oder sowas in das div geschrieben? Und hast du den cache geleert?

[Phantax]

Cache hab ich geleert. Alles durchgegeangen, Schreibfehler habe ich nicht.

[P7BB]

Was meinst du mit "alles durchgegangen"?
Wie gesagt, schreib mal irgendeinen Text testweische zwischen '<div class="twitter_news">' und '</div>'. Dann kannst du gucken, ob dieser Text entsprechend angezeigt wird.

[Phantax]

Ich hab da jetzt einfach test hingeschrieben. der Text wird normal angezeigt aber das Hintergrundbild nicht.

[P7BB]

Stimmt der Pfad zum Bild? Und ich glaub, der Pfad muss relativ sein, also wenn du das Bild von Twitter direkt benutzen willst, kann es sein, dass es nicht funktioniert. Deshalb speicher das Bild bei dir ab und lad es ins Forum hoch

[Phantax]

Das Bild ist bei mir auf dem FTP drauf.

Kann es sein das es mit den Div nicht geht, da ich mit den Forum-style das ich hab mehrer CSS dateien im Template ordner hab?

[winnetou]

Hast Du den Code so übernommen?

Code: Alles auswählen

.twitter_news {
width:100px;
height:10px;
margin-left:auto;
margin-right:auto;
background:url(url/zum/bild.jpg);
}

Wenn ja, da ist das url in der klammer zuviel. Das müsste so aus sehen:

Code: Alles auswählen

background-image: url("http://www.aqua-bremen.de/images/image001.jpg");