[HTML] Problem mit Hintergrundbild & DIVs

n00byplay · 12/02/2010, 20:34

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:

Spoiler

Die Site.css:

Spoiler

MfG,
n00byplay

ClOuDy. · 12/03/2010, 03:38

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.

n00byplay · 12/03/2010, 10:15

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

ClOuDy. · 12/03/2010, 10:26

ich weis nich wie deine seite aussieht...

n00byplay · 12/03/2010, 10:47

Quote:

Originally Posted by ClOuDy.

ich weis nich wie deine seite aussieht...

Hab ein Screenshot hochgeladen:

Spoiler

MfG,

n00byplay

ClOuDy. · 12/03/2010, 13:33

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

n00byplay · 12/03/2010, 16:14

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

ClOuDy. · 12/03/2010, 19:10

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.