dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
есть заголовок в шапке, перемещаю его по горизонтали, с помощью text-align и padding, а вот по вертикали не идет, все пробовал .....
Размещение заголовка
- Автор темы dimamen777
- Дата начала
- Статус
maxon12007
Well-Known Member
- Регистрация
- 08.03.2012
- Сообщения
- 86
dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
не получается
dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background:url(images/mysite_04.png);
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px;
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 150px;
background: #FFE680;
margin: 2px auto 0;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
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 270px;
background:#CCC;
min-height:700px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 200px;
min-height:700px;
margin-left: -100%;
position: relative;
background: #B5E3FF;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
position:relative;
}
.jkstory {
font-family:"Times New Roman", Times, serif;
font-size:29px;
font-style:italic;
font-weight:bold;
padding: 19px;
}
.copyright {
font-family:"Times New Roman", Times, serif;
font-size:19px;
width90px;
text-shadow: black 5px 5px 5px;
font-style: italic;
position:absolute;
padding:12px;
margin:19px 5px 55px ;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
<body>
<div id="wrapper" class="shadow">
<header id="header" class="jkstory">
jkstory
</header><!-- #header-->
<section id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
</div><!-- #content-->
</div><!-- #container-->
<aside id="sideLeft">
<ul id="menu">
<li><a href="index.html"><span>Главная</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Поиск</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Регистрация</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Карта сайта</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>О сайте</span></a></li>
</ul>
</aside><!-- #sideLeft -->
</section><!-- #middle-->
</div><!-- #wrapper -->
<footer id="footer" class="copyright">
<p> copyright © JKstudio </p>
</footer><!-- #footer -->
</body>
</html>
хочу посередине шапки расположить ,а получается только сверху по середине, кстати в футере у меня получилось с классом копирайт прям по середине встал .....
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background:url(images/mysite_04.png);
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px;
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 150px;
background: #FFE680;
margin: 2px auto 0;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
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 270px;
background:#CCC;
min-height:700px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 200px;
min-height:700px;
margin-left: -100%;
position: relative;
background: #B5E3FF;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
position:relative;
}
.jkstory {
font-family:"Times New Roman", Times, serif;
font-size:29px;
font-style:italic;
font-weight:bold;
padding: 19px;
}
.copyright {
font-family:"Times New Roman", Times, serif;
font-size:19px;
width90px;
text-shadow: black 5px 5px 5px;
font-style: italic;
position:absolute;
padding:12px;
margin:19px 5px 55px ;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
<body>
<div id="wrapper" class="shadow">
<header id="header" class="jkstory">
jkstory
</header><!-- #header-->
<section id="middle">
<div id="container">
<div id="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
</div><!-- #content-->
</div><!-- #container-->
<aside id="sideLeft">
<ul id="menu">
<li><a href="index.html"><span>Главная</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Поиск</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Регистрация</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Карта сайта</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>О сайте</span></a></li>
</ul>
</aside><!-- #sideLeft -->
</section><!-- #middle-->
</div><!-- #wrapper -->
<footer id="footer" class="copyright">
<p> copyright © JKstudio </p>
</footer><!-- #footer -->
</body>
</html>
хочу посередине шапки расположить ,а получается только сверху по середине, кстати в футере у меня получилось с классом копирайт прям по середине встал .....
maxon12007
Well-Known Member
- Регистрация
- 08.03.2012
- Сообщения
- 86
Попробуй так:
Код:
#header {
height: 150px;
background: #FFE680;
margin-top: 20;dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
пробовал, хедер отступает от верха браузера, у мне нужно просто надпись по середине хедера поставить, как на футере.....
tigra60
Спасатель
- Регистрация
- 10.12.2009
- Сообщения
- 1 990
В вашем случае проще всего либо к #header, либо к .jkstory добавить стиль line-height: 150px; То есть, установить line-height (интерлиньяж) равный высоте блока.
Однако, помните, что такой способ выравнивания строки по вертикали возможен только в том случае, если надпись сделана в одну строку!
maxon12007! Может быт уже хватит здесь говнокодить? Почему бы вам самому не попробовать ваши мегасоветы на практике. Может быть, тогда до вас дойдет, насколько ваши советы бестолковы.
Однако, помните, что такой способ выравнивания строки по вертикали возможен только в том случае, если надпись сделана в одну строку!
maxon12007! Может быт уже хватит здесь говнокодить? Почему бы вам самому не попробовать ваши мегасоветы на практике. Может быть, тогда до вас дойдет, насколько ваши советы бестолковы.
dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
спасибо ,получилось, тигра настоящий шаман с бубном 
..... я все справочники облазил, но не понял почему 150 пикселей а не 75?
..... я все справочники облазил, но не понял почему 150 пикселей а не 75?
motek
злой как @
- Регистрация
- 13.04.2010
- Сообщения
- 730
у Вас нет заголовка в шапке, есть просто текстdimamen777 сказал(а):
заголовок выглядит так:
Код:
<header id="header" class="jkstory">
<h1>jkstory</h1>
</header><!-- #header-->dimamen777
Well-Known Member
- Регистрация
- 02.01.2012
- Сообщения
- 59
да точно я и не заметил
- Статус