Форум Сайтостроение Веб-строительство

Вопрос по верстке, html/css

frfattare
На сайте с 31.03.2010
Offline
13
frfattare
655

Здравствуйте. Окончательно настроился на обучение верстке, но в конце-концов загруз:

Нужно сдвинуть картинку вниз, но при margin-top: 75px; - сдвигаеться вниз абсолютно все.

CSS: 

body {

	background-image: url(1249.png);

}

#center {

	width:600px;

	height:360px;

	background: #2c323b;

	position: absolute;

	left: 50%;

	top: 50%; 

	margin:-170px 0 0 -300px; 

	border: 1px black solid;

}

#yourbusiness {



	width: 335px;

	height: 230px;

	color: black;

	background: #25292f;

	font-family:"Myriad Pro";

	font-size:25px;

}

#content {

	width: 600px;

	height: 120px;

	background: #69a9de;

	margin-top: 13px;

	

}

#content p {

	color: white;

	font-size:18px;

	margin-left: 70px;

	padding-top: 27px;

	font-family:"Myriad Pro";

}

#text {

margin-left: 70px;

padding-top: 23px;

color: white;

font-size:37px;

}

#content .run {

	color:black; 

	font-size:18px;

	}

#reshetka{

	width: 160px;

	height: 75px;

	background-image: url(2.jpg);

	background-repeat: no-repeat;

	margin-left: 335px;

	padding-top: 0px;

}

HTML: 

<div id="center">

    <div id="reshetka"></div>

	<div id="yourbusiness"> 

    		<div id="text">

            	<span style="color:#69a9de;">your</span>business <span style="color:#69a9de; font-size:34px;">></span>>

            </div>

        <div id="content">

        	<p>

        		<span class="run">></span> fermentum velit at nisl porttitor </br>

        		<span class="run">></span> consectetur consectetur </br>

        		<span class="run">></span> In ultricies euismod dictum

			</p>

        </div>

    </div>

</div>

Зараннее спасибо. :)

M2
На сайте с 11.01.2011
Offline
341
mark2011
#1

Изменил блок следующим образом:

#content p {

color: white;

font-size:18px;

margin-left: 70px;

padding-top: 27px;

margin-top: 70px;

font-family:"Myriad Pro";

}

Больше ничего не трогал. Это то, что требовалось?

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
frfattare
На сайте с 31.03.2010
Offline
13
frfattare
#2
mark2011:
Изменил блок следующим образом:
#content p {
color: white;
font-size:18px;
margin-left: 70px;
padding-top: 27px;
margin-top: 70px;
font-family:"Myriad Pro";
}

Больше ничего не трогал. Это то, что требовалось?

Хм.. нет, спасибо. Так синняя полоска сдвигается вниз, а мне нужно сдвинуть решетку..

H
На сайте с 13.06.2011
Offline
9
Haubergeon
#3
frfattare:
Хм.. нет, спасибо. Так синняя полоска сдвигается вниз, а мне нужно сдвинуть решетку..

затерто...

Посмотрите в сторону абсолютного позиционирования, либо воспользуйтесь таким чудесным свойством как float

Слово не воробей. Все не воробей, кроме воробья!
M2
На сайте с 11.01.2011
Offline
341
mark2011
#4

А, я понял. Ну тогда как-нибудь найдите способ перекинуть картинку решётки (у меня её нет).

frfattare
На сайте с 31.03.2010
Offline
13
frfattare
#5
Haubergeon:
затерто...
Посмотрите в сторону абсолютного позиционирования, либо воспользуйтесь таким чудесным свойством как float

Эффект тот же.. Скрин во вложениях.

png 1.png
dma84
На сайте с 21.04.2009
Offline
168
dma84
#6

Если решётка вставляется как бэкграунд, зачем для неё городить ещё один элемент???


#yourbusiness {

	width: 495px;
	height: 230px;
	color: black;
	font-family:"Myriad Pro";
	font-size:25px;
	background: #25292f url(2.jpg) bottom right no-repeat;
}

<div id="reshetka"></div> - снести нафиг

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#7

Как-то так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
body {
	background-image: url(1249.png);
}
#center {
	width:600px;
	height:360px;
	background: #2c323b;
	position: absolute;
	left: 50%;
	top: 50%;
	margin:-170px 0 0 -300px;
	border: 1px black solid;
}
#yourbusiness {

	width: 335px;
	height: 230px;
	color: black;
	background: #25292f;
	font-family:"Myriad Pro";
	font-size:25px;
}
#content {
	width: 600px;
	height: 120px;
	background: #69a9de;
	margin-top: 13px;

}
#content p {
	color: white;
	font-size:18px;
	margin-left: 70px;
	padding-top: 27px;
	font-family:"Myriad Pro";
}
#text {
margin-left: 70px;
padding-top: 23px;
color: white;
font-size:37px;
}
#content .run {
	color:black;
	font-size:18px;
	}
#reshetka{
	width: 160px;
	height: 75px;
	position:relative;
        top:75px;
	left: 335px;
	background:#000 url(2.jpg) no-repeat;
}
</style>
  </head>
  <body>
<div id="center">
    <div id="reshetka"></div>
	   <div id="yourbusiness">
    		<div id="text">
            	<span style="color:#69a9de;">your</span>business <span style="color:#69a9de; font-size:34px;">></span>>
        </div>
        <div id="content">
        	<p>
        		<span class="run">></span> fermentum velit at nisl porttitor <br>
        		<span class="run">></span> consectetur consectetur <br>
        		<span class="run">></span> In ultricies euismod dictum
			</p>
        </div>
    </div>
</div>
  </body>
</html>
frfattare
На сайте с 31.03.2010
Offline
13
frfattare
#8

dma84, все полностью слетает..

Olldman, спасибо, подошло. Осталось теперь только разобраться :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий