Forum PHP.pl > [XHTML]Problem z wyrównaniem divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [XHTML]Problem z wyrównaniem divów

pimek

5.03.2009, 15:48:01

Witam Szukałem informacji. Niestety nie znalazłem rozwiązania. Jak wyrównać trzy divy, które znajdują się w pierwszym divie ? Wyrównać do środka tego diva.

Kod

<code><div style="width: 100%;height: 200px; border: thin solid #bd3e74; ">

  <div  style="margin-left: 0px; margin-right: 3px;border: thin solid #bd3e74;  width: 200px; float: left; height: 100px; padding: 4px 8px; background:  #e2c4ed; font-family: arial,sans-serif;">
  wszystko jest pooodłe :d
  </div>

  <div  style="margin-left: 0px; margin-right: 3px; border: thin solid #bd3e74;  width: 200px; float: left; height: 100px; padding: 4px 8px; background:  #e2c4ed; font-family: arial,sans-serif;">
  wszystko jest pooodłe :d
  </div>

  <div  style="margin-left: 0px; margin-right: 3px; border: thin solid #bd3e74;  width: 200px; float: left; height: 100px; padding: 4px 8px; background:  #e2c4ed; font-family: arial,sans-serif;">
  wszystko jest pooodłe :d
  </div>

  </div>
  </code>

Pozdrawiam

r_mag13

5.03.2009, 16:01:24

Ja bym głównemu div-owi dal mniejsza szerokość (np 700px), margin:auto.

W ostateczności włożyłbym te trzy divy do jeszcze jednego i dał go niewidocznego.

Ale nie wiem czy tak się robi, albo czy ci to odpowiada.

drzalek

5.03.2009, 16:03:55

Ponieważ wszystkie trzy mają stałą szerokość 200px, możesz je wpakować do diva o szerokości 600, lub nadać temu głównemu taką szerokość, skoro i tak ma 100% to pewni nic nie robi, nie wiem dokladnie czy o to chodziło, może rozrysuj

r_mag13

5.03.2009, 16:06:50

właśnie o to mi chodzi co napisał drzalek, ale jak się to wpakuje w 600px to się nie mieści

OT: Daj sobie style do osobnego pliku bo ja osobiście się w tym gubię. Nie wiem jak inni.

drzalek

5.03.2009, 16:20:18

bo musisz dodać do tego jeszcze marginesy czyli jak dajesz każdemu divowi 3px to jeszcze 3x3px czyli 9 czyli 609px dajesz glownemu

r_mag13

5.03.2009, 16:21:05

[HTML] pobierz, plaintext 
<div style="width: 612px; border-style: solid;border-width:1px;padding:0px; margin: auto;">
 
<div  style="margin-left: 0; margin-right: 3px;border-style: solid;border-width:1px;  width: 200px; float: left; height: 100px;background:  #e2c4ed; font-family: arial,sans-serif;">
wszystko jest pooodłe 
</div>
 
<div  style="margin-left: 0px; margin-right: 3px; border-style: solid;border-width:1px;  width: 200px; float: left; height: 100px;background:  #e2c4ed; font-family: arial,sans-serif;">
wszystko jest pooodłe 
</div>
 
<div  style="margin-left: 0px; margin-right: 0; border-style: solid;border-width:1px;  width: 200px; float: left; height: 100px; background:  #e2c4ed; font-family: arial,sans-serif;">
wszystko jest pooodłe 
</div>
 
</div>
[HTML] pobierz, plaintext

z tego co tu policzyłem to nie możne być 600px bo:
1px +1px+3px+1px+1px+3px+1px+1px=12px
czyli szerokość musi być 612px.

Może się mylę ale to by się zgadzało bo: 1px to obramowanie tych środkowych div-ów a ich jest 6, a do tego dwa marginesy w środku po 3px.
Musiałem padding ustawić na 0 bo on rozszerzał te twoje divy i one wcale nie miały 200px tylko więcej.

Aha i trochę narobiłem bałaganu w tych stylach to sobie tam pozamiataj jakby co

Pamiętaj aby zmienić szerokość diva jeśli zmienisz obramowanie, lub go usuniesz!

drzalek

5.03.2009, 16:30:01

No dokładnie trzeba zsumować wszystkie px'y: marginesy i obramowania i dopiero wrzucić to do głównego diva ustawionego na odpowiednią szerokość

Zakładam, że chcesz wyrównać to w poziomie

r_mag13

5.03.2009, 16:41:14

Dzięki drzalek. Zawsze zastanawiałem się czemu nie jest dobra szerokość jak robiłem szablon. Dopiero jak to zobaczyłem, więc pimek tobie też dzięki za ten problem

pimek

5.03.2009, 17:35:10

Dzięki za pomoc. A paddingi też wliczamy w tą sumę ?

Pozdrawiam

r_mag13

5.03.2009, 18:22:08

Nie jestem pewny

Spróbuj dać padding-left: 1px; w jednym divie (wewnętrznym) i zobacz czy ci to wyskoczy na dół.

Rada:
Daj sobie to w plik...

Piszesz sobie w <head>:

[HTML] pobierz, plaintext 
<link rel="Stylesheet" type="text/css" href="style.css" />
[HTML] pobierz, plaintext

potem tworzysz plik style.css.

W html w divie piszesz tak: <div class="main">[tu treść]</div>
A w style.css np:

Kod

.main {
     padding:0;
     margin:0;
     color:red;
     }

Możesz to zastosować do każdego znacznika: a, img, p, h1, h2 i tak w nieskoczonosc...
Możesz dwóm divom dać class="main" i one będą takie same.

erix

5.03.2009, 18:25:29

Cytat

A paddingi też wliczamy w tą sumę ?

A nie można choć trochę poszukać? http://www.w3.org/TR/CSS21/box.html#box-dimensions

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.