Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 09.09.2010, 17:19
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Странно,вроде заработало.

Последний раз редактировалось Golovastik, 09.09.2010 в 17:35.
Ответить с цитированием
  #22 (permalink)  
Старый 09.09.2010, 20:03
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.
Файл 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 ramka" id="ikonka_menu1"><a href="#">Новости жизни</a></div> 
	    <div><a href="#">Про клоунов из Москвы</a></div> 
    	<div><a href="#">О жизни Таиси Лапиной</a> </div> 
		<div><a href="#">О Ефросиньи</a></div> 
		<div><a href="#">Про Деда Мороза</a></div> 
		<div><a href="#">Платёжные системы</a></div> 
		<div><a href="#">Работа с видео и аудио</a></div> 
		<div><a href="#">О жизни Мистер Бина</a></div> 
		<div><a href="#">Кто такой Джин?</a></div> 
		<div><a href="#">Создание моб.телефонов</a></div> 
		<div><a href="#">Какие бывают зайцы</a></div> 
		<div><a href="#">Психология</a></div> 
		<div><a href="#">Красота</a></div> 
		<div><a href="#">Спорт и здоровье</a></div> 
		<div><a href="#">Бизнес дяди Пети</a></div> 
		<div><a href="#">Сетевой маркетинг</a></div> 
		<div><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; border:1px solid black;}
.ramka{border:1px solid black; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px;  }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat ; margin-left:7px; }
Изображения:
Тип файла: jpg 01.jpg (48.6 Кб, 3 просмотров)
Вложения:
Тип файла: zip sit.ru.zip (126.4 Кб, 0 просмотров)

Последний раз редактировалось Golovastik, 09.09.2010 в 20:06.
Ответить с цитированием
  #23 (permalink)  
Старый 09.09.2010, 21:03
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Пришлось ещё в один контейнер див засунуть,каждый пункт меню.
Ответить с цитированием
  #24 (permalink)  
Старый 09.09.2010, 21:44
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Ой, или тут где-то ошибка, что-то правая навигация улетела влево и оно какая-то очень странное вышло. Подскажите как исправить.
<!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 ramka'></div> 

<div class="ramka">
<div class="menu" id="ikonka_menu1"><a href="#">Пунтк 1</a></div>
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a> </div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</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>


Файл стилей
Код:
/*Стили для сайта*/
* {
    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;}
.ramka{border:1px solid #CCCCCC;}
.ramka:hover{background-color:#CCFFCC;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px;  }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat ; margin-left:7px; 
}
Ответить с цитированием
  #25 (permalink)  
Старый 09.09.2010, 21:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от Golovastik
Пришлось ещё в один контейнер див засунуть,каждый пункт меню.
Ну и напрасно... У ДИВов ведь есть еще и отступы.
Ответить с цитированием
  #26 (permalink)  
Старый 09.09.2010, 21:52
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Что-то вообще каша вышла, подскажиет как тут исправить, что-то ничего не выходит, и там что-т отакое сделалось что одно на другое поналезло.
Ответить с цитированием
  #27 (permalink)  
Старый 09.09.2010, 21:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Это пример с бордюром...

<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
#menu {
	width: 200px;
}
.item {
	margin: 5px;
	border: 1px solid;
}
</style>
</head>
<body>
<div id='menu'>
	<p class='item'>Item 1</p>
	<p class='item'>Item 2</p>
	<p class='item'>Item 3</p>
</div>
</body>
</html>
Ответить с цитированием
  #28 (permalink)  
Старый 09.09.2010, 21:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от Golovastik
Что-то вообще каша вышла
Значит откатывайся до предыдущего рабочего варианта. После чего опять пробуй что-то делать, но пошагово.
Т.о. можно понять что сделало кашу.
Ответить с цитированием
  #29 (permalink)  
Старый 10.09.2010, 00:11
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Попробовал не добавлять дополнительного контейнера див, а написать так в коде.
<!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=utf-8" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
	<div class="shapka"></div>
</div>

	<div id="left" >
		<div class='title'></div>
	    <div class="menu" id="ikonka_menu1" ><a href="#">С новым годом</a></div>
	    <div><a href="#">Пункт1</a></div>
    
	</div> 
	<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>


/*Стили для сайта*/
* {
    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;}
.ramka{border:1px solid #CCCCCC;}
.ramka:hover{background-color:#CCFFCC;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black; border-bottom:0px;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px;  }
.menu a{text-decoration:none; }
#ikonka_menu1 {background:url(img/p1.jpg) no-repeat; 
border:1px solid black;  }


Получается что нельзя никак сдвинуть картинку, она прислонилась и никак не получается ею двигать.
Изображения:
Тип файла: jpg clip_image002.jpg (9.5 Кб, 3 просмотров)

Последний раз редактировалось Golovastik, 10.09.2010 в 00:15.
Ответить с цитированием
  #30 (permalink)  
Старый 10.09.2010, 00:19
Аватар для Golovastik
Профессор
Отправить личное сообщение для Golovastik Посмотреть профиль Найти все сообщения от Golovastik
 
Регистрация: 12.08.2010
Сообщений: 221

Всё понял, надо было вот так написать:
#ikonka_menu1 {background:url(img/p1.jpg) 5px center no-repeat;
border:1px solid black; }

Последний раз редактировалось Golovastik, 10.09.2010 в 00:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05