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

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

Вернуться   Форум программистов > Web программирование > HTML и CSS
Перезагрузить страницу Сайт на дивах
Регистрация

Восстановить пароль		 Повторная активизация e-mail
Регистрация Задать
вопрос		 Заплачу
за решение		 Новые
сообщения 		Сообщения
за день 		Расширенный
поиск		 Правила Всё
прочитано

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

Ответ
Страница 1 из 2 1 2
 
Опции темы Поиск в этой теме
Старый 08.09.2010, 13:54   #1
Kapitann
Заблокирован
 
Регистрация: 26.07.2010
Сообщений: 160
По умолчанию Сайт на дивах
Вот решил попробовать создать меню на дивах,страно, но чего-то не выходит, хотя читал что нужно использовать 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>
Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.
Изображения
Тип файла: jpg clip_image002.jpg (61.4 Кб, 126 просмотров)
Вложения
Тип файла: rar Kod.rar (108.9 Кб, 4 просмотров)
Последний раз редактировалось Kapitann; 08.09.2010 в 14:08.
Kapitann вне форума Ответить с цитированием
Старый 08.09.2010, 19:26   #2
zumm
БохЪ
Форумчанин
 
Аватар для zumm
 
Регистрация: 30.09.2009
Сообщений: 724
По умолчанию
МдЭ....что за народ пошел, написал скилетик, да и тот корявый и хочет меню...тебе вообще что нужно? картинку что ле бы приложил, как хочешь что бы было...если оно должно быть "выпадающим" да или вообще динамичным, то JS нужно...вообщем схему ф студию.
В планах порабощение вселенной...
zumm вне форума Ответить с цитированием
Старый 08.09.2010, 20:54   #3
Kapitann
Заблокирован
 
Регистрация: 26.07.2010
Сообщений: 160
По умолчанию
Вот такое вообще-то хотел.
Kapitann вне форума Ответить с цитированием
Старый 08.09.2010, 22:17   #4
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию
элементарная ошибка.
Вы открыли тег и тут же закрыли его:
<div id="left"><div>
<div>Пункт 1</div>
<div>Пункт 2.......</div>

, а надо так
<div id="left"> // открываем див
<div>Пункт 1</div>
<div>Пункт 2.......</div>
</div> // тут закрываем див Left

та же история и с правым дивом. Будьте внимательнее.
P.S. Комментарии из php и тут используются только для наглядности.
webinmd.com
MrJenika вне форума Ответить с цитированием
Старый 08.09.2010, 22:40   #5
zumm
БохЪ
Форумчанин
 
Аватар для zumm
 
Регистрация: 30.09.2009
Сообщений: 724
По умолчанию
нет, я конешно все понмаю, типо грамотный код, но всеже не проще ли заюзать таблицу? там и подправлять удобно...но конешно же задача не в таблице, мы ведь не ищем легких путей...
В планах порабощение вселенной...
zumm вне форума Ответить с цитированием
Старый 09.09.2010, 04:57   #6
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию
Глянте ка это ))
Magneto вне форума Ответить с цитированием
Старый 09.09.2010, 20:08   #7
Kapitann
Заблокирован
 
Регистрация: 26.07.2010
Сообщений: 160
По умолчанию
Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.
Файл index.php
Код HTML:
<!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
Код 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; 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 Кб, 57 просмотров)
Вложения
Тип файла: zip sit.ru.zip (126.4 Кб, 5 просмотров)
Последний раз редактировалось Kapitann; 09.09.2010 в 20:18.
Kapitann вне форума Ответить с цитированием
Старый 09.09.2010, 20:22   #8
[MoNAMur]
читер
Форумчанин
 
Аватар для [MoNAMur]
 
Регистрация: 05.10.2009
Сообщений: 150
По умолчанию
htmlbook.ru - смотри там.
все расписано понятно.

рамка - css свойство border у div'а


Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
если не сильно знаком с css И xhtml то советую для начала ставить transitional - более "щадящий" к коду =)
$me = $me == $me ? $me : $me;
Последний раз редактировалось [MoNAMur]; 09.09.2010 в 20:24.
[MoNAMur] вне форума Ответить с цитированием
Старый 09.09.2010, 20:36   #9
Kapitann
Заблокирован
 
Регистрация: 26.07.2010
Сообщений: 160
По умолчанию
Пришлось ещё в один контейнер див засунуть,каждый пункт меню.
Последний раз редактировалось Kapitann; 09.09.2010 в 21:02.
Kapitann вне форума Ответить с цитированием
Старый 09.09.2010, 21:47   #10
Kapitann
Заблокирован
 
Регистрация: 26.07.2010
Сообщений: 160
По умолчанию
Ой, или тут где-то ошибка, что-то правая навигация улетела влево и оно какая-то очень странное вышло. Подскажите как исправить.
Код HTML:
<!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; 
}
Kapitann вне форума Ответить с цитированием
Ответ
Страница 1 из 2 1 2


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



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выкладывать свой сайт в интернет, Как мне выложить сайт, psywalker HTML и CSS 6 21.05.2009 15:04
Верт. выравнивание текста в дивах 13th HTML и CSS 21 12.01.2009 23:17
Сайт Gromsky Свободное общение 3 22.09.2008 15:28

Реклама на форуме - Обратная связь - Правила - Исходники Delphi - Справочник Delphi - Архив - Вверх