Jump to content
  • 0

Стили .


dima2207
 Share

Question

Всем привет !

Как с помощью стилей сделать чтобы надпись была под картинкой а-не справа и чтобы надпись невыходила за пределы картинки .

есть код :

#motioncontainer {
margin:0 auto;/* Uncomment this line if you wish to center the gallery on page */
width: 600px; /* Set to gallery width, in px or percentage */
height: 150px; /* Set to gallery height */
}

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */

}

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Дело в следующем : есть скрипт фотогалереи , я его немного переработал , добавил что-бы инфа бралась из бд и в цикле выводилась на экран :

<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:50;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<? for ($t=1;$t<count($news1);$t++){
if ($news1[$t]==''){}
else {

?> <a href="<?=@$news1[$t];?>" rel="lightbox" title="<center><font color=red><?=@$news3[$t];?>
СКАЧАТЬ ЭТО ФИЛЬМÌ</font></center>" rev="index.php?oz=<?=@$news2[$t];?>"><img src="<?=@$news1[$t];?>" width="70" height="111" alt="" border="0"></a>

<?
}
?>
</nobr>
</div>
</div>

И все было-б нормально если не одно но, а именно когда я пытаюсь разместить надпись прямо под картинкой , то у меня получается что картинки распологаются не в ряд а в столбик , что само по себе неприемлемо . подскажите как разместить надписи прямо под картинкой и желательно что-бы надписи не вылазили за пределы картинки .

Link to comment
Share on other sites

  • 0

=@$news3[$t];?>

СКАЧАТЬ ЭТО ФИЛЬМÌ" rev="index.php?oz==@$news2[$t];?>">

это пардон что за фигня? с каких пор в title находятся тэги?

ошибка как и предполагал в неправильном коде:)

title - всплывающая подсказка при наведении, она не выводится до или после картинки. если такое и произошло, то как раз из-за попытки браузера исправить ошибки в коде, т.к. в предоставленном куске имеется вывод только картинки и никакого текста.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy