Forum portalu Fan-Strefa.pl
Dla webmastera => Kodowanie => Wątek zaczęty przez: K-Mil w 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.
(http://img809.imageshack.us/img809/539/layjw.png)
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 :(
-
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>
-
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>
-
<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
-
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 ;)
-
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 :)
-
A ja chciałbym zakodować tak posty w WordPressie. Wie ktoś jak miałbym to zrobić?
-
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ć)
-
Chciałem zrobić tylko ikonę wpisu.
P.S. Dzięki, działa :)