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
<li><a href="#">POZYCJA 1
</a></li> <li><a href="#" class="active">POZYCJA 2
</a></li> <li><a href="#">POZYCJA 3
</a></li> <li><a href="#">POZYCJA 4
</a></li> <li><a href="#">POZYCJA 5
</a></li> <li><a href="#">POZYCJA 6
</a></li>
i kod css
/* wyzerowanie domyslnych wartosci */
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;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
hr {display: none;}
img {display: block; border: 0;}
/* domyślne wartośći body */
body { background: #fff; font: 0.625em/1.5em verdana, arial, sans-serif; color: #b0b0b0;}
/* kontener */
.container { width: 960px; margin: 0 auto;}
/* wyzerowanie formularza */
form fieldset { border: none;}
/* wyzerowanie linków */
a { text-decoration: none; color: #303030;}
a:visited {}
a:hover {}
a:active {}
/* header */
#header { background-color: #f1f1ef; border-bottom: 3px solid #f1f1ef;}
#header .container { background-color: #fff; width: 960px;}
/* logo & menu */
#header #header-menu { width: 960px; z-index: 100; height: 105px; border-bottom: 3px solid #f1f1ef; float: left;}
#header #header-menu h1 { float: left; padding: 24px 0 0 10px;}
#header #header-menu h1 a { display: block; width: 206px; height: 60px; position: relative;}
#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;}
#header #header-menu ul.navigation { float: right; list-style: none;}
#header #header-menu ul.navigation li { float: left; margin: 0 10px;}
#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;}
#header #header-menu ul.navigation li a.active { float: left; background-color: #d50e2b; color: #fff; height: 107px; border-bottom: 4px solid #b00821;}
/* banner & wyszukiwarka */
#header #header-banner { clear: both; position: relative; width: 960px; height: 240px; background: url(../images/banner-header.jpg) top left no-repeat;}
#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;}
#header #header-banner p { width: 425px; position: absolute; left: 64px; top: 100px;}
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 (IMG:
style_emoticons/default/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
[CSS] Problem z wyswietlaniem menu
gabar [CSS] Problem z wyswietlaniem menu 23.02.2011, 23:58:12 
