Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem z wyswietlaniem menu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
gabar
23.02.2011, 23:58:12
Witam, próbuję zrobić menu w którym pozycja zaznaczona najeżdża trochę na banner poniżej. Nie mogę sobie jednak poradzić z obcinaniem części najeżdżającej na banner.

index.html
[HTML] pobierz, plaintext 
  1. <body>
  2.     <div id="header">
  3.         <div class="container">
  4.             <div id="header-menu">
  5.                 <h1><a href="#">Logo<span></span></a></h1>
  6.                 <ul class="navigation">
  7.                     <li><a href="#">POZYCJA 1</a></li>
  8.                     <li><a href="#" class="active">POZYCJA 2</a></li>
  9.                     <li><a href="#">POZYCJA 3</a></li>
  10.                     <li><a href="#">POZYCJA 4</a></li>
  11.                     <li><a href="#">POZYCJA 5</a></li>
  12.                     <li><a href="#">POZYCJA 6</a></li>
  13.                 </ul>
  14.             </div>
  15.             <div id="header-banner">
  16.                 <p></p>
  17.                 <h2>SLOGAN</h2>
  18.                 <p>Lorem ipsum...</p>
  19.             </div>
  20.         </div>
  21.     </div>
  22. </body>
[HTML] pobierz, plaintext


i kod css
[HTML] pobierz, plaintext 
  1. /* wyzerowanie domyslnych wartosci */
  2. body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, samp, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
  3. body {line-height: 1;}
  4. ol, ul {list-style: none;}
  5. blockquote, q {quotes: none;}
  6. blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
  7. table {border-collapse: collapse; border-spacing: 0;}
  8. hr {display: none;}
  9. img {display: block; border: 0;}
  10.  
  11. /* domyślne wartośći body */
  12. body { background: #fff; font: 0.625em/1.5em verdana, arial, sans-serif; color: #b0b0b0;}
  13.  
  14. /* kontener */
  15. .container { width: 960px; margin: 0 auto;}
  16.  
  17. /*  wyzerowanie formularza */
  18. form fieldset { border: none;}
  19.  
  20. /* wyzerowanie linków */
  21. a { text-decoration: none; color: #303030;}
  22. a:visited {}
  23. a:hover {}
  24. a:active {}
  25.  
  26. /* header */
  27. #header { background-color: #f1f1ef; border-bottom: 3px solid #f1f1ef;}
  28. #header .container { background-color: #fff; width: 960px;}
  29.  
  30. /* logo & menu */
  31. #header #header-menu { width: 960px; z-index: 100; height: 105px; border-bottom: 3px solid #f1f1ef; float: left;}
  32. #header #header-menu h1 { float: left; padding: 24px 0 0 10px;}
  33. #header #header-menu h1 a { display: block; width: 206px; height: 60px; position: relative;}
  34. #header #header-menu h1 a span { display: block; width: 206px; height: 60px; position: absolute; top: 0; left: 0; background: url(../images/logoa.jpg) no-repeat;}
  35.  
  36. #header #header-menu ul.navigation { float: right; list-style: none;}
  37. #header #header-menu ul.navigation li { float: left; margin: 0 10px;}
  38. #header #header-menu ul.navigation li a {font-size: 1.0em; font-weight: bold; color: #a5a5a5; display: block; height: 105px; line-height: 105px; padding: 0 15px;}
  39. #header #header-menu ul.navigation li a.active { float: left; background-color: #d50e2b; color: #fff; height: 107px; border-bottom: 4px solid #b00821;}
  40.  
  41. /* banner & wyszukiwarka */
  42. #header #header-banner { clear: both; position: relative; width: 960px; height: 240px; background: url(../images/banner-header.jpg) top left no-repeat;}
  43. #header #header-banner h2 { position: absolute; top: 71px; left:64px; width: 286px; height: 25px; background: url(../images/slogan-banner.jpg) top left no-repeat; text-indent: -6666em;}
  44. #header #header-banner p { width: 425px; position: absolute; left: 64px; top: 100px;}
[HTML] pobierz, plaintext


Jeszcze zauważyłem, że problem ten wyniknął gdy zacząłem pozycjonować absolutnie zawartość (h2 i p) w divie #header-banner.

Mam nadzieje, że wiecie o co mi chodzi smile.gif
Jakbyście wiedzieli co z tym zrobić byłbym bardzo wdzięczny za pomoc.

Pozdrawiam
Kujski
5.03.2011, 11:13:03
Na moje wystarczy dodać do div'a header-banner wartość z-index: smile.gif
mortus
5.03.2011, 11:28:21
Wyjeżdża, bo jej wysokość (height) z ramką (border-bottom) to w sumie 111px, tymczasem odnośniki nieaktywne mają 105px wysokości. Musisz zmienić wysokość aktywnego elementu na mniejszą, w zależności od tego, jaki efekt chcesz uzyskać. Poza tym wydaje mi się, że atrybut opływania (float) jest tutaj niepotrzebny (tutaj, czyli w a.active). Reszty nie sprawdzałem, ale layout zapowiada się ciekawie.
krzywy36
5.03.2011, 22:17:41
nie bardzo rozumiem o co chodzi, najpierw piszesz
Cytat
...w którym pozycja zaznaczona najeżdża trochę na banner...

a potem
Cytat
.. z obcinaniem części najeżdżającej na banner...

może sprecyzuj co chcesz uzyskać.
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.