Forum portalu Fan-Strefa.pl Forum portalu Fan-Strefa.pl 

Autor Wątek: Kodowanie w CSS  (Przeczytany 3520 razy)

K-Mil

  • Nowicjusz
  • *
  • Wiadomości: 3
  • Reputacja: 0
    • Zobacz profil
Kodowanie w CSS
« dnia: 15 Luty 2013, 15:13:49 »
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

  • VIP
  • Fan Strefowicz
  • *****
  • Wiadomości: 1954
  • Reputacja: 35
    • Status GG
    • Zobacz profil
Odp: Kodowanie w CSS
« Odpowiedź #1 dnia: 15 Luty 2013, 15:23:07 »
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

  • Nowicjusz
  • *
  • Wiadomości: 3
  • Reputacja: 0
    • Zobacz profil
Odp: Kodowanie w CSS
« Odpowiedź #2 dnia: 16 Luty 2013, 15:15:01 »
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>
« Ostatnia zmiana: 16 Luty 2013, 16:06:07 wysłana przez K-Mil »

Evan

  • VIP
  • Fan Strefowicz
  • *****
  • Wiadomości: 1954
  • Reputacja: 35
    • Status GG
    • Zobacz profil
Odp: Kodowanie w CSS
« Odpowiedź #3 dnia: 16 Luty 2013, 16:49:13 »
<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

  • Fan
  • ***
  • Wiadomości: 428
  • Reputacja: 4
    • Status GG
    • Zobacz profil
    • OneDirection.pl
Odp: Kodowanie w CSS
« Odpowiedź #4 dnia: 16 Luty 2013, 16:51:30 »
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 ;)


2nd july 2014 :: 10th june 2015 :: 14th november 2015

one direction + deviantART + twitter

K-Mil

  • Nowicjusz
  • *
  • Wiadomości: 3
  • Reputacja: 0
    • Zobacz profil
Odp: Kodowanie w CSS
« Odpowiedź #5 dnia: 16 Luty 2013, 17:27:20 »
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ę! :D Ale dumna mnie rozpiera :D Teraz muszę się nauczyć osadzać tekst w tych boxach...
Raz jeszcze dziękuję Evan za nakierowanie :)
« Ostatnia zmiana: 16 Luty 2013, 18:22:10 wysłana przez K-Mil »

Andrew

  • Gość
Odp: Kodowanie w CSS
« Odpowiedź #6 dnia: 23 Sierpień 2013, 22:06:22 »
A ja chciałbym zakodować tak posty w WordPressie. Wie ktoś jak miałbym to zrobić?

Viridiana

  • Fanik
  • **
  • Wiadomości: 169
  • Reputacja: 3
    • Zobacz profil
    • mój tumblr
Odp: Kodowanie w CSS
« Odpowiedź #7 dnia: 24 Sierpień 2013, 09:10:19 »
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ć)
« Ostatnia zmiana: 24 Sierpień 2013, 09:12:34 wysłana przez Viridiana »
you smile at the hope they call despair

kiedyś sobie byłam Kalleye :P

Andrew

  • Gość
Odp: Kodowanie w CSS
« Odpowiedź #8 dnia: 24 Sierpień 2013, 12:04:08 »
Chciałem zrobić tylko ikonę wpisu.

P.S. Dzięki, działa :)
« Ostatnia zmiana: 24 Sierpień 2013, 12:11:22 wysłana przez Andrew »

Forum portalu Fan-Strefa.pl

Odp: Kodowanie w CSS
« Odpowiedź #8 dnia: 24 Sierpień 2013, 12:04:08 »