Вход | Регистрация | FAQ
Anonymous

как сделать что бы один блок не закрывал элементы другого

+ Ответить

Сообщений: 3 Страница 1 из 1


как сделать что бы один блок не закрывал элементы другого

stazot » Чт апр 17, 2014 7:27 am

Всем доброго времени суток!
я не давно занялся HTML примерно 1-2 недели.
Имеется страница и она размечена дивами, блоки: заголовок, левая панель, контент,правая панель авторизации
В заголовке 4 блока логотип, инфо и поиск стоят в ряд и под ними блок навигации.
в блоке навигации располагается список элементов и предполагается что в элементах этого списка будут еще выпадающие списки
Пожалуйста помогите решить проблему, а она в следующем:
когда я создал выпадающий список он пропадает под блоком Контент!


P.S.
блоки позиционируются относительно с помощью float

Вложения

  1. Безымянный.PNG (23.83 Кб) Скачиваний: 1782
    скриншот проблемной страницы

Аватара пользователя

stazot

  • Сообщения: 2
  • Зарегистрирован: Чт апр 17, 2014 7:01 am

Re: как сделать что бы один блок не закрывал элементы друго

XainPro » Чт апр 17, 2014 10:26 am

HTML

Код: Выделить всё
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>


CSS

Код: Выделить всё
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm

Re: как сделать что бы один блок не закрывал элементы друго

stazot » Чт апр 17, 2014 10:46 am

код HTML
<div id="main">

<!--Заголовок-->
<div id="Header">
<!--логотип-->
<div id="header_logo">
<h1><span>Sota</span> Serv<span name="i">i</span>ce</h1>
<p>Авторизованный сервисный центр </p>
<p>Authorized service center</p>

</div>
<!--информация-->
<div id="header_info">контент</div>
<!--поиск-->
<div id="header_search">
<form action="" method="post" name="searchform">
<input type="hidden" name="do" value="search">
<input type="hidden" name="subaction" value="search">
<input type="image" src="{THEME}/images/search.gif" name="send_search" width="45" height="45">
<input type="text" name="story" placeholder="Поиск" id="story">
</form>
</div>
<!--панель навигации-->
<div id="menu">
<div class="navigation" id="main-page"><a href="">Главная</a></div>

<div class="navigation" id="news-page"><a href="">Новости</a></div>

<div class="navigation" id="about-us-page"><a href="">О нас</a></div>

<div class="navigation" id="articles-page"<a href="">Статьи</a></div>

<div class="navigation" id="services-page"><a href="">Услуги</a></div>

<div class="navigation" id="repair-page"><a href="">Ремонт телефонов</a>

<ul>
<li><a href=""></a>Клиентам</li>
<li><a href=""></a>Партнерам</li>
<li><a href=""></a>Филиалам</li>
</ul>

</div>

</div>
</div>
<div style="position: fixed;"></div>
<!--левая панель-->
<div id="left-sb">
<div id="wether">погода<br>
все о погоде</div>
</div>
<!--Материал-->
<div id="content">
{info}{content}
</div>

</div>

код CSS
#main
{
width: 1000;

margin:50px auto;
box-shadow: 0px 2px 3px 000;
border: solid 1px ##120a8f;
overflow: hidden;

}


#header
{
width: 100%;
margin: 0px;
height: 150;
border-radius: 4;





}
#header_logo
{

width: 350; height: 96;
float:left;
margin-top: 10; margin-left: 40;
outline: 1px solid #0f0;
background-color: rgba(0,0,0,0.01);
}

#header_logo h1
{
height: 55;
font-size: 55;
font-style: bold;
color: #969696;

}
#header h1 span
{
color: #AAAAAA;
}
#header h1 span[name=i]
{
color: #0f0;
}

#header p
{
float: right;
padding-left: 65;
padding-top: -15;
color: #F8FC00;
font-size:14;
font-weight: 900;
}



#header_info
{
outline: 1px solid;
width: 375; height: 86;
float: left;
margin-top: 10;
padding:5;
margin-bottom: 5px;

}
#header_search
{
width: 200; height: 96;
float:left;
margin-top: 10; margin-left: 5;

background-color: rgba(0,0,0,0.01);
outline: 1px solid #0f0; }


input[name=story]
{
width: 160;
height: 30;
float: right;
border: none;
margin-top: 10px;
box-shadow: inset 0px 1px 3px #555;
margin-right: 3px;
padding-bottom:0px 3px;

}
input[name=send_search]
{
width: 30; height: 30;
box-shadow: 1px 2px 3px #555;
float: right;
margin-right: 5px;
border-radius: 10px;
margin-top: 12px;

}

#menu
{
width: 900; height: 35;
outline: 1px red solid;
clear: both;
margin:2 auto;
margin: 5px auto;





}
#menu a
{
display: block;
text-decoration: none;
font-size: 14;
font-family: "century gothic"Arial, tahoma;
color: #eaeaea;

}
.navigation
{

width: 16.5%;
line-height: 30px;
border-right: 1px solid yellow;
float: left;
color: #fff;
margin-top: 2;
text-align: center;
}
#repair-page ul
{
list-style: none;
margin-top:5;
outline: solid;
display: none;
position: relative;
}
#repair-page:hover ul
{
display: inline-block;
}
#left-sb
{
clear: both;
float: left;
width: 25%;
background-color: #ededed;
min-height: 200px;
margin-top: 10;

}
#wether
{
width: 95%;
line-height: 20px;
background-color: 333;
color: #f0f0f0;
margin:5;
}

#content
{

width: 60%;
float: left;
margin: 5;
margin-top:10;

}
теперь все видно но блоки которые ниже т.е. content и left-sb сдвигаются вниз на высоту списка
Аватара пользователя

stazot

  • Сообщения: 2
  • Зарегистрирован: Чт апр 17, 2014 7:01 am


+ Ответить

Страница 1 из 1