+- 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: CSS - bloki zjeżdżają w dół (/thread-css-bloki-zjezdzaja-w-dol)
CSS - bloki zjeżdżają w dół - markos2xx - 05-07-2012
Witam. Próbuję zrobić układ strony jak w załączonej grafice, tylko bloki div z prawej strony coś lecą do dołu. W czym jest problem?
Kod strony:
Kod:
<html>
<head>
<style type="text/css">
html, body
{
color:#000;
margin:0;
padding:0;
}
#all
{
width:1004px;
}
#first
{
width:1004px;
}
#jeden
{
margin-left: 100px;
width: 500px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#break1
{
margin-left: 600px;
padding:0;
width: 54px;
float: left;
overflow: hidden;
}
#dwa
{
margin-left: 654px;
margin-right: 100px;
width: 250px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#second
{
width:1004px;
clear:both;
}
#trzy
{
margin-left: 100px;
width: 500px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#break2
{
margin-left: 600px;
width: 54px;
float: left;
overflow: hidden;
}
#cztery
{
margin-left: 654px;
margin-right: 100px;
width: 250px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#third
{
width:1004px;
clear:both;
}
#piec
{
margin-left: 100px;
width: 500px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#infos
{
margin-left: 654px;
margin-right: 100px;
width: 250px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#break3
{
margin-left: 600px;
width: 54px;
float: left;
overflow: hidden;
}
#osiem
{
width:1004px;
clear:both;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="all">
<div id="first">
<div id="jeden">
dddddddddddddddddddddddddddddd
</div>
<div id="break1">
gdffdgfgfgdfgdfgf
</div>
<div id="dwa">
fdgdfgdfffffffffff
</div>
</div>
<div id="second">
<div id="trzy">
ffffffffffffffff
</div>
<div id="break2">
fffffffffffff
</div>
<div id="cztery">
dddddddddddd
</div>
</div>
<div id="third">
<div id="piec">
ddddddddddd
</div>
<div id="break3">
dddddd
</div>
<div id="infos">
<div id="szesc">
ddddd
</div>
<div id="siedem">
ddddddd
</div>
</div>
</div>
<div id="osiem">
dddddd
</div>
</div>
</body>
</html>RE: CSS - bloki zjeżdżają w dół - polak - 05-07-2012
Masz ustawiną cała szerkość na
Kod PHP:
width:1004px;
RE: CSS - bloki zjeżdżają w dół - Zawiii - 05-07-2012
(05-07-2012, 22:32)polak napisał(a): Masz ustawiną cała szerkość na
Później marginesy od lewej po 600px wielkość na 500px poprostu bloki nie mieszczą ci sie w divie "all" i wszystko leci w dół.. Musisz policzyć pixele sobie ;pKod PHP:width:1004px;
ciekawe, ciekawe
aa mógłbyś to wykonać i pokazać jak Ty to widzisz?? bo ja nie widzę
a tu jest moja wesoła wizja tego, poprawione z Twojego nie pisane od nowa
Kod:
<html>
<head>
<style type="text/css">
html, body
{
color:#000;
margin:0;
padding:0;
}
#all
{
width:804px;
margin: 0 auto;
}
.panel
{
width:804px;
min-height: 10px;
margin: 0px 0px 20px 0px;
clear: both;
}
#jeden
{
margin: 0px 0px 0px 0px;
width: 500px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#dwa
{
margin: 0px 0px 0px 0px;
width: 250px;
float: right;
background-color: #ccc;
}
#trzy
{
margin: 0px 0px 0px 0px;
width: 500px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#cztery
{
margin: 0px 0px 0px 0px;
width: 250px;
float: right;
background-color: #ccc;
}
#piec
{
margin: 0px 0px 0px 0px;
width: 500px;
height: 60px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#infos
{
margin: 0px 0px 20px 0px;
width: 250px;
float: right;
}
#szesc
{
margin: 0px 0px 20px 0px;
width: 250px;
background-color: #ccc;
}
#siedem
{
margin: 0px 0px 0px 0px;
width: 250px;
background-color: #ccc;
}
#osiem
{
width:804px;
margin: 0px 0px 0px 0px;
clear:both;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="all">
<div class="panel">
<div id="jeden">
dddddddddddddddddddddddddddddd
</div>
<div id="dwa">
fdgdfgdfffffffffff
</div>
</div>
<div class="panel">
<div id="trzy">
ffffffffffffffff
</div>
<div id="cztery">
dddddddddddd
</div>
</div>
<div class="panel">
<div id="piec">
ddddddddddd
</div>
<div id="infos">
<div id="szesc">
ddddd
</div>
<div id="siedem">
ddddddd
</div>
</div>
</div>
<div id="osiem">
dddddd
</div>
</div>
</body>
</html>RE: CSS - bloki zjeżdżają w dół - markos2xx - 05-07-2012
Polak też na początku myślałem, że się nie mieści ale dodaj sobie na spokojnie marginesy i szerokości i zobaczysz, że się zgadza
margines lewy 100px + szerokość 500px + szerokość 54px + szerokość 250px + margines prawy 100px i wychodzi równo 1004 px ale jednak coś było na nic ;/
Zawiii dzięki bardzo, o to właśnie chodziło
Zaraz to wydrukuję i na spokojnie zobaczę co robiłem źle. Dzięki!
RE: CSS - bloki zjeżdżają w dół - Zawiii - 05-07-2012
Troche inaczej Ci to zrobiłem bo wyśrodkowałem i zmieniłem szerokość na 804px. To co robiłeś źle to, że dodałeś do elementów znajdujących się po prawej stronie. . . lewe marginesy
Sprawiało to, że nie mieściło się dwa elementy w jednej linii dodatkowo usunąłem te zbędne breaki, przecież od tego jest margin aha i nie zadeklarowałeś #sześć, #siedem w css.pomogłem??
polak, jeśli chcesz pomóc to najpierw bądz pewny tego co mówisz
RE: CSS - bloki zjeżdżają w dół - markos2xx - 06-07-2012
Pewnie, że pomogłeś :p Jeszcze raz dzięki!
RE: CSS - bloki zjeżdżają w dół - polak - 06-07-2012
@zawi tak masz racje nie oglądałem całego kodu, bo robiłem to przed pracą, jednak kod mozna estetyczniej zrobić. Po południu postaram sie go zamieścić.