Forum.Legalne.info: STRONA W xHTML'u - KROK PO KROKU - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
  • 3 Stron +
  • 1
  • 2
  • 3
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

STRONA W xHTML'u - KROK PO KROKU część 1 - pocięcie layoutu i napisanie styli

#1 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 15 October 2006 - 04:33 PM

28.07.2010 --- poprawiłem obrazki. Enjoy;)

Witajcie, wychodząc naprzód waszym prośbom - postanowiłem napisać tutorial o tworzeniu stron od podstaw – czyli od layout’u aż po zrobienie podstron itd.. – w pełnej specyfikacji z XHTML 1.1 oraz CSS. To co przeczytacie (mam nadzieje) poniżej stanowi tylko część 1, i dotyczy pocięcia layoutu do xHTML'a i CSS'a. Zapraszam do przeczytania !!

ZACZYNAMY – jako layout’u użyjemy prosty przykładowy design wykonany przez Jakuba:

Zobaczcie...
  • Po pierwsze musimy z istniejącego już layout’u wyciąć obrazki, w naszym wypadku wystarczą dwa.. Zastosujemy do tego celu programu ADOBE IMAGE READY… Robimy wszystko zgodnie z powstałym już tutorialem. Odcięcia zaznaczamy w taki sposób

    Dodaj obrazek

    Pamiętamy jeszcze tylko o jednym, żeby pliki graficzne zapisało nam do formatu gif (domyślnie JPG) – aby to ustawić w zakładce ZAWARTOŚĆ WWW zaznaczamy poszczególne odcięcia a w zakładce OPTYMALIZUJ – format ustawiamy na GIF a w ustawieniach bierzemy opcję pierwszą od góry…

    Dodaj obrazek

    Gdy zapiszemy już stronę jako HTML szukamy plików graficznych wytworzonych przez program… zaznaczamy te dwa Dodaj obrazek a resztę możemy usunąć – wygenerowany przez program kod HTML również… Nasze obrazki wyglądają tak:

    Dodaj obrazek Dodaj obrazek
  • Teraz musimy zająć się napisaniem szkieletu na 3-kolumny opartego na divach. Budowę czegoś takiego dokładniej opisała już Aga_kc i to z jej tutoriala tutaj skorzystamy. Oto kod - jego opis jest w linku powyżej.
    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
      <meta name="Author" content="SADDAM92" />
      <title> STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
    </head>
    <body>
        <div id="container">
             <div id="header"> </div>
             <div id="navcontainer">
                   <div id="nav1"></div>
                   <div id="nav2"></div>
            </div>
             <div id="srodek"></div>
             <div id="stopka"></div>
        </div>
    </body>
    </html>
    Gdy mamy już szkielet strony, to warto by był wrzucić na nią jakiś tekst…
    <?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head>
      <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
      <meta name="Author" content="SADDAM92" />
      <title>STRONA W XHTML'u KROK PO KROKU by SADDAM92</title>
    </head>
    <body>
        <div id="container"> 
             <div id="header"> </div>
             <div id="navcontainer">
                   <div id="nav1">
                          <a href="#" alt="link">LINKI1</a>
                          <a href="#" alt="link">LINKI1</a>
                          <a href="#" alt="link">LINKI1</a>
                   </div>
                   <div id="nav2">
                           <a href="#" alt="link">LINKI2</a>
                           <a href="#" alt="link">LINKI2</a>
                           <a href="#" alt="link">LINKI2</a>
                   </div>
            </div>
             <div id="srodek">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, </div>
             <div id="prawo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac</div>
            <div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
        </div>
    </body>
    </html>
    W sekcji navcontainer utworzyliśmy linki natomiast w sekcji srodek, prawo oraz stopka wpisaliśmy normalny tekst.
    Do tej pory uzyskaliśmy tylko coś takiego. Nie zadawala nas to – i nic w tym dziwnego.. musimy napisać style CSS.
  • W sekcje HEAD wstawiamy więc
    <link rel="stylesheet" href="style.css" type="text/css" media="all"  />
    oraz tworzymy nowy plik style.css
  • Teraz zajmiemy się nowo utworzonym plikiem..
     body {
    		background-color: #ffffff;
    		margin: 0;
    		padding: 0;
    		text-align:center;
    	}
    div {
    		position:relative;
    	}
    #container {
    		margin: 0 auto;
    		padding: 0 0;
    		position: relative;
    		width: 700px;
    		background-color: #ffffff;
    		text-align: left;
    }
    #header {
    		background: #ffffff url(l1.gif) no-repeat;
    		width: 700px;
    		height: 100px;
    }
    #navcontainer {
    		width:115px;
    		float:left;
    		background-color: transparent;
    }
    #prawo {
    		width:135px;
    		float:right;
    		text-align:left;
    }
    #srodek {
    		width: 446px;
    		float: left;
    }
    #stopka{
    		text-align: center;
    		clear:both;
    }
    Efekty możecie zastosowania kodu można zobaczyć tutaj. Nie jest to jednak zupełnie satysfakcjonujące, w następnym kroku zajmiemy się dodaniem ramek do naszego szkieletu.
  • Do kodu css dopiszemy więc:
     #header {
    		background: #ffffff url(l1.gif) no-repeat;
    		width: 700px;
    		height: 100px;
    		-> background-position: left bottom;
    		-> border-bottom: 2px solid #000;
    }
    #srodek {
    		width: 446px;
    		float: left;
    		-> border: 2px solid #000;
    		-> border-bottom: 0px;
    		-> border-top: 0px;
    } 
    Widzimy już lekkie zmiany w wyglądzie strony.
  • Pójdźmy więc dalej tym tropem i dodajmy pola pod nagłówkiem. Użyjemy do tego specjalnej klasy którą zaraz stworzymy, nazwiemy ją title i dodamy do każdej kolumny
    <div class=”title”>//nazwa kolumny np. MENU albo KONTAKT//</div>
    W tym wszystkim ważniejszy jest jednak kod CSS:
    .title {
    		height: 20px;
    		border-top: 1px solid #FF4500;
    		border-bottom: 2px solid #000;
    		text-align: center;
    		line-height: 20px;
    		font-weight: bold;
    } 
    żeby się nie rozdrabniać od razu zastosowałem formatowanie czcionki która wystąpi w naszym polu.. Oto efekty
  • Jeszcze dwie rzeczy związane z wyglądem szkieletu strony zostały nam do poprawienia, obrazek w prawej czesci nagłówka, oraz ramka przy stopce. Obrazek wstawimy za pomocą polecenia
    <img src="l2.gif" alt="by JAKUB" style="width: 65px; height: 9px; position: absolute; bottom: 3px; right: 5px;"/>
    Teraz troche wyjaśnienia, obrazek wczytujemy ze zwykłego polecenia IMG ponieważ wgranie jako tło już nie jest możliwe – mamy w tym miejscu inny obrazek. Stosujemy od razu do niego style, a w zasadzie to tylko pozycjonujemy go w odpowiednim miejscu na stronie (position: absolute; bottom: 3px; right: 5px;). Cała filozofia.. Jeszcze żeby na pewno żadna z przeglądarek nie wyświetliła nam ramki wokół grafiki, do kodu CSS dodamy
    img {border: 0px;}

    Drugi zadanie z tego punktu wymaga już troche przebudowania naszego szkieletu strony, dotychczas istniejącą stopkę
    <div id="stopka"> Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
    musimy zamienić na
    <div id="stopka_container">
                  <div id="stopka"> Š Created by Jan Kowalski. Wszelkie prawa zastrzeżone.</div>
           </div>
    zmieni się również kod CSS. Oto on:
     #stopka_container {
    		clear:both;
    		border-top: 2px solid #000;
    }
    #stopka{
    		border-left: 2px solid #000;
    		border-right: 2px solid #000;
    		width: 446px;
    		margin-left: 115px;
    		text-align: center;
    }
    Efekt pracy zobaczycie tutaj.
  • Naszym następnym zadaniem będzie pogrupowanie linków. Mamy już stworzone na początku dwa divy nav1 i nav2. I właśnie teraz one nam się przydadzą. Zauważmy, że do tej pory wszędzie nasze linki zbite są w jeden ciag wyrazów, a nie poprzenoszone do nowe linii.. Zmieńmy to za pomocą polecenia <br />
    <div id="navcontainer">
                    <div class="title">Menu</div>
                          <div id="nav1">
                           <a href="#">LINKI1</a><br />
                           <a href="#">LINKI1</a><br />
                           <a href="#">LINKI1</a>
                    </div>
                    <div class="title" style=”border-top: 0px;”>Drugie Menu</div>
                      <div id="nav2">
                           <a href="#">LINKI2</a><br />
                           <a href="#">LINKI2</a><br />
                           <a href="#">LINKI2</a>
                      </div>
           </div>
    Spostrzegawczy na pewno zauważyli ze od razu dodałem do kodu DIV o klasie TITLE jednak z dodatkowym formatowaniem za pomocą CSS, które ma za zadanie usunąć czerwoną ramkę od góry tegoż diva. Od razu zajmiemy się również jakimś sformatowaniem linków w MENU. Do kodu CSS dopiszemy
     #navcontainer {
    		width:115px;
    		float:left;
    		-> text-align: center;
    		background-color: transparent;
    }
    -> #nav1 {
    		border-bottom: 2px solid #000;
    		text-align: center;
    		padding-top: 10px;
    		padding-bottom: 10px;
    		background-color: transparent;
    }
    -> #nav2 {
    		text-align: center;
    		padding-top: 10px;
    		padding-bottom: 10px;
    }
    -> #navcontainer a{
    		text-decoration: none;
    		color: #000;
    		font-weight: bold;
    		line-height: 14px;
    		font-variant: small-caps;
    		width: 80px;
    		margin: 0 auto;
    }
    -> #navcontainer a:hover{
    	   text-decoration: underline;
    }
    Takim kodem powinniśmy już sobie poradzić z prawidłowym sformatowaniem linków.. Jednak nie był bym sobą gdybym nie dodał pewnych udziwnień, a raczej upiększeń.. Trick będzie polegał na dodaniu wybranego znaku specjalnego dla każdego linka z sekcji nav1 i innego dla linków z sekcji nav2. Tabelę znaków specjalnych możecie zobaczyć tutaj. Ja wybrałem dla sekcji nav1 coś takiego ⊗ (& #8855;, & otimes;), a dla sekcji nav2 - • (& #8226;, & bull;) Normalnie wstawienie takiego znaku nie jest trudne.. Po prostu wypisujemy którykolwiek z kodów które podałem w nawiasach, jednak my chcemy zrobić tak, aby do każdego linku znak dodawał się automatycznie. Zastosujemy do tego pseudoelement :before. Pozostaje jeszcze jedna rzecz - kod CSS nie akceptuje numeru znaku w formie dziesiętnej (np. & #8855;), wyławiamy wiec numery czyli np. 8855 i 8226, a następnie za pomocą dowolnego kalkulatora zamieniamy je na format szesnastkowy. W moim przypadku będzie to odpowiednio: 2297 i 2022. A oto kod CSS który skonstruowaliśmy:
     #nav1 a:before {
    		content: "\2297  ";
    }
    #nav2 a:before {
    		content: "\2022  ";
    }
    Myślę że podoba sie wam ten efekt..
  • Przejdźmy więc dalej, myślę że teraz moglibyśmy skupić się na formatowaniu tekstu i odsunięciu go trochę od ramek. Pierwszą rzeczą którą dopiszemy do naszego kodu CSS będzie wybór czcionki i jej rozmiaru, zastosujemy ją do całego dokument, więc dopiszmy styl dla body:
     body {
    		background-color: #ffffff;
    		margin: 0;
    		padding: 0;
    		text-align: center;
    		-> font-family: Verdana;
    		-> font-size:11px;
    }
    Następną rzeczą jaką zrobimy to dla treści w divach SRODEK i PRAWO damy odpowiednią DIV-CLASS’ę, podzielimy sobie zawartość ze SRODKA na akapity (<p>..</p>), a zawartość KONTAKTU zmienimy na bardziej podobną do oczekiwanej w przyszłości.. oto kod po zmianach – mam nadzieje ze rozumiecie:
    <div id="srodek">
                      <div class="title"></div>
                           <div class="tresc"><p>dolor sit amet, consectetuer adipi <a href="#">Lorem ipsum</a> scing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum.</p><p> Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac, luctus sit amet, nonummy sit amet, velit. In posuere. Aenean molestie purus vel massa. Vestibulum risus tellus, tempus ac, consequat et, mattis in, lectus. Vivamus malesuada hendrerit ipsum. Nam at dui eu lectus sollicitudin elementum. Nam egestas pede gravida diam. Ut sagittis dolor in tortor. Mauris euismod dictum massa. Nulla facilisi. Mauris magna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec velit id lacus pharetra interdum. In massa tellus, ultrices ac,</p> </div>
           </div>
             <div id="prawo">
                     <div class="title">Kontakt</div>
                           <div class="tresc">GG: <a href="gg:3442356">3442356</a><br />
                           E-Mail: <a href="mailto:a@a.pl">a[at]a.pl</a>
                           </div>
           </div>
    Teraz napiszemy do tego kod CSS, na początku zajmiemy się nowo utworzoną klasą .tresc która odpowiadała będzie u nas między innymi za odsunięcie treści od ramek. CSS:
     .tresc {
    	   padding: 5px;
    } 
    Dotychczas osiągnięty wynik, już jest całkiem całkiem, jednak proponuję dodanie kilku rzeczy.
  • Po pierwsze, mamy niesformatowane linki w divach SRODEK, STOPKA i PRAWO, myślę ze możemy się tym zająć, dla linków w divie SRODEK i STOPKA damy kolor z podkreśleniem jako przerywana linia, zmieniający się przy najechaniu na niego. Natomiast dla diva PRAWO zrobimy to samo tylko bez podkreślenia.
     #srodek, #stopka .tresc a{
    		text-decoration:none;
    		border-bottom: 1px dashed #880000;
    		color:#880000
    }
    #srodek, #stopka .tresc a:hover {
    		text-decoration:none;
    		color: #fb5107;
    }
    #prawo .tresc a{
    		text-decoration:none;
    		color:#880000;
    }
    #prawo .tresc a:hover {
    		text-decoration:none;
    		color: #fb5107;
    }
    Jak pewnie zauważyliście, mimo ze pisalem ze zastosujemy podkreślenie, to nigdzie nie ma text-decoration:underline; – przecież chcieliśmy osiągnąć przerywaną linię jako podkreślenie, a pogrubiony przed chwilą fragment kodu tworzy ciągłą linie – i właśnie dlatego zastosowałem atrybut border, resztę mam nadzieje że rozumiecie – efekt.
  • Na koniec zostało nam już tylko upiększyć akapity tekstu. Zastosujemy do tego pseudoelement :first-letter – pierwszą literę akapitu powiększymy i zmienimy jej kolor na czerwony.
     .tresc p:first-letter {background-color: transparent;color: red; font-size: 250%; float:left; }

  • Na absolutny już koniec dodamy tylko zabezpieczenie kolumny PRAWO przed „wylaniem” się z niej tekstu, jako że na Mozilli dodanie margin-right zepsuje nam kompozycje strony, zastosujemy pewien TRICK i damy styl TYLKO dla IE, oto kod:
     /* hack dla internet explorera */
    /*\*/
    * html div#prawo {
    margin-right: 2px;
    }
    /**/
I takim sposobem doszliśmy do końca części pierwszej. Starałem się wam wyjaśnić wszystko w jak najbardziej przystępny sposób, jednak nie mogłem opisac działania każdego atrybutu styli CSS – jeśli będziecie mieć z nimi problem to poszperajcie TUTAJ lub piszcie na forum. Mam nadzieje że spodobał wam się mój artykuł, pamiętajcie jednak że nie musicie się go ściśle trzymać – ja na tej jakże prostej stronie chciałem pokazać wam jak najwięcej możliwości CSS’a. Efektem jest to że jeśli napisałeś wszystko zgodnie z tutorialem to strona będzie zgodna ze specyfikacją 1.1 oraz CSS 2.0strona

Pozdrawiam wszystkich i życzę owocnej pracy :D

Edit #1 --- Na zakończenie tutoriala tego, chciałbym polecić jeszcze jednen link:
http://forumweb.e-vi...pic.php?t=15012
gdyby ktoś miał problemy z dopasowaniem rozciągalnej długości diva..

Michał Adamczyk dla Webtips.pl
Š Wszelkie prawa zastrzeżone. Kopiowanie i rozpowszechnianie bez zgody autora zabronione.

1

#2 Użytkownik jest niedostępny   meverone 

  • Ekspert
  • Grupa: Użytkownicy
  • Postów: 561
  • Dołączył: 02-May 06

Napisany 15 October 2006 - 04:43 PM

No ladnie ladnie jak bede mial tylko czas to przeczytam do konca :)
0

#3 Użytkownik jest niedostępny   Roberto 

  • You have to trust in something.
  • Grupa: Użytkownicy
  • Postów: 1375
  • Dołączył: 22-February 06
  • MiejscowośćKatowice

Napisany 15 October 2006 - 04:51 PM

Wypas, Wypas, Wypas i jeszcze raz Wypas na to czekałem! Teraz to nieproblem będzie ułożenie laya w Divy :D
Podziękowania dla Saddama92!!!!!!
...
0

#4 Użytkownik jest niedostępny   Nether 

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

Napisany 15 October 2006 - 04:51 PM

Super zaraz zrobie strone to pokaze jak mi wyszła:)
10/10 THX
Kiedyś coś tutaj się pojawi...
0

#5 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-June 06
  • MiejscowośćMichałowice

Napisany 15 October 2006 - 04:58 PM

Super tutek Saddam Nigdy sie tym nie interesowałem ale kiedys
musiałes zaczac. Napweno sie sprzyda a jak znajde czas to na 100%
spróbuje cos zrobić :)

10/10
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

#6 Użytkownik jest niedostępny   hultaj 

  • hulcior
  • Grupa: Użytkownicy
  • Postów: 3328
  • Dołączył: 28-April 06
  • GG: 2372800

Napisany 15 October 2006 - 05:25 PM

Boskość w całej swej okazałości. Perfekcja. Dzięki. :)
0

#7 Użytkownik jest niedostępny   eraevion 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1439
  • Dołączył: 13-July 06
  • GG: 2476024
  • MiejscowośćLubichowo

Napisany 15 October 2006 - 06:29 PM

SUPER!
Wielkie dzięki Saddam za ten tut!
Jak będę miał więcej czasu, to go dokładniej przeanalizuję.
Brawo ;)
0

#8 Użytkownik jest niedostępny   musk 

  • random user | ID = user306
  • Grupa: Użytkownicy
  • Postów: 984
  • Dołączył: 22-February 06
  • GG: 2766799
  • MiejscowośćŁęki k/Oświęcimia

Napisany 15 October 2006 - 06:45 PM

Huuu... Rewelacja Saddam! Brak mi słów, żeby coś napisać :D.
"Kiedy trzymasz gorącą patelnię - sekunda jest godziną, lecz gdy trzymasz gorącą dziewczynę - godzina jest sekundą."
0

#9 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 16 October 2006 - 04:31 PM

o czym chcielibyście mieć następne części tutoriala?
wszystko rozumiecie ??
0

#10 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-June 06
  • MiejscowośćMichałowice

Napisany 16 October 2006 - 04:33 PM

ja wszystko rozumiem ale mi nie wychodzi zbytnio. A jak zrobić tak zeby:

- mam swój szablon jest cały w grafice załózmy tu to tu to no i po pocieciu
mam te wszystkie obrazki i inne taki tam. jak sobie z tym poradzić bo
nie wiem za co mam sie zabrac ...
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

#11 Użytkownik jest niedostępny   eraevion 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1439
  • Dołączył: 13-July 06
  • GG: 2476024
  • MiejscowośćLubichowo

Napisany 16 October 2006 - 04:38 PM

Przydałoby się teraz coś o dostosowaniu strony do IE...
Toż to nawet text-align nie interpretuje dobrze <_<
0

#12 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 16 October 2006 - 06:16 PM

@Jakub - strona zrobiona wg tego artykułu wyświetla się prawidłowo wszędzie - ale pomysle nad tym.
@Kamil_ - nie rozumiem cię.. generalnie po pocięciu szablonu zabierasz sie za stworzenie szkieletu strony.
0

#13 Użytkownik jest niedostępny   dexter007 

  • atmosphere-studio.com
  • Grupa: Użytkownicy
  • Postów: 3677
  • Dołączył: 11-February 06
  • GG: 7075403

Napisany 17 October 2006 - 07:55 PM

Sorry, że spóźnione, ale lepiej późno niż wcale.

SUPER TUT.
Przyznam, że miałem problemy z tworzeniem na divach.
Za takie coś to powinienem ci wycałować stopy i zrobiłbym to gdyby nie to, że przez neta się nie da :P.

1768/10 jak dla mnie
a obiektywnie -10/10.
Atmosphere-studio.com:
Oferujemy wykonanie:
  • stron internetowych (w całości lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac związanych z podobną tematyką.


Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay
0

#14 Użytkownik jest niedostępny   osablood - osa 

  • Rozgadany
  • Grupa: Użytkownicy
  • Postów: 50
  • Dołączył: 20-October 06

Napisany 20 October 2006 - 09:44 PM

zrobiłem strone dzięki temu tutorialowi ,ale strona za bardzo się rozciąga w IE, w Mozilli ma dobre wymiary ,a w IE jest bardziej rozciągnięta. Jak naprawić ten błąd? Jakiś hack?

P.S. Jak zrobić żeby te kreski w środku były stałe, tzn. żeby się nie zmniejszały?
0

#15 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 22 October 2006 - 04:04 PM

pokaż strone...
@ P.S - o które kreski ci chodzi..;

edit:
To co napisałem ci na gg a propos twojej strony ( http://www.o-ekologii.yoyo.pl/ )
Jeśli chodzi o te kreski to niedługo pokażę tutorial..
a jeśli chodzi o rozjeżdżanie sie strony - nie patrzyłem w kod, ale z tego co widzę to wina leży po stronie IE, który poporstu inaczej interpretuje kod i przez to strona rozjeżdża się w dół - chyba ze nie o to ci chodziło..
0

#16 Użytkownik jest niedostępny   Nex12 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 290
  • Dołączył: 07-June 06

Napisany 24 October 2006 - 12:23 PM

Brak mi slow!!!
Saddam, kiedy planujesz 2 czesc?
0

#17 Użytkownik jest niedostępny   amigen 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 29
  • Dołączył: 02-October 06
  • GG: 9441410

Napisany 22 November 2006 - 09:19 AM

Saddam a kiedy bedzie czesc druga? iwogole to jak ja uzywam twojego tutoriala to mam zuplenie inny efetkt
mozesz jeszcze dodac wyglad koncowy tego arkusza css bo juz mnie krew zalewa i nie moge tego w calosc poskladac :angry:
Jak napisać własny CMS? Napisz wlasny CMS! :)
Proste krótkie i logiczne :D
WOW za darmo
0

#18 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 24 November 2006 - 11:24 AM

a to tak trudno zobaczyc w necie: style.css

część druga pojawi się nieoczekiwanie... sam jeszcze nie wiem kiedy bede miał troszke wiecej czasu.. mozliwe ze dopiero podczas przerwy świątecznej..

na zakończenie tutoriala tego, chciałbym polecić jeszcze jedną rzecz:
http://forumweb.e-vi...pic.php?t=15012

gdyby ktoś miał problemy z dopasowaniem rozciągalnej długości diva..
0

#19 Użytkownik jest niedostępny   amigen 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 29
  • Dołączył: 02-October 06
  • GG: 9441410

Napisany 26 November 2006 - 01:18 PM

Aha dzieki i sry za glopi post.

Pozdro!
Jak napisać własny CMS? Napisz wlasny CMS! :)
Proste krótkie i logiczne :D
WOW za darmo
0

#20 Użytkownik jest niedostępny   piotrex1995 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 250
  • Dołączył: 23-October 06
  • GG: 5211375

Napisany 26 November 2006 - 01:32 PM

Nie mam programu Adobe image ready... :(
Moje produkty w PHP:
Free chat 0.1 - ||||||||||||||||||||
0

Prześlij ten temat:


  • 3 Stron +
  • 1
  • 2
  • 3
  • 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ń