+- 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: Wysrodkowanie dwoch divów (/thread-wysrodkowanie-dwoch-divow)
Wysrodkowanie dwoch divów - suppositoria - 07-10-2009
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
.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>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.
RE: Wysrodkowanie dwoch divów - sunpietro - 07-10-2009
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.
RE: Wysrodkowanie dwoch divów - suppositoria - 07-10-2009
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
RE: Wysrodkowanie dwoch divów - Labsta.com - 07-10-2009
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;
RE: Wysrodkowanie dwoch divów - BeamBear - 07-10-2009
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ć
RE: Wysrodkowanie dwoch divów - suppositoria - 11-10-2009
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??
RE: Wysrodkowanie dwoch divów - Labsta.com - 11-10-2009
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" );Kod:
min-width: 800px;
width: auto !important;
width: 800px;