| |
 108.9 Кб |
|
| | Вот решил попробовать создать меню на дивах,страно, но чего-то не выходит, хотя читал что нужно использовать float:left и float:right для навигации с правой и левой стороны, у меня что-то вообще не то получилось. Подскажите пожалуйста, как его исправить.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="content" />
<meta name="keywords" content="content" />
<title>Главная</title>
<style type="text/css">
/*Стили для сайта*/
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#left{float:left; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{}
* {margin:0; padding:0;}
body{min-width:770px;}
img {border: none;}
</style>
</head>
<body class="marginpadding">
<!-- -->
<div class="shapkafon">
<div class="shapka"></div>
</div>
<!-- -->
<div id="left"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
<div id="right"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</body>
</html>
|
Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.
http://ipicture.ru/uploads/100908/2JfPOsZ2UO.jpg | |
| |
|
|
| |
|
|
| |
для: Golovastik
(08.09.2010 в 13:55)
| | | >"читал что нужно использовать float:left и float:right"
А то, что float:left и float:right нужно использовать с умом, Вам читать не доводилось? :-)
Поизучайте http://www.dynamicdrive.com/style/, раздел CSS Layouts - там найдёте способы "умного" применения float:left и float:right | |
| |
|
|
| |
|
|
| |
для: АЯ
(08.09.2010 в 15:02)
| | | Я хочу чтоб каждый пункт меню не был на картинке, а было так, как здесь ниже, только опять правая часть меню переместилась в левую.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="content" />
<meta name="keywords" content="content" />
<title>Главная</title>
</head>
<body class="marginpadding">
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div class="item"></div>
<div id="left ">
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</div>
<div class="item"></div>
<div id="right ">
<div">Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</div>
<div id="center">
Привет мир!
</div>
</body>
</html>
|
Файл style.css
/*Стили для сайта*/
* {
margin:0;
padding:0;
}
body {
min-width:770px;
}
img {
border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
.item{height:34px; background:url(img/videoyroki.png) no-repeat;
}
#center{margin-left:213px; margin-right:213px;}
|
| |
| |
|
|
| |
|
|
| |
для: Golovastik
(08.09.2010 в 15:15)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type="text/css">
#left{float:left;width:400px; border:1px solid gray;}
#right{float:right;width:400px; text-align:right;border:1px solid gray;}
</style>
</head>
<body>
<div id="left">
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
</div>
<div id="right">
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
141.7 Кб |
|
| |
для: TetRiska
(10.09.2010 в 03:15)
| | | Проект для скачки: http://www.sharemania.ru/0290717
1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:
из этого:
#ikonka_menu1{background:url(img/p13.jpg) 5px center no-repeat;
|
Как оформить правильно чтоб не было дублирования?
2)Не знаю как правильно сделать чтоб при наведении мышкой на один из пунктов меню, пункт меню делался белым. Дело в том, что
я для всего меню задал фон: .menu{background-color:#f7f8f6;}
А как сделать чтоб именно на определённый навести пункт и он менял свой цвет, не получается никак.
[u]Вот переделанный мною код:[/u]
Файл index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div id="left" >
<div class='title'></div>
<div class="menu">
<div id="ikonka_menu1"> <a href="#">Пункт</a></div>
<div id="ikonka_menu2"> <a href="#">Пункт</a></div>
<div id="ikonka_menu3"> <a href="#">Пункт</a> </div>
<div id="ikonka_menu4"> <a href="#">Пункт</a></div>
<div id="ikonka_menu5"> <a href="#">Пункт</a></div>
<div id="ikonka_menu6"> <a href="#">Пункт</a></div>
<div id="ikonka_menu7"> <a href="#">Пункт</a></div>
<div id="ikonka_menu8"> <a href="#">Пункт</a></div>
<div id="ikonka_menu9"> <a href="#">Пункт</a></div>
<div id="ikonka_menu10"><a href="#">Пункт</a></div>
<div id="ikonka_menu11"><a href="#">Пункт</a></div>
<div id="ikonka_menu12"><a href="#">Пункт</a></div>
<div id="ikonka_menu13"><a href="#">Пункт</a></div>
<div id="ikonka_menu14"><a href="#">Пункт</a></div>
<div id="ikonka_menu15"><a href="#">Пункт</a></div>
<div id="ikonka_menu16"><a href="#">Пункт</a></div>
<div id="ikonka_menu17"><a href="#">Пункт</a></div>
</div>
</div> <!--Закрываем id="left"-->
<div id="right">
<div class='title'></div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
</div>
<div id="center">
<p>Привет мир!</p>
</div>
<div id="footer"></div>
</body>
</html>
|
Файл style.css
/*Стили для сайта*/
* {
margin:0;
padding:0;
}
body {
min-width:770px;
}
img {
border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}
.menu a{text-decoration:none; background-color:#f7f8f6;}
.menu{background-color:#f7f8f6;}
.menu a:visited{color:black; }
/*-----------------Иконки для меню---------------------------*/
#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat;
}
#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;
}
#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}
#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;
}
#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;
}
#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}
#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}
#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;
}
#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;
}
#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;
}
#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;
}
#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;
}
#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;
}
#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;
}
#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;
}
#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}
#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;
}
/*--------------------------------------------------------------*/
|
| |
| |
|
|
| |
|
|
| |
для: Golovastik
(11.09.2010 в 15:58)
| | | Получается так что или ссылка её фон делеться белым или фон весь белый ячейки а фон ссылки серым,а не одновременно,полностью фон ссылки белый и всей ячейки тоже белый. | |
| |
|
|
| |
|
|
| |
для: Golovastik
(11.09.2010 в 16:48)
| | | Короче вот так сделал пробное, меня так устраивает, но проблема в том,что этот стиль будет действовать только для 1 лишь пункта меню, при наведении мышкой фон будет меняться, то есть после вот этой строки:
[CODE]#ikonka_menu1:hover{background-color:white;}[/CODE]
Но что писать 17 раз по такой строке? есть какой-то выход?
Вот весь файл ксс.
[CODE]
/*Стили для сайта*/
* {
margin:0;
padding:0;
}
body {
min-width:770px;
}
img {
border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}
.menu{background-color:#f7f8f6;}
.menu a{text-decoration:none; }
.menu a:visited{color:black; }
/*-----------------Иконки для меню---------------------------*/
#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat;
}
#ikonka_menu1:hover{background-color:white;}
#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;
}
#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}
#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;
}
#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;
}
#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}
#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}
#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;
}
#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;
}
#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;
}
#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;
}
#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;
}
#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;
}
#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;
}
#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;
}
#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}
#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;
}
/*--------------------------------------------------------------*/
[/CODE] | |
| |
|
|
| |
135.2 Кб |
|
| |
для: Golovastik
(11.09.2010 в 16:48)
| | | держи | |
| |
|
|
| |
|
|
| |
для: Usta
(11.09.2010 в 20:47)
| | | Спасибо. Смущает последнее, как сократить вот это повторение:
из каждой строки с этим:
#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;}
|
Не знаю как. | |
| |
|
|
| |
|
|
| |
для: Golovastik
(12.09.2010 в 15:16)
| | | Убираешь 5px.
И делаешь так.
.menu font {
display:block;
float:left;
height:30px;
margin-left:10px; /* сдвиг в право*/
width:30px;
} | |
| |
|
|
