Zaloguj się

suppositoria · 07-10-2009, 15:50

Witam
Tworze stronke i borykam się z następującym problemem:
Na samej górze mam diva z tlem imitujacym zachmurzone niebo
(ustawiony jpg z chmurkami jako background tego diva).
Efekt bedzie w pełni widoczny przy wyższych rozdzielczosciach, natomiast przy mniejszych div bedzie sie kurczył(max-width:1011px; min-width:903px Wink

.
Problem polega na tym ze pod nim znajduje sie div o stalej szerokosci z zawartoscia strony, ktory ma byc wysrodkowany. Niestety w przypadku zmiejszania okna przeglądarki ponizej 1011px, div o stalej szerokosci przesuwa sie wzgledem diva z ograniczona plynnoscia gdyz węższy jest dalej wysrodkowany, a szerszy zaczyna zmniejszac swoj rozmiar ale tylko z jednej stony z prawej. Troche to zamotane dlatego umieszczam przykład

Kod:
<head>

<style type="text/css">

body{text-align: center;}

#clouds {

max-width:1011px;

 min-width:903px;

 background:#f7ed3c;

 height:200px;

 margin-left:auto;

margin-right:auto;

}

#down {

margin-left: auto;

margin-right: auto;

height:600px;

background:#29f534;

width:800px;}

</style>

</head>

<body>

<div id="clouds"></div>

<div id="down"></div>

</body>

Jak widac po zmniejszeniu okna przegladarki zielony div zmienia swoje polozenie wzgl. żółtego, a ja chcialbym zeby tak sie nie dzialo poniewaz mam grafike w jednym i drugim która nie może się przesuwac względem siebie(nastapi to wtedy kiedy szerzszy div będzie się kurczył równomiernie z dwóch stron a nie tylko z jednej.
Czy jest sposob zeby otzrymac taki uklad plywajacy zeby element szerszyzmienial swoja szerokośc z dwóch stron a nie tylko z jednej?
Z góry dziekuje i pozdrawiam.

sunpietro · 07-10-2009, 18:56

ten div zawsze będzie się wyśrodkowywał względem szerokości otwartego okna.
Zawsze możesz zrobić jakiś ukryty div z boku żółtego, który będzie blokował przesuwanie się żółtego diva do lewej krawędzi ekranu.

suppositoria · 07-10-2009, 20:01

Myslalem o tym ale problem polega na tym ze wtedy pasek do przesuwania poziomego pojawi sie w momencie kiedy uklad bedzie mial wiecej niz 800px czyli nie bedzie juz mial plynnej szerokosci

**Labsta.com** · (Ten post był ostatnio modyfikowany: 07-10-2009, 20:14 przez Labsta.com.)

Moim zdaniem, nie potrzebnie kombinujesz.
div z chmurami ma być na 100% szerokości tło centrujesz (background:..... 0% center; ) i zawsze będzie na środku. W tego diva pakujesz div z treścią o stałej szerokośći i dajesz mu margin: 0 auto;
I tyle. W Twoim wypadku bezsensu jest kombinowanie z min-width;

BeamBear · 07-10-2009, 20:16

Mi rozum dyktuje tak:
css

Kod:
body{

margin: 0;

padding: 0;

text-align: center;

}

#clouds {

width: 100%;

background:#f7ed3c url(sciezka/do/tla.png) center top no-repeat;

height:200px;

margin:0;

}

#down {

margin: 0 auto;

height:600px;

background:#29f534;

width:800px;}

html - bez zmian.

W ten sposób - w warstwie clouds ustawiasz jako tło, wyśrodkowane, wyrównane ku górze i bez powtarzania. A warstwę down środkujesz w sposób, który również na webmastertalk kilkukrotnie był opisywany.

To powinno zadziałać Smile

suppositoria · Liczba postów: 24 Liczba wątków: 11 Dołączył: 03-03-2009 Reputacja: 0

Witam
Jak zwykle zadziałało dzieki wielkie, mala uwaga dla osob ktore beda mialy kiedys taki problem: dla szerszego diva trzeba ustawic width-min rowna szerokosci wezszego diva. W przeciwnym razie jezeli szerokosc okna w podanym przykładzie bedzie mniejsza niz 800px, pojawi sie pasek przewijania poziomego a szerszy div bedzie mial szerokosc okna przegladarki (czyli mniej niz 600) i pojawi sie bialy pasek po prawej u gory.

Kod:
body{

margin: 0;

padding: 0;

text-align: center;

}

#clouds {
width: 100%;
width-min: 800px;
background:#f7ed3c url(sciezka/do/tla.png) center top no-repeat;
height:200px;
margin:0;
}

#down {
margin: 0 auto;
height:600px;
background:#29f534;
width:800px;}

Mam jeszcze jeden problem nie wiem czy poruszac go w tym watku czy zalozyc nowy? (jezeli tak to wyedytuje post i zaloze nowy temat)
Otoz mam trzy divy (jeden pod drugim) z roznymi tlami. Problem pojawia sie gdy pierwszy (bedacy na samej gorze) otrzyma maly obrazek jako tlo ustawiony np top left no-repeat. Wtedy div lezacy pod nim satje sie przezroczysty i widac diva lezacego na samym dole. Dlaczego tak sie dzieje??

**Labsta.com** · (Ten post był ostatnio modyfikowany: 11-10-2009, 19:31 przez Labsta.com.)

Pamiętaj tylko, że z min-width jest problem w IE. Trzeba sobie z tym radzić np. tak

Kod:
width:expression(document.body.clientWidth < 800 ? "800px" : "auto" );

albo tak:

Kod:
min-width: 800px;

width: auto !important;

width: 800px;

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie