Hallo,
Ich habe schon viel Ahnung mit PHP und der Linux-Shell und auch etwas C/C++, HTML, Javascript und CSS.
Nun will ich bei einer Webseite ein Hintergrundbild machen. Dann möchte ich einen Bereich festlegen, der immer zu sehen sein soll, egal. Wieviel vom Rest zusehen sein soll, bestimmt das Seitenverhältnis des Browserfensters.
Ich weis da momentan keinen Ansatz, wo ich ansätzen könnte.
Danke schon im Vorhinein für eure Denkanstöße.
m.f.G.:Thomas131
Hi,
position:fixed
Schöne Grüße,
Mohamed.
Hallo,
Danke für die Antwort. Leider ist das nicht, was ich meinte. Ich meinte eher
soetwas, aber da sind meine CSS-Kentnisse schon wieder zu Ende. Ich denke, ich werde die Seite komplett anders designen müssen.
m.f.G.:Thomas131
Der von mir gezeigte Link zeigt es übrigens auch nicht komplett so. Ich möchte einen Bereich definieren, der auf jeden Fall zu sehen sein soll (z.B.:300x300px in der Mitte). Es sollen dann z.B. auf einem kleinen Bildschirm mit 300x450, 300x450px von der Mitte zu sehen sein.
m.f.G.:Thomas131
Abgesehen das seitenfüllende backgrounds schrott design ist ,
ist das totale zentrieren kein problem
du willst genau yyy X xxx haben dann gilt folgendes
html { height :100%; width:100%;} /* viewhöhe browser 100% */
body { position:absolute;
height: yyy px ; /* höhe von body festlegen (sichtbarer bereich) */
top : 50%; /* um hälfte des viewports nach unten */
margin-top: -(yyy/2)px; /* und verschieben (damit mitte auf mitte liegt ) */
width: xxx px; /* breite von body festlegen (sichtbarer breich) */
left: 50%; /* um hälfte des viewports nach rechts */
margin-left: -(xxx/2)px; /* und verschieben (damit mitte auf mitte liegt ) */
background:#FFAA00 url(‚bild.jpg‘);
text-align:center;
}
das ergibt dann ein guckloch von xxx px mal yyy pixel mit entsprechendem hitnergrundbild (natürlich nicht skalliert )
bild.jpg 330px breit x 300px hoch
also xxx = 330 ; yyy = 300
ergibt : xxx/2 = 165 ; yyy/2 =150
einsetzen
html { height :100%; width:100%;
background:#AAAAFF;
} /* viewport höhe browser 100% */
body { position:absolute;
height: 300px ; /* höhe von body festlegen (sichtbarer bereich) */
top : 50%; /* um hälfte des viewports nach unten */
margin-top: -150px; /* und verschieben (damit mitte auf mitte liegt ) */
width: 330px; /* breite von body festlegen (sichtbarer breich) */
left: 50%; /* um hälfte des viewports nach rechts */
margin-left: -165px; /* und verschieben (damit mitte auf mitte liegt ) */
background:#FFAA00 url(‚bild.jpg‘);
text-align:center;
}
h1 {line-height: 24px;}
p {line-height: 12px;}
Test
Zentrieren : ViewPort