Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem związany z belką na stronie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Przem4S
Witam mianowicie, nie potrafię ułożyć odpowiednio zawartości belki, z niewiadomych mi przyczyn logo które zamieszczam zajmuje obszar całej zawartości belki. Wygląda to tak:



Szerokość strony: 980px.

CSS:
  1. /*
  2. Górna belka
  3. */
  4.  
  5. #gorna_belka {
  6. height:48px;
  7. width:100%;
  8. background:url('images/belka.png') repeat-x;
  9. }
  10.  
  11. #zawartosc_belki {
  12. width:980px;
  13. margin:0 auto;
  14. }
  15.  
  16. .logo {
  17. background:url('images/logo.png') no-repeat;
  18. height:48px;
  19. }


HTML:
  1. <div id="gorna_belka">
  2. <div id="zawartosc_belki">
  3. <a href="#"><div class="logo"></div></a>
  4. <a href="#">Odnośnik 2</a>
  5. <br>
  6. </div>
  7. </div>


Strona:

http://przem4ss1.host.sk/

lub

klik!

Pomożecie?
Damonsson
1. Nadaj mu width:
albo
2. Wątpię, że na logo będziesz coś pisał, nie możesz dać tego jak <img> ?
Przem4S
Z width nadal to się nie zmienia, chcę to zrobić w divie bo nawet jak zrobię w img to potem problem się pojawi znów po belce. Chodzi o to że odnośnik przyjmuje długość 980px, a sam obrazek wyświetla poprawnie.
Strona: http://przem4ss1.host.sk/
Damonsson
Ooo sorry, nie spojrzałem na html, nie możesz umieszczać elementu blokowego w liniowym.

Możesz zrobić taki myk:

  1. .logo {
  2. background:url('images/logo.png') no-repeat;
  3. height:48px;
  4. width: 200px;
  5. display: block;
  6. }


  1. <div id="gorna_belka">
  2. <div id="zawartosc_belki">
  3. <a class="logo" href="#"></a>
  4. <a href="#">Odnośnik 2</a>
  5. <br>
  6. </div>
  7. </div>
Przem4S
Tak jak tłumaczę dziwnie to wygląda nawet po nadaniu width, stronę możesz zobaczyć tutaj. Width jest jeden dla treści (szerokość 980px), i potem na logu te 183px, lecz mimo to obrazek wyświetla poprawnie ale linkuje całe 980px.

Problem został rozwiązany dzięki Damonsson.
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.