Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > закруглённое меню дивами

Автор: supervladislav 2.9.2010, 09:11

скажите почему такой вариант не работает ))) только длинная полоса на 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

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

Автор: magelan 2.9.2010, 11:40

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

Автор: supervladislav 2.9.2010, 11:54

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

Автор: magelan 2.9.2010, 12:34

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

Цитата

<!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

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

Автор: supervladislav 3.9.2010, 23:26

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

Автор: ksnk 4.9.2010, 01:16

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

Цитата

id="#zagolovok2"

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

Автор: supervladislav 4.9.2010, 08:24

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

Код


id="#zagolovok2"

Автор: supervladislav 4.9.2010, 09:02

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

Код


<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 6.9.2010, 22:36

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

Код


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

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

Автор: g27 10.9.2010, 18:21

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

)

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

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

Автор: supervladislav 11.9.2010, 22:42

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

Код


.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>