3 x div, float i margin? Opcje

[pixeldave]

Witam serdecznie!

Przeszukałem całe forum i znalazłem podobny problem, ale rozwiązanie nie działa. Do rzeczy. Koduję szablon w którym obok siebie są 3 tabelki o identycznej szerokości 230px. Całość jest na środku.

Wrzuciłem 3 divy w jeden kontener. W kodzie wygląda to tak:

CODE

<div id="kontener">
<div id="box"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>

CSS:

CODE

#kontener {
position: relative;
top: 0px;
padding: 0px;
margin: auto;
border: double;
border-color: white;
width: 900px;
height: 360px;
}


#box {
float:left;
background-image: url(images/prace_03.png) no-repeat;
width: 235px;
padding: 0px;
height: 57px;

Koledzy! Bardzo proszę Was nie tylko o pomoc ale i wytłumaczenie dlaczego tak, a nie inaczej. Siedzę nad tym od 4 godzin i nie mam pojęcia w czym robię błąd.

Pozdrawiam i dziękuję

[krispak]

Koledzy! Bardzo proszę Was nie tylko o pomoc ale i wytłumaczenie dlaczego tak, a nie inaczej. Siedzę nad tym od 4 godzin i nie mam pojęcia w czym robię błąd.

Za bardzo nie rozumiem o co Tobie chodzi.. Jezeli o to ze nie masz trzech divow obok siebie to nalezy zmienic id="box", id="box2" i id="box3" na class="box"

Ten post edytował krispak 25.08.2010, 21:07:05

[bartoland]

Najważniejsze to to, że masz trzy diwy o trzech różnych id a w css masz tylko jeden opisany. Zaraz jak zdążę przed wyjściem to spróbuję odpisać jak to powinno wyglądać. Ps. Nie wiem czy dobrze rozumiem chcesz je mieć trzy obok siebie?

[everth]

1. kontener: szerokość 3*(wymiar boxa +margines prawy)+2px, overflow:hidden, wysokość auto
2. wszystkie divy w środku: float:left + np. 5px marginesu prawego

[Bazan]

Jeśli one są takie same to nie potrzebnie robisz im inne id.
Musisz pamiętać, że taki sam id może być tylko 1 w danym pliku html.
Czyli nie możesz zrobić

[HTML] pobierz, plaintext 
<div id="box"></div>
<div id="box"></div>
[HTML] pobierz, plaintext 

Jeśli nie masz pewności, czy jakiś div się nie powtórzy to stosuj klasy, czyli:

[HTML] pobierz, plaintext 
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
[HTML] pobierz, plaintext 

Jeśli chodzi o CSS to classy się deklaruje jako . a nie jako #, czyli w css wygląda to tak

[HTML] pobierz, plaintext 
 
 
#kontener {
position: relative;
top: 0px;
padding: 0px;
margin: auto;
border: double;
border-color: white;
width: 900px;
height: 360px;
}
 
 
.box {
float:left;
background-image: url(images/prace_03.png) no-repeat;
width: 235px;
padding: 0px;
height: 57px;
}
[HTML] pobierz, plaintext 

Ten post edytował Bazan 25.08.2010, 21:04:50

[pixeldave]

everth- dziękuję. I mam jeszcze jeden problem a właściwie pytanie. Każdy z tych 3 boxów składa się z 3 elementów graficznych jak w przykładzie poniżej:

http://fotozrzut.pl/zdjecia/69c6f07c58.gif

Teraz zastanawiam się jak najlepiej to zakodować w CSS. Nie wiem jak będzie poprawnie. Czy zrobić to w ten sposób?

CSS

CODE

#box2gora {
background-image: url(czesc1.gif);
background-repeat:no-repeat;
width: 235px;
height: 57px;
padding: 0px;
margin: auto;

#box2 {
background-image: url(czesc2.gif);
background-repeat: repeat-y;
width: XXpx;
padding: 0px;
height: 100%;
margin: auto;
}

#box2dol {
background-image: url(czesc3.gif);
background-repeat:no-repeat;
width: XXpx;
height: XXpx;
padding: 0px;
margin: auto;

}
}

I następnie żeby złożyć to w jednego boxa w kodzie zrobić tak?:

CODE

<div id="box2">
<div id="box2gora"></div>
TRESC
<div id="box2dol"></div>
</div>

[maverick22]

obrazek dzielisz na 3 czesci i robisz tez 3 divy. srodkowa i dolna mozesz wlasciwie zrobic jako klase - zawsze kilka linijek kodu mniej.
srodkowy obrazek tniesz tak by mial wysokość 1 px.

[HTML] pobierz, plaintext 
<div id="box">
   <div id="boxgora">
   </div>
   <div id="boxtresc">
   TRESC
   </div>
    <div id="boxdol">
    </div>
</div>
[HTML] pobierz, plaintext 

a cssy:

[HTML] pobierz, plaintext 
#box { parametry }
 
#boxgora { width: xxpx;
                  height: xxpx;
                  background-image: url(sciezka);
                  background-repeat: no-repeat;
 
}
 
#boxtresc { width: xxpx;
                  height: auto lub min-height: xxpx;
                  background-image: url(sciezka);
                  background-repeat: repeat-y;
}
 
#boxdol { width: xxpx;
               height: xxpx;
               background-image: url(sciezka);
               background-repeat: no-repeat;
}
 
[HTML] pobierz, plaintext