Делаю сабе визитку... Вопрос относительно меню и центрирования дива

Night Man · March 8, 2011

Доброго всем времени суток...

Делаю себе сайт визитку...

пока есть две страницы

(

http://berkutmail.narod.ru

http://berkutmail.narod.ru/gallery01.html

)

появились вопросы на которые сам не могу найти ответ....

1 не могу понять, что за сообщение вылезло в левой стороне страницы (от куда оно взялось и как от него избавиться)???

это сообщение отсутствует только в Хроме... - в остальных браузерах проявляется...

хотя когда смотришь сайт с жесткого диска а не с хоста - сообщения - нет..

2 подскажите как отцентрировать див в котором находится изображение / галерея по центру экрана по вертикали....

3 каким образом делается, чтоб меню открывалось/закрывалось по клику...

заранее благодарен...

Edited March 8, 2011 by Night Man

c01nd01r · March 8, 2011

1) SSI? (http://stepbystep.htmlbook.ru/?id=39) Если не пользуетесь, то пишите хостеру.

2) http://ruseller.com/lessons/les554/example/demo.html

3) JavaScript

Night Man · March 8, 2011

1) SSI - не пользовал....

————————————————————--

2) на сайте Попова - видел это...

пробовал перед тем как написать сюда, но.... центрирование по вертикали так у меня и не вышло,

( куда то все уезжает, но явно не туда куда надо)

если в марджине ставлю

margin:-267px 0 0 -370px - центрирование по горизонтали выполняется (относительно окна браузера...)

но так как мне надо еще сместить в право , что бы участь меню...

пишу

margin:-267px 0 0 -120px;

и все куда то вообще уехало...

вот так:

http://berkutmail.narod.ru/index.html

———————————————--

3) что надо Java Script - я немного догадывался, ....

даже пытался выдрать и использовать от сюда...

http://webformyself.com/vypadayushhee-vert...hyu-css-jquery/

(так как сам еще понятия не имею как его писать и пользовать...)

но в интернет эксплорерах меню тогда вообще не раскрывалось...

приведу свой листинг...

может подскажите, что не так с кодом...

Index.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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
<!-- *********************************************************** -->	
</head>
<body>
<div id="wrapper">
	<div id="middle">
		<div id="container">
			<div id="content">
	 <div id="foto">
			   <p> <img src="img/photo001.jpeg"/></p>
	 </div>
			</div><!-- #content-->
		</div><!-- #container-->
<!-- *********************************************************** -->
<div id="leftside">
	<div id="logo">  </div>
		<div class="sidebar" id="sideLeft">
		<ul id="nav">
			<li><a href="#">Фотосъемка свадеб</a>
						  <ul>
							  <li><a href="gallery01.html">Галерея 1</a></li>
							  <li><a href="#">Галерея 2</a></li>
							  <li><a href="#">Галерея 3</a></li>
							  </ul>
			</li>
			<li><a href="#">Информация</a>
							  <ul>
							  <li><a href="#">Варианты фотосъемки</a></li>
							  <li><a href="#">Рекомендации</a></li>
							  <li><a href="#">Адреса ЗАГСов</a></li>
							  </ul>
			</li>
 			<li><a href="#">Другие виды фотосъемки</a></li>
			<li><a href="#">Информация к свадьбе</a></li>
			<li><a href="#">О бо мне</a></li>
			</ul>
	</div><!-- .sidebar#sideLeft -->
</div><!--#leftside-->
<!-- *********************************************************** -->
	</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- *********************************************************** -->
<div id="footer">
	<div id="copy" align="center"><B>© 2005-2011 </B><a href="/">All Rights Reserved.</a> </div>
</div><!-- #footer -->
</body>
</html>

Style.css

@import url('reset.css'); 
@import url('typography.css');
@import url('style_menu.css');

html {
	height: 100%;
	background-color:#000;
}
body {
	height: 100%;
	background-image:url(../img/backgraund.png);
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	min-width: 1000px;
	max-width: 1575px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background-image:url(../img/left.png);
	background-repeat:repeat-y;
}
/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	padding: 0 0 30px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 0 0 250px;
}
#foto {
	width:740px;
	height:534px;
	position:absolute;
	left:50%;
	top:50%;
	/*margin:-267px 0 0 -370px;*/	
	margin:-267px 0 0 -120px;
}
/* Sidebar Left
—————————————————————————--*/
#leftside {
   float: left;
	width: 250px;
	margin-left: -100%;
	position: relative;
}
#logo{
	width:100%;
	height: 300px;
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
}
#sideLeft {
	width:94%;
	min-height: 100%;
	float: right;
}
/* Footer
—————————————————————————--*/
#footer {
	margin: -30px auto 0;
	min-width: 1255px;
	max-width: 1575px;
	height: 30px;
	background-image: url(../img/footer-image.png);
}
/*—————-- строка копирайтов с сылкой на главную страницу ————*/
#copy{
	padding-top:7px;
	color:#fff;
	text-decoration: none; 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:normal;
	width: 100%;
  /*  border: 1px solid black; */
}
#copy a {
	color:#fff;
	text-decoration: none; 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
}

как то так....

Edited March 9, 2011 by Night Man

c01nd01r · March 9, 2011

#foto {
	width:740px;
	height:534px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-267px 0 0 -245px;	/*прибавляем половину ширины левого блока */

Vlad · March 9, 2011

Уважаемый Night Man, в следующий раз делайте код компактнее, а не с пятью ненужными переводами строк!

Night Man · March 9, 2011

Vlad, исправил.... учту....

с01nd01r

тогда получается вот такое смещение:....

еще и картинка с футера пропала... - сдвинулась за пределы низа экрана...

и меню уехало кудато...

Edited March 9, 2011 by Night Man

Night Man · March 9, 2011

Может здесь не получается выровнять из за того что блоку "content" не задана высота...

хотел растянуть на весь экран

min-height: 100%;

не помогло..

сейчас задал размер в пикселях (чтоб попробовать...) обвел его белой линией, чтоб было видно границы...

#content {
	padding: 0 0 0 250px;
	border: 4px solid white;
	/*min-height: 100%;*/
	min-height:750px;
}

и

#foto {
	width:740px;
	height:534px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-267px 0 0 -245px;	
}

вот что вышло:

http://berkutmail.narod.ru/index.html

так выравнивание получилось, но...

как же тогда будет если размер экрана меньше или больше...

почему min-height: 100% не срабатывает???

Edited March 9, 2011 by Night Man

c01nd01r · March 9, 2011

height и min-height рассчитываются относительно высоты контейнера. Задайте height для wrapper, middle, container.

Night Man · March 9, 2011

не помогло...

вернулся к тому, что было на 1-вой картинке....

изображение прилипло к верху экрана...

Sign In

Делаю сабе визитку... Вопрос относительно меню и центрирования дива

Question

Night Man

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

c01nd01r

Link to comment

Share on other sites

Night Man

Link to comment

Share on other sites

c01nd01r

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Night Man

Link to comment

Share on other sites

Night Man

Link to comment

Share on other sites

c01nd01r

Link to comment

Share on other sites

Night Man

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information