Всем привет ! Помогите сделать ссылку с картинкой и текстом справа от неё. Я много перепробовал, сейчас выглядит так: Код (Text): <div class="s1"> <a href="http://адрес" target=_blank> <img class="is1" src="картинка.jpg" width="60" height="60"/> <span class="ts1">Текст</span> </a> </div> css: Код (Text): /* блок */ .s1 { display:block; position:relative; width:300px; height:60px; background: green; top:30px; left:20px;} /* Изображение */ .is1{ float:right; border-radius:4px; display:block; position:absolute; top:0px; left:0px;} /* Текст внутри блока */ .ts1 { display:block; position:absolute; background: yellow; top:0; left:65; width:230; height:59; padding:5px; text-align:left;} Проблема в том что блок с текстом живет своей жизнью, он не реагирует на заданные размеры, позицию и всегда упирается в верхний левый угол блока, растягиваясь под размер текста (при этом не выходит за размеры блока). Блок вроде в порядке (можно менять и двигать), картинка тоже, но вот текст сам по себе.... p.S. сначала делал блок прямо из ссылки ( <a class="s1"... )
Лучше нарисуй, какой результат ожидаешь. Размеры картинки всегда 60x60? Текст какой длины, постоянной, может быть в две строки или весь блок должен растягиваться в ширину?
Я хотел сделать блок-ссылку, чтобы и картинка была ссылкой и текст, ну и соответственно даже если на картинку навести курсор то текст подсвечивается как ссылка. Блок строго определенного размера и картинка тоже. Только текст разный и должен быть справа от картинки, я пишу его сам и конечно постараюсь уместить в блок. Хотел вот так: https://docs.google.com/drawings/d/1J4VmggiRuj-sV17Su_Uoh5zUjGeNDIJZD1V1gwH9qh0/edit но не могу разместить текст справа, он сьезжает в угол верхний, и блок в котором он находится не слушается размеров
Так? Код (PHP): <style type="text/css"> #el{ border:1px dotted #f33; display:inline-block; padding-right:10px; } #el a{ vertical-align:middle; } #el img{ vertical-align:middle; padding-right:10px; border:0; } </style> <span id="el">[url="#1"]Здесь текст[/url]</span> Добавлено спустя 5 минут 29 секунд: Даже span не нужен: Код (PHP): <style type="text/css"> .el{ border:1px dotted #f33; display:inline-block; padding-right:10px; vertical-align:middle; } .el img{ vertical-align:middle; padding-right:10px; border:0; } </style> [url="#1"]Здесь текст[/url]
Спасибо, помогли вспомнить про padding Сделал вот так: Код (Text): <style type="text/css"> .st1 { display:block; position:absolute; background-image: url(адрес/img/stat.png); background-repeat: no-repeat; vertical-align:middle; padding-left:65px; top:30px; left:340px; width:235px; height:60px;} </style> <a class="st1" href="Адрес">Текст</a>