03-10-2011, 19:07
(Ten post był ostatnio modyfikowany: 03-10-2011, 19:08 przez panSamochodzik.)
Witam!
Szukałem już na temat tego problemu, ale nic nie znalazłem, toteż piszę.
Mam szeroki obrazek (1360px), który ma spełniać rolę banera na samej górze strony. Na początku zrobiłem to w ten sposób, że dałem go jako tło strony, niepowtarzalne, ustawione w pozycji top, center. Natomiast div z treścią strony miał magin-top ustawiony na ok. 200px., i też był wycentrowany (tyle samo wolnego miejsca z lewej co z prawej). Przy skalowaniu działało to dobrze, do momentu, gdy div z treścią dotknął lewej strony przeglądarki. Wtedy on sam (z wiadomych przyczyn) przestał być wycentrowany, ale tło dalej "chowało się" z lewej strony przeglądarki. Chciałem by w tym momencie ono też przestało się poruszać. Wtedy pomyślałem, że może baner wcale nie powinien być tłem dla body? Jednak jeśli zrobię go jako osobnego diva, to w ogóle nie chce się z kolei "chować" z lewej strony. Cały czas jest przyczepiony w jednym miejscu.
Tutaj jest kod html strony:
A tutaj pliku css (na chwilę obecną):
Byłbym wdzięczny za pomysł jak to zrobić.
Szukałem już na temat tego problemu, ale nic nie znalazłem, toteż piszę.
Mam szeroki obrazek (1360px), który ma spełniać rolę banera na samej górze strony. Na początku zrobiłem to w ten sposób, że dałem go jako tło strony, niepowtarzalne, ustawione w pozycji top, center. Natomiast div z treścią strony miał magin-top ustawiony na ok. 200px., i też był wycentrowany (tyle samo wolnego miejsca z lewej co z prawej). Przy skalowaniu działało to dobrze, do momentu, gdy div z treścią dotknął lewej strony przeglądarki. Wtedy on sam (z wiadomych przyczyn) przestał być wycentrowany, ale tło dalej "chowało się" z lewej strony przeglądarki. Chciałem by w tym momencie ono też przestało się poruszać. Wtedy pomyślałem, że może baner wcale nie powinien być tłem dla body? Jednak jeśli zrobię go jako osobnego diva, to w ogóle nie chce się z kolei "chować" z lewej strony. Cały czas jest przyczepiony w jednym miejscu.
Tutaj jest kod html strony:
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>tytul strony, blablabla</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if lte IE]>
<style type="text/css" media="all">.border {border-style:solid;}</style>
<![endif]-->
</head>
<body>
<div class="baner">
</div>
<div class="woodBack">
<div class="menu paper border">
<h2 class="head">MENU</h2>
</div>
<div class="content paper border">
<h1 class="head">WANTED<br/>DEAD OR ALIVE</h1>
</div>
</div>
</body>
</html>A tutaj pliku css (na chwilę obecną):
Kod:
body
{
background-color: black;
}
.baner
{
position: center;
width: 1510px;
height: 170px;
margin-top: -10px;
background-image: url("baner4.jpg");
}
.woodBack
{
width: 760px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 20px;
overflow: hidden;
background-image: url("bodyBackground.jpg");
}
.menu
{
width: 148px;
height: 400px;
margin-right: 10px;
}
.content
{
width: 508px;
height: 4000px;
margin-left: 10px;
}
.paper
{
float: left;
background-image: url("paperBack2.jpg");
border-style: dashed;
border-width: 1px;
border-color: #5f3f00;
color: #5f3f00;
padding-left: 20px;
padding-right: 20px;
font-family: calibri;
}
.head
{
font-family: western;
text-align: center;
}
@font-face
{
font-family: western;
src: url('Western.TTF');
}Byłbym wdzięczny za pomysł jak to zrobić.
