Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Problem z wyswietlaniem menu
gabar
post
Post #1





Grupa: Zarejestrowani
Postów: 12
Pomógł: 0
Dołączył: 19.09.2008

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

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

Ten post edytował gabar 24.02.2011, 00:02:19
Go to the top of the page
+Quote Post
Kujski
post
Post #2





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

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

Na moje wystarczy dodać do div'a header-banner wartość z-index: smile.gif


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post
mortus
post
Post #3





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

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.
Go to the top of the page
+Quote Post
krzywy36
post
Post #4





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

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

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ć.


--------------------
pretty as a shit.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 Aktualny czas: 21.08.2025 - 19:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn