Zaloguj się

markos2xx · 05-07-2012, 21:40

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>

polak · 05-07-2012, 22:32

Masz ustawiną cała szerkość na

Kod PHP:
width:1004px; 

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 ;p

Zawiii · (Ten post był ostatnio modyfikowany: 05-07-2012, 22:51 przez Zawiii.)

(05-07-2012, 22:32)polak napisał(a): Masz ustawiną cała szerkość na

Kod PHP:
width:1004px;
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 ;p

ciekawe, ciekawe Smile

aa mógłbyś to wykonać i pokazać jak Ty to widzisz?? bo ja nie widzę Tongue

a tu jest moja wesoła wizja tego, poprawione z Twojego nie pisane od nowa Smile

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>

markos2xx · 05-07-2012, 23:26

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 Wink

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 Smile

Zaraz to wydrukuję i na spokojnie zobaczę co robiłem źle. Dzięki!

Zawiii · (Ten post był ostatnio modyfikowany: 05-07-2012, 23:36 przez Zawiii.)

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 Tongue

Sprawiało to, że nie mieściło się dwa elementy w jednej linii Smile

dodatkowo usunąłem te zbędne breaki, przecież od tego jest margin Smile

aha i nie zadeklarowałeś #sześć, #siedem w css.
pomogłem?? Tongue

polak, jeśli chcesz pomóc to najpierw bądz pewny tego co mówisz Smile

markos2xx · 06-07-2012, 00:11

Pewnie, że pomogłeś :p Jeszcze raz dzięki!

polak · 06-07-2012, 12:01

@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ć.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie