Forum PHP.pl > [css] background x 2

Pomoc - Szukaj - Użytkownicy - Kalendarz

p_rzemon

5.03.2008, 11:44:12

Witam

potrzebuję 1/2 strony wypełnić tłem gdzie kreski układają się w sposób ////
a drugą połowę strony wypełnić kreskami odwróconymi \\\\

sama strona będzie wycentrowana

jak zrobić takie tło żeby przy zmianie rozdzielczości nie było problemów.

nitek

5.03.2008, 12:01:47

musiałbyś mieć dwa divy, z 50% wysokością, ale wtedy będziesz musiał poupychać treść w to wszystko w jakiś sposób... chybaze pokombinujesz do tego jeszcze z z-index

PS (zamiast tła ustaw sobie background-image):

[HTML] pobierz, plaintext 
<html>
<head>
</head>
 
<body>
 
 <div style='height: 50%; width:100%; background-color:silver;'>
  div nr 1
 </div>
 
 <div style='height:50%; width:100%; background-color:gray;'>
  div nr 2
 </div>
 
</body>
</html>
[HTML] pobierz, plaintext

grzesiek_g

5.03.2008, 12:19:29

[HTML] pobierz, plaintext 
<div id="container">
    <div id="container2">
        <!-- tresc strony -->
    </div>
</div>
[HTML] pobierz, plaintext

i css:

[HTML] pobierz, plaintext 
#container {background:url(sciezka/do/obrazka1) repeat-x top;}
#container2 {widht:100%;float:left;background:url(sciezka/do/obrazka2) repeat-x bottom;}
[HTML] pobierz, plaintext

To rozwiązanie prostsze, ale musisz utworzyć obrazki o odpowiedniej wysokości i nie jest odporne na różne rozdzielczości.

Inne rozwiązanie to pozycjonowanie absolutne:

[HTML] pobierz, plaintext 
<div id="container"></div>
<div id="container2"></div>
<div id="strona">
    <div id="main">
        <!-- tresc -->
    </div>
</div>
[HTML] pobierz, plaintext

css:

[HTML] pobierz, plaintext 
#container {
background:url(sciezka/do/obrazka1) repeat;
width:100%;
height:50%;
top:0;
left:0;
position:absolute;
}
#container2 {
widht:100%;
height:50%;
background:url(sciezka/do/obrazka2) repeat;
bottom:0;
left:0;
position:absolute;
}
#strona {
position:absolute;
top:0;
left:0;
z-index:100;
width:100%;
}
#main {
width:900px; /*tutaj zmień sobie*/
margin:0 auto;
}
[HTML] pobierz, plaintext

p_rzemon

5.03.2008, 13:32:22

ten 2 sposób jest całkiem fajny tylko że podział powinien być w pionie, możesz mi jeszcze podpowiedzieć jak ustawić parametry do takiego podziału
tzn. mam tak

Kod

#ca {
background:url(g2.jpg) repeat-x;
width:50%;
height:100%;
top:0;
left:0;
position:absolute;
}
#cb {
background:url(g1.jpg) repeat-x;
width:50%;
height:100%;
top:0;
right:0;
position:absolute;
}

i jest przerwa po środku 20px w IE w firefox jest ok

grzesiek_g

5.03.2008, 13:56:19

Możesz dodać trzeci div który to wszystko przesłoni o szerokości 20px, maginesem lewym odsuniesz go na -10px, oczywiście pozycjonowany absolutnie z left:50%.

Uprzedzam, że nie testowałem tego i piszę "z palca".

Ale myślę, że da się to też inaczej wyciąć, tylko trzeba się dobrze zastanowić patrząc na psd.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.