--=REKLAMA=--

Beez/obszar header

Z Joomla!WikiPL

(Przekierowano z Beez/header)

W obszarze nagłówka umieszczonych jest 7 obiektów:

  • niewidoczny zestaw odnośników - skrótów do głównego menu, treści głównej i treści dodatkowych
  • przełącznik rozmiarów czcionki
  • logo witryny
  • wiersz streszczenia
  • poziome menu nawigacyjne (narzędziowe)
  • moduł Ścieżka powrotu
  • moduł Szukaj.

Beez header.png

Odwołanie w HTML

  1. <div id="header">
  2.    <h1 id="logo">
  3.       <img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />
  4.       <span class="header1"><?php echo JText::_('Joomla Accessible Template'); ?></span>
  5.    </h1>
  6.  
  7.    <ul>
  8.       <li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li>
  9.       <li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li>
  10.       <li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li>
  11.    </ul>
  12.  
  13.    <h2 class="unseen">
  14.       <?php echo JText::_('Search, View and Navigation'); ?>
  15.    </h2>
  16.  
  17.    <div id="fontsize">
  18.       <script type="text/javascript">
  19.       //<![CDATA[
  20.           document.write('<h3><?php echo JText::_('FONTSIZE'); ?></h3><p class="fontsize">');
  21.           document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('bigger'); ?></a><span class="unseen">&nbsp;</span>');
  22.           document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('smaller'); ?></a><span class="unseen">&nbsp;</span>');
  23.           document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('reset'); ?></a></p>');
  24.       //]]>
  25.       </script>
  26.    </div>
  27.  
  28.    <jdoc:include type="modules" name="user3" />
  29.    <jdoc:include type="modules" name="user4" />
  30.  
  31.    <div id="breadcrumbs">
  32.       <p>
  33.           <?php echo JText::_('You are here'); ?>
  34.           <jdoc:include type="modules" name="breadcrumb" />
  35.       </p>
  36.    </div>
  37.  
  38.    <div class="wrap">&nbsp;</div>
  39. </div><!-- end header -->

// DO ZROBIENIA: Jak zmienić tekst "dostępność"

Odwołania w CSS

#header

Poniższe klasy i identyfikatory wpływają na cały pojemnik header. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie nadpisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: position.css

  1. #header
  2. {
  3.     background: #fff;
  4.     color: #000000;
  5.     margin: 0;
  6.     position: relative;
  7.     text-align: right;
  8.     border-bottom: solid 4px #ccc;
  9. }

Dodatkowe style

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

Dodatkowe informacje: beez/obszar header logo

#header ul

Poniższe klasy i identyfikatory wpływają na listy nienumerowane w obszarze header. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: layout.css

  1. #header ul
  2. {
  3.     background:#fff;
  4.     display:block;
  5.     margin:-7px 0 -2px;
  6.     padding:5px 0;
  7.     text-align:right;
  8. }

Dodatkowe style

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

#header ul li

Poniższe klasy i identyfikatory wpływają na pozycje list w obszarze header. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: layout.css

  1. #header ul li
  2. {
  3.     background:#000;
  4.     color:#fff;
  5.     display:inline;
  6.     text-align:center;
  7. }

Dodatkowe style

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

#header ul li a.u2

Poniższe klasy i identyfikatory wpływają na odnośniki z klasą "u2" w obszarze header. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: layout.css

  1. #header ul li a:link,#header ul li a:visited
  2. {
  3.     background:#fff;
  4.     color:#000;
  5.     font-weight:bold;
  6.     text-decoration:none;
  7.     border-right:solid 1px #666;
  8.     padding:5px 10px;
  9.     line-height:1.5em;
  10. }

Dodatkowe style

Miejsce przechowywania - plik: layout.css

  1. *
  2. a:link,a:visited
  3. {
  4. 	color:#000;
  5. }


Miejsce przechowywania - plik: layout.css

  1. *
  2. a:hover,a:active,a:focus
  3. {
  4. 	background:#000;
  5. 	color:#FFF;
  6. }


Miejsce przechowywania: position.css

  1. .unsichtbar,.u2,.invisible , .unseen
  2. {
  3.     display: inline;
  4.     height: 0px;
  5.     left: -3000px;
  6.     position: absolute;
  7.     top: -2000px;
  8.     width: 0px;
  9.     z-index: 200;
  10. }

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

.unseen

Poniższe klasy i identyfikatory wpływają na element div dla dostępności. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: position.css

  1. .unsichtbar,.u2,.invisible , .unseen
  2. {
  3.     display: inline;
  4.     height: 0px;
  5.     left: -3000px;
  6.     position: absolute;
  7.     top: -2000px;
  8.     width: 0px;
  9.     z-index: 200;
  10. }

Dodatkowe style

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*

#fontsize

Dodatkowe informacje: beez/obszar header fontsize

#mainlevel-nav

Dodatkowe informacje: beez/obszar header mainlevel -nav

#header form

Dodatkowe informacje: beez/obszar header form

#breadcrumbs

Dodatkowe informacje: beez/obszar header breadcrumbs

.wrap

Poniższe klasy i identyfikatory wpływają na element [an unused(?)] div w obszarze footer. Zwróć uwagę na kolejność. Każda właściwość CSS zostanie napisana przez powyższą klasę.

Podstawowe style

Miejsce przechowywania: position.css

  1. .wrap
  2. {
  3.     border: 0;
  4.     clear: both;
  5.     float: none;
  6.     font-size: 1px;
  7.     height: 0;
  8.     line-height: 1px;
  9.     margin: 0;
  10.     padding: 0;
  11.     visibility: hidden;
  12. }

Dodatkowe style

Miejsce przechowywania: position.css

  1. *
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
Dodatkowe informacje: position.css/*


Dziękujemy za wkład

» Stefan Wajda [zwiastun],