Skocz do zawartości

Odstępy w "div'ach"

mess_alex

Przez mess_alex
w HTML i CSS

Rekomendowane odpowiedzi

mess_alex Newbie

mess_alex

Opublikowano
Opublikowano

Witam,

robię strone (www.ospdzd.home.pl (wersja 2).

Dopiero zaczynam z "div'ami", wcześniej robiłem w tabelkach wink2.gif

Kod pliku napisanego w html'u:

<body>



  <div class="block">

      <center><img src="images/block_header_home.jpg" height="45" width="181"></center>

      <img src="images/F6F6F6.jpg" height="1" width="15">Liczba odwiedzin: 127

      <br><img src="images/F6F6F6.jpg" height="1" width="15">Online: 2

      <br> 

      <br><img src="images/F6F6F6.jpg" height="1" width="15">Język:

      <br><img src="images/F6F6F6.jpg" height="1" width="15">Rozmiar czcionki: t, T, <b>T</b>

  </div>



  <div class="module">

      <ul id="menu">

          <li><a href="home.html">Home</a> </li>

          <li><a href="stowarzyszenie.php">Stowarzyszenie</a> </li>

          <li><a href="dzialalnosc.html">Działalność</a> </li>

          <li><a href="aktualnosci.html">Aktualności</a> </li>

          <li><a href="sponsorzy.html">Sponsorzy i Wolontariusze</a> </li>

          <li><a href="galeria.html">Galeria</a> </li>

          <li><a href="kontakt.html">Kontakt</a></li>

      </ul>

      

      <div class="logo">

          <img src="images/logo.jpg" width="796px" height="159px">

      </div>

      

      <div class="content">

          <h1>Home</h1>



              Opolskie Stowarzyszenie Pomocy Dzieciom z Zespołem Downa powstało 17.02.1999 - wtedy to z inicjatywy lekarza pediatry Joanny Łaby odbyło się nasze pierwsze spotkanie.

              Od tego czasu staramy się systematycznie rozwijać naszą działalność.

          <br>Naszym celem jest objęcie opieką jak największej liczby rodziców dzieci z Zespołem Downa.

              Chcielibyśmy aby w tym pierwszym, najtrudniejszym okresie znaleźli w naszym stowarzyszeniu wsparcie dla siebie i pomoc w rehabilitacji swojego dziecka.

          <br>Dla dzieci i młodzieży skupionej w naszym stowarzyszeniu staramy się tworzyć krąg przyjaciół i miejsce, w którym mogą uzyskać wszechstronną pomoc, edukację i rozrywkę.

          <br>Posiadamy status organizacji pożytku publicznego

          <br>Biuro zarządu czynne we wtorki w godzinach 9:30-10:30 i 14:30-15:30

          <table celspacing="0" width="575px">

            <tr align="center">

              <td style="text-align: left; background: #ffffff url(images/info.jpg) no-repeat; width: 400px; height: 23px; padding-left: 35px;">

                Numer wpisu do Krajowego Rejestru Sądowego:

              </td>

              <td style="text-align: right; width: 300px; height: 15px; padding-right: 10px;">

                KRS. 72761

              </td>

            </tr>

          </table>

      </div>

      

      <div class="footer">

          <a href="mailto:mess_alex@interia.pl" class="przycisk">site by mess_alex</a>

      </div>

  </div>





</body>

kody plików a.css, content.css, div.css:

/* 1) -=-=-=- Menu główne -=-=-=- */



#menu {

      font-family: Arial, Helvetica, sans-serif;

      height: 41px;

      width: 800px;

      text-align: center;

      align: center;

      padding-left: 7px;

      padding-right: 7px;

      padding-top: 9px;

      margin:0;

      font-size: 18px;

      background: #000000 url(images/bg_menu.jpg) repeat-x;

      border: 2px soild #ffffff;

    }

#menu li {

         color: #ffffff;

         display: inline;

         position: relative;

         padding:0;

         margin:0;

       }

#menu li a {

           color: #ffffff;

           text-decoration: none;

         }

#menu li a:hover {

                 color: #999999;

                 text-decoration: none;

               }

#menu li a:active {

                  color: #666666;

                  text-decoration: none;

                }

                

/* 2) -=-=-=- Menu bloki -=-=-=- */

                

#block_menu {

            font-family: Arial, Helvetica, sans-serif;

            font-size: 10px;

            font-weight: bold;

            background: #F6F6F6;

            padding-left: 32px;

            margin: 0;

          }

#block_menu li {

               color: #ffffff;

               display: inline;

               position: relative;

               padding: 0;

               margin: 0;

             }

#block_menu li ul li {

                     display: block;

                     position: relative;

                   }

#block_menu li {

               color: yellow;

             }

#block_menu li:hover {

                     color: red;

                   }

#block_menu li a {

                 background: #F6F6F6 url(images/block_menu_off.jpg) no-repeat;

                 width: 144px;

                 height: 24px;

                 padding-left: 3px;

                 padding-top: 5px;

                 text-align: left;

                 color: #ffffff;

                 text-decoration: none;

               }

#block_menu li a:hover {

                       background: #F6F6F6 url(images/block_menu_on.jpg) no-repeat;

                       width: 148px;

                       height: 24px;

                       padding-left: 3px;

                       padding-top: 5px;

                       text-align: left;

                       color: #99999;

                       text-decoration: none;

                     }

#block_menu li a:active {

                       background: #F6F6F6 url(images/block_menu_on.jpg) no-repeat;

                       width: 148px;

                       height: 24px;

                       padding-left: 3px;

                       padding-top: 5px;

                       text-align: left;

                       color: #666666;

                       text-decoration: none;

                     }

#block_menu li ul {

                  visibility: hidden;

                  position: absolute;

                  background-color: blue;

                  z-index: 20;

                  padding: 0;

                  margin: 0;

                }

#block_menu li:hover ul {

                        visibility:visible;

                      }



/* 3) -=-=-=- Hyperłącza -=-=-=- */



a.przycisk { background: #cccccc;

           color: #ffffff;

           font-size: 7px;

           text-decoration: none;

           width: 65px;

           height: 14px;

           text-align: center;

           vertical-align: middle;

         }



a.przycisk:hover {

                 background: #B9E658;

                 color: #85A538;

                 font-size: 7px;

                 text-decoration: none;

                 width: 64px;

                 height: 13px;

                 border: 1px soild #B0C776;

                 text-align: center;

                 vertical-align: middle;

               }



a.przycisk:active {

                 background: #B9E658;

                 color: #85A538;

                 font-size: 7px;

                 text-decoration: none;

                 width: 64px;

                 height: 13px;

                 border: 1px soild #B0C776;

                 text-align: center;

                 vertical-align: middle;

               }





div.css



div.block {

          position: absolute;

          top: 241px;

          margin-left: 9px;

          padding-top: 5px;

          font-size: 11px;

          text-align: left;

          background: #F6F6F6;

          width: 203px;

          height: 450px;

        }

        

div.module {

           background: #000000;

           width: 800px;

         }

        

div.logo {

         background: #ffffff url(images/bg_logo.jpg) no-repeat;

         width: 814px;

         height: 159px;

       }

      

div.content {

            background: #ffffff url(images/bg_content.jpg) no-repeat;

            padding-top: 0px;

            padding-left: 224px;

            padding-right: 15px;

            margin-top: 0px;

            text-align: left;

            width: 814px;

            height: 600px;

            

          }

          

div.footer {

           background: #F6F6F6 url(images/bg_footer.jpg) no-repeat;

           text-align: right;

           padding-right: 7px;

           padding-top: 1px;

           width: 814px;

           height: 26px;

         }



content.css



body {

     font-family: Times New Roman, Times, serif;

     font-size: 12px;

     color: #999999;

     background: #FCFEF4 url(images/bg_top.gif) repeat-x;

     margin-top: 61px;

     text-align: center;

   }



h1 {

   font-size: 18px;

   color: #7DA721;

   font-weight: normal;

 }



h2 {

   font-size: 15px;

   color: #7DA721;

   font-weight: normal;

 }

Między logiem a "content'em" pojawia się dziwny, biały, pasek wysoki na 4px a szeroki na 814px. Jak można się go pozbyć?

STRONA NARAZIE DZIAŁA TYLKO POD IE, NIE WARTO NARAZIE OGLĄDAĆ POD INNYMI PRZEGLĄDARKAMI.

Z góry dzięki (sory, że taki długi wyszedł ten post)

Zespół Downa - porady, ważne informacje dla rodziców, rodzeństwa, opiekunów.
Odnośnik do komentarza
Udostępnij na innych stronach
zero3 Newbie

zero3

Opublikowano
Opublikowano
STRONA NARAZIE DZIAŁA TYLKO POD IE, NIE WARTO NARAZIE OGLĄDAĆ POD INNYMI PRZEGLĄDARKAMI.

sprobuj przestawic sie na taki styl projektowania, by juz w fazie szkiców testowac strone w 3 przegladarkach.

jesli w ff bedzie ok, to zwykle i opera wyswietli prawidlowo (moga byc niewielkie roznice, łatwe do wyeliminowania), natomiast tego knota zwanego ie zostaw sobie na koniec kazdego etapu.

pozycjonowanie inhead na fb
Odnośnik do komentarza
Udostępnij na innych stronach
nrm Newbie

nrm

Opublikowano
Opublikowano
e chyba <br /> jescze jest ?

<br /> jest jest. ale przeczy on zasadzie oddzielenia warstwy tekstowej i prezentacyjnej i nie powinno sie go uzywać chociaż ja jeszcze sie nie moge przestawić :)

Dla prawdziwych mastahów kodu! Webdeveloperzy wszystkich języków - łączmy się! ;) "Robisz internety", jesteś PRO?

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności