Текста да отива до картинката...

[amarok]

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

<table class='achievement'><tbody><tr><td>
<img src='images/achievements/1.gif'>
</td><td><h2>60 Text</h2><br> Текст<br><br><h2>60 / <?php echo"$level"?></h2>
</td></tr></tbody></table>

.achievement {
	text-align: left;
	background: #F1D16C;
	background-image: url('images/achievements.jpg');
	width: 785px;
	height: 159px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
}

 

[misho]

Задай конкретна ширина та колонката с картинката!

 

[amarok]

Ммм ако може да го направиш :?

 

[misho]

Е, кажи колко ти е широка снимката! Да речем, че е 200px, тогава това би трябвало да свърши работа.

<table class='achievement'><tbody><tr><td width="200"> 
<img src='images/achievements/1.gif'> 
</td><td align="left"><h2>60 Text</h2><br> Текст<br><br><h2>60 / <?php echo"$level"?></h2> 
</td></tr></tbody></table>

Като можеш да направиш и CSS-а така, за да не ти се залепва текста за картинката.

.achievement { 
   text-align: left; 
   background: #F1D16C; 
   background-image: url('images/achievements.jpg'); 
   width: 785px; 
   height: 159px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
}
.achievement td { 
   padding: 5px;
}

 

[amarok]

не не става и по 2 та начина пак е едно и също значи виш че в кода имам

<img src='images/achievements/1.gif'>

а иначе това в самия css код ми е background-а върху него слагам снимката а текста е след снимката и ако текста е малак ми бяга в дясно.

 

[misho]

Това не са два варианта, а един. Използвай и двата кода! Остовям на страна факта, че ти липсва наклонена черта и alt в img тага, че си сединични кавички и т.н. Виждам, че имаш таблица с две колнки - вляво синмка, вдясно текст. Това което прави кода, който ти предложих е да стеснява лявата колона, точно колкото е ширината на снимката (разбира се промени това 200 с истинската ширина на снимката), за да може текста да е максимално вляво и да не бяга от изображението.

А в CSS не ти пипам фона. Просто добави това за по-пригледно, ако искаш текста да не се залепи за картинката!

.achievement td { 
   padding: 5px; 
}

 

[amarok]

мерси стана +1