+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Wycentrowany szeroki obrazek (/thread-css-wycentrowany-szeroki-obrazek)
[CSS] Wycentrowany szeroki obrazek - panSamochodzik - 03-10-2011
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:
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ć.
RE: [CSS] Wycentrowany szeroki obrazek - Kartofelek - 03-10-2011
Kolego 2 możliwości:
1) background-position:center top;
2) tworzysz szerokiego diva w divie. Div rodzic ma wymiary strony + position:relative; a div dziecko dostaje: position:absolute; top:0; left:50%; margin-left:-680px;