К главе № 6 "И ещё…"

Обсуждение вопросов, проблем связанных с обучением HTML

К главе № 6 "И ещё…"

Сообщение Женечка » 26 сен 2012, 04:14

Вопрос касаемо бегущей строки. :laie: Есть код:
<div class="submenu_m"><center><img src="zn1.gif" align="top" width="25" height="25"></center><p><b> &nbsp;&nbsp;&nbsp;Полезные советы</b><br>&nbsp;<br><marquee scrollamount="1" direction="up"><a href="material.html" target="_blank"><center><small>Выбираем материал</a><br><br><a href="tip.html" target="_blank">Тип конструкции</a><br><br><a href="zamer.html" target="_blank">Сделать замеры</a></small></center></marquee></p></div>
Смысл: в отдельном блоке бегущие снизу вверх строки со ссылками на соответствующие статьи на отдельных страницах. Непонятка моя в том, что не могу уменьшить высоту самого блока-окна. Т.е. очень большое расстояние от начальной нижней точки пути первой бегущей строки до точки когда они исчезают. Попытки сузить размер высоты div блока в css файле результатов не дали. На всякий пожарный css файл:
a{color:#000060;font-weight:bold;text-align:center;}
a:hover{color:#000060;font-weight:bold;text-align:center;}
body
{
margin-left: 1%;
margin-right: 1%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;

}
div
{
margin: 0px;
padding: 0px;
border:0px;
/*border: 1px solid black;*/
}
.all
{
}
.logo_and_submenu
{
clear: both;
}
.logo
{
float: right;
}

.submenu
{
padding: 10px 25px 10px 10px;
float: right;
width: 160px;
min-height: 500px;
}

.submenu_A
{
width: 140px;
min-height: 220px;
padding: 10px 10px 10px 10px;
background-color: #f0e68c;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #32cd32;
}

.submenu_m
{
clear: both;
margin-top: 40px;
width: 140px;
min-height: 200px;
padding: 10px 10px 10px 10px;
background-color: #f0e68c;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #32cd32;
}
#horizontal_menu
{
float: left;
list-style:none;
padding:0;
margin:10;
}
#horizontal_menu li{border: 1px solid #ffffff;
float:left;
height:25px;
padding:0;
margin:0;
width:145px;
background-color: #daa520;
position:relative;
}

#horizontal_menu li ul{border: 1px solid #ffffff;
list-style:none;
padding:0;
margin:0;
width:145px;
display:none;
position:absolute;
left:0;
top:25px;
}

#horizontal_menu li ul li{border: 1px solid #ffffff;
float:none;
height:25px;
margin:0;
width:145px;
background:#daa520;
}

#horizontal_menu li a{border: 1px solid #ffffff;
display:block;
width:145px;
height:25px;
}
#horizontal_menu li:hover ul, horizontal_menu li.jshover ul{
display:block;
}

#horizontal_menu li:hover, #horizontal_menu li.jshover{
background:#ff8c00;
}
.horizontaloe_menu
{height:20px;
background-color: #daa520;
clear: both;
float: right;
font-size: 9pt;
}

.horizontalnoe_menu
{height:20px;
background-color: #daa520;
clear: both;
float: left;
font-size: 9pt;
}

.search
{
clear: right;
float: right;
margin-top: 5px;
margin-right: 50px;
width: 300px;
}

.vertical_menu
{
clear: both;
float: left;
width: 200px;
font-size: 10pt;
background-color: #669999;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #669999;
}

.main
{
margin-left: 180px;

}
.breadcrumb
{
background-color: #32cd32;
padding: 5px;
font-size: 10pt;
}
.content
{margin: 10px;
padding: 5px 200px 5px 25px;
}
.middle
{
clear: both;

}
.copyright_line
{
clear: both;

padding: 10px;
}
.vertical_menu_item, .horizontaloe_menu_item
{
font-weight: bold;
font-size: 110%;
}
.horizontaloe_menu_item
{
padding: 5px 25px 5px 25px;
}
.vertical_menu_item
{
padding: 7px 5px 5px 15px;
}

a img{border:none;}

#gallery1{clear: both;
float: right;
width:503px;
height:297px;
overflow:hidden;
position:relative;
z-index:1;
margin:0 auto 100px auto;
}
#tabs1{
list-style:none;
padding:0;
margin:0;
width:200px;
height:297px;
float:right;
}
#tabs1 li{
padding:0;
margin:0;
float:right;
}
#tabs1 li a img{
display:block;
width:190px;
height:31px;
}
#tabs1 li a{
display:block;
border:3px solid #ffffff;
width:190px;
height:31px;
}
#tabs1 li a:hover{border:3px solid #000;}
#tabs1 li a img.fullPic, #gallery1 div{
position:absolute;
z-index:1;
right:200px;
top:0;
width:373px;
height:297px;
}
#tabs1 li a:hover img.fullPic{z-index:3;}
#gallery1 div{
z-index:2;
background:#fff;

Заранее благодарна
}
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: К главе № 6 "И ещё…"

Сообщение Алексей » 26 сен 2012, 10:42

В CSS:
Код: Выделить всё
.submenu_m
{
clear: both;
width: 140px;
margin-top: 40px;
height: 200px; /* Указываем нужную высоту блока */
overflow: hidden; /* Обрезаем блок в том случае если размеры блока меньше его содержания */
padding: 10px 10px 10px 10px;
background-color: #f0e68c;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #32cd32;
}
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: К главе № 6 "И ещё…"

Сообщение Женечка » 28 сен 2012, 13:42

Спасибочки, спасибочки!!! Все просто замечательно!!! :-D
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: К главе № 6 "И ещё…"

Сообщение Женечка » 28 сен 2012, 14:13

:?: Извиняюсь что слегка не в той теме вопрос, просто уж коли код css.файла перед глазами. Заметила что у меня выпадающее меню <div class="horizontal_menu"> выкидывает вниз строчки "horizontal_menu li ul li" НА ЗАДНЕМ ПЛАНЕ ТАК, ЧТО БЛОК "gallery1" ОКАЗЫВАЕТСЯ ПОВЕРХ НЕГО. Т.е. за картинками блока "gallery1" не видно что написано на выпадающих кнопках горизонтального меню. Может мне спустить пониже блок галереи, но тогда он получается на мой вкус низковат....Или нужен еще какой дополнительный блок? :umnik:
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: К главе № 6 "И ещё…"

Сообщение Алексей » 30 сен 2012, 13:11

Вот интересно как по Вашему я догадаюсь где какие блоки и картинки у Вас??
HTML код нужно смотреть.
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: К главе № 6 "И ещё…"

Сообщение Женечка » 01 окт 2012, 02:46

Ох пардон ;))? Сказываются бессонные ночи-деточка болеет...
<body background="f1.gif">
<div class="all">
<div class="logo_and_submenu">
<div class="logo"><img alt="Логотип Splendot" src="logn1.gif">
</div>
</div>
<div class="horizontal_menu">
<ul id="horizontal_menu">
<li><a href="#" style="text-decoration:none">Главная</a></li>
<li>
<a href="new.index.html" style="text-decoration:none">Услуги</a>
<ul>
<li><a href="#" style="text-decoration:none">Производство</a></li>
<li><a href="freza.html" style="text-decoration:none">Резка материала</a></li>
<li><a href="remont.html" style="text-decoration:none">Ремонт и демонтаж</a></li>
<li><a href="#" style="text-decoration:none">Прочее</a></li>
</ul>
</li>
<li>
<a href="#" style="text-decoration:none">Стоимость</a>
<ul>
<li><a href="#" style="text-decoration:none">1</a></li>
<li><a href="#" style="text-decoration:none">2</a></li>
<li><a href="#" style="text-decoration:none">3</a></li>
<li><a href="#" style="text-decoration:none">4</a></li>
<li><a href="#" style="text-decoration:none">5</a></li>
<li><a href="#" style="text-decoration:none">6</a></li>

</ul>
</li>
<li><a href=".html" style="text-decoration:none"></a></li>
<li><a href="kontakt.html" style="text-decoration:none">Контакты</a></li>
</ul>
</div>
<div class="search">
<form action="" method="get">
<p><input name="" size="30" type="text" value="Введите текст для поиска..." />
<input name="" type="button" value="Поиск" /></p>
</form>
</div>
<div class="middle">
<div class="vertical_menu">
<p class="vertical_menu_item"><a class="white_link" href="#">1</a></p>
<p class="vertical_menu_item"><a class="white_link" href="svetoreklama.html">2</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">3</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">4</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">5</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">6</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">7</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">8</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">9</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">10</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">11</a></p>
<p class="vertical_menu_item"><a class="white_link" href="#">12</a></p>
<a href="http://www.mskpogoda.ru" target="_blank"><img src="http://www.mskpogoda.ru/mskpogoda.ru?b=0&t=97" alt="Погода в Москве - www.mskpogoda.ru" border=0></a><br>&nbsp;</div>
<div class="main">
<div class="breadcrumb"><a href=".html" style="text-decoration:none"> &nbsp;&nbsp;Фотогалерея</a> &nbsp; | &nbsp;<a href="mailto:reklama-viveski@yandex.ru" style="text-decoration:none"> &nbsp;Задать вопрос&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
<div class="submenu">
<div class="submenu_A"><img src="kar2.gif" align="top" width="140" height="50"><p><b><i>"Возможность получать подобна океану. Проблема состоит в том, что большинство людей подходит к этому океану возможностей с чайной ложкой." <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Джим Рон<br><center><img src="p.gif" width="35" height="35"></center></b></i></p></div>
<div class="submenu_m"><center><img src="z3.gif" align="top" width="65" height="50"></center><p><b> &nbsp;&nbsp;&nbsp;Полезные советы</b><br>&nbsp;<br><marquee scrollamount="1" direction="up"><a href="material.html"><center><small>Выбираем материал</a><br><br><a href="tip.html">Тип конструкции</a><br><br><a href="zamer.html">Сделать замеры</a></small></center></marquee></p></div>
</div>

</div>
<div class="content">
<div id="gallery1">
<ul id="tabs1">
<li><a href="svetov.korob.html"><img src="k1.gif" /><img src="kor.jpeg" class="fullPic"/></a></li>
<li><a href="bukvi.html"><img src="k2.gif" /><img src="akril.jpeg" class="fullPic"/></a></li>
<li><a href="KRONSTEIN.html"><img src="k3.gif" /><img src="bukva.jpeg" class="fullPic"/></a></li>
<li><a href="stender.html"><img src="k4.gif" /><img src="aptkrest.jpeg" class="fullPic"/></a></li>
<li><a href="svetov.korob.html"><img src="k5.gif" /><img src="ukaz.jpeg" class="fullPic"/></a></li>
<li><a href="bukvi.html"><img src="k6.gif" /><img src="krons.jpeg" class="fullPic"/></a></li>
<li><a href="KRONSTEIN.html"><img src="k8.gif" /><img src="v.n1.1.gif" class="fullPic"/></a></li>
<li><a href="stender.html"><img src="k9.gif"/><img src="v.n1.2.gif" class="fullPic"/></a></li>
</ul>
</div>
</div>
<div class="horizontaloe_menu">
<span class="horizontaloe_menu_item"><a href="new.index.html" style="text-decoration:none"> Главная</a></span>&nbsp;|
<span class="horizontaloe_menu_item"><a href="usluga.html" style="text-decoration:none"> Услуги</a></span>&nbsp;|
<span class="horizontaloe_menu_item"><a href="cena.html" style="text-decoration:none"> Стоимость</a></span>&nbsp;|
<span class="horizontaloe_menu_item"><a href="sait.html" style="text-decoration:none"> Веб-студия</a></span>&nbsp;|
<span class="horizontaloe_menu_item"><a href="kontakt.html" style="text-decoration:none"> Контакты</a></span>
</div>
<div class="copyright_line"><p>© 2011-2012. <a href="mailto:reklama-viveski@yandex.ru" style="text-decoration:none">www.reklamastyle.</p>
</div>
</body>
</html>
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: К главе № 6 "И ещё…"

Сообщение Алексей » 01 окт 2012, 21:19

Чёт я так и не собрал эту страницу.. всё у меня поплыло куда то.. :)? и ничего я так и не увидил.. Ну до ладно.. попробуйте добавить в стилях z-index с большим значением нежели чем у всех остальных блоков ( z-index:4;) к тем блокам которые по задумке должны наслаиваться выше..
//
На этом форуме, помимо прочих, есть BB тег "Code"..
Так выделив некий код и нажав кнопочку "Code" можно обозначить отдельный участок текста как код.. например:
Код: Выделить всё
Это блок с кодом..

;)
Вот допустим все Ваши стили:
Код: Выделить всё
a{color:#000060;font-weight:bold;text-align:center;}
a:hover{color:#000060;font-weight:bold;text-align:center;}
body
{
margin-left: 1%;
margin-right: 1%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;

}
div
{
margin: 0px;
padding: 0px;
border:0px;
/*border: 1px solid black;*/
}
.all
{
}
.logo_and_submenu
{
clear: both;
}
.logo
{
float: right;
}

.submenu
{
padding: 10px 25px 10px 10px;
float: right;
width: 160px;
min-height: 500px;
}

.submenu_A
{
width: 140px;
min-height: 220px;
padding: 10px 10px 10px 10px;
background-color: #f0e68c;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #32cd32;
}

.submenu_m
{
clear: both;
margin-top: 40px;
width: 140px;
min-height: 200px;
padding: 10px 10px 10px 10px;
background-color: #f0e68c;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #32cd32;
}
#horizontal_menu
{
float: left;
list-style:none;
padding:0;
margin:10;
}
#horizontal_menu li{border: 1px solid #ffffff;
float:left;
height:25px;
padding:0;
margin:0;
width:145px;
background-color: #daa520;
position:relative;
}

#horizontal_menu li ul{border: 1px solid #ffffff;
list-style:none;
padding:0;
margin:0;
width:145px;
display:none;
position:absolute;
left:0;
top:25px;
}

#horizontal_menu li ul li{border: 1px solid #ffffff;
float:none;
height:25px;
margin:0;
width:145px;
background:#daa520;
}

#horizontal_menu li a{border: 1px solid #ffffff;
display:block;
width:145px;
height:25px;
}
#horizontal_menu li:hover ul, horizontal_menu li.jshover ul{
display:block;
}

#horizontal_menu li:hover, #horizontal_menu li.jshover{
background:#ff8c00;
}
.horizontaloe_menu
{height:20px;
background-color: #daa520;
clear: both;
float: right;
font-size: 9pt;
}

.horizontalnoe_menu
{height:20px;
background-color: #daa520;
clear: both;
float: left;
font-size: 9pt;
}

.search
{
clear: right;
float: right;
margin-top: 5px;
margin-right: 50px;
width: 300px;
}

.vertical_menu
{
clear: both;
float: left;
width: 200px;
font-size: 10pt;
background-color: #669999;
border-radius:20px;
-moz-border-radius:20px;
-khtml-border-radius:20px;
border: 3px solid #669999;
}

.main
{
margin-left: 180px;

}
.breadcrumb
{
background-color: #32cd32;
padding: 5px;
font-size: 10pt;
}
.content
{margin: 10px;
padding: 5px 200px 5px 25px;
}
.middle
{
clear: both;

}
.copyright_line
{
clear: both;

padding: 10px;
}
.vertical_menu_item, .horizontaloe_menu_item
{
font-weight: bold;
font-size: 110%;
}
.horizontaloe_menu_item
{
padding: 5px 25px 5px 25px;
}
.vertical_menu_item
{
padding: 7px 5px 5px 15px;
}

a img{border:none;}

#gallery1{clear: both;
float: right;
width:503px;
height:297px;
overflow:hidden;
position:relative;
z-index:1;
margin:0 auto 100px auto;
}
#tabs1{
list-style:none;
padding:0;
margin:0;
width:200px;
height:297px;
float:right;
}
#tabs1 li{
padding:0;
margin:0;
float:right;
}
#tabs1 li a img{
display:block;
width:190px;
height:31px;
}
#tabs1 li a{
display:block;
border:3px solid #ffffff;
width:190px;
height:31px;
}
#tabs1 li a:hover{border:3px solid #000;}
#tabs1 li a img.fullPic, #gallery1 div{
position:absolute;
z-index:1;
right:200px;
top:0;
width:373px;
height:297px;
}
#tabs1 li a:hover img.fullPic{z-index:3;}
#gallery1 div{
z-index:2;
background:#fff;
}

Так удобнее просто топики читать..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: К главе № 6 "И ещё…"

Сообщение Женечка » 02 окт 2012, 21:20

Спасибо , буду пробовать.
А у меня вся моя галимотья-т.е. код страницы работает (в домашних условиях, на хосте еще не выкладывала-не видала)
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: К главе № 6 "И ещё…"

Сообщение Алексей » 02 окт 2012, 21:48

А у меня вся моя галимотья-т.е. код страницы работает

Да то может я чего то не понял.. к тому же Ваших рисунков у меня нет с ними может быть всё нормально смотрелось.. Ну попробуйте z-index а там дальше видно будет..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: К главе № 6 "И ещё…"

Сообщение Женечка » 02 окт 2012, 22:38

Никак не могу приучить себя думать комплексно,т.е. держать под рукой в своем чердаке=голове все знания сразу и подбирать нужное как пазлы. А может и не дано... :(
Короче все получилось и ведь решение вопроса то не трудное. :-D Уж даже не знаю что для Вас сделать полезное в знак благодарности за все советы-простая ссылка со своего сайта кажется мне маловато.
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44


Вернуться в HTML

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron
Рейтинг@Mail.ru