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

Не могу сверстать (css)

footballstar
На сайте с 20.07.2010
Offline
94
footballstar
634

Не получается сверстать, укажите пожалуйста на ошибку.

Как должно быть:

Как у меня:

html: 

<!DOCTYPE html>

<html>

<head>

<title>разнообразные уроки</title>

<link rel="stylesheet" type="text/css" href="reset.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

	<div class="leftblock">

		<div class="poster">

			<img src="D:\учеба\верстка\результаты\les4\images\img.jpg" alt="постер" title="постерок" />

		</div>

		<div class="publname">

			<p>Аполлон 18</p><span> // Apollo 18 

			"Никто не звал нас на луну" </span>

		</div>

	</div>

</body>

</html>

css: 


.leftblock {

	margin: 0 auto;

	position: relative;

	display: block;

	background: url('images/bg_content.jpg');

	width: 32em;

	height: 31.875em;

	border-radius: 8px;

	-webkit-border-radius: 8px;

	-moz-border-radius: 8px;

	}

.leftblock div.poster {

	position: relative;

	display: block;

	}

.leftblock div.poster img {

	width: 11.8125em;

	height: 16.875em;

	margin: 0.625em;

	float: left;

	border-radius: 6px;

	-webkit-border-radius: 6px;

	-moz-border-radius: 6px;

	}

.leftblock div.publname {

	position: relative;

	display: block;

	float: right;

	}

.leftblock div.publname p {

	color: #FFFFFF;

	font-style: bold;

	font-weight: normal;

	font-size: 1.25em;

	margin-top: 0.625em;

	margin-left: -5em;

	}

.leftblock div.publname span {

	color: #FFFFFF;

	font-size: 1em;

	font-style: normal;

	font-weight: normal;

	margin-top: 0.625em;

	margin-left: -5em;

	}

Заранее благодарю.

[Удален]
#1

Попробуйте поиграться со свойством white-space для publname

[Удален]
#2

Читай букварь

---------- Добавлено 03-14-2013 в 09:07 PM ----------

Htmlbook.ru

Vauquelin
На сайте с 02.09.2012
Offline
9
Vauquelin
#3

я бы изменил структуру так:


		<div class="publname">
			<p>Аполлон 18 <span class="myclass">// Apollo 18</span></p>
			<p сlass="slogan">Никто не звал нас на луну"</p>
		</div>

и уже применил нужные стили, чтоб добиться сходства с картинкой.

Если "Аполлон 18"-заголовок, то лучше использовать h1, h2 и тд

footballstar
На сайте с 20.07.2010
Offline
94
footballstar
#4

Vauquelin, спасибо, сейчас потыкаю.

VertuOzz
На сайте с 20.07.2010
Offline
123
VertuOzz
#5

На быструю руку получилось так:

Если правильно понял, что требуется :)

index.html 

<!DOCTYPE html>

<html>

<head>

<title>разнообразные уроки</title>

<link rel="stylesheet" type="text/css" href="reset.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

	<div class="leftblock">

		<div class="poster">

			<img src="D:\учеба\верстка\результаты\les4\images\img.jpg" alt="постер" title="постерок" />

		</div>

		<div class="publname">

			<p>Аполлон 18<span> // Apollo 18 </span><br />

			<span>"Никто не звал нас на луну" </span></p>

		</div>

	</div>

</body>

</html>

Style.css 

.leftblock {

	margin: 0 auto;

	position: relative;

	display: block;

	background: black;

	width: 32em;

	height: 31.875em;

	border-radius: 8px;

	-webkit-border-radius: 8px;

	-moz-border-radius: 8px;

	}

.leftblock div.poster {

	position: relative;

	display: block;

	}

.leftblock div.poster img {

	width: 11.8125em;

	height: 16.875em;

	margin: 0.625em;

	float: left;

	border-radius: 6px;

	-webkit-border-radius: 6px;

	-moz-border-radius: 6px;

	}

.leftblock div.publname {

	position: relative;

	display: block;

	float: left;

	}

.leftblock div.publname p {

float:left;

	color: #FFFFFF;

	font-style: bold;

	font-weight: normal;

	font-size: 1.25em;

	margin-top: 0.625em;

	#margin-left: -5em;

	}

.leftblock div.publname span {

	color: gray;

	font-size: 0.7em;

	font-style: normal;

	font-weight: normal;

	margin-top: 0.625em;

	#margin-left: -5em;

	}

Код корявый, но по крайней мере близко к оригиналу

footballstar
На сайте с 20.07.2010
Offline
94
footballstar
#6

спасибо, я уже сверстал, забыл отписаться, немного другим способом). 

.leftblock div.publname {

	position: relative;

	float: left;

	}

.leftblock div.publname a {

	display: inline-block;

	text-decoration: none;

	margin: 0.625em;

	}

.leftblock div.publname h2 {

display: inline-block;

	color: #FFFFFF;

	font-size: 1.3em;

	font-style: bold;

	font-weight: normal;

	}

.leftblock div.publname span.asname {

	font-size: 1em;

	font-style: normal;

	font-weight: normal;

	color: #909090;

	}

.leftblock div.publname p.slogan {

	margin: 0.625em;

	margin-top: -0.625em;

	color: #909090;

	font-size: 1em;

	font-style: normal;

	font-weight: normal;

	}


---------- Добавлено 14.03.2013 в 21:32 ----------

<div class="publname">

			<a href="#"><h2>Аполлон 18</h2> <span class="asname"> // Apollo 18</span></a>

			<p class="slogan">Никто не звал нас в космос</p>

		</div>

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