Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [xhtml-css] lista i odstępy pomiedzy obrazkiem, niewielkie różniece IE- FF i Mozilla
krzyszbi
post 22.03.2007, 12:20:21
Post #1





Grupa: Zarejestrowani
Postów: 251
Pomógł: 13
Dołączył: 15.09.2005

Ostrzeżenie: (0%)
-----

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


--------------------
Everything should be made as simple as possible, but not simpler. - A.Eainstein
Go to the top of the page
+Quote Post
gekon
post 22.03.2007, 13:29:42
Post #2





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----

W IE włącza się QuirksMode, bo przed DOCTYPE nie powinno niczego być.


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 12.06.2025 - 22:10
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn