+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: problem z ramkami (/thread-problem-z-ramkami)
problem z ramkami - cayekw - 28-03-2008
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
RE: hej problem z ramkami - cayekw - 28-03-2008
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ść.
RE: hej problem z ramkami - kmd - 28-03-2008
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;
}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
RE: problem z ramkami - cayekw - 29-03-2008
Kurna pomogłeś mi ! Masz wielki + chyba mi się uda to za pomocą tabel !!!
RE: problem z ramkami - kmd - 29-03-2008
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;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
RE: problem z ramkami - cayekw - 29-03-2008
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
RE: problem z ramkami - kmd - 29-03-2008
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ę
RE: problem z ramkami - cayekw - 29-03-2008
Pomożesz mi jeszcze w jednym ? Jak wrzucić jakiś obrazek jako tło ??
RE: problem z ramkami - kmd - 29-03-2008
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;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;RE: problem z ramkami - cayekw - 29-03-2008
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ść