Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml-css] lista i odstępy pomiedzy obrazkiem
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
krzyszbi
22.03.2007, 12:20:21
witam
mam za zadanie pociąć i oskryptować stronkę aikido obecnie jest ona całkowicie we Flashu a kolega chce mieć też jakąś alternatywę co się Flasha boją tongue.gif
i podczas ciecia wyniknął mi taki problemik a mianowicie pod IE pod topem co jest obrazek robi cis mała przerwa choc mam zadeklarowane margin: 0; padding: 0;
i podobnie mam w liście - manu po lewej i prawej stronie niewielka przerwa między "daszkiem" a trzema linka po każdej stronie przykład dostępny na stronie przykład - aikido
html i css myśle że jest optymalnie napisany ale jak ktoś ma jakies uwagi to śmiało , nie krepować się
HTML
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  4. <head>
  5.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  6.   <meta name="Description" content="Warszawska sekcja Aikido - ul.Okopowa 55a ( Wola ) tel. 500 150 141" />
  7.   <meta name="Author" content="Desin: Paweł Nejman, Wykonanie: Krzysztof Bil" />
  8.   <meta name="Keywords" content="aikido,warszawa,sekcja aikido,sztuki walki,samoobrona" />
  9.   <link rel="stylesheet" href="/aikido/styles/style.css" type="text/css" />
  10.   <title>Warszawska sekcja Aikido</title>
  11. </head>
  12. <body>
  13. <div id="container">
  14.     <div id="top">
  15.          <img src="/aikido/images/top.gif" alt="Warszawska sekcja Aikido - ul.Okopowa 55a ( Wola ) tel. 500 150 141" />
  16.     </div>
  17.     <div id="leftnav">
  18.         <ul>
  19.             <li><img src="/aikido/images/menu_top.gif" alt="Menu - top" /></li>
  20. 		    <li><a class="aktualnosci" href="/Aktualnosci" title="Aktualności"></a></li>
  21. 		    <li><a class="zapisy" href="/Zapisy" title="Zapisy"></a></li>
  22. 		    <li><a class="aikido" href="/Aikido" title="Aikido"></a></li>
  23. 		    <li><img src="/aikido/images/manu_bottom.gif" alt="Menu - bottom" /></li>
  24.         </ul>
  25.     </div>
  26.     <div id="content">
  27.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus lectus mauris, accumsan non, gravida at, sodales non, magna. Pellentesque metus. Etiam et libero. Maecenas tincidunt rhoncus purus. Nulla felis purus, egestas commodo, egestas eu, accumsan eu, est. Curabitur nulla nisl, suscipit eget, scelerisque in, ornare adipiscing, nulla. Sed pharetra. Duis tempus. Donec condimentum urna quis ipsum. Curabitur sed mi a orci tristique nonummy. Suspendisse leo felis, feugiat vel, sodales ornare, rhoncus a, massa. Ut tristique tristique eros. Curabitur elementum, elit nec tincidunt vulputate, dolor risus tempus turpis, in cursus justo est id erat. Etiam nulla mauris, aliquam sed, molestie id, ultrices quis, ligula.</p> 
  28.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus lectus mauris, accumsan non, gravida at, sodales non, magna. Pellentesque metus. Etiam et libero. Maecenas tincidunt rhoncus purus. Nulla felis purus, egestas commodo, egestas eu, accumsan eu, est. Curabitur nulla nisl, suscipit eget, scelerisque in, ornare adipiscing, nulla. Sed pharetra. Duis tempus. Donec condimentum urna quis ipsum. Curabitur sed mi a orci tristique nonummy. Suspendisse leo felis, feugiat vel, sodales ornare, rhoncus a, massa. Ut tristique tristique eros. Curabitur elementum, elit nec tincidunt vulputate, dolor risus tempus turpis, in cursus justo est id erat. Etiam nulla mauris, aliquam sed, molestie id, ultrices quis, ligula.</p> 
  29.     </div>
  30.     <div id="rightnav">
  31.         <ul>
  32. 		    <li><img src="/aikido/images/menu_top.gif" alt="Menu - top" /></li>
  33. 		    <li><a class="oklubie" href="/O-Klubie" title="O Klubie"></a></li>
  34. 		    <li><a class="galeria" href="/Galeria" title="Galeria"></a></li>
  35. 		    <li><a class="kontakt" href="/Kontakt" title="Kontakt"></a></li>
  36. 		    <li><img src="/aikido/images/manu_bottom.gif" alt="Menu - bottom" /></li>
  37.         </ul>
  38.     </div>
  39.     <div id="footer">
  40.          <p style="width: 40%; float: left; text-align: left; margin: 5px 0 0 10px;">
  41.            Copyright Š <a href="http://aikidowarszawa.pl">AikidoWarszawa</a> 2007
  42.          </p>
  43.         <p style="width: 40%; float: right; margin: 0 10px 0 0; text-align: right;">
  44.             Projekt : <a href="mailto:p.nejman@cyber.pl">Paweł Nejman</a><br />
  45.             Wykonanie : <a href="mailto:krzysztif.bil@cyber.pl">Krzysztof Bil</a>
  46.         </p>
  47.     </div>
  48. </div>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext

CSS
Kod
html, body{ margin:0; padding:0; text-align:center; }
* {font-family: verdana, tahoma, arial, sans-serif;}
div, a, p, img, ul, li { margin: 0; padding: 0; border: 0; }
#container { width: 819px; margin: 0 auto; background-color: #fff; color: #000; }
#top{ height: 56px; }
#leftnav  { background-color: #000066; float: left;  width: 207px; }
#rightnav { background-color: #006600; float: right; width: 207px; }
#content  { background-color: #ffff00; float: left; width: 405px; }
#footer { clear: both; background-color: red; height: 25px; width: 819px; }
#leftcol  li, #rightcol li { display:inline; }
#footer p{ margin: 0 0 5px 5px; font-size: 10px; color: #ffffff; }
#footer a:link    { font-size: 10px; color: #ffffff; text-decoration: none; font-weight: bold; }
#footer a:visited { font-size: 10px; color: #ffffff; text-decoration: none; font-weight: bold; }
#footer a:hover   { font-size: 10px; color: #ffffff; text-decoration: underline; font-weight: bold; }
#footer a:active  { font-size: 10px; color: #ffffff; text-decoration: none; font-weight: bold; }

#content p { font-size: 11px; }
#leftnav  li, #rightnav li { display:inline; margin: 0; padding: 0; border: 0; }
ul, li { margin: 0; padding: 0; border: 0; }

#leftnav li a.aktualnosci      { width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_aktualnosci.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#leftnav li a.aktualnosci:hover{ width:207px; height:51px; float:left; background-image:url(/images/manu_aktualnosci_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

#leftnav li a.zapisy      { width:207px; height:52px; float:left; background-image:url(/aikido/images/manu_zapisy.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#leftnav li a.zapisy:hover{ width:207px; height:52px; float:left; background-image:url(/aikido/images/manu_zapisy_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

#leftnav li a.aikido      { width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_aikido.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#leftnav li a.aikido:hover{ width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_aikido_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

#rightnav li a.oklubie      { width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_oklubie.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#rightnav li a.oklubie:hover{ width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_oklubie_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

#rightnav li a.galeria      { width:207px; height:52px; float:left; background-image:url(/aikido/images/manu_galeria.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#rightnav li a.galeria:hover{ width:207px; height:52px; float:left; background-image:url(/aikido/images/manu_galeria_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

#rightnav li a.kontakt      { width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_kontakt.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }
#rightnav li a.kontakt:hover{ width:207px; height:51px; float:left; background-image:url(/aikido/images/manu_kontakt_a.gif); background-repeat:no-repeat;margin: 0; padding: 0; border: 0; }

tło żółte i inne to dla testów aby wiedzieć co sie dzieje
z góry dzięki za każde info bo ja już nie wiem co tam może byc nie tak
gekon
22.03.2007, 13:29:42
W IE włącza się QuirksMode, bo przed DOCTYPE nie powinno niczego być.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.