Telemach [ Centurion ]
Photoshop - layout strony przy pomocy CSS
Sprawa wygląda tak.
Żeby poćwiczyć - a potem użyć nabytych umiejętności - zrobiłem mały prostokąt (30 x 600 px).
Dałem tam jakieś efekty, cień itd, itp. Pociąłem to na 9 obszarów (lewy górny róg, środek góra, prawy górny róg, itd, itp).
W necie wyszperałem, że można przy pomocy ImageReady pociąć layout do CSS:
Wszystko jest prawie tak jak chcę - mam kod CSS, sam kod xhtml jest łatwy do wyczyszczenia.
Ale pojawia się problem z manipulowaniem rozmiarami - tzn.:
1. Cały obrazek z góry jest ustawiony w lewym górnym rogu
2. Nie ma możliwości dynamicznej zmiany wysokości np środkowej części obrazka
Nie wiem czy mnie rozumiecie - mam szablon newsa na stronę, toteż góra i dół obrazka nie będą się zmieniać (rozmiary), w szerokości też obrazek pozostanie bez zmian. Jedynie środek będzie się zmieniać w zależności od długości wprowadzonego tekstu - tzn. będzie się wydłużać.
Czy ktoś zna może bardziej precyzyjny sposób na przerobienie layoutu zrobionego w photoshopie do CSSa?
Czy upieranie się, by nie używać tabel jest tak naprawdę słusznym podejściem do sprawy - na czystym dokumencie zauważyłem oszczędność do 10kb ...
Bardzo proszę o pomoc, bo nie mogę sobie poradzić z przeróbką layoutu. Konwersja do html przez Photoshopa (ta standardowa) odpada, ponieważ psuje on wszystko przez te swoje twarde spacje (spacer.gif).
Telemach [ Centurion ]
^
Madril [ I Want To Believe ]
Czy upieranie się, by nie używać tabel jest tak naprawdę słusznym podejściem do sprawy - na czystym dokumencie zauważyłem oszczędność do 10kb ...
Precyzyjnego sposobu pewnie nie ma i trzeba się trochę CSS poduczyć, żeby zamierzony efekt osiągnąć, a CSS wcale nie jest trudny.
Telemach [ Centurion ]
Madril ---> czytałem to już :)
Powiedz mi tylko - wszystko brzydko mówiąc rypie mi się przez:
div.id01
position:absolute;
left:0px;
top:0px;
width:24px;
height:21px;
background:url('images/img/01.png') no-repeat;
Tutaj mam z góry określoną pozycję i rozmiar. Czy jednak jestem zdany na użycie tabeli?
Bo po prostu jak w środkowym divie wpisuję tekst, to dzieje się coś takiego jak tutaj:
(link zapożyczony :) ).
Madril [ I Want To Believe ]
Jeśli masz coś pozycjonowanego absolutnie, to jest to wyrzucane z normal flow, więc nie osiągniesz zamierzonego efektu.
Do takiego efektu, o ile dobrze pamiętam, bo pół roku nie miałem prawie styczności z CSS, trzeba pozycjonować relatywnie, a żeby mieć kilka kolumn trzeba dodać do tego efekt float. Ogólnie musisz się trochę CSS nauczyć. :D
Telemach [ Centurion ]
Dobra, doszedłem do czegoś takiego:
.row
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
width:100%;
padding: 3px;
vertical-align: top;
border:0;
.separator
width:100%;
padding: 0 0 0 0;
height:1px;
border:0;
.data
display:inline;
width:500px;
.tytul
left:300px;
width: 50%;
display:inline;
text-align:center;
.reszta
width:20%;
display:inline;
oraz:
<div class="row">
<div class="separator"></div>
<div class="data">data</div>
<div class="tytul">Tytuł</div>
<div class="reszta">XXXX</div>
</div>
Wszystko ślicznie, ale mimo że ustawiam "left:100px" to i tak divy i ich zawartość jest wyświetlana obok siebie ...