GRY-Online.pl --> Archiwum Forum

Photoshop - layout strony przy pomocy CSS

18.02.2007
18:14
smile
[1]

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).

18.02.2007
18:38
[2]

Telemach [ Centurion ]

^

18.02.2007
18:40
[3]

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.

18.02.2007
18:46
[4]

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 :) ).

18.02.2007
19:00
[5]

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

18.02.2007
20:22
[6]

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 ...

© 2000-2024 GRY-OnLine S.A.