Prosta stronka CSS cz.2

Prosta stronka CSS cz.2

Teraz pokażemy, jak jest zbudowana strona, na której jesteśmy. Składa się z następujących elementów:

Nagłówek
Lewa strona
Prawa strona
Stopka

Nagłówek

W nagłówku umieszczono obrazek logo naszego serwisu oraz menu główne serwisu. Logo zostało umieszczone w zewnętrznym pliku style.css w postaci:
background: url(img/logo.jpg) no-repeat;.
Menu główne serwisu zostało wykonane w postaci wykazu:

<ul>
<li><a href="#">Nazwa</a></li>
<li><a href="#">Nazwa</a></li>
<li><a href="#">Nazwa</a></li>
<li><a href="#">Nazwa</a></li>
<li><a href="#">Nazwa</a></li>
</ul>

Lewa strona

W lewej stronie umiesczono menu strony w postaci odsyłaczy:

lub w postaci listy:

<dl>
<dt>Nazwa</dt>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
<dd><a href="#">link</a></dd>
</dl>

Prawa strona

Na prawej stronie umieszczono właściwą treść strony w postaci opisu, obrazków i innych elementów, np: ramki pływającej do zamieszczania treści z odsyłaczy.

Stopka

W stopce umiesczono Copyright serwisu. Można tu umieścić swoje własne elementy, np: skrypt do statystyki serwisu, bannery reklamowe i inne.

Pozycjonowanie

Całość pozycjonowania umieszczono w pliku style.css. Nagłówek został wypozycjonowany jako: position: relative; , menu główne <ul></ul> jako position: absolute; , wykaz <li></li> w postaci float: left; , Lewa strona jako float: left;, Strona prawa jako float: right; , a Stopka poprzez clear: both; .

Struktura strony HTML

Całość strony przedstawia się następująco:

<html>

<head>

</head>
 
<body>

<div id="kontener">

  <div id="top">

  <ul>

  <li><a href="#">link</a></li>

  <li><a href="#">link</a></li>

  <li><a href="#">link</a></li>

  <li><a href="#">link</a></li>

  <li><a href="#">link</a></li>

  </ul>

  </div>
          
  <div id="lewa">

  <a target="nazwa" href="#">link</a><br />
 
  <a target="nazwa" href="#">link</a><br />
 
  <a target="nazwa" href="#">link</a><br />
 
  <a target="nazwa" href="#">link</a><br />

  </div>
  
  <div id="prawa">

  </div>
  
  <div id="stopka">

  </div>

</div>

</body>
 
</html>

gdzie: kontener jest DIV'em zawierającym całą zawartość strony, a pozostałe DIV'y są zrozumiałe. Przykładowy plik style.css wygląda następująco:

* { 
   margin: 0; 
   padding: 0; 
}
body { 
   text-align: left;
   width: 500px;
   margin: 0 auto;
   font-size: 11px;
   font-weight: normal;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
#kontener {
   height: 100%;
   overflow: hidden;
}
#top {
   position: relative;
   background: #C0C0C0;
   width: 100%;
   margin-bottom: 10px;
   border: 1px solid #bc9a6c;
}
ul {
   position: absolute;
   left: 0;
   top: 0; 
   list-style: none;
   background: #808000;
   border-width: 1px 0 0 1px;
   border-style: solid;
}
li { 
   float: left;
   width: 80px;
   text-align: center;
   border-width: 0 1px 2px 0;
   border-style: solid;
   border-color: #008000;
}
li a { 
   display: block;
   width: 100%;
   color: #ffffff; 
   text-decoration: none;
   font-size: 11px;
   padding: 2px 0;
}

li a:hover {
   background: #e5cb0b; 
   color: #000000; 
}
#lewa {
   float: left;
   height: auto; !important;
   height: 200px; /*IE*/
   min-height: 200px;
   display: inline;
   margin-bottom: 10px;
   border: 1px solid #bc9a6c;
   background: #F7F7F7;
}
dl { 
   margin-top: 11px; 
   width: 150px; 
}
dt {
   font-size : 12px; 
   text-align: center;
   font-weight : bold; 
   color: #5f3c2d; 
}
dd { 
   font-size : 11px;
   text-align: left; 
}
dd a { 
   display: block; 
   width: 100%; 
   text-decoration: none; 
   padding: 2px 0; 
}

dd a:link { 
   color: #804000; 
}

dd a:visited { 
   color: #804000; 
}

dd a:hover { 
   color: #ff6600; 
}
#prawa {
   float: right;
   height: auto; !important;
   height: 200px; /*IE*/
   min-height: 200px;
   display: inline;
   margin-bottom: 10px;
   border: 1px solid #bc9a6c;
   background: #FFCC00; 
}
#stopka { 
   clear: both;
   width: 100%;
   height: 20px;
   border: 1px solid #bc9a6c;
   font-size: 12px;
   background: #969696;
}

To już wszystko. Struktura strony jest gotowa! Teraz wystarczy, że dostosujesz ten kod pod swoje potrzeby i będziesz mógł się cieszyć stroną dostępną i semantyczną. Wykorzystane kolory w background służą wyłącznie po to, aby pokazać przykład strony.

Zobacz