Forum.Legalne.info: Mój pierwszy layout - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

Mój pierwszy layout napisany przez _mk nie z tego forum (chyba)

#1 Użytkownik jest niedostępny   weogrim 

  • Rozgadany
  • Grupa: Użytkownicy
  • Postów: 74
  • Dołączył: 06-February 07
  • GG: 1674730
  • MiejscowośćPrzemyśl

Napisany 01 April 2007 - 08:02 PM

Znalazłem na necie tutek który według mnie jest warty uwagi

Jednym z najważniejszych zadań projektowania wizualnego jest zaprojektowanie rozłożenia poszczególnych elementów na stronie. W tym artykule przybliżę wam nieco tworzenie layoutu o dwóch kolumnach, nagłówku i stopce.

Co chcemy osiągnąć?
Zobacz przykład.

XHTML
Zaczniemy od zapisania poprawnego kodu xhtml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mój pierwszy layout</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-2" />

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

<body>
<div id="glowny">
<div id="top"><h1>Mój pierwszy layout</h1></div>
<div id="tresc">

<p>Treść właściwa.</p>
</div>
<div id="menu">
<p>Miejsce na menu</p>
</div>

<div id="stopka"><p>Š copyright by _mk</p></div>
</div>
</body>
</html>



Ot, bardzo prosty kod xhtml. Jedyną rzeczą na jaką warto zwrócić uwagę to to, że menu występuje w strukturze dokumentu po treści, co jest bardzo ważne dla osób oglądających stronę za pomocą urządzenia nie obsługującego CSS oraz dla wyszukiwarek internetowych.

CSS
A teraz "sprawca całego zamieszania":

body {
text-align: center;
margin: 0;
padding: 0;
background: #600;
}
div#glowny {
text-align: left;
width: 570px;
margin: 0 auto;
padding: 0;
background: #FFF url('tlo.png') repeat-y;
}
div#top {
height: 80px;
background: #F90;
}
div#top h1 {
font: italic 150%/80px Verdana, Arial, sans-serif;
color: #FFF;
margin: 0 40px;
}
div#tresc {
width: 400px;
float: right;
margin: 0;
}
div#tresc * {
margin: 10px 40px;
}
div#tresc p, div#menu p {
font: 80%/1.4 Verdana, Arial, sans-serif;
margin: 10px 40px;
}
div#stopka p {
font: 70%/2 Verdana, Arial, sans-serif;
margin: 0 40px;
color: #FFF;
}
div#menu {
width: 170px;
float: left;
}
div#stopka {
height: 1.4em;
clear: both;
background: #F90;
}


Nie będziemy analizować powyższego kodu linia po linii. Opiszę tylko kluczowe miejsca.

Centrowanie strony

Zgodnie ze specyfikacją, aby wycentrować stronę musimy objąć całą zawartość jedną warstwą, nadać jej szerokość i marginesy poziome ustawione na auto. Piszemy więc w naszym kodzie:

div#glowny {
width: 570px;
margin: 0 auto;
}



Niestety Internet Explorer niewiele sobie robi ze specyfikacji i nasza strona nadal przylega do lewej krawędzi ekranu. Jedyny sposób by wyśrodkować naszą stronę w IE, to nadanie elementowi <body /> deklaracji text-align: center;. Ale jak wiemy właściwość text-align: jest dziedziczona, a my przecież nie chcemy, by cały tekst na naszej stronie był wyśrodkowany. Piszemy więc w naszym CSS:

body {
text-align: center;
}
div#glowny {
text-align: left;
width: 570px;
margin: 0 auto;
}


Menu z lewej, tekst z prawej
Chcemy, by nasze menu, które jest w strukturze dokumentu za treścią
na nasze stronie znalazło się przed nią. Jak to zrobić? Użyjmy
właściwości float:, czyli pływania. Naszej treści nadamy odpowiednią szerokość i deklarację float: right;, menu również nadamy szerokość i wszystko powinno być po naszej myśli. Niestety, niektóre wersję IE trochę dziwnie interpretują ten kod, więc nie obędzie się bez dodania właściwości float: również dla menu. Działający kod, to:

div#tresc {
width: 400px;
float: right;
}
div#menu {
width: 170px;
float: left;
}


Stopka

Jako, że zarówno menu, jak i treść mają nadaną właściwość pływania stopka na naszej stronie, może znajdować się tam, gdzie tego byśmy nie chcieli. Aby temu zaradzić musimy użyć tamowania w stopce.

div#stopka {
height: 1.4em;
clear: both;
}


Ważne jest, abyśmy nadali naszej stopce wysokość, gdyż inaczej IE może mieć problemy z wyświetlaniem strony.

Oddzielenie menu od treści

Wszystko jest dobrze, tylko jak zadeklarować tło dla menu tak, by występowało ono, aż do końca treści? Niestety tutaj jedynym rozwiązaniem jest zrobienie obrazka wyglądającego jak nasze tło i wstawienie go do warstwy obejmującej menu oraz treść. W naszym przykładzie wygląda to tak:

div#glowny {
background: #FFF url('tlo.png') repeat-y;
}


Jak to wygląda?
Zobacz przykład.

Tutorial pochodzi z serwisu WebInside
0

#2 Użytkownik jest niedostępny   ziele 

  • Pasjonata ;d
  • Grupa: Użytkownicy
  • Postów: 2678
  • Dołączył: 17-October 06
  • MiejscowośćGrójec

Napisany 01 April 2007 - 08:13 PM

Spoko tylko szkoda, że zerżnięty nawet bez linka zwrotnego... I ty chcesz za to szacunek na forum osiągnąć?
0

#3 Użytkownik jest niedostępny   weogrim 

  • Rozgadany
  • Grupa: Użytkownicy
  • Postów: 74
  • Dołączył: 06-February 07
  • GG: 1674730
  • MiejscowośćPrzemyśl

Napisany 01 April 2007 - 08:21 PM

Sorry jakoś tak nie pomyślałem o linku zwrotnym al już dodałem.

A tutka skopiowałem ponieważ według mnie jest bardzo przydatny. A jak sie podszkolę PHP to napisze samemu jakiś tutek
0

#4 Użytkownik jest niedostępny   lunsil 

  • Weteran
  • Grupa: Użytkownicy
  • Postów: 1634
  • Dołączył: 11-April 06
  • GG: 9583374
  • MiejscowośćKraków

Napisany 01 April 2007 - 08:33 PM

Może i przydatny ale skopiowany!
Crystal Templates - [+][+][+][+][-][-][-][-][-][-] 40%
0

#5 Użytkownik jest niedostępny   weogrim 

  • Rozgadany
  • Grupa: Użytkownicy
  • Postów: 74
  • Dołączył: 06-February 07
  • GG: 1674730
  • MiejscowośćPrzemyśl

Napisany 01 April 2007 - 08:36 PM

No dobra jeżeli jesteście tak temu przeciwni to możecie temat zamknąć usunąć lub coś w tym stylu. Sorry za to ze chciałem komuś pomóc
0

#6 Użytkownik jest niedostępny   Nether 

  • Newbie hehe
  • Grupa: Użytkownicy
  • Postów: 2254
  • Dołączył: 20-March 06
  • MiejscowośćSkoczów

Napisany 02 April 2007 - 10:47 AM

To nie jest czasem tut od Saddama?
Kiedyś coś tutaj się pojawi...
0

#7 Użytkownik jest niedostępny   ziele 

  • Pasjonata ;d
  • Grupa: Użytkownicy
  • Postów: 2678
  • Dołączył: 17-October 06
  • MiejscowośćGrójec

Napisany 06 April 2007 - 07:44 PM

Mi nie przeszkadza tak bardzo kopia, ale wiesz to, że zapomniałeś o linku zwrotnym może też świadczyć, że chciałeś zaszpanować wklejając tutaj jakieś fajne tutki ;)
0

#8 Użytkownik jest niedostępny   neo92 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 452
  • Dołączył: 31-March 07

Napisany 19 May 2007 - 12:06 PM

Ale już dał link zwrotny <_<

PS Dla nooba fajny toot :)
Dodaj obrazek
Dodaj obrazek
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień