Layouty

[janoz5]

Mam problem ponieważ nie umiem znaleźć dobrego kursu z którego dowiedziałbym się jak pociąc layouta i jak potem wprowadzić na niego text, czytałem ten kurshtml.boo i jeszcze pare innych o layoutach, po prostu nie umiem zastować wiedzy w praktyce, layouta umiem nawet zrobić dosyć ładnego bo pracuję już w photoshopie od ponad roku , ale jak mam go pociąć to albo się gubię, albo po pocięciu nie wiem co mam zrobić aby wprowadzić text itd.
Może wartoby było kupić jakąś książkę, czy kursy www muszą wystarczyć?

[Marcin]

Jak kurs na boo nie pomógł w czymkolwiek i nadal nie wiesz jak podejść do składania stron to nie wiem czy jakaś książką Ci pomoże. Może skup się na robieniu świetnych layoutów i kodowanie zlecaj komuś innemu.

[Taex]

Layout musisz pociąć tak, żeby mieć tylko potrzebne elementy. Potem to kodujesz np.

CSS

Kod:

#panel {    /*tutaj id diva poprzedzony #*/
    background: url(images/lay_01.png) no-repeat;   /*adres obrazka, który jest tłem na text */
    width: 200px;   /*szerokość obrazka*/
    height: 15px;   /*wysokość obrazka  - zawsze trzeba odjąć to co dałeś w padding-top i bottom*/
    text-align: center;  /*wyśrodkowanie textu*/
    padding-top: 5px;   /*odstęp między textem a górną częścią obrazka*/
    font-family: Verdana, Tahoma;    /* ustawienie czcionki */
}

I w arkuszu HTML

Kod:

<div id="panel">Nazwa panelu</div>

Pisz jakbyś jeszcze miał z czymś problem pomogę

[janoz5]

Na razie prosiłbym bez div'ów. Więc mam pytanie odnośnie textu, text piszę poprzez ustawienie obrazka jako tło <td background="obraz.jpg">
Gdy napiszę jakiś text to zaraz pojawia się 5 tabelek na obrazku, gdy przełączam na drugą tabelkę lub chcę pisać w nowej linii to strona się rozjeżdża, wiem że trzeba wtedy zmniejszać szerokość i wysokość obrazka, ale nie wiem jak to dobrze robić. Idzie to jakoś wytłumaczyć?

[Taex]

Jeśli chodzi o tabele to robisz tak jak z divami

Kod:

<td id="panel">Nazwa panelu</td>

I ustawiasz w css adres obrazka , rozmiary i to jak text ma się na nim wyświetlać

A i jeszcze jak robisz w tabeli to musisz mieć takie coś

Kod:

<table border="0" cellpadding="0" cellspacing="0">
...
</table>

PS. Podaj kod jak robisz.

[janoz5]

zamieszczam tylko kawałek:
</tr>
<tr>
<td rowspan="5">
text<td background="images/Bez-nazwy-1_05.gif" width="327" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>

Jeszcze proszę o przerobienie z tym valign ponieważ coś mi nie wychodzi ( text pisze się od połowy obrazka)

[Taex]

Czemu masz text przed <td>?
Jak bym to zrobił tak

Kod:

<tr>
<td rowspan="5">
<td class="tlo">Text</td>
<td><img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>

CSS

Kod:

.tlo {  
    background: url(images/lBez-nazwy-1_05.gif) no-repeat;  
    width: 327px;  
    height: 15px;  
    text-align: center;  
    padding-top: 5px;  
}

Jeśli obrazki nie są animowane to rób je w .png a gifów unikaj jak ognia.

Pokaż jakiegoś screena co masz źle.

PS.

Gdy napiszę jakiś text to zaraz pojawia się 5 tabelek na obrazku

hmm...

Kod:

<td rowspan="5">

PS2.

wiem że trzeba wtedy zmniejszać szerokość i wysokość obrazka, ale nie wiem jak to dobrze robić. Idzie to jakoś wytłumaczyć?

Jak twój obrazek ma width: 300px to odejmujesz od tego sumę padding-left i padding-right. Od height odejmujesz sumę padding-top i padding-bottom.

[janoz5]

Rozjeżdżanie się:

Nie wiem, może po prostu wszystko jest źle pocięte?
może wrzucę index+images

[Taex]

[janoz5]

tylko div'y chyba są trudniejsze nie? Ok. poczytam jakieś kursy itp.