div в div'e

spn_one · February 4, 2013

Вопросик=)

мне нужно отпозиционировать список ... в коде я его поставил между комменттариями

<!--

ТО ЧТО ТРЕБУЕТСЯ ОТПОЗИЦИОНИРОВАТЬ - (НАЧАЛО СПИСКА)

-->

и соответственно

<!--

ТО ЧТО ТРЕБУЕТСЯ ОТПОЗИЦИОНИРОВАТЬ - (КОНЕЦ СПИСКА)

-->

Хотелось бы чтобы он был над выпадающим меню, и не потерял "кликабельность" ...


<!DOCTYPE html>
<html>
<head>
<title>JAGUAR</title>
<style>
*{margin:0;padding:0;}
body {
font: 14px/1.4 Georgia, serif;
background: #333;
overflow-x: hidden;
}
.menu {
position:absolute;
padding-top:253px;
padding-left:48px;
margin:0 auto;
}
.nav {

box-shadow:10px 10px 10px rgba(0,0,0,0.5);
min-width: 800px;
padding: 0;
font-size: 100%;
font-family: Georgia;
}
.nav li {
list-style: none;
float : left;
height: 33px;
padding: 0;
width: 150px;
text-align: center;
background: url(http://jaguar-pw.clan.su/menu/fon_knopki_menju.png) repeat ;
position: relative;
padding-top: 12px;
}
.nav li ul {
list-style: none;
padding: 0;
margin: 0;
width: 160px;
display: none;
position: absolute;
left: 0;
top: 45px;
}
.nav li ul li {
box-shadow:10px 10px 10px rgba(0,0,0,0.5);
color:#000;
height: 33px;
margin: 0;
width: 150px;
text-align: center;
background: #3366cc;
}
.nav li a {
text-shadow: black 1px 0px, black 1px 1px, black 0px 1px, black -1px 1px, black -1px 0px, black -1px -1px, black
0px -1px, black 1px -1px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px,
black 0 0 3px, black 0 0 3px;
display: block;
width: 150px;
height: 33px;
color: #fff;
text-decoration: none;
}
.nav li a:hover { color: #36c; }
.nav li:hover ul {
display: block;
}
.nav li:hover { background: #ffffff; color:#000;}
.border {border-right: 1px solid #ffffff;border-top: 1px solid #ffffff;border-bottom: 1px solid #ffffff;}
.page5 {border-top-right-radius: 42px; border-top: 1px solid #ffffff;border-bottom: 1px solid #ffffff;}
.page1 {border-top-left-radius: 42px ; border-right: 1px solid #ffffff; border-top: 1px solid #ffffff; border-
bottom: 1px solid #ffffff;}
.pages {border-top: 1px solid #ffffff;border-bottom: 1px solid #ffffff;}
.link {border-bottom-right-radius: 25px; border-bottom-left-radius: 25px;}
.razdel {border-bottom: 1px solid #ffffff;}/*меню-конец*/

.fon {
background: url(http://jaguar-pw.clan.su/ostrovf.png) no-repeat;
height:300px;
width:850px;
margin:0 auto;
}

.content {
box-shadow:10px 10px 10px rgba(0,0,0,0.5);
opacity:1;
margin:0 auto;width: 754px;
height:500px;
background: #fff ;
}


.footer {
box-shadow:10px 10px 10px rgba(0,0,0,0.5);
opacity:1;
margin:0 auto;
width: 754px;
height:50px;
background: #999999;
border-bottom-right-radius: 42px;
border-bottom-left-radius: 42px;
font-face: 1 ;
}

#spisok {position:absolute;
margin:100px;
padding-top:100px;}

.spisok li { list-style: none;
float : left;
height: 33px;
padding: 5px;
width: 90px;
text-align: center;
background: url() repeat-x repeat-y ;
position: relative;
padding-top: 12px;
}

.spisok li a {
text-shadow: black 1px 0px, black 1px 1px, black 0px 1px, black -1px 1px, black -1px 0px, black -1px -1px, black
0px -1px, black 1px -1px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px, black 0 0 3px,
black 0 0 3px, black 0 0 3px;
display: block;
width: 80px;
height: 33px;
color: grey;
text-decoration: none;
}
.spisok li a:hover { color: orange; }

</style>
</head>
<body>
<!--шапка-начало !-->
<div class="fon">
<!--
ТО ЧТО ТРЕБУЕТСЯ ОТПОЗИЦИОНИРОВАТЬ - (НАЧАЛО СПИСКА)
-->
<div class="spisok">
<ul class="spis">
<li><a href="#">Ссылка один</a></li>
<li><a href="#">Ссылка два</a></li>
<li><a href="#">ссылка три</a></li>
<li><a href="#">Ссылка Четыре</a></li>
<li><a href="#">Ссылка пять</a></li>
</ul> </div>
<!--
ТО ЧТО ТРЕБУЕТСЯ ОТПОЗИЦИОНИРОВАТЬ - (КОНЕЦ СПИСКА)
-->
<!--меню начало!-->
<div class="menu">
<ul class="nav">
<li class="page1">
<a href="http://jaguar-pw.clan.su/">1</a>
</li>


<li class="border">
<a href="">2</a>
<ul>
<li class="razdel"><a href="#">1</a></li>
<li class="link"><a href="#">2</a></li>
</ul>
</li>
<li class="border">
<a href="#">2</a>
<ul>
<li class="razdel"><a href="#">1</a></li>
<li class="razdel"><a href="#">2</a></li>
<li class="razdel"><a href="#">3</a></li>
<li class="razdel"><a href="#">4</a></li>
<li class="link"><a href="#">5</a></li>
</ul>
</li>
<li class="border">
<a href="#">4</a>
<ul>
<li class="razdel"><a href="#">1</a></li>
<li class="link"><a href="#">2</a></li>
</ul>
</li>
<li class="page5">
<a href="#">5</a>
<ul>
<li class="razdel"><a href="#">0</a></li>
<li class="razdel"><a href="#">1</a></li>
<li class="razdel"><a href="#">2</a></li>
<li class="razdel"><a href="#">3</a></li>
<li class="razdel"><a href="#">4</a></li>
<li class="link"><a href="#">5</a></li>
</ul>
</li>
</ul>
<!--меню конец!-->
</div>
</div>
<!--шапка-конец !-->
<!--Контент начало!-->
<div class="content">
контент)
</div>
<!--Контент конец-->
<!--подвал начало-->
<div class="footer">
подвал
</div>
<!--подвал конец-->
</body>
</html>

правда в CSS много лишнего написано, не успел удалить перед отправкой..

Sign In

div в div'e

Question

spn_one

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information