Jump to content
  • 0

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


Night Man
 Share

Question

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

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

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

(

http://berkutmail.narod.ru

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

)

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

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

b1c89ab4ce2a.jpg

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

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

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

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

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

Edited by Night Man
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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 by Night Man
Link to comment
Share on other sites

  • 0

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

с01nd01r

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

cc69635dad62.jpg

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

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

Edited by Night Man
Link to comment
Share on other sites

  • 0

Может здесь не получается выровнять из за того что блоку "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

627d0fe8768a.jpg

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

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

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

Edited by Night Man
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy