[HTML][CSS] accordion effect PROBLEM

none6767 · 13 Sierpień 2013 15:22

Witam,

Mam pewien malutki problem… korzystam sobie z czegoś oto takiego: http://www.thecssninja.com/css/accordian-effect-using-css i po podpięciu pod strone działa, rozwija sie elegancko.

Tylko, klikając na element sekcji w celu rozwinięcia, cała strona zjeżdża mi do tego elementu - taki troszku niechciany efekt i zależy mi na jego zlikwidowaniu.

dodam, że jestem początkujący i nie do końca znam jeszcze wszystkie zagadnienia HTML/CSS.

fragment kodu w index.html

Section 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
Section 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
Section 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
Section 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.

[/code] całość style.css [code]#page {position: relative; width: 1172px; height: 1100px; margin: 0 auto; text-align: left; background: green;} #menu { height: 120px; } #logo {float:left; padding: 10px;} #page\_top\_menu {padding-top:30px; padding-right: 70px; float: right; } #page\_top\_menu ul {float:left;width:100%;padding:0;margin:0;list-style-type:none; text-align: center;} #page\_top\_menu li {display:inline;list-style-type: none; float: left; display: inline; height: 36px; line-height: 36px; font-family: Trebuchet MS; font-size: 12px; font-weight: bold; margin-left:5px;} #page\_top\_menu li a {float:left; width:6em; text-decoration:none; color:black; padding:0.2em 0.6em;} #page\_top\_menu li a span {display: block; height: 36px; cursor: pointer;} #page\_top\_menu li a:hover {background-color:#e09d1a; color:white;} #page\_top\_menu li a.active {background: #e09d1a; color: white;} #page\_header {height: 328px; background: red; } #header\_1 {background: url('../images/header\_1.jpg') no-repeat; height: 328px; width:754px; float:left;} #header\_cont {float:left; width:318px; height: 328px; background: #594c46;} #header\_cont ul {font-size: 25px; list-style-type: none; font-family: 'Roboto'; font-weight: 500; font-size: 18px; color: white;} #bronze-box {padding:18px; text-align: right;} .hr {border: 0; color: #6c615b ;background-color: #6c615b ;height: 1px;} span.thin { font-family: 'Roboto'; font-weight: 100; font-size: 36px; color: white;} span.bold { font-family: 'Roboto'; font-weight: 700; font-size: 36px; color: white;} #header\_2 {background: url('../images/header\_2.jpg') no-repeat; height: 328px; width:100px; float:left;} #page\_content {float:left; width: 754px; height: 600px; background: red;} #page\_right\_panel {float: left; width:418px; height: 600px; background: blue;} #right\_panel\_inside {float: left; width:318px; height: 600px; background: gray;} #bronze-panel { height: 360px; background: #665953;} #copyright { height: 60px; background: red;} /\* CSS Accordion styles \*/ dl { padding: 10px; min-width: 400px; } dl dt { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #cccccc; margin: 0; } dl dt a { color: #ffffff; font-weight: bold; text-decoration: none; padding: 10px; display: block; } dl dd { color: #cccccc; margin: 0; overflow: hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease; } dl dd p { padding: 10px; margin: 0; } dl dd:not(:target) { height: 0; } dl dd:target { height: 6.667em; } dl a.ie:hover dd, dl a.ie:focus dd { height: auto; color: #cccccc !important; }

Prosze o pomoc, pozdrawiam.