Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 06.10.2015, 23:12   #1
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию Помогите отредактировать меню

Помогите отредактировать горизонтальное выпадающее меню не как не получается сделать то что нужно ))
вот html :

Код HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Производство сендвич панелей пвх в СПБ </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page-align" class="b3radius">
<div id="header">
<div id="header_nav">
<ul>
<li class="headerList"><a href="#">Главная </a></li>
<li class="headerList"><a href="#">Новости </a>
<ul>
<li><a href="#"> меню 1</a></li>
<li><a href="#">Новый пункт меню 2</a></li>
<li><a href="#">Новый пункт меню 3</a></li>
</ul>
</li>
<li class="headerList"><a href="#"> Статьи </a></li>
<li class="headerList"><a href="#">Халява </a></li>
<li class="headerList"><a href="#">Сообщество</a></li>
<li class="headerList"><a href="#"> Спорт </a></li>
<li class="headerList"><a href="#"> Погода </a></li>


</ul>

</div>
<div id="header_spase"></div>
<div id="header_cont">
<div id="text_logo">
<h1>Завод<span style="color: #98ca60">Окон</span></h1>
<span class="h1description"></br>Производство окон ПВХ</span>

</div> 
</div>
</div>
<div id="sidebar" class="f_left">

</div>
<div id="content" class="f_right">

</div>
<div class="clr"></div>
</div>
</body>
</html>
вот CSS :
* {
margin: 0;
padding: 0; 
}
body {
background: url(images/background.png);
font: 16px Arial, Tahoma, sens-serif;
}
a {
text-decoration: none;
}
h1 {
font-size: 20px;
color: #515151;
}

.f_left, #header_nav ul li, h1, #text_logo {
float: left;
}
.f_right, {
float: right;
}
.b3radius {
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
}
.h1description {
color: #9d9d9d;
font-size: 15px;

}
#page-align{
width: 1000px;
margin: 35px auto;
box-shadow: 0px 1px 3px #dddddd;
-webkit-box-shadow: 0px 1px 3px #dddddd;
overflow: hidden;
}
#header {
height: 280px;
border-bottom: solid 3px #c7d4e1;
}
#header_spase{
height: 20px;
border-bottom: solid 3px #c7d4e1;
}
#header_nav {
height: 70px;
border-bottom: solid 3px #c7d4e1;
background: #fff;
}

#header_nav ul {
padding:0;
margin:0;
list-style:none;
position:relative;
}

#header_nav ul li{
display:block;
line-height: 70px;
}

.headerList a{
border-right:solid #505e58 thin;
}
#header_nav ul li a{
display:block;
padding-left:13px;
padding-right:13px;
color:#6f6f6f;
text-decoration:none;
}

#header_nav ul li a:hover{ 
background: #98ca60;
height: 70px;
color:#fff;
}

#header_nav ul ul{
position:absolute;
top:70px;
background: rgba(152, 202, 96, 0.68);
border:thin solid #849c92;
display:none;
}

#header_nav ul li:hover ul{
position:absolute;
left:0;
display:block;

}

#header_nav ul ul li a{
border:none;
color:#6f6f6f;
}

#text_logo {
color: #515151;
margin-left: 20px;
margin-top: 40px;
}
.header_text {
color: #515151;

}
.header_text span {
font-size: 10px;
color: #b6b6b6;
}
#header_cont {
height: 60px;
}

#sidebar {
width: 195px;
height: 400px;
border-right: solid 3px #98ca60;
background: #e7e7e7;
}
#content {
width: 800px;
height: 400px;
}
.clr {
clear: both;
}
------------------------------------
хочу что бы выпадающий список отображался не горизонтально а вертикально и при наведении на выпадающий список цвет активной родительской ссылки не менялся на белый...вообще в идеале хочу вот такое получить меню как на этом сайте http://veka-spb.ru/

Последний раз редактировалось Вадим Мошев; 07.10.2015 в 09:27.
Shooter18 вне форума Ответить с цитированием
Старый 06.10.2015, 23:13   #2
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию

А вот ссылка на менюшку которую пытаюсь отредактировать http://oknaspb.esy.es/
Shooter18 вне форума Ответить с цитированием
Старый 08.10.2015, 10:14   #3
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Стрелка Примерно так...

Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
ul {
  text-align:left;
  display:inline;
  margin:0;
  padding:10px 0;
  list-style:none;
}
ul li {
  font:15px/18px sans-serif;
  display:inline-block;
  margin-right:-4px;
  position:relative;
  padding:15px 20px;
  background:#fff;
  cursor:pointer;
}
ul li:hover {
  background:#98ca60;
  color:#fff;
}
ul li ul {
  padding:0;
  position:absolute;
  top:48px;
  left:0;
  width:150px;
  box-shadow:none;
  display:none;
  opacity:0;
  visibility:hidden;
}
ul li ul li {
  background:#B9DB93;
  display:block;
  color:#444;
}
ul li ul li:hover {background:#98ca60;}
ul li:hover ul {
  display:block;
  opacity:1;
  visibility:visible;
}
.menu {text-align:center;}
</style>
</head>
<body>
<div class="menu">
<ul>
  <li>Home</li>
  <li>Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog
    <ul>
      <li>Строка 1<br>Строка 2</li>
      <li>Некий подпункт</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>About</li>
</ul>
</div>
</body>
</html>
SQLPowerUser вне форума Ответить с цитированием
Старый 08.10.2015, 17:36   #4
kinos.pro
Новичок
Джуниор
 
Регистрация: 14.09.2015
Сообщений: 1
По умолчанию

Чтобы выстроить пункты по вертикали - перезадайте float: none; элементам вложенного списка.
Сделать слайдер можно на css/js, а можно на чистом кошерном css3 по данному примеру:
http://codepen.io/ac1714/pen/AvnHf/
kinos.pro вне форума Ответить с цитированием
Старый 08.10.2015, 20:42   #5
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию

Цитата:
Сообщение от SQLPowerUser Посмотреть сообщение
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
ul {
  text-align:left;
  display:inline;
  margin:0;
  padding:10px 0;
  list-style:none;
}
ul li {
  font:15px/18px sans-serif;
  display:inline-block;
  margin-right:-4px;
  position:relative;
  padding:15px 20px;
  background:#fff;
  cursor:pointer;
}
ul li:hover {
  background:#98ca60;
  color:#fff;
}
ul li ul {
  padding:0;
  position:absolute;
  top:48px;
  left:0;
  width:150px;
  box-shadow:none;
  display:none;
  opacity:0;
  visibility:hidden;
}
ul li ul li {
  background:#B9DB93;
  display:block;
  color:#444;
}
ul li ul li:hover {background:#98ca60;}
ul li:hover ul {
  display:block;
  opacity:1;
  visibility:visible;
}
.menu {text-align:center;}
</style>
</head>
<body>
<div class="menu">
<ul>
  <li>Home</li>
  <li>Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog
    <ul>
      <li>Строка 1<br>Строка 2</li>
      <li>Некий подпункт</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>About</li>
</ul>
</div>
</body>
</html>
как это применить в отдельном css файле??
Shooter18 вне форума Ответить с цитированием
Старый 08.10.2015, 20:47   #6
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию

Цитата:
Сообщение от kinos.pro Посмотреть сообщение
Чтобы выстроить пункты по вертикали - перезадайте float: none; элементам вложенного списка.
Сделать слайдер можно на css/js, а можно на чистом кошерном css3 по данному примеру:
http://codepen.io/ac1714/pen/AvnHf/
Куда конкретно вставить float:none; что бы было счастье??не получается..все равно по горизонтали ...
Shooter18 вне форума Ответить с цитированием
Старый 08.10.2015, 20:53   #7
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию

Если кто знает решение проблемы напишите пожалуйста! а то надоело это "гадание на кофейной гущще"
Shooter18 вне форума Ответить с цитированием
Старый 08.10.2015, 21:14   #8
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Вопрос Основы HTML/CSS

>>> как это применить в отдельном css файле??
Не совсем понятно.... CSS находится между тегами <style>
Я привёл готовый пример работающего HTML-файла. Скопировать и пользоваться. Если копировать влом, то результат смотрим здесь http://jsfiddle.net/obqmxg2m/

Последний раз редактировалось SQLPowerUser; 08.10.2015 в 21:28.
SQLPowerUser вне форума Ответить с цитированием
Старый 08.10.2015, 22:18   #9
Shooter18
Новичок
Джуниор
 
Регистрация: 06.10.2015
Сообщений: 9
По умолчанию

Цитата:
Сообщение от SQLPowerUser Посмотреть сообщение
>>> как это применить в отдельном css файле??
Не совсем понятно.... CSS находится между тегами <style>
Я привёл готовый пример работающего HTML-файла. Скопировать и пользоваться. Если копировать влом, то результат смотрим здесь http://jsfiddle.net/obqmxg2m/
да все работает, только как мне это вынести в отдельный css файл??
вот который <link href="style.css" rel="stylesheet" type="text/css" />
Shooter18 вне форума Ответить с цитированием
Старый 08.10.2015, 22:55   #10
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

Текст, который между тегами <style>, копируем в отдельный CSS-файл.
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задача на С++ помогите отредактировать STIFFmaster_LP Помощь студентам 2 24.10.2009 20:08
Помогите отредактировать текст Chev Помощь студентам 10 15.10.2009 09:01
помогите отредактировать worshewitin Помощь студентам 1 23.06.2009 10:52
Помогите пожалоста отредактировать программу girkoff Общие вопросы C/C++ 4 31.03.2009 04:01
помогите отредактировать прогу finch Помощь студентам 3 25.06.2007 07:42