VPF::закруглённое меню дивами - Форум программистов

supervladislav

Дата 2.9.2010, 09:11 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

скажите почему такой вариант не работает ))) только длинная полоса на 80 процентов и всё ))))
взял всё с видео вот отсюдова http://www.myaleks.ru/blog/book_view.php?id=2

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Äîêóìåíò Áåç Èìåíè</title>
</head>
<style>
#main{width:40%;margin:30px auto;}
#zagolovok1{background:#5a5250 url(screen/levo_menu.png) no-repeat;padding-left:-24px;}
#zagolovok2{background:url(screen/pravo_menu.png) no-repeat right top;}

</style>

<body>
<div id="main">
<div id="zagolovok1">
<div id="#zagolovok2"></div>
</div> 
</div>


</body>
</html>

supervladislav

Дата 2.9.2010, 11:37 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

я имею ввиду почему изображения уголков не отображаются

Это сообщение отредактировал(а) supervladislav - 2.9.2010, 11:38

magelan

Дата 2.9.2010, 11:40 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 4
Всего: 16

а они у вас есть в наличии?
не отображаются, потому-что в стиле zagolovok1 не указаны - позиция, ширина и высота дива
zagolovok2 - просто не вызывается, но позиции, ширины и высоты там тоже нет, хотя надо.

supervladislav

Дата 2.9.2010, 11:54 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

но почему в видео примере автор это делает не задавая высоту и ширину )))
может может быть как-то доктуп виноватым быть ???

magelan

Дата 2.9.2010, 12:34 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 4
Всего: 16

виноватых может быть много, начиная от

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

и заканчивая браузером.

проблема в том, что див не знает какого размера у вас картинка под бэкграунд.
Если его высота может колебатся от 0 до высоты шрифта по умолчанию, то его ширина скорее всего 0.

supervladislav

Дата 2.9.2010, 13:44 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

а почему у человека работает )))а есть ли пример вёрстки

supervladislav

Дата 3.9.2010, 23:26 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Скажите моглибы вы дать пример работующий вёрстки
с вложенными дивами для меню

ksnk

Дата 4.9.2010, 01:16 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Высота заголовка определяется в примере текстом, который есть в заголовке. достаточно влепить туда многострочный текст, чтобы увидеть проблемы. Нету текста - нету заголовка.

Цитата

id="#zagolovok2"

не уверен, что ID элемента должно было начинаться с решетки ;)

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

supervladislav

Дата 4.9.2010, 08:24 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

это убирал не помогло ,скажите нужно просто текст туда влепить

Код


id="#zagolovok2"

supervladislav

Дата 4.9.2010, 09:02 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

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

Код


<style>
#main{width:30%;margin:30px auto;}
#zagolovok1{background:#00FF66 url(screen/levo_menu.png) top left no-repeat;}
#zagolovok2{background:url(screen/pravo_menu.png) top right no-repeat;}
</style>

<body>
<div id="main">
<div id="zagolovok1"><div id="zagolovok2">sdsadasd</div></div>

</div>

Это сообщение отредактировал(а) supervladislav - 4.9.2010, 09:23

supervladislav

Дата 6.9.2010, 22:36 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

скажите вы моглибы вписать нужные свойства к нужным
тегам

Код


div#menu{text-align:center;display:table margin: 0 auto; width: 100%;}
div#menu ul {text-align:center;list-style-type:none;}
div#menu li {float:left;display:inline;padding-left:1%;padding-right:1%;diplay: table-cell, margin: 0 auto;}
div#menu A{text-decoration:none;color:#ececec;font-size:90%;}

supervladislav

Дата 7.9.2010, 01:26 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Скажите есть ли у кого пример блочной вёрстки )))меню с четырёмя закруглёнными краями и боками )))
рабочий и обязательно кроссбраузерный

g27

Дата 10.9.2010, 18:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 216
Регистрация: 29.9.2007
Где: Vilnius

Репутация: нет
Всего: нет

Цитата(supervladislav @ 7.9.2010, 01:26

)

меню с четырёмя закруглёнными краями и боками )))

это как? http://kalsey.com/2003/07/rounded_corners_in_css/ как вариант

supervladislav

Дата 11.9.2010, 22:42 (ссылка)

(нет голосов)

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9

Непонимаю ,а зачем нужен рисунок внутри дива ,разве так сложно вложенным дивом сделать

Код


.roundcont {
    width: 250px;
    background-color: #f90;
    color: #fff;
}

.roundcont p {
    margin: 0 10px;
}

.roundtop { 
    background: url(tr.gif) no-repeat top right; 
}

.roundbottom {
    background: url(br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

Код


<div class="roundcont">
   <div class="roundtop">
     <img src="tl.gif" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>
  
   <div class="roundbottom">
     <img src="bl.gif" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>
</div>

Это сообщение отредактировал(а) supervladislav - 11.9.2010, 22:45

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »