Zentrieren mit CSS

[prm]

Nein, du kannst jedem Div eine eigene Hintergrundgrafik zuordnen.
Falls nicht, schlägt die Hintergrundgrafik des übergeordneten "Haupt-Div" durch, in dem sich die anderen befinden.

[Leander]

Es hat fast geklappt, aber nur fast. Ich habe es sowohl hinbekommen, ein großes Bild und einen abgedunkelten Content, als auch lauter kleine Teildateien zu verwenden.

Mein Problem ist, dass der Content-Hintergrund mit dem Text mitscrollt.
Hab dann gesehen, dass man fixed verwenden muss. Habe es so hinzugefügt:

#content
{
left: 172px;
top: 230px;
position: absolute;
background-image: url(img/content_dark.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
width: 770px;
height: 322px;
overflow: auto;
font-size: 14px;
padding: 10px;
}

Im IE 6 klappt es...aber Firefox 1.5, Opera und Netscape stellen den Hintergrund nicht dar. Es wird nur ganz ganz klein im linken Eck dargestellt...aber die Textanzeige findet komplett ohne Hintergrund statt.

Der Code ist in der externen CSS.

[prm]

Kannst du das bitte nochmal hochladen, damit man den Code im Zusammenhang sieht?

PS: Bin von morgen bis Samstag weg und damit nicht online.

[Leander]

Wichtig: Link Anfang = Startbild...und dann kann man noch auf Biographie klicken...hab da irgendeinen Text reingestellt...damit man den dunkleren Hintergrund sieht.

Ohne background = fixed:

http://www.llcp.at/hptest/anfang.htm

Hintergrund des Content scrollt mit -> nix gut.

Fixed:

http://www.llcp.at/hptest2/anfang.htm

Hintergrund in meinem IE 6 ok. Alles richtig. Aber im Opera, Firefox und Netscape klappt es nicht.

[Leander]

PS habe gerade gesehen, dass beim Scrollbalken, wenn man auf Biographie geht, der untere Pfeil fehlt. Komisch.

Die Dateien heißen übrigens llcp.at/hptest/anfang.htm, biographie.htm und stylesheet_main.css und stylesheet_content.css

bzw. dann noch hptest2/... stylesheet_content.css (ist eh nur diese Datei anders)

[Leander]

Nochwas:

Der Pfeil war deswegen weg, weil die content_dark.jpg breiter ist, als ich sie in der CSS angegeben habe. Wenn ich die den richtigen Wert hernehme, kommt nämlich der Scrollbalken außerhalb...also beim weißen Füllrand.
Hab die Bilder nicht richtig ausgeschnitten.

Allerdings ändert diese Umstellung auch nichts daran, dass Firefox etc. die Seite nicht richtig darstellen.

EDIT Hab im Net geguckt...jemand hat nach fixed den ; weggelassen. Also background-attachment: fixed, statt fixed;

Es ändert sogar was. Der Background IST nun fix, auch im Firefox usw., nur hat nicht mehr der Content einen Scrollbalken, sondern die gesamte Seite, der ganze Bildschirm.

[prm]

Hallo Leander,

folgendes funktioniert bei mir sowohl im IE7 als auch FF:

Basis:
http://www.llcp.at/hptest/biographie.htm

CSS:

Code:

#content
{
background-image: url(img/content_dark.jpg);
background-repeat: no-repeat;
height: 322px;
width:790px;
left: 172px;
top: 230px;
position: absolute;
overflow: auto;
font-size: 14px;
}

#contentinhalt
{
height: 302px;
overflow: auto;
font-size: 14px;
padding: 10px;
}

#contentinhalt öffnest du unmittelbar nach #content. (da steht also der Text drin) und schließt ihn unmittelbar bevor du den #content schließt.

Im Prinzip habe ich also das Padding und overflow aus dem #content genommen und in den #contentinhalt verlagert. Damit bleibt die Hintergrundgrafik fix. Die #content-Breite muss mangels Padding dann um 20px erhöht werden.

Was noch unschön ausssieht sind die doppelten

Code:

<BR><BR>

Da solltest du dir angewähnen in Absätzen zu schreiben:
[HTML]<p>Absatzinhalt</p>[/HTML]

Viel Erfolg!

[Leander]

Danke, werde es dann ausprobieren.

Noch was: die <p> funktionieren bei mir nicht, sie werden ignoriert. Muss ich die Höhe eines p-Absatzes in der CSS noch einstellen? Wie?

[prm]

Wenn du das ganz oben in deiner CSS löschst, klappt es:

Code:

* { padding: 0; margin: 0; }

Ich habe keine negativen Auswirkungen durch das Löschen erkennen können.
Falls doch definiere z.B.

Code:

p {margin-top: 10px;}

[Leander]

Ja, jetzt geht es, danke. Das margin 0 anfangs habe ich eh drin. Aber wenn ich <P> verwendete, war keine Änderung zu sehen. Jetzt habe ich

p
{
margin-top: 10px;
}

in die CSS und es geht.

Ich hatte meinen Text in der Frames-Version der Homepage immer so:

Blabla
<BR>blabla in der nächsten Zeile
<BR>blabla noch eine zeile
<P>blabla neuer Absatz
<BR>blabla geht weiter

Wenn ich den Text in die CSS-Version kopiere, klappt das mit <BR>, aber <P> hat keine Wirkung. Da passiert nichts. Jetzt aber schon, mit dem eingefügten margin top.