alexorbital Opublikowano 29 Maja 2012 Zgłoś Opublikowano 29 Maja 2012 (edytowane) 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 29 Maja 2012 przez alexorbital Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
m4r Opublikowano 4 Czerwca 2012 Zgłoś Opublikowano 4 Czerwca 2012 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). Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
Gość DonB Opublikowano 19 Czerwca 2012 Zgłoś Opublikowano 19 Czerwca 2012 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. Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
s0n1c Opublikowano 19 Czerwca 2012 Zgłoś Opublikowano 19 Czerwca 2012 Ciekawostka: pod opera problem nie wystepuje. Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
alexorbital Opublikowano 22 Czerwca 2012 Zgłoś Opublikowano 22 Czerwca 2012 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. Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
stark Opublikowano 25 Czerwca 2012 Zgłoś Opublikowano 25 Czerwca 2012 Zobacz tu: Twitter Bootstrap i ucz się od najlepszych. Cytuj Udostępnij tę odpowiedź Odnośnik do odpowiedzi Udostępnij na innych stronach Więcej opcji udostępniania...
