problem z ramkami

[cayekw]

Witam. Od wczoraj zajmuję się 'tworzeniem' www. Mam pewien problem. Radzę sobie już podlinkowywaniem i wgl, ale problem jest taki, że nie umiem podzielić sobie strony Chciałbym mieć ją w układzie


-------------------------------------------------------------------------
|
|
|
|
|
|
|

U góry logo strony po lewej menu a w środku treść. Możecie mi jakoś pomóc? Tylko nie podawajcie linków bo nie kumam nic z kursów HTML. Wszystko rozumiałem tylko tego jakoś nie umiem

[cayekw]

Może nie chodzi tu o ramki. Chcę poprostu zrobić sobie układ strony że na górze mam logo strony po lewej menu a w środku i po prawej treść.

[kmd]

Możesz to zrobić stylami CSS:
style.css:

Kod:

body{
margin: 0;
padding: 0;
color: #000000;
background: #000000;
text-align: center;
}
.podstawa {
width: 800px;
height: 1200px;
position: relative;
background: #FFFFFF;
}

.logo {
position: absolute;
width: 760px;
height: 70px;
top: 0px;
left: 0px;
}

.lewo {
position: absolute;
top: 165px;
left: 0px;
width: 180px;
}

.prawo {
position: absolute;
top: 165px;
left: 190px;
width: 599px;
}

A index.php/index.html:

Kod:

<div class="podstawa">
<div class="logo"></div>
<div class="lewo">menu</div>
<div class="prawo">tresc</div>
</div>

Lub za pomocą tabel:

Kod:

<table style="width: 760px;">
<tr><td>LOGO</td></tr>
<tr>
<td style="width: 150px;">menu</td>
<td style="width: 610px;">tresc</td>
</tr>
</table>

oczywiście to tak dosyć schematycznie jest. Wystaczy nadawać odpowiednie wartości w stylach lub odpowiednio ulozyc kolumny i wiersze tabel
tr - wiersz
td - kolumna

[cayekw]

Kurna pomogłeś mi ! Masz wielki + chyba mi się uda to za pomocą tabel !!!

[kmd]

Cieszę się
Oczywiście wygląd zawartości tabel można dostosować do własnych potrzeb. W powyższym przykładzie widnieje taki kod:

Kod:

style="width: 760px;

Do tego można dołożyć:

Kod:

vertical-align:top;

Co powoduje, że treść w komórce tabeli będzie rozpoczynała się od góry, a nie od środka.
Generalnie to są właśnie już zastosowania CSS, ktorych przykłady można znaleźć, niestety tylko po angielsku, na tej stronie:
http://www.w3schools.com/css/default.asp

[cayekw]

a jak połączyć triki z CSS z html-em ? Bo robię stronkę w HTML'u, ale niektóre rzeczy z CSSa by się przydały

[kmd]

Możesz tak w jak w przypadku tabel dodać kawałek style=" i tutaj style CSS" np.

Kod:

<table style="width: 724px;">
<td style="width: 70%; vertical-align:top;">

Lub inaczej, o wiele łatwiej jeśli chodzi o póxniejszą edycję/poprawę/zmianę umieszczając wszystkie style w osobnym pliku, najczęściej jest to style.css. Z tym, że wtedy na początku strony HTML w sekcji HEAD
nalezy wkleic taki kod:

Kod:

<link href="style.css" rel="stylesheet" type="text/css" media="all"/>

Plik style.css przewaznie wygląda tak jak to pokazałem w moim pierwszym poście w tym temacie. Czasami na jeden obiekt ludzie poświęcają jedną linijkę, a czasem kilka (tak jak w moim przypadku) robiąc wszystko blokowo. To już zalezy od własnego widzimisię

[cayekw]

Pomożesz mi jeszcze w jednym ? Jak wrzucić jakiś obrazek jako tło ??

[kmd]

Przy wykorzystaniu stylów, w sekcji odpowiadającej za całość strony ogólnie (czyli body) zamieszczamy adres obrazka i określamy jego powtarzalność:

Kod:

body {
margin: 0;
padding: 0;
color: #333333;
background: #FFFFFF url(grafika/tlo.jpg);
background-repeat: repeat;
text-align: center;
font-size: 13px;
letter-spacing: 1px;
}

Tutaj dla przykładu, ładujemy plik tlo.jpg z folderu grafika
Natomiast linijkę niżej określamy, że ma się powtarzać (repeat).
Wtedy ten obrazek będzie tłem dla całej strony.
Możemy background-repeat odbroinę zmienić i nadać wartość repeat-x

Kod:

background-repeat: repeat-x;

Wtedy obrazek będzie sie powtarzał wzdłuż osi X, czyli poziomo, od lewej do prawej
W przypadku zmiany na repeat-y obrazek będzie wyśweitlany tylko w pionie z gory na dół.

Można również zrobić aby tło wyświetlone zostalo raz i nie powtarzało się oraz żeby przesuwało się razem ze stroną. Efekt będzie taki, że użytkownik używając suwaka do przejścia w dół strony zobaczy, że przesuwa się strona i jej treść natomiast obrazek w tle będzie stał w miejscu.
Do tego służy:

Kod:

background-image: url('obrazek.gif');
background-repeat: no-repeat;
background-attachment: fixed;

[cayekw]

Jesteś super ! Możesz mi powiedzieć jeszcze jedno- skąd wiedzieć jaka jest szerokość strony bo chcę na góry takie logo zrobić na całą szerokość