как мога да направя следния отстъп

Y

ystefanov

Registered
Имам една картинка подравнена в ляво чрез float, от дясно искам да разположа хоризонтално меню и под нег текст, който да се обтича около картинката. Направих го, но имам проблем с левия отсъп на текста, защото се отстъпва спрямо краищата на парвоъгълника, не спрямо елемента, който се обтича.
Има ли начин текста, който заобикаля флотнатия елемент, да има отстъп спрямо тази част която обикаля, не спрямо краищата на правоъгълника?

П.С. в случая ми трябва padding на текста
 
пробвай желания елемент да му дадеш[js] $("#id-to").appednTo('elemnta kum koito da sa zakachi').css("padding","5px")[/js]
 
Ето този отстъп от ляво се стремя да направя. Възможно ли е без използването на javasript? Например със задаване на отстъп на параграфа както задавам text-indent и ми отстъпва първия ред, така да ми премества и останалия текст по същия начин.

3978.jpg


Знам че има начин ако направя 2 див-а и им задам отстъпите, но се стремя да избегна и това, тъй като текста заобикаля и около други картинки.
 
Както каза Nazi_93 задай padding на картинката. Трябва ти нещо такова:
Код: 
<img src="kartinkata.png"class="padding"/>
CSS:
Код: 
.padding {
padding: 5px;
}
 
При всякакъв отстъп от дясно (margin, padding) ми измества и менюто (сивата хоризонтална линия)
 
А,ако му зададеш на главния див,където са картинакта и текста [css]text-align:left/center/right[/css] ?
 
На главния див съм задал "justify", по този начин не мога да задамо отстъп.
Ето един примеренк код:

Код: 
<!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>Untitled Document</title>
<style type="text/css">


 
    #container {
	width: 993px;
	height: auto;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	margin: 0px auto;
	}
		

.p1{clear: right; border: solid 5px black;  text-indent: 2em; text-align: justify; }	

.left-pic{border: solid blue 2px; url(images/left-table.png);}

.pic{float:left;}

.menu{float:left; border: solid red 2px; width: 752px;}

ul li{display:inline;text-align:center;padding-left:10px;float:left;} 

ul li a{
padding-top:10px;
display:block;
width:100px;
height:32px;
background:url(http://kick-off-fm.qhoster.net/projects/wtestate/images/menubg.jpg) no-repeat center;
color:#999;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
1ul li a:hover{
color:#fff;
background:url(http://kick-off-fm.qhoster.net/projects/wtestate/images/mutehover.jpg) no-repeat center;
} 

</style>
</head>

<body>
<div id="container">

  <div class="pic"><img src="http://cdn.endata.cx/data/games/10864/%D0%B4%D0%B5%D0%BC%D0%BE%D1%82%D0%B8%D0%B2%D0%B0%D1%82%D0%BE%D1%80%D1%8B.jpg" width="228" height="349" /></div>
      
   <div class ="menu">    
<ul>
<li><a href="#">Купува</a></li>
<li><a href="#">Продава</a></li>
<li><a href="#">Под наем</a></li>
<li><a href="#">Контакти</a></li>
</ul> 
</div>

<p class="p1">Lorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Lorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide labitur cu, et mei salutandi repudiare vulputate. Vel epicuri deterruisset cu, ea eam vide feugiat. Tollit latine aliquam eos ei, et has munere nullam noluisse, vim wisi scripta copiosae ne. Ex pro aliquando assueverit. Eam id illum possit argumentum, eam augue copiosae id.

Eam eius oblique aliLorem ipsum dolor sit amet, probatus indoctum vis eu, iriure pericula consulatu quo id. Menandri assueverit ad vim, sed vide 
</p>
 
 </div>
  </div>
   
</body>
</html>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе