Agressiva Blog » xHTML / CSS http://agressiva.poprostuja.pl Fri, 10 Sep 2010 09:50:44 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Przydatne strony dla projektantów stron www http://agressiva.poprostuja.pl/2009/11/12/przydatne-strony-dla-projektantow-stron-www/ http://agressiva.poprostuja.pl/2009/11/12/przydatne-strony-dla-projektantow-stron-www/#comments Thu, 12 Nov 2009 09:39:13 +0000 Agressiva http://agressiva.poprostuja.pl/?p=680 Od jakiegoś czasu korzystam z serwisu DesignBump, który pod wieloma względami przypomina nasz polski Wykop lub Digg.com, ale dotyczy jedynie udostępnianych artykułów związanych z projektowania stron www, grafiki, programowania, itp.

designbump.com
Inspiracje, darmowe materiały, grafika, webdesign

Dzięki tej stronie wyłowiłam kilka bardzo przydatnych stron z materiałami graficznymi, darmowymi paczkami, inspiracjami…

webdesignerdepot.com
Inspiracje, darmowe materiały, grafika, webdesign

djdesignerlab.com
Inspiracje, darmowe materiały, grafika, webdesign

inspectelement.com
Inspiracje, darmowe materiały, grafika, webdesign

smashingbuzz.com
Inspiracje, darmowe materiały, grafika, webdesign

inspiredm.com
Inspiracje, darmowe materiały, grafika, webdesign

smashingmagazine.com
Inspiracje, darmowe materiały, grafika, webdesign

uxbooth.com
Inspiracje, darmowe materiały, grafika, webdesign

d-lists.co.uk
Inspiracje, darmowe materiały, grafika, webdesign

myinkblog.com
Inspiracje, darmowe materiały, grafika, webdesign

designer-daily.com
Inspiracje, darmowe materiały, grafika, webdesign

pelfusion.com
Inspiracje, darmowe materiały, grafika, webdesign

thedesigncubicle.com
Inspiracje, darmowe materiały, grafika, webdesign

designm.ag
Inspiracje, darmowe materiały, grafika, webdesign

threestyles.com
Inspiracje, darmowe materiały, grafika, webdesign

mediamilitia.com
Inspiracje, darmowe materiały, grafika, webdesign

vandelaydesign.com/blog/
Inspiracje, darmowe materiały, grafika, webdesign

grafpedia.com
Inspiracje, darmowe materiały, grafika, webdesign

designinformer.com
Inspiracje, darmowe materiały, grafika, webdesign

instantshift.com
Inspiracje, darmowe materiały, grafika, webdesign

spyrestudios.com
Inspiracje, darmowe materiały, grafika, webdesign

]]> http://agressiva.poprostuja.pl/2009/11/12/przydatne-strony-dla-projektantow-stron-www/feed/ 0 Darmowe szablony www (xhtml/css) http://agressiva.poprostuja.pl/2009/07/10/darmowe-szablony-www-xhtmlcss/ http://agressiva.poprostuja.pl/2009/07/10/darmowe-szablony-www-xhtmlcss/#comments Fri, 10 Jul 2009 09:24:00 +0000 Agressiva http://agressiva.poprostuja.pl/?p=407 Tym razem moje polowania skupione były na darmowych zakodowanych szablonach www.
W tym zbiorze znajdziecie proste szablony typograficzne oraz bardziej rozbudowane – graficzne. Mam nadzieję, że przydadzą się one wszystkim tym osobom, które mają zamiar rozwinąć swoje umiejętności w dziedzinie projektowania stron www.

Szablony graficzne

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

Szablony typograficzne

01
demopobierz

02
demopobierz

03
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

04
demopobierz

Te i inne szablony typograficzne znajdziecie między innymi na Smashing Magazine

]]> http://agressiva.poprostuja.pl/2009/07/10/darmowe-szablony-www-xhtmlcss/feed/ 0 Menu akordeonowe z odrobiną CSS3 http://agressiva.poprostuja.pl/2009/07/06/menu-akordeonowe-z-odrobina-css3/ http://agressiva.poprostuja.pl/2009/07/06/menu-akordeonowe-z-odrobina-css3/#comments Mon, 06 Jul 2009 20:30:31 +0000 Agressiva http://agressiva.poprostuja.pl/?p=355 W tym artykule dowiecie się w jaki sposób stworzyć menu akordeonowe, które funkcjonuje m.in. na stronie www.apple.com. Na tej samej zasadzie działa również moje portfolio, gdzie każda zakładka działa jak osobny dział na stronie (www.waterdesign.pl).

demo

Krok 1 – Struktura html naszej rozwijanej listy

Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.

Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:

  1.  
  2. <ul>
  3.  
  4. <li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
  5. <ul class="fade">
  6. <li>
  7. <div class="text">
  8. <ul>
  9. <li><a href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>
  10.  <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>
  11.  <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
  12. </ul>  
  13. </div>
  14. </li>   
  15. </ul>
  16. </li>
  17.  
  18. </ul>
  19.  

Wygląd:

Full of colours

Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.

Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:

  1.  
  2. <div id="page">
  3. <ul>
  4.                 <li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
  5.                 <ul class="fade">
  6.                 <li>
  7.                         <div class="text">
  8.         <ul>
  9.           <li><a href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>
  10.           <li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>
  11.           <li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
  12.         </ul>  
  13.                         </div>
  14.                 </li>   
  15.                 </ul>
  16.                 </li>
  17.                
  18.                 <li class="kategoria"><div class="naglowek"><a class="link facebook" href="#">Facebook</a></div>
  19.                 <ul class="fade">
  20.                 <li>
  21.                         <div class="text">
  22.         <ul>
  23.           <li><a href="http://www.facebook.com/">Facebook – Main Page</a></li>
  24.           <li><a href="http://www.facebook.com/">Facebook – Rejestracja</a></li>
  25.           <li><a href="http://www.facebook.com/pages/create.php">Facebook – Stwórz swoją stronę</a></li>
  26.         </ul>  
  27.                         </div>
  28.                 </li>   
  29.                 </ul>
  30.                 </li>
  31.                
  32.                 <li class="kategoria"><div class="naglowek"><a class="link technorati" href="#">Technorati</a></div>
  33.                 <ul class="fade">
  34.                 <li>
  35.                         <div class="text">
  36.         <ul>
  37.           <li><a href="http://technorati.com/">Technorati – Main Page</a></li>
  38.           <li><a href="http://technorati.com/technology/">Technorati – Technology</a></li>
  39.           <li><a href="http://technorati.com/technology/it/">Technorati – IT</a></li>
  40.         </ul>                              
  41.                         </div>
  42.                 </li>          
  43.                 </ul>
  44.                 </li>
  45.                
  46.                 <li class="kategoria"><div class="naglowek"><a class="link twitter" href="#">Twitter</a></div>
  47.                 <ul class="fade">
  48.                 <li>
  49.                         <div class="text">
  50.         <ul>
  51.           <li><a href="http://twitter.com/">Twitter – Main Page</a></li>
  52.           <li><a href="https://twitter.com/signup">Twitter – Join</a></li>
  53.           <li><a href="https://twitter.com/viveeinfo">Vivee na Twitterze</a></li>
  54.         </ul>              
  55.                         </div>
  56.                 </li>   
  57.                 </ul>
  58.                 </li>
  59.                
  60.                 <li class="kategoria"><div class="naglowek"><a class="link vimeo" href="#">Vimeo</a></div>
  61.                 <ul class="fade">
  62.                 <li>
  63.                         <div class="text">
  64.         <ul>
  65.           <li><a href="http://vimeo.com/">Vimeo – Main Page</a></li>
  66.           <li><a href="http://vimeo.com/join">Vimeo – Join</a></li>
  67.           <li><a href="http://vimeo.com/upload/video">Vimeo – Upload</a></li>
  68.         </ul>  
  69.                         </div>
  70.                 </li>   
  71.                 </ul>
  72.                 </li>          
  73.  
  74. </ul>
  75. </div>
  76.  

Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).

Upiększanie menu, czyli struktura CSS

Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.

  1.  
  2. * {
  3.         padding:0;
  4.         margin:0;
  5.         }
  6.        
  7. img {
  8.         border:0;
  9.         }
  10.        
  11. body {
  12.         background:#f4f3ef;
  13.         text-align:center;
  14.         }
  15.        
  16. #page {
  17.         width:800px;
  18.         text-align:left;
  19.         margin:0 auto;
  20.         }       
  21.        
  22. #page ul {
  23.         list-style-type:none;
  24.         width:100%;
  25.         padding:20px 0 0 0;
  26.         }
  27.        
  28. ul ul {
  29.         background:url(img/tlo.png);
  30.         padding:0!important;
  31.         }
  32.        
  33. li {
  34.         font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
  35.         word-spacing:3px;
  36.         vertical-align:middle;
  37.         }
  38.        
  39. div.text {
  40.         width:780px;
  41.         padding:10px;
  42.         line-height:20px;
  43.         text-align:justify;
  44.         font:11px Tahoma, Arial, Helvetica, sans-serif;
  45.         letter-spacing:1px;
  46.         color:#7a7a7a;
  47.         background:url(text.png) repeat-x top;
  48.         -moz-border-radius: 5px;
  49.         -webkit-border-radius: 5px;     
  50.         border-radius: 5px;            
  51.         }       
  52.        
  53. div.text p {
  54.         margin:0 0 10px 0;
  55. }       
  56.  
  57. div.text ul {
  58.         list-style-type:none;
  59. }
  60.  
  61. div.text ul li {
  62.         font:12px Helvetica, Tahoma, Arial, Geneva, sans-serif!important;
  63.         margin:2px 0!important;
  64. }
  65.  
  66. div.text ul li a {
  67.         color:#585858;
  68.         font-weight:bold;
  69.         text-decoration:none;
  70. }
  71.  
  72. div.text ul li a:hover {
  73.         color:#08a2b9;
  74. }
  75.        
  76. .kategoria a.link {
  77.         display:block;
  78.         width:780px;
  79.         padding:22px 0 5px 20px;
  80.         font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
  81.         font-weight:bold;
  82.         color:#fafafa;
  83.         text-decoration:none;   
  84.         margin:0 0 2px 0;
  85.         -moz-border-radius: 5px;
  86.         -webkit-border-radius: 5px;     
  87.         border-radius: 5px;     
  88.         height:47px;
  89.         text-shadow: 1px 1px 1px #5d5d5d;
  90. }       
  91.        
  92. .kategoria a.link:hover {
  93.         color:#ffffff;
  94.         text-decoration:none;
  95.         }       
  96.  

Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.

Odrobina CSS3

CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:

  • Firefox (od wersji 3 w górę)
  • Google Chrome
  • Safari
  • Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)

W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem

  1.  
  2.         text-shadow: 1px 1px 1px #5d5d5d;       
  3.  

2. Zaokrąglone rogi

  1.  
  2.         -moz-border-radius: 5px;
  3.         -webkit-border-radius: 5px;     
  4.         border-radius: 5px;     
  5.  

Full of colours

Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo

jQuery

Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.

  1. <script type="text/javascript" src="js/menu.js"></script>

Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:

  1.  
  2.  $(document).ready(function() {
  3.         $("ul.fade").not(":first").hide();
  4.         $("a.link").click(function(){
  5.                         $(".fade:visible").hide();
  6.                         $(this).parent().next(‘.fade’).fadeIn();
  7.                         return false;
  8.         });
  9.  });
  10.  

gdzie:

  1. $("ul.fade).not(":first").hide();

Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.

  1. $(".fade:visible").hide();

Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.

Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.

  1. $(this).parent().next(‘.fade’).fadeIn();

Więcej o fade’ach przeczytać możecie w artykule: “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”.

Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js’a

  1. $("a.link").click(function(){

podmienić click na hover:

  1. $("a.link").hover(function(){

Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.

Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.

  1.  
  2. $(".kategoria a.link").fadeTo("fast", .8);                                     
  3. $(".kategoria a.link").hover(function(){
  4.         $(this).fadeTo("fast", 1);
  5.         },function(){
  6.         $(this).fadeTo("fast", .8);
  7. });     
  8.  

Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:

  1.  
  2.  $(document).ready(function() {
  3.         $("ul.fade").not(":first").hide();
  4.         $("a.link").click(function(){
  5.                         $(".fade:visible").hide();
  6.                         $(this).parent().next(‘.fade’).fadeIn();
  7.                         return false;
  8.         });
  9.  
  10. $(".kategoria a.link").fadeTo("fast", .8);                                     
  11. $(".kategoria a.link").hover(function(){
  12.         $(this).fadeTo("fast", 1);
  13.         },function(){
  14.         $(this).fadeTo("fast", .8);
  15. });
  16.  
  17. });
  18.  

W taki sposób przestawia się tworzenie akoreonowego menu,
mam nadzieje, że artykuł ten okaże się dla Was pomocny.

Artykuł stworzony dla serwisu Vivee.info

]]> http://agressiva.poprostuja.pl/2009/07/06/menu-akordeonowe-z-odrobina-css3/feed/ 0 Jak stworzyć stronę za pomocą xhtml oraz css http://agressiva.poprostuja.pl/2008/10/21/jak-stworzyc-strone-za-pomoca-xhtml-oraz-css/ http://agressiva.poprostuja.pl/2008/10/21/jak-stworzyc-strone-za-pomoca-xhtml-oraz-css/#comments Tue, 21 Oct 2008 11:37:28 +0000 Agressiva http://agressiva.poprostuja.pl/?p=30 Ten tutorial został napisany w celach edukacyjnych, dla osób, które rozpoczynają zabawe z XHTML + CSS. Dowiecie się z niego jak stworzyć stonę taką jak Sunny Design

Jak wygląda kod XHTML dla tej strony?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <div id="container">
  11.         <div id="header"></div>
  12.  
  13.                 <div id="lewo">
  14.                         <div id="menu">
  15.                                                 <div class="menu"></div>
  16.                                         <ul id="mainmenu">
  17.                                         <li class="home"><a href="#">home</a></li>
  18.                                         <li class="ofirmie"><a href="#">o firmie</a></li>
  19.                                         <li class="portfolio"><a href="#">portfolio</a></li>
  20.                                         <li class="oferta"><a href="#">oferta</a></li>
  21.                                         <li class="news"><a href="#">news</a></li>
  22.                                         <li class="kontakt"><a href="#">kontakt</a></li>
  23.                                         </ul>
  24.                         </div>
  25.                         <div id="ramka">
  26.                                 <div class="zaufali"></div>
  27.                                         <ul id="navlist">
  28.                                         <li id="active"><a href="#" id="current">Schering Polska</a></li>
  29.                                         <li><a href="#">Schering Polska</a></li>
  30.                                         <li><a href="#">Schering Polska</a></li>
  31.                                         <li><a href="#">Schering Polska</a></li>
  32.                                         <li><a href="#">Schering Polska</a></li>
  33.                                         </ul>
  34.                                         <div class="more"><a href="#">zobacz wiecej >></a></div>
  35.                         </div>
  36.                 </div>
  37.  
  38.         <div id="prawo">
  39.                 <div id="gora">
  40.                 </div>
  41.  
  42.                         <div id="dol">
  43.                         <div class="gradient"></div>
  44.                                 <div class="ostatnie"></div>
  45.                                 <div class="obrazek"><img src="images/palma.jpg" alt="palma"/></div>
  46.                                         <div class="opis">
  47.                                                 <h1 class="naglowek">Palms Design</h1>
  48.                                         Nunc sed erat eu massa lobortis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor. Ut dictum aliquet neque. Vestibulum scelerisque mattis dui. Suspendisse tempor pharetra lorem. Nullam varius tortor quis nibh. Vivamus quis dui scelerisque leo dapibus varius. Nulla justo enim, vulputate at, semper vitae, ultricies ac, est. Nullam tincidunt eros quis diam.
  49.                                         <div class="ostatnie_more"><a href="#">czytaj wiecej >></a></div>
  50.                                         </div>
  51.                         </div>
  52.         </div>
  53.  
  54.  
  55.         <div id="footer">
  56.                 <div class="footer">Page created by Water Design &#169; all rights reserved</div>
  57.         </div>
  58.  
  59. </div>
  60.  
  61. </body>
  62. </html>

Co do czego służy?

<div id="container">
Jest to div, w którym znajduje się cała zawartość strony – taki div musi być, ale nazwać go można dowolnie – podobnie jak wszystkie inne divy, spany, h1, h2 etc.

<div id="header">
Za pomocą tego diva tworzymy nagłówek strony.

<div id="lewo"> i <div id="prawo">
Te dwa divy dzielą stronę na dwie kolumny – lewą i prawą.

<div id="menu">
W tym divie znajduje się menu, które oparte jest na liście.

<div id="ramka">
W tym divie znajdują się linki z działu “zaufali nam”.

<div id="gora">
Ten div jest w kodzie pusty, ponieważ za pomocą wybranego skryptu nawigacyjnego będzie się w nim pojawiała zawartość podstron widocznych w menu.

<div id="dol">
Jest to ta część strony umieszczona pod divem o klasie gora. Zawartość jej jest sztywna i znajduje się w głównym kodzie strony (index.html).

<div class="gradient">
Ten div mimo, że wydaje się pusty to za pomocą stylu CSS zawiera w sobie tło – linie odzielającą divy:
<div id="gora"> i <div id="dol">

<div id="footer">
W tym dive znajduję się stopka strony – tło oraz tekst.

Styl CSS

Na początek powinniśmy w stylu wyzerować wszystkie marginesy wewnętrzne (paddingi) oraz marginesy zewnętrzne (marginy), aby dla wszystkich przegladarek nasze późniejsze wartości były takie same:

  1. * {
  2.         padding:0;
  3.         margin:0;
  4. }

To samo musimy zrobić dla obrazków, aby nie mialy obramowania nadanego automatycznie przez przegladarki (Firefox i IE)

  1. img {
  2.         border:0;
  3. }

W body musimy nadać następujący styl

  1. body {
  2.         text-align:center;
  3.         background:url(images/pasek.jpg) repeat-x #FFF;
  4. }

Dzięki text-align:center; nasza strona będzie wyśrodkowana w przegladarce IE 5.
A dzięki background nadajemy tło – w tym przypadku w body widzimy szary i niebieski pasek (http://sunnydesign.glt.pl/images/pasek.jpg), który powtarza się w linii poziomej.
Aby wyśrodkować stronę w pozostałych przegladarkach, nalezy dodać margin:0 auto

  1. #container {
  2.         width:764px;
  3.         margin:0 auto;
  4.         text-align:left;
  5.         background:url(images/tlo.jpg) repeat-y;
  6.         font:11px Tahoma, Arial, Helvetica, sans-serif;
  7. }

0 oznacza że margin z góry i z dołu ma 0px a auto, że prawy i lewy margin są dostosowywane automatycznie, są takie same po obydwu stronach.

text-align:left; – powoduje tutaj, że tekst w zawarttości wyrównany jest do lewej strony.
Aby zdefiniować rodzaje użytych czcionek i wielkość używamy na przykład takiego skrótu: font:11px Tahoma, Arial, Helvetica, sans-serif;
Jeżeli chcemy nadać divowi o identyfikatorze header tło musi napisać:

  1. #header {
  2.         background:url(images/head.jpg) no-repeat;
  3.         width:764px;
  4.         height:195px;
  5. }

W taki sytuacjach koniecznie należy podać wysokość (height) i szerokość (width) obrazka, którego chcemy użyć w tle. No-repeat za lokalizacją obrazka oznacza, że tło to nie może się powtrzać ani w pionie ani w poziomie.

Teraz przechodzimy do stylizowania kolejnych dwóch ważnych divów, w których zamieszczać będziemy zawartość strony <div id="lewo"> i <div id="prawo">.

Aby każda kolumna ustawiła się prawidłowo należy podać im szerokość oraz float (sprawia, że element zaczyna pływać i można go za pomocą odpowiednich atrybutów ustawić w odpowiednim miejscu), czyli:
Lewa kolumna ma płynąć do lewej strony – float:left;

  1. #lewo {
  2.         width:200px;
  3.         float:left;
  4.         color:#173E5F;
  5. }
  6.  

A prawa kolumna ma płynąć prawej strony – float:right;

  1. #prawo {
  2.         width:550px;
  3.         float:right;
  4.         color:#173E5F;
  5.         margin:0 0 25px 0;
  6.         }

Zajmijmy się teraz głównym menu. Jest ono oparte na liście. Jak wiadomo każda lista składa się z:

  1. <ul>
  2.         <li></li>
  3.         <li></li>
  4.         <li></li>
  5. </ul>

Na standardzie przy każdym <li> pokazuje się punktator – kropeczka. My musimy się tutaj pozbyć i zastosować jako punktatory małe ikonki.

  1. /*Za pomocą list-style:none; pozbywamy się punktatorów, line-height:22px; określa wysokość między poszczególnymi < li >*/
  2. #mainmenu
  3. {
  4.         padding:0;
  5.         list-style: none;
  6.         font-size:13px;
  7.         color:#173E5F;
  8.         line-height:22px;
  9.         margin:0 0 0 30px;
  10. }
  11.  
  12. /*A za pomocą tych dwóch opcji ustalamy kolor czcionki w odnośnikach utworzonych w każdym < li > oraz to czy ma być podkreślenie czy nie*/
  13. #mainmenu a {
  14.         color:#173E5F;
  15.         text-decoration:none;
  16.         }
  17.  
  18. #mainmenu a:hover {
  19.         color:#54B4E5;
  20.         text-decoration:none;
  21.         }

Jeżeli chcemy aby kazde <li> miało inny obrazek, musimy każdemu <li> nadać inną klasę, a następnie podać odpowiedni background (tło), aby tekst nie nachodził na obrazek najlepiej w kazdej pozycji podać taką samą wartość paddinga (0 .2em), np:

  1. #mainmenu li.oferta
  2. {
  3.         padding-left: 25px;
  4.         background: url(images/oferta.gif) no-repeat 0 .2em;
  5. }
  6.  
  7. #mainmenu li.home
  8. {
  9.         padding-left: 25px;
  10.         background: url(images/home.gif) no-repeat 0 .2em;
  11. }
  12.  
  13. #mainmenu li.portfolio
  14. {
  15.         padding-left: 25px;
  16.         background: url(images/portfolio.gif) no-repeat 0 .2em;
  17. }
  18.  
  19. #mainmenu li.kontakt
  20. {
  21.         padding-left: 25px;
  22.         background: url(images/kontakt.gif) no-repeat 0 .2em;
  23. }
  24.  
  25. #mainmenu li.oferta
  26. {
  27.         padding-left: 25px;
  28.         background: url(images/oferta.gif) no-repeat 0 .2em;
  29. }
  30.  
  31. #mainmenu li.ofirmie
  32. {
  33.         padding-left: 25px;
  34.         background: url(images/ofirmie.gif) no-repeat 0 .2em;
  35. }
  36.  
  37. #mainmenu li.news
  38. {
  39.         padding-left: 25px;
  40.         background: url(images/aktualnosci.gif) no-repeat 0 .2em;
  41. }

Ramka niżej jest skonstruowana w bardzo podobny sposób – w tym miejscu dodaliśmy jedynie color tła oraz obramowania pola w którym znajduje sie lista z linkami:

  1. #navlist
  2. {
  3.         margin:0 0 0 30px;
  4.         padding:0;
  5.         list-style: none;
  6. }
  7.  
  8. #navlist li
  9. {
  10.         padding:0 0 0 13px;
  11.         background: url(images/arrow.gif) no-repeat 0 .5em;
  12. }
  13.  
  14. #navlist li a {
  15.         text-decoration:none;
  16.         font-size:12px;
  17.         color:#173E5F;
  18.         }
  19.  
  20. #navlist li a:hover {
  21.         color:#54B4E5;
  22.         text-decoration:none;
  23.         }
  24.  
  25. #ramka {
  26.         width:170px;
  27.         background:#F0F0F0;
  28.         border:1px #4BC6DD solid;
  29.         margin:0 0 0 30px;
  30.         padding:10px 0 10px 0;
  31.         line-height:18px;
  32.         }
  33.  
  34. .zaufali {
  35.         background:url(images/zaufali.jpg) no-repeat;
  36.         width:104px;
  37.         height:21px;
  38.         margin:0 0 10px 15px;
  39.         }

Stopka strony zawiera w sobie obrazek oraz tekst.
Tekst został wypozycjonowany z lewej strony za pomocą margin. Tag clear:both; w stopce służy można powiedzieć do zamknięcia wcześniej uzytych float:left; oraz clear:right; i dzięki temu stopka jest częścią zamykającą całą stronę. Nie oznacza to oczywiscie, że pod nią nie można utworzyć kolejnych częsci strony. clear:both; może byc też używany w innych częściach kodu, tam gdzie jest potrzebny w tym samym celu co w tym.
<div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div>

  1. #footer {
  2.  
  3.         background:url(images/footer.jpg) no-repeat;
  4.  
  5.         width:764px;
  6.  
  7.         height: 26px;
  8.  
  9.         clear:both;
  10.  
  11.         }
  12.  
  13.  
  14.  
  15. .footer {
  16.  
  17.         margin:0 0 0 450px;
  18.  
  19.         padding:6px 0 0 0;
  20.  
  21.         color:#173E5F;
  22.  
  23.         }       

I tak skonstruowana jest część główna strony.
Podstrony zbudowane sa na podobnej zasadzie. Możecie to zobaczyć po wejściu do źródła kazdej podstrony. Ich format jest zależy tylko od waszego zapotrzebowania i fantazji.

Trzeba pamietać, że najważniejsze jest to, aby strona poprawnie była wyświetlana w każdej przeglądarce. Nie można właściwie żadnej lekceważyć, bo w ten sposób lekceważy się również gości naszej strony, którzy korzystają z innej przegladarki niż my.
Dlatego jeżeli chcemy sami zrobić sobie stronę musimy mieć co najmniej 3 podstawowe przeglądarki internetowe (Opera, Firefox, IE) aby móc od razu poprawiać błedy, które wychodzą w trakcie pisania kodu. Niestety nasz kod przez np. IE może być inaczej czytany niż przez Operę czy Firefoxa.

Życzę miłej nauki.

Tutorial stworzony dla serwisu: Vivee.info

]]> http://agressiva.poprostuja.pl/2008/10/21/jak-stworzyc-strone-za-pomoca-xhtml-oraz-css/feed/ 27