Jak rozciągnąć div na 100% szerokości przeglądarki?


(Afilatepp) #1

witam serdecznie :slight_smile: chciałbym uzyskać efekt jak na tym forum. A mianowicie chodzi mi o czarny pasek u góry strony z menu oraz wyszukiwarką.  Mi na mojej stronie rozjeżdża trochę menu jak zwężę przeglądarkę : 30071597209789463452.jpg

Oto mój kod css i html :

#all_page{
	margin:0;
	padding:0;
	width:100%;
	height:100%;	
}

#up{
	padding:0;
	margin:0;
	width:100%;
	height:200px;
	background:url('tlo.jpg') left top;
}

#menu{
	border:1px solid red;
	margin:20px 500px 50px 100px;
	padding:0;
	float:right;
	width:100%px;
	height:40px;
}

 

div id="all_page"	
    	div id="up"
    		div id="menu"
    			ul
    				lia href="index.html"Strona główna/a/li
    				lia href="kontakt.html"Kontakt/a/li
    				lia href="o_stronie.html"O stronie/a/li
    				lia href="wspolpraca_reklama.html"współpraca/reklama na blogu/a/li
    			/ul
    		    /div
        	 /div
            /div

Gdy ustawię w div all_page = width=1360px ( szerokość mojej przeglądarki ) zamiast width=100% , wówczas jest zadowalający, efekt jak na screenie : 95316576806328608968.jpg

I tutaj moje pytanie. Czy ustawienie width=1360px będzie dobrym rozwiązaniem ? Jeśli nie to proszę małą pomoc. Próbowałem z opcją position, ale też mi rozwalało menu.


(Neakles2) #2

Za takie coś odpowiada: min-width: XXXpx;

 

Nawiasem możesz łatwo podglądać kod strony, przez kliknięcie na dany element i wybranie opcji “Inspect Element”. Działa to w PaleMoonie i Firefoxie. Nie wiem, jak jest na chrome.


(Yosh) #3

Pobaw się też ze stylami div-a którego rozciągasz:

  • width:100%

  • margin:0 auto

  • overflow:hidden

 

A na Chrome/Chromium “Inspect Element” działa podobnie.


(Afilatepp) #4

dziękuję wszystko działa jak należy :slight_smile: