Помогите с CSS - position: absolute - Веб-строительство - Сайтостроение

77

wturm

24 января 2011, 13:59

1935

Имеется блок 200-200,в нем размещено картинки и описание

Хотелось бы сделать красиво чтоб картинка была с лева,а описание справа

Нашел выход с помощью position: absolute,но не совсем с ним разобрался,стоят такие параметры

#ууууу {
position: absolute;
top: 5%;
bottom: 5%;;
width: 200px;
height: 100px;

}

Но получается не совсем правильно.на снмке видно.

Помогите привести код к нужным параметрам:popcorn:

png 82244.png

https://wturm.ru

77

wturm

24 января 2011, 14:06

#1

а хотелось бы что-то вот типа такого

png 82246.png

41

Lesya-lisichka

24 января 2011, 14:17

#2

вам нужно указать обтекание слева. float:left для картинки

Портфолио (https://www.weblancer.net/users/Lesyaagrus/portfolio/)

95

Ткач

24 января 2011, 14:26

#3

для картинки указывайте

float: left; width: 200px;

для текста

margin-left: 200px; padding-left: 15px;

после этого не забудьте очистку поставить

clear: left;

будет так как вы хотите.

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

83

oux

24 января 2011, 15:08

#4

А если текст в отдельный блок вывести?

77

wturm

24 января 2011, 16:57

#5

практически ничего не понял...

можно более подробнее пожалуйста

[Удален]

24 января 2011, 17:23

#6

могу так посоветовать:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<!--стили для блоков-->

<style>

.block {

	width: 200px;

	height: 70px;

	padding: 5px;

	border: 1px solid #666666;

	margin-bottom:5px;

}

.block img {

	float: left;

	margin-right: 5px;

}

</style>



</head>

<body>

<!--блок с рисунком и текстом-->

<div class="block"> <img src="dead-space.jpg" /><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> </div>

<!--конец блока с рисунком и текстом-->

<div style="clear:left;"></div>

<!--убираем обтекание-->



<!--блок с рисунком и текстом-->

<div class="block"> <img src="dead-space.jpg" /><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></div>

<!--конец блока с рисунком и текстом-->

<div style="clear:left;"></div>

<!--убираем обтекание-->



<!--блок с рисунком и текстом-->

<div class="block"> <img src="dead-space.jpg" /><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></div>

<!--конец блока с рисунком и текстом-->

<div style="clear:left;"></div>

<!--убираем обтекание-->

</body>

</html>

получается так:

77

wturm

25 января 2011, 07:48

#7

r.yevgeniy

Спасибо большое,то что нужно

79

Olldman

25 января 2011, 07:54

#8

r.yevgeniy - <div style="clear:left;"></div> - это лишнее, в крайнем случае для .block прописать overflow:hidden

[Удален]

25 января 2011, 08:03

#9

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

Курс биткоина превысил $50 тысяч

Переиграть и победить: как анализировать конкурентов для продвижения сайта

Помогите с CSS - position: absolute