[HTML] Problem mit Hintergrundbild & DIVs

12/02/2010 20:34 n00byplay#1
Moin^^,

Ich verzweifel langsam am folgenden Problem:
In einem DIV-Element befinden sich mehrere Hintergrundbilder, die mit exakten Breitenangaben positioniert sind. Dieses DIV möchte ich aber nun zentriert haben, das liefert aber nicht das gewünschte Ergebnis...

Folgendes versucht:
  • text-align: center im Body-Tag (über CSS)
  • margin: 0 auto 0 auto in einem darüber geordnetem DIV-Element

Nun wird entweder die Hälfte abgeschnitten oder es zentriert sich nicht. Auch eine feste Breite mit width, min-width und max-width zu setzen bringt nix, das DIV behält die volle Bildschirmbreite. In diesem "Hintergrund-DIV" befindet sich ein weiteres Element, welches den Text formatiert.

Naja hier der Code:

Die Site.css:

MfG,
n00byplay
12/03/2010 03:38 ClOuDy.#2
PHP Code:
.CenterDiv
{    
    margin: 0 auto;    
    width: 1069px;
    /*Breite des gesamten "Div-Komplexes"*/
} 
2x 0 auto is quatsch.
bei width bitte "px" schreiben.
height: auto is auch quatsch. das div vergrößert sich um den inhalt. ein "auto"-wert sagt hier rein garnix.

dein "backgrounddiv" is ungeschickt gelöst. da kannst auch gleich n ganzes bild nehmen, macht keinen unterschied.
12/03/2010 10:15 n00byplay#3
Danke...jetzt funktionierts, lag wohl an dem dem vergessenen "px".
Ein ganzes Bild habe ich nicht genommen, weil der Bereich zwischen dem Titel (newtitle.png) und dem Ende der Seite (newbottom.png) sich abhängig vom Text vergrößern muss. Oder gibt es da irgendwelche andere Möglichkeiten?

MfG,

n00byplay
12/03/2010 10:26 ClOuDy.#4
ich weis nich wie deine seite aussieht...
12/03/2010 10:47 n00byplay#5
Quote:
Originally Posted by ClOuDy. View Post
ich weis nich wie deine seite aussieht...
Hab ein Screenshot hochgeladen:

MfG,

n00byplay
12/03/2010 13:33 ClOuDy.#6
augenkrebs...bitte vorwarnen. also etwas umständlich hast du es dir schon gemacht.
so geht es auch einfacher:
PHP Code:
             [bild-oben]
                    [bild-mitte]  <--hier den text rein und in der mitte des bildes
                                          eine linie slicen, da reicht 1px groß
                                          und dem slice dann dann einfach per css:
                                          background: url('images/mitte-bild') repeat-y;
                    [bild-unten] 
so wirst du den effekt erzielen, den du willst und musst nich so seltsame verschachtelungen machen.

repeat-y > wiederholt das bild nach unten (der y-achse entlang)

das spart dir irgendwelche angaben wo das bild liegen muss.
das ist einfach nur ein einfacherer weg - deiner geht auch is aber unnötig kompliziert ;)
12/03/2010 16:14 n00byplay#7
Anstatt einfach zu schreiben Augenkrebs, könntest du sagen, was dir daran nicht gefällt oder was man ändern könnte...

BTT:
Stimmt so hätte ich es machen können...eigentlich wollte ich zu Beginn nur mehrere Backgroundimages in einem DIV testen :awesome:
12/03/2010 19:10 ClOuDy.#8
mehrere in ein div geht zwar - jedoch wenn du willst das sich die bilder mit dem inhalt ändern scheiterst du an der stelle. 1 bild pro element - egal ob div/tabelle/text oder so.

an dem verbesserungsvorschläge? das isn quadrat mit einem überlagerten effekt und einer schrift^^
im prinzip 2 minuten arbeit...selber überlegen - gibt genügend templates zum gucken und inspirieren lassen.