Jump to content
Sign in to follow this  
alexorbital

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

Recommended Posts

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;}
Edited by alexorbital

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

Aktualności

Artykuły



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.