PENTAX@PL Strona Główna » Gdzie... » Hyde Park » dizajn bloga - html / css
 
dan  Dołączył: 11 Sie 2006
dizajn bloga - html / css
Witam,

Zaprojektowalem sobie taki dizajn bloga (klik):



Chce:

a) zdjecie na srodku strony w poziomie
b) przyciski nawigacyjne "prev/next" wyrownane do prawej krawedzi zdjecia
c) komentarze wyrownane do lewej krawedzi zdjecia

Cala trudnosc polega na tym, ze zdjecia nie maja stalej szerokosci - raz pion, raz poziom. Nie mozna wiec, z gory okreslic szerokosci pojemnika, do ktorego mialoby byc wrzucone zdjecie, nawigacja i komentarze.

Nie udalo mi sie tego sensownie obejsc. Ustawienie diva z opja float i width:auto, daje mi dopasowanie do zawartosci, ale nijak nie moge tego wysrodkowac w poziomie.

Moze olac divy i zrobic to w tabelce z jedna kolumna i trzema wierszami (zdjecie, nawigacja, komentarze)?

Czy jest na sali jakis spec od programowania html/css? :-)

Bardzo prosze o pomoc! :roll:
 

Throwend  Dołączył: 26 Kwi 2007
Nie próbowałem tego ale może text-align: center w wyższym pojemniku coś da... albo w htmlu po prostu div align="center"...
 
dan  Dołączył: 11 Sie 2006
Throwend, dzieki, sprawdze.
 

callistratis  Dołączył: 31 Sie 2007
text-align:center;

[ Dodano: 2008-09-23, 13:44 ]
acha, jest kilka metod na osiagniecie tego efektu, np. zagniezdzone divy czyli kilka mniejszych w wiekszym itp.
 

dzerry  Dołączył: 01 Maj 2006
Generalnie, zeby wysrodkowac wszystko w poziomie, musisz zastosowac jakiegos diva 'wrappera'. Zainstaluj sobie firebuga i podejrzyj sobie w innych skorkach. Wariacji na ten temat jest duzo. Generalnie chodzi o to, ze masz wrapper, a w nim kolejne divy, pozycjonowane wzglednie wobec tego wrappera, w ten sposob:

display: block;
margin-left: auto;
margin-right: auto;
position: relative;

A jesli chodzi o pion/poziom i wyrownanie do skraju zdjecia. Szerokosc sie zmienia, ale pixelspost wie jaka to jest szerokosc. Jest taki tag w pixelposcie <IMAGE_WIDTH>. Mozesz go uzyc w skorce o tak:

<div id="jakis)tam_div" style="width: <IMAGE_WIDTH>;">

Troche to nie koszerne ale dziala.

dz.
 
dan  Dołączył: 11 Sie 2006
Jedyna znana mi metoda na uzyskanie diva, ktory przybierze rozmiar zdjecia (i bedzie mozna wrzucic do niego wyrownane do prawej guziki nawigacji oraz do lewej komentarze) to wlaczenie opcji float i danie width:auto. A to powoduje wyrwanie diva z obiegu dokumentu i zadne text-align:center; nie dziala niestety :-|
 

callistratis  Dołączył: 31 Sie 2007
ja jeszcze dodam tylko ze fajnie jak nawigacja jest zawsze w tym samym miejescu, nie trzeba machac myszka przy przegladaniu zdjec o roznej wielkosci.
 
dan  Dołączył: 11 Sie 2006
dzerry, dziekuje, sprawdze to.

[ Dodano: 2008-09-23, 13:53 ]
callistratis napisał/a:
ja jeszcze dodam tylko ze fajnie jak nawigacja jest zawsze w tym samym miejescu, nie trzeba machac myszka przy przegladaniu zdjec o roznej wielkosci.

Sluszna uwaga callistratis! Przemysle to :-)
 

DDspeed  Dołączył: 03 Wrz 2007
O ile chcesz się trzymać standardów to z wyśrodkowaniem elementów będziesz miał problemy. Jak pisałem swoją stronkę (tą z muzyką, nie ze zdjęciami) to uparłem się na najnowszy i najbardziej restrykcyjny standard - XHTML 1.1. Jak się okazało, według specyfikacji jedynym sposobem na umieszczenie diva na środku jest zdanie się na przeglądarkę. Każda przeglądarka trzymająca się standardów ustawi element na środku jeśli nie ustawi się żadnego floata, a pozycję na relative. Rzecz jasna, Internet Explorer łamie tą zasadę i nie ma jak tego obejść bez łamania XHTMLa. Szukając rozwiązania w końcu się poddałem i pogodziłem się z faktem, że pod IE moja strona jest przyklejona do lewego górnego rogu zamiast być na środku. W przypadku mojego dizajnu nie był to duży problem.

Od czasu jak pisałem swoją stronę minęło jednak parę lat, w międzyczasie wyszło IE7, ale jak ostatnim razem sprawdzałem to dalej nie wyświetla strony na środku :-) .

Nie wiem dokładnie na czym polega Twój problem, dan, ale wydaje mi się że domyślna skórka pixelposta jest podobna do tego co chcesz osiągnąć. Może zajrzyj do CSSa i sprawdź jak to tam jest zrobione. Sam nie mam dostępu do IE, ale chyba wszystko jest na środku, a przy okazji zgadza się ze specyfikacją XHTML 1.0 Trans.

Nawiasem mówiąc dobre efekty w pixelpoście można osiągnąć bez nadmiernego wkładu pracy modyfikując domyślną skórkę. Np. swojego bloga tak zrobiłem i uważam, że ma on wystarczająco dużo własnego charakteru, ale może się mylę.
 
dan  Dołączył: 11 Sie 2006
DDspeed, moj skorka powstala z modyfikacji oryginalnej skorki do Pixelposta. Wlasciwie, to napisalem ja od poczatku - nie ma chyba nic, co bylo w oryginale. Kod trzymal standardy, wszystko wyswietlalo sie poprawnie pod wiekszoscia przegladarek/stystemow.

Wczoraj zapragnalem dokonac pewnych zmian. Nie jestem totalnym laikiem w temacie html/css. Zwykle wysrodkowanie diva nie jest moim problemem. Problemem jest to, co dokladnie napisalem w pierwszym poscie (czytales? :-P ). Probuje stworzyc pewien dynamiczny uklad, ktory bedzie uwzglednial zmiany rozmiaru zdjec. To nie wcale nie jest takie proste (dlaczego - pisalem wyzej).

Zobaczymy co z obejsciem, ktore dzerry zaproponowal :->
 

DDspeed  Dołączył: 03 Wrz 2007
dan, czytałem Twój post, ale nadal nie czaję... U mnie wszystko jest na środku niezależnie od orientacji zdjęcia, a mają one różne rozmiary.

Rozumiem że to wyrównianie komentarzy powoduje problem. Sam się nad tym zastanawiam... Spróbuję zaimitować opisaną sytuację to może coś wykombinuję.
 
dan  Dołączył: 11 Sie 2006
DDspeed napisał/a:
mnie wszystko jest na środku niezależnie od orientacji zdjęcia, a mają one różne rozmiary.

Chcialem zrobic diva, ktorego wielkosc jest uzalezniona od rozmiaru zdjecia. Do tego diva chcialem wrzucic nawigacje i komentarze. Poniewaz div mialby wielkosc zdjecia, zarowno nawigacja jak i komentarze zajmowalby przestrzen od prawej do lewej krawedzi diva.

Jedyny sposob, jaki znalazlem, ktory dawalby mozliwosc dostosowania diva do zawartosci to nadanie mu cechy float:left (albo right) i width:auto. To jednak powoduje wyrwanie go z obiegu dokumentu, a wiec trudnosc z wysrodkowaniem. Cala metoda jest dosc zawila i chyba ja porzuce...
 

dzerry  Dołączył: 01 Maj 2006
DDspeed napisał/a:
U mnie wszystko jest na środku niezależnie od orientacji zdjęcia, a mają one różne rozmiary.
Aleto nie wszystko. Te elementy, ktore ty masz pozycjonowane do skraju diva o ustalonej szerokosci, dan chce miec pozycjonowane do skraju obrazka.

[ Dodano: 2008-09-23, 16:29 ]
Dan, ten patent z <IMAGE_WIDTH> znalazlem w skorce delicious, ktora przerabialem dla kumpla. Moja przerobiona wersja jest tutaj: http://fotorak.eu
 
dan  Dołączył: 11 Sie 2006
dzerry napisał/a:
Dan, ten patent z <IMAGE_WIDTH> znalazlem w skorce delicious, ktora przerabialem dla kumpla. Moja przerobiona wersja jest tutaj: http://fotorak.eu

Dzieki, sprawdzam.
 

DDspeed  Dołączył: 03 Wrz 2007
Nie wiem czy jeszcze będę pomocny po tym co napisał dzerry (nie żebym wcześniej był pomocny...), ale zrobiłem BARDZO szybki mock-up, żeby łatwo sprawdzić jakie elementy CSSa mają rzeczywiście wpływ na wyśrodkowanie elementu.

Zamknąłem diva ze zdjęciem z przykładową zawartością tekstu w większym divie, który ma określoną szerokość. Jeśli w pixelpoście ustawić tam <IMAGE_WIDTH> to powinno śmigać. Na Operze i Firefoksie wystarczy właczyć text-align: center na body, margin: auto na tym ogólnym divie, ustawić mu width, a przy komentarzach i innej zawartości można właczyć float left albo right wedle uznania.

Testowane na FF3 i Operze.
 
dan  Dołączył: 11 Sie 2006
poddaje sie :cry:

Jesli ma ktos chwile czasu, to prosze o zerkniecie w kod:
http://dan.kom.pl/blog/te...tyles/clean.css
http://dan.kom.pl/blog/te...e_template.html

A taki jest efekt:
http://dan.kom.pl/blog/

...
 

DDspeed  Dołączył: 03 Wrz 2007
dan, zmień
Cytat
style="width:<IMAGE_WIDTH>"

na
Cytat
style="width:<IMAGE_WIDTH>px"
 
dan  Dołączył: 11 Sie 2006
DDspeed, bingo! Masz piwo u mnie :-D

Ok, tylko ze w tym momencie mam div wielkosci zdjecia... a ja mam jeszcze ramke wokol zdjecia :roll:

-> http://dan.kom.pl/blog/

Jakis pomysl, jak powiekszyc div o rozmiar ramki?

[ Dodano: 2008-09-23, 20:45 ]
Ok, padding-right:12px przesunal te robocza czerwona ramke, ale co oczywiste nie zwiekszyl uzytecznej przestrzeni diva. Nawigacja nie jest idealnie wyrownana do prawej krawedzi:

-> http://dan.kom.pl/blog/

Kombinuje dalej
 

DDspeed  Dołączył: 03 Wrz 2007
Bez JS albo grzebania w kodzie pixelposta raczej się nie obejdzie. Możesz pokombinować z parametrem outline, ale da to co najwyżej dobry efekt wizualny, bo również nie wpłynie na rzeczywiste rozmiary diva.
 
dan  Dołączył: 11 Sie 2006
No tak, musialbyc zmienic w kodzie, ze <IMAGE_WIDTH> to rozmiar zdjecia+12px.

Sprobuje.

Odpowiedz
[X]
Wyświetl posty z ostatnich:
Skocz do:
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Dodaj temat do Ulubionych
Wersja do druku

Powered by phpBB modified by Przemo © 2003 phpBB Group
Theme created by opiszon, powered with Bootstrap and VanillaJS.
Strona używa plików cookie. Jeśli nie zgadzasz się na to, zablokuj możliwość korzystania z cookie w swojej przeglądarce.
my.pentax.org.pl