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

CSS - выравнивание текста около картинки

[Удален]
3657

Люди, подскажите пожалуйста, я сам что-то запутался в CSS и DIV-ах.

Мне нужно чтобы текст обтекал картинку - вот пример на прикреплённой картинке.

И вот кусок кода странички: 




				<div class="shop"> 

					<div class="shop-name"><a href="/shop/cat6/show41/">Заголовок книги</a></div><div class="shop-img"><a href="/shop/cat6/show41/"><img src="/userfiles/shop/medium/Zagolovok_knigi_124.jpg" width="90" height="120" alt="Заголовок книги" title="Заголовок книги"></a></div><div class="shop-price">Цена: <span class="shop-price-value">800</span> <span class="shop-price-currency">руб.</span></div> 

					<div class="shop-text"><p>Аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация.</p></div> 

				</div>

Как понимаю class shop-text ответственен за это. Подскажите плиз какую команду в css прописать?

gif Untitled-5.gif
[Удален]
#1

Я бы контейнер .shop-price вставил бы в .shop-img, а ему в свою очередь прописал обтекание float: left;, далее можно и со свойством magin поиграть, чтоб настроить правый и нижний отступы.

CSS - выравнивание текста около картинки

А где сам css то?

Помогите разобраться с атрибутом Прошу помощи с Топ Несколько вопросов по Virtuemart
Varnish
На сайте с 19.12.2009
Offline
55
Varnish
#2

.shop-img {float:left;}

vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#3

<img /> можно и без дива по левому краю сделать

<img src="" style="float:left: margin:0 7px 2px 0;" />

[Удален]
#4
vandamme:
<img src="" style="float:left: margin:0 7px 2px 0;" />

Если я не ошибаюсь, цена будет справа по отношению к картинке.

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

<div class="shop">
		<p><a href="/shop/cat6/show41/">Заголовок книги</a></p>
    <div class="shop-img"><a href="/shop/cat6/show41/" title="Заголовок книги">
    <img src="/userfiles/shop/medium/Zagolovok_knigi_124.jpg" alt="Заголовок книги"></a>
    <p class="shop-price">Цена: <span class="shop-price-value">800</span> <span class="shop-price-currency">руб.</span></p>
    </div>
		<p>Аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация,
    аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация, аннотация,
    аннотация, аннотация, аннотация, аннотация.</p>
</div>

.shop{width:280px;}
.shop-img{width:100px;float:left;padding:4px 6px;}
.shop-img img{width:90px;height:120px;}
[Удален]
#6

Спасибо всем ответившим.

Хотел бы дополнить - это движок. И я могу только редактировать CSS файл. А что-то другое менять не могу.

Вот сам CSS: 

html

{

	height: 100%;

	width: 100%;

}



body

{

	background-color: #ffffff;

	font-family: tahoma,Arial,verdana,sans-serif;

	font-size: 0.75em;

	color: #525453;

	padding: 0px;

	margin: 0px;

}



form

{

	margin: 0px;

	padding: 0px;

}



div,td,font

{

	font-size: 100%;

}



A:link,A:visited

{

	color: #317aab;

	TEXT-DECORATION: underline;

}



A:hover

{

	color: #ff0000;	

	TEXT-DECORATION: none;

}



table,img

{

	border: 0px;

}



h1, h2, h3, h4

{

	font-weight: normal;

	color: #adadad;

	text-transform: uppercase;

}

h1

{

	font-size: 1.3em;

	padding-top: 0px;

	margin-top: 10px;

}

h2

{

	font-size: 1.2em;

	clear: both;

}



hr

{

	border: 0px;

	background: transparent url(../img/hr.gif) repeat-x top right;

	color: none;

	height: 1px;

	margin: 10px 0px 10px 0px;	

}



.logo

{

	float: left;

	width: 228px;

	height: 32px;

	padding: 0px 0px 0px 33px;

	margin-top: 44px;

	background: transparent url(../img/line-under-logo.gif) no-repeat bottom right;

	text-transform:uppercase;

	color: #2d7aab;

	font-size: 1.4em;

	font-weight: bold;

}

.logo A:link,.logo A:visited

{

	text-decoration: none;

}

.logo A:hover

{

	text-decoration: underline;

}



.header

{

	margin-left: 228px;

	background: transparent url(../img/header-line.gif) repeat-x bottom right;

	height: 76px;

}

.header-img

{

	background: transparent url(../img/header.gif) no-repeat bottom left;

	height: 76px;

}



.top-menu

{

	float:right;

	background: transparent url(../img/header-finish.gif) no-repeat top right;

	height: 40px;

	margin-top: 36px;

	padding: 12px 33px 0px 0px;

	font-size: 0.9em;

	color: #f2f2f2;

}

.top-menu img

{

	margin-left: 15px;

	padding: 4px 0px 0px 0px;

}

.top-menu .search

{

	float: left;

}



.menu

{

	font-weight: bold;

}

.menu_level

{

	padding-left: 20px;

}

.menu2

{

	margin-left: 20px;

}

.menu3

{

	margin-left: 40px;

}

.menu4

{

	margin-left: 60px;

}



td.left

{

	padding: 40px 20px 20px 33px;

	width: 200px;

	font-size: 0.9em;

}

td.right

{

	padding: 40px 33px 20px 20px;

	width: 200px;

	font-size: 0.9em;

}

.left h2,.right h2

{

	margin-top: 10px;

	background: transparent url(../img/hr.gif) repeat-x top right;

	padding-top: 10px;

}

.left .show-all,.right .show-all

{

	text-align:right;

}



td.content

{

	padding: 0px 0px 20px 0px;

}



table.footer td

{

	padding: 20px 33px 20px 0px;

	font-size: 0.9em;

}

table.footer td.footer-contacts

{

	padding: 20px 20px 20px 33px;

	width: 200px;	

}

.clear

{

	clear:both;

}



/* общие */

	.inptext{}

	.infofield{}

	.infoform{}

	.inpshort{}

	.inpselect{}

	.inpcheckbox{}

	.inpdate{}

	.button

	{

		background-color:#e7ae1b;

		color:#ffffff;

		border: 0px;

		font-size: 1em;

		margin: 3px 0px 3px 0px;

	}

	

	.paginator

	{

		clear:both;

	}

	.show-all

	{

		padding-top: 10px;

		clear: both;

	}

	.previous-link

	{

		width: 40%;

		float: left;

	}

	.next-link

	{

		width: 40%;

		float: right;

		text-align: right;

	}



	.errors

	{

		color: red;

	}



	.path

	{

		font-size: 0.9em;

		padding-top: 20px;

	}

	.show-users{}

	.language{}



/* captcha */

	.code{}

	.code-enter{}

	.code-img

	{

		margin: 4px 0px 4px 0px;

	}

	.code-input{}

	.code-update

	{

		font-size: 0.9em;

	}



/* rating */

	.rating-form{}

	.rating-form .button{}



	.rating-votes

	{

		display:inline;

	}



/* comments */

	.comments-form{}

	.comments-form h2{}

	.comments-form .button{}

	.comments-form .inptext

	{

		width: 50%;

		height: 100px;

	}



	.comments{}

	.comments .comments-date

	{

		font-weight: bold;

	}

	.comments .comments-name{}

	.comments .comments-text

	{

		margin-bottom: 10px;

	}



/* votes */

	.votes-form{}

	.votes-guestion{}

	.votes-form-answer

	{

		margin-left: 10px;

	}

	.votes-answer

	{

		margin-left: 10px;

	}

	.votes-form .button{}



/* search */

	.search

	{

		border: 1px solid #a7a6aa;

		background-color:#ffffff;

		width: 160px;

	}

	.search .submit-search

	{

		border:0px;

		background:none;

		width: 14px;

		height: 14px;

		background: transparent url(../img/search.gif) no-repeat 0px 3px;

		margin: 0px;

	}

	.search .input-search

	{

		border:0px;

		background:none;

		width: 136px;

		margin: 0px;

	}

	.search-result

	{

		margin-bottom: 20px;

	}

	.search-list

	{

		margin-bottom: 10px;

	}

/* login */

	.login

	{

		background: transparent url(../img/hr.gif) repeat-x top right;

		padding-top:10px;

		margin-top: 10px;

	}

	.login .infofield

	{

		width: auto;

		margin: 7px 4px 3px 0px;

		height: 12px;

		float:left;

		clear:both;

	}

	.login .intbutton

	{

		clear: both;

	}

	.login .inptext

	{

		float:left;

		width:auto;

		margin: 3px 0px 3px 0px;

	}

	.login-reminding{}

	.login-registration{}



/* registration */

	.registration-form{}

	.registration-form .inptext{}

	.registration-form .infofield{}	

	.registration-form .infoform{}

	.registration-form .button{}



/* reminding */

	.reminding-form{}

	.reminding-form .infofield{}

	.reminding-form .inptext{}

	.reminding-form .button{}



/* tags */

	.tags

	{

		padding: 5px 0px 10px 0px;

	}

	.tags .tags-header

	{

		font-weight: bold;

	}



	.tags-list

	{

		margin-bottom: 5px;

	}

	.tags-list .tag-name

	{

		font-weight: bold;

	}

	.tags-list .tag-text{}



	.tags-block{}

	.tags-block h2{}

	.tags-block a:link, .tags-block a:visited{}

	.tags-block span{}



/* news */	

	/* news общие классы */

	.news

	{

		margin-bottom: 10px;

	}

	.news-name

	{

		font-weight: bold;

	}

	.news-date

	{

		font-weight: bold;

	}

	.news-anons{}

	.news-text{}

	.news-img{}

	.news-all-img{}



	/* news список новостей */

	.news-list{}

	.news-list .news

	{

		clear:both;

	}

	.news-list .news-date

	{

	}

	.news-list .news-name{}

	.news-list .news-anons{}

	.news-list .news-img

	{

		float:left;

		margin:3px 10px 3px 0px;

	}



	/* news вывод однй новости */

	.news-id{}

	.news-id .news-date{}

	.news-id .news-anons

	{

		font-weight: bold;

	}

	.news-id .news-text{}

	.news-id .news-all-img{}

	.news-id .show-all{}



	/* show_news_block функция для шаблона */

	.news-block h2{}

	.news-block .news-name{}

	.news-block .news-date

	{

		margin-top: 10px;

	}

	.news-block .news-anons{}

	.news-block .show-all{}



	/* show_calendar_news функция для шаблона */

	.news-calendar{}

	.news-calendar h2{}

	.news-calendar .news-year

	{

		font-weight: bold;

	}

	.news-calendar .news-month{}

	.news-calendar .show-all{}

	

/* clauses */	

	/* clauses общие классы */

	.clauses

	{

		margin-bottom: 10px;

	}

	.clauses-name

	{

		font-weight: bold;

	}

	.clauses-date

	{

		font-weight: bold;

	}

	.clauses-anons{}

	.clauses-text{}

	.clauses-img{}

	.clauses-all-img{}

	

	/* clauses вывод списка статей */

	.clauses-list{}

	.clauses-list .clauses

	{

		clear:both;

	}

	.clauses-list .clauses-name{}

	.clauses-list .clauses-anons{}

	.clauses-list .clauses-img

	{

		float:left;

		margin:3px 10px 3px 0px;

	}



	/* clauses вывод однй статьи */

	.clauses-id{}

	.clauses-id .clauses-date{}

	.clauses-id .clauses-anons

	{

		font-weight: bold;

	}

	.clauses-id .clauses-text{}

	.clauses-id .clauses-all-img{}

	.clauses-id .show-all{}



	/* show_clauses_block функция для шаблона */

	.clauses-block h2{}

	.clauses-block .clauses-name{}

	.clauses-block .clauses-date{}

	.clauses-block .clauses-anons{}

	.clauses-block .show-all{}





/* faq */

	/* faq общие классы */

	.faq

	{

		margin-bottom: 10px;

	}

	.faq-date

	{

		font-weight: bold;

	}

	.faq-question

	{

	}

	.faq-answer{}



	/* faq вывод списка вопросов */

	.faq-list{}

	.faq-list .faq-date

	{

		margin-top: 10px;

	}

	.faq-list .faq-question{}

	.faq-list .faq-answer{}

	

	/* faq вывод одного вопроса */

	.faq-id 

	.faq-id .faq-date{}

	.faq-id .faq-question{}

	.faq-id .faq-answer{}

	.faq-id .show-all{}	

	

	/* faq форма */

	.faq-form{}

	.faq-form .inptext{}

	.faq-form .infofield{}	

	.faq-form .button{}

	

	/* faq-block функция для шаблона */

	.faq-block h2{}

	.faq-block .faq-date{}

	.faq_block .faq-question

	{

		font-weight: bold;

	}

	.faq-block .faq-answer{}

	.faq-block .show-all{}



/* feedback */

	.feedback-form{}

	.feedback-form .inptext{}

	.feedback-form .infofield{}

	.feedback-form .inpselect{}

	.feedback-form .inpcheckbox{}

	.feedback-form .inpdate{}

	.feedback-form .inpshort{}

	.feedback-form .button{}



/* shop */

	/* shop общие классы */

	.shop

	{

		margin-bottom: 10px;

	}

	.shop-name

	{

		font-weight: bold;

	}

	.shop-img{}

	.shop-price

	{

		font-weight: bold;

	}

	.shop-price .shop-price-value

	{

		font-weight: normal;

	}

	.shop-price .shop-price-currency

	{

		font-weight: normal;

	}

	.shop-text{}

	.shop-form

	{

		margin:0px;

		padding: 0px;

	}

	.shop-form .button{}

	.shop-form inpselect{}

	.shop-price-depend

	{

		padding:0px 5px;

	}

	

	/* shop вывод списка товаров */

	.shop-list{}

	.shop-list .shop

	{

		clear: both;

	}

	.shop-list .shop-cat-text{}

	.shop-list .shop-cat-links{}

	.shop-list .shop-name{}

	.shop-list .shop-img

	{

		float:left;

		margin:3px 10px 3px 0px;

	}

	.shop-list .shop-price

	{

		font-weight: bold;

	}

	.shop-list .shop-price .shop-price-value

	{

		font-weight: normal;

	}

	.shop-list .shop-text{}

	.shop-list .show-all

	{

		clear: both;

	}

	.shop-list .shop-form{}



	.shop-order a:link, .shop-order a:visited

	{

		text-decoration: none;

	}

	.shop-order .active

	{

		color: #ff0000;

	}
kimberlit
На сайте с 13.03.2007
Offline
370
kimberlit
#7
atbk:
А что-то другое менять не могу.

Религия не позволяет что ли? Менять можно всё, везде и всегда.

[Удален]
#8
kimberlit:
Религия не позволяет что ли? Менять можно всё, везде и всегда.

:)

Теоретически можно. Но для этого нужно сначала найти тот файл, который ответствен за ту или иную функцию этого движка. Я не фамильярен с этим двигом ...

atbk добавил 02.03.2011 в 12:32

Всем спасибо за помощь! Разобрался! :)

YouTube улучшил функцию поиска Google Apps облегчает планирование AdWords: «категории интересов» теперь

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