Skocz do zawartości
alexorbital

Rozjeżdzjące się divy przy różnej skali

Rekomendowane odpowiedzi

Witam uprzejmie,

 

Dopiero zaczynam swoją przygodę z css i nie mogę sobie poradzić z moim problemem, albowiem stworzyłem layout i jak zmniejszam stronę to layout się rozlatuję na drobne kawałeczki i dziwnie zachowują się matginesy, co ciekawe 1/3 trzyma się razem choćby nie wiem co, ale od podmenu 2 i 3 wszystko ulega załamaniu. Prosiłbym o pomoc, bo męczę się już 3 dzień i próbowałem zmniejszać wartości, ale nie mogę dać sobie rady.

 

Link - http://www.alexorbital.boo.pl/layout/index.html

 

 

Screeny

http://imageshack.us/f/16/screen1uyb.png/

http://imageshack.us/photo/my-images/41/screen2mz.png/

 

<!DOCTYPE html><html><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"><META HTTP-EQUIV="Content-Language" CONTENT="pl"><META NAME="robots" CONTENT="All"><TITLE>OOO</TITLE><META NAME="description" CONTENT="ooo "><META NAME="keywords" CONTENT="ooo"><META HTTP-EQUIV="pragma" CONTENT="no-cache"><META NAME="generator" CONTENT="Notatnik"><META NAME="copyright" CONTENT="ooo"><META NAME="author" CONTENT="ooo"><META NAME="owner" CONTENT="oool"><link rel="stylesheet" href="style.css" type="text/css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">                    <body>            <div id="calosc">            <div id="logo"></div>            <div id="podlogo"><b>P</b>odlogo</div>            <div id="menu"><b>M</b>enu</div>            <div id="srodek"><b>M</b>enu2<br></div>            <div id="podmenu"><b>P</b>odmenu</div>            <div id="podmenu2"><b>P</b>odmenu2</div>            <div id="lewy"><b>L</b>ewy</div>            <div id="prawy"><b>P</b>rawy</div>            <div id="lewy2"><b>L</b>ewy2</div>            <div id="prawy2"><b>P</b>rawy2</div>            <div id="stopka"><b><center>S</b>topka</center></div>       </body>       </html>

*{margin:0px;padding:0px;border:none;background-color:#F5F5F5;}#calosc{margin:0 auto;height:100%;width:1004px;background-color: white;}#logo{border:1px solid black;height:237px;width:1004px;margin-top:3px;margin-bottom:3px;}#podlogo{border:1px solid black;height:50px;width:1004px;background-color:#E6E6FA;margin-bottom:3px;}#menu{border:1px solid black;height:600px;width:200px;background-color:#E0FFFF;margin-right:1px;margin-bottom:1px;float:left;}#srodek{border:1px solid black;height:600px;width:200px;margin-bottom:1px;margin-right:1px;background-color:#E6E6FA;float:left;}#podmenu{border:1px solid black;height:300px;width:594px;background-color:#E0FFFF;margin-bottom:1px;float:right;}#podmenu2{border:1px solid black;height:297px;width:594px;background-color:#E0FFFF;margin-bottom:1px;float:right;}#lewy{border:1px solid black;height:200px;width:499px;background-color:#E6E6FA;margin-bottom:1px;float:left;}#prawy{border:1px solid black;height:200px;width:499px;background-color:#E0FFFF;margin-bottom:1px;float:right;}#lewy2{border:1px solid black;height:200px;width:499px;background-color:#E6E6FA;margin-bottom:1px;float:left;}#prawy2{border:1px solid black;height:200px;width:499px;background-color:#E0FFFF;margin-bottom:1px;float:right;}#stopka{border:1px solid black;height:60px;width:1004px;background-color:#FFEFD5;clear:both;margin-bottom:1px;}
Edytowane przez alexorbital

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Sprawa ma się tak, że masz wszystkie rozmiary wpisane na sztywno, więc zmiana szerokości jednego elementu spowoduje demolkę w pozostałych - albo im braknie szerokości (i wyskoczą dziwne marginesy), albo wręcz przeciwnie (i wtedy layout się rozjedzie).

 

Ja bym się zastanowił, który element wrzucić w sztywne rozmiary, który ustawić do prawej/lewej (do prawej proponuję żaden, bo tutaj to zupełnie niepotrzebne).

Oprócz tego straszny bałagan jest (będzie?) z marginesami i borderami - pogubisz się szybko przy zmianie rozmiaru nawet jednego drobiazgu. Proponuje najpierw siąść i sobie zaprojektować layout strony, a potem dopiero ustawiać szerokości i wysokości.

 

Oprócz tego dobrze jest czasem zamknąć sobie sąsiadujące elementy w jakimś nadrzędnym dla nich, przez co będziesz je miał zgrupowane.

Na przykład:

<div id="menu-lewa">	<div id="menu1"></div>	<div id="menu2"></div></div>
W ten sposób, przy odpowiednim potraktowaniu CSS zawsze będą się trzymać razem i nie da się ich rozwalić.

Hmm... co jeszcze.. możesz się pobawić procentowymi szerokościami - ale to zadziała tylko jeżeli wyzerujesz marginesy i bordery dla tych procentowo skalowanych divów:

<style type="text/css">#kontener {	overflow: hidden;	width: 1000px;	margin: 0 auto;	}	#pierwszy {	width: 25%;	height: 100px; /* tylko żeby było go widać bez treści */	background: red; /* tylko, żeby było go widać bez treści */	float: left;	}	#drugi {	width: 25%;	height: 100px; /* tylko żeby było go widać bez treści */	background: yellow; /* tylko, żeby było go widać bez treści */	float: left;	}	#trzeci {	width: 50%;	height: 100px; /* tylko żeby było go widać bez treści */	background: cyan; /* tylko, żeby było go widać bez treści */	float: left;	}	#czwarty {	width: 100%;	height: 100px; /* tylko żeby było go widać bez treści */	background: blue; /* tylko, żeby było go widać bez treści */	float: left;	}	</style><div id="kontener">	<div id="pierwszy"></div>	<div id="drugi"></div>	<div id="trzeci"></div>	<div id="czwarty"></div></div>
Pierwszy będzie miał 250 pikseli, drugi 250, trzeci 500, czwarty 1000. O ile niczego nie sknociłem po drodze, bo nie sprawdzałem wyniku.

 

 

Btw, masz błędy w nagłówku - doctype html5, ale część meta tagów z dużej litery, do tego deklaracja charsetu niepoprawna (<meta charset="iso-8859-2" /> powinno być) i trochę stara (polecam utf-8 zamiast iso-8859-2).

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

albo pokombinuj w ten sposób. przykład:

 

masz 3 kolumny:

- kolumna A - ustaw procentowo

- kolumna B - ustaw procentowo

- kolumna C - ustaw "auto"

 

Wtedy jedna ci się bedzie automatycznie dopasowywała, kwestia co tak ostatecznie chcesz uzyskać. Poużywaj Firebuga, o ile nie używasz.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dziękuję Wam ślicznie za szeroki odzew. Piorunujące wrażenie zrobił na mnie zwłaszcza m4r. Jednak na razie zrezygnowałem z obramowań i wszsytko zawsze działa. Zrobiłem przerwy białe i jakoś tragicznie to nie wygląda. Jednak na pewno skorzystam z Waszych cenych rad.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

Ładowanie


×
×
  • Dodaj nową pozycję...