Перейти к содержимому

Сервис обмена электронных валют


Сайт своими руками

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 06 Декабрь 2008 - 21:10

Имеется шаблон (резиновый)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...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">

body
{
   background:#000000;
}

#main
{
   width:100%;
   background:#000000;
}

#hider
{
   border: 1px solid #000;
   height:250px;
   background:url(images/1.gif) center no-repeat;
}

#menu 
{
   width:auto;
   height:25px;
   background:#000000;
}

#content
{
   width:100%;
   height: 800px;
   background:url(images/main.jpg) center no-repeat;
}

#right
{
   width:60%;
   float:left;
   margin-left: 2%;
   margin-top:30px;
}

#lev
{
   height:auto;
   width: 30%;
   float:left;
   margin-left:25px;
   margin-top:30px;
}

#punkt1
{
   background:url(images/punkt1.gif);
}

#punkt2
{
   background: #999999 url(images/punkt2.gif);
}

#punkt3
{
   background: #999999 url(images/punkt3.gif);
}

#punkt4
{
   background: #999999 url(images/punkt4.gif);
}

#buttom
{
   width: 100%;
   height: 100px;
   border: medium;
   background: #999999;
}

div.punkts
{
   width: 250px;
   height: 180px;
   margin-top: 10px;
   margin-left: 15px;
}

.punks
{
   width: 100%;
   height: 180px;
   margin-top: 10px;
   background: #0000FF url(images/polosa.gif) bottom left no-repeat;
}

</style>
</head>
<body>
	<div id="main">
		<div id="hider">
		
		</div>
		<div id="menu"></div>
		<div id="content">
				<div id="lev">
				<div id="punkt1" class="punkts"></div>
				<div id="punkt2" class="punkts"></div>
				<div id="punkt3" class="punkts"></div>
				<div id="punkt4" class="punkts"></div>
		</div>
		<div id="right">
				<div class="punks"></div>
				<div class="punks"></div>
				<div class="punks"></div>
				<div class="punks"></div>
		</div>
		</div>
		<div id="buttom"></div>
	
</body>
</html>




Можно просмотреть здесь http://vladislav.dokunin.pochta.ru/

У меня вопрос вот такой >>> немогу разобратся что делать дальше > как сделать чтоб при нажатии на левые кнопки (4шт) открывались страницы которые выглядели бы подругому (т.е уже без этих кнопок, например галерея и т.п) это нужно делать средствами хтмл и CSS ? посовету чтонибуть плизз...
заранее СПАСИБО!!!

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Новостная колонка своими руками
  2. Сайт-сделай сам своими руками.
  3. Как самостоятельно создать шаблон joomla. Создание темы для джумлы своими руками
  4. Как бесплатно создать интернет магазин или создание магазина своими руками
  5. Создание сайта бесплатно или как создать сайт своими руками

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Декабрь 2008 - 22:25

Для отображения вместо блоков ссылок вам надо заменить код
..............
<div id="punkt1" class="punkts"></div>
<div id="punkt2" class="punkts"></div>
<div id="punkt3" class="punkts"></div>
<div id="punkt4" class="punkts"></div>
................
На
..............
<a id="punkt1" class="punkts" href="/1.html"></a>
<a id="punkt2" class="punkts" href="/2.html"></a>
<a id="punkt3" class="punkts" href="/3.html"></a>
<a id="punkt4" class="punkts" href="/4.html"></a>
................

Страницы могут называться хоть pupkin.html, photogallery.html
Тока вы должны не забывать соотносить название файла к примеру pupkin.html с ссылкой
<a href="/pupkin.html">Пупкин</a>
Файлы должны лежать в том же каталоге, что и index.html!

Если вы хотите положить файл в какой-то подкаталог относительно index.html, то ссылка будет вида
<a href="/имя_подкаталога/pupkin.html">Пупкин</a>

  • 0

#3 admin

admin
  • Пользователь PRO
  • 5 272 сообщений
  • Репутация: 54

Отправлено 07 Декабрь 2008 - 17:22

Сомневаюсь, что кто-то будет заказывать ваши услуги по наружке с таким сайтом :) Может лучше обратиться к специалистам в создании и продвижении сайтов?
  • 0

Сколько лет прошло, а ссылки всё ещё лучше покупать тут



#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 07 Декабрь 2008 - 17:54

Да уж дизайн расплывается... Да и кнопки слишком большие... очень много мигающих gif'ов, что очень раздражает глаза. Я уже говорил как лучше сделать кнопки меню.
Цвет фона я бы выбрал белый или бледно-серый, а дизайнерскую идею взял бы с пары шаблонов, для тебя это лучший вариант :)
  • 0

#5 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 10 Декабрь 2008 - 06:16

Всем привет!
Принял во внимание ваши замечания и решил переделать дизайн... http://vladislav.dokunin.pochta.ru/




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...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">body{ width:100%;   background:FFFFFF;} #main{ background: #eebc43;   width:100%;   border: ffd50f 5px inset;   }#hider{  width:auto;   float: inherit;   height:230px;   background: #FFFFFF;}#vhod { float:right; background:url(www/images/vhod.gif); width: 300px; height: 180px; margin-right: 25px; margin-top: 27px;}#menu1{   width:auto;   height:25px;   }.menu { float:left; width: 16.5%; height: 25px;}.blok {background: url(www/images/menu.gif) left no-repeat #FFCC00;}.blok2 {}.blok,blok2 { float: left;margin-right: 30px;width: 950px; } .knopka {	text-align: center;	display: block;	width: 155px;	height: 20x;	padding-top: 6px; padding: 3px;	color: #FFF;	font: 14px Arial;	font-weight: bold;	text-decoration: none;	border: 1px solid #ffd50f;	float: left; }#menu2 { width: 950px; height: 25px;  background:url(www/images/menu2.gif) left no-repeat #FFCC00;}#content{   width:100%;   height: 800px;     width: 95%;   margin-left: 3%;   margin-top: 15px;    }#right{ background:url(www/images/right.gif);   width:13%;   float:left;   margin-left: 2%;   height: 450px;   padding: px;  }.okno { height:90px; width: 90px; margin-left: 15px; margin-top: 40px; border:#FFFFFF solid 1px; }#lev{   height:auto;   width: 85%;   float:left;   }#punkt1 { width:100%; height: 350px; background:url(www/images/punkt1.gif)}#1 { float: left; width: 80.5%; height: 350px; }#2 { float:left; width: 150px; margin-left: 1%; height: 350px;}	#punkt2 { width:100%; height: 400px; margin-top: 15px; background: url(www/images/punkt2.gif) center no-repeat;}#3 { width: 40%; float:left; height: 400px;}#4 { width:55%; float:left; margin-left: 5%; height: 400px;}#buttom{    width: 100%;   height: 200px;   border: medium;   background: #eebc43;}A {text-decoration: none;}img {border: none;   //рамка вокруг изображений нам не нужна}</style></head><body>	<div id="main">		<div id="hider">					<div id="vhod"></div>				</div>		<div id="menu1">			<div class="blok">				<div class="menu">					<a class="knopka" href="o_nas.html">На главную</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">О нас</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Портфолио</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Галерея</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Контакты</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Статьи</a>				</div>			</div>		</div>				<div id="content">			<div id="lev">				<div id="punkt1">					<div id="1"></div>					<div id="2">					</div>				</div>				<div id="punkt2">					<div id="3"></div>					<div id="4"></div>				</div>			    </div>		<div id="right">			<div class="okno"><img src="www/images/galery/Cherry_artema.jpg" width="90" height="90"/></div>			<div class="okno"><img src="www/images/galery/img131.jpg" width="90" height="90" /></div>			<div class="okno"><img src="www/images/galery/kabuki kolon.jpg" width="90" height="90"/></div>														</div>			</div>			<div id="menu2">				<div class="blok2">					<div class="menu"><a class="knopka" href="o_nas.html" >На главную</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">О нас</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Портфолио</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Галерея</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Контакты</a></div>					<div class="menu">	<a class="knopka" href="o_nas.html">Статьи</a></div>				</div>						<div id="buttom"></div>			</div>	</div></body></html>



И сова проблема :( немогу разобратся почему <div id="buttom"></div> не растягивается на весь экран?!
В CSS прописал:

#buttom{    width: 100%;   height: 200px;   border: medium;   background: #eebc43;}

А он не растягивается :) , подскажите...
И еще вопрос>> почему слева остается белый зазор? ;) ?
  • 0

#6 Bender

Bender
  • Пользователь
  • 712 сообщений
  • Репутация: 0

Отправлено 10 Декабрь 2008 - 15:17

Сайт открывается пустой страницей т.к нет закрывающего тега </style>
  • 0

#7 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 10 Декабрь 2008 - 15:40

спасибо большое! эх эта невнимательность:-(


  • 0

#8 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 10 Декабрь 2008 - 19:59

Ничего не вижу, сайт не открывается... Ты намудрил с кодом. Нет ни </style>, ни </head>, ни <body>...</body>, ни </html>.
Испралвяй!
  • 0

#9 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 10 Декабрь 2008 - 21:06

Странно а у меня все открывается :( , и теги есть ... попробуйте пож еще раз глянуть
http://vladislav.dokunin.pochta.ru/

Прикрепленные файлы

  • Прикрепленный файл  index.html   4,15К   Количество загрузок: 96

  • 0

#10 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 13 Декабрь 2008 - 00:32

Подскажите... почему страница отображается с белым отступом слева гдето около 2px? не могу понять ведь общая таблица с параметром width: 100% :)

И еще хотел узнать у тех у кого монитор 19-22дюйма как у вас на мониторе окно отображается, есть горизонтальная прокрутка или нет? :( сайт здесь http://reklama.donbass.pochta.ru/
Спасибо!
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru