Kodowanie w CSS

[K-Mil]

Witajcie!

Chciałbym Was poprosić o pomoc. Wiem, że to mój 1-wszy post u Was na forum, ale nie mam się kogo zapytać. Moi znajomi raczej siedzą w samej muzyce, niżeli w kodach - przeglądam często Wasze strony i jestem ich dużym fanem, gratuluję kreatywności i wiedzy!

Sam chciałbym zrobić coś swojego, ale już na samym początku napotkałem problemy.

Zrobiłem layout w PS6. Pociąłem go odpowiednio. Jest prosty. Ma background, do tego 6 boxów i w nich tekst - i to wszystko. Na próbę. Niestety, podczas pisania kodu, mam problem z ustawieniem boxów w css obok siebie i pod sobą. Udało mi się ulokować logo tam, gdzie chciałem, wg szablonu oraz 2 boxy. Gdy dodaję 3 box - nie jest on na swoim miejscu, nawet jeżeli zastosuję margines lewy, prawy, górny i dolny i każdy z osobna.

Załączam plik .png, aby Wam pokazać o co mi chodzi.


Podczas pobierania odstępów z Photoshopa (np. ile pixeli jest od lewej do logo) i wpisywania ich w css jest wszystko ok. Gdy dołączam do tego box i wpisuję np. 150px top - to box pojawia się jeszcze niżej, niż być powinien. Dodatkowo mam problem, aby one były obok siebie i pod sobą jednocześnie.

Te boxy są na tle (także na obrazku) i one docelowo mają być wypełnione tekstami. Same boxy to także obrazki.

Bardzo, bardzo proszę o nakierowanie

[Evan]

musisz dać każdemu boxowi szerokosc i float left

box1{ width:300px;
         float:left;}

box2{ width:300px;
         float:left;
}

To wszystko musi być umieszczone w kontenerze

czyli

#container{
margin:0 auto; - wyśrodkowanie
width:600px; - bo dwa boxy zajmują 600px jeśli masz dodane marginesy musisz doliczyc je do szerokosci kontenera


<div id="container">

<div id="box1"></div>
<div id-"box2"></div>

</div>

[K-Mil]

Wow, dziękuję za tak szybką odpowiedź! Dałbym "pomógł", ale chyba nie mogę?

Zaraz sprawdzę, w nadziei, że rozwiąże to moje wszelkie problemy. Raz jeszcze bardzo mocno dziękuję Ci, Evan!

edit: no i jak czułem, już mam problem.

Udało mi się ustawić box1,box2 i box3 - boxy od 4 do 6 są już pod sobą (pod boxem 1 i 3). Nie wiem, co robię nie tak, że nie chcą się one ustawić w po 2 w 3 rzędach :/

Kod css:

body {
   width: 960px;
   margin: 0 auto;
   font-family:Calibri;
   font-size:14px;   
   background:url(images/tlo.png) top center no-repeat;}
   
#logo{ margin: 32px; 0 0 70px;}   

#box1{ width:444px;
         float:left;
       clear: none;}
      
#box2{ width:443px;
         float:left;
       clear: none;}
      
#box3{ width:444px;
         float:left;
       clear: none;}
      
#box4{ width:443px;
         float:left;
       clear: none;}             

#box5{ width:443px;
         float:left;
       clear: none;}   

#box6{ width:443px;
         float:left;
       clear: none;}
      
#container{
margin:0 auto;
width:887px;}

w html mam tak:

<div id="container">
<div id="box1"><img src="images/firma.png" /></div>
<div id-"box2"><img src="images/oferta.png" /></div>
<div id-"box3"><img src="images/nowosci.png" /></div>
<div id-"box4"><img src="images/klienci.png" /></div>
<div id-"box5"><img src="images/galeria.png" /></div></div>
<div id-"box6"><img src="images/kontakt.png" /></div>
</div>

[Evan]

Kod: [Zaznacz]

<div id="container">
<div id="box1"><img src="images/firma.png" /></div>
<div id-"box2"><img src="images/oferta.png" /></div>
<div id-"box3"><img src="images/nowosci.png" /></div>
</div>

<div id="container">
<div id-"box4"><img src="images/klienci.png" /></div>
<div id-"box5"><img src="images/galeria.png" /></div></div>
<div id-"box6"><img src="images/kontakt.png" /></div>
</div>
Spróbuj tak

[Aisha]

Wow, dziękuję za tak szybką odpowiedź! Dałbym "pomógł", ale chyba nie mogę?

Musisz mieć ileś tam postów (nie pamiętam teraz ile), żeby móc dawać plusy, dałam Evanowi za Ciebie

[K-Mil]

Aisha, dziękuję

Evan: próbowałem tak - niestety nic się nie zmienia. Próbowałem także do każdych 2 boxów dodawać np. container2 container3; jakoś to podzielić - cały czas 3 pierwsze boxy są tam, gdzie być powinny, a pozostałe 3 pod sobą Nie wiedziałem, że css może być tak skomplikowany. Szukam jeszcze w między czasie na internecie odpowiedzi, ale nie znalazłem jeszcze niczego podobnego

edit: udało mi się je ustawić tak, jak chcę za pomocą tego:
<div id="container">
   </div>
   <div id="box1"><img src="images/firma.png" /></div>
   </div>
   <div id="box2"><img src="images/oferta.png" /></div>
   </div>
   <div class="clear">
   </div>            
   <div id="box3"><img src="images/nowosci.png" /></div>
   </div>
   <div id="box4"><img src="images/klienci.png" /></div>
   </div>
    <div class="clear">
   </div>   
   <div id="box5"><img src="images/galeria.png" /></div>
   </div>
    <div id="box6"><img src="images/kontakt.png" /></div>
   </div>

Ale pomimo ustawienia w cssie
#container{
margin:0 auto;
width:887px;}

one wszystkie nie są wycentrowane. Bosh.. skąd Wy macie tyle cierpliwości do tego? Teraz mam kolejny problem :/

EDIT:
Udało mi się! Ale dumna mnie rozpiera Teraz muszę się nauczyć osadzać tekst w tych boxach...
Raz jeszcze dziękuję Evan za nakierowanie

[Andrew]

A ja chciałbym zakodować tak posty w WordPressie. Wie ktoś jak miałbym to zrobić?

[Viridiana]

jeśli posty będę równe na długość (czyli zamierzasz dać tylko np 5 linijek tekstu) to chyba wystarczy jak dasz float:left w cssie od ramki z postem, a jak nie to chyba musisz stworzyć grida: http://wordpress.org/support/topic/grid-of-posts/page/3 ( w sumie nie miałam okazji tego przetestować)

[Andrew]

Chciałem zrobić tylko ikonę wpisu.

P.S. Dzięki, działa