bobsa
-
Posts
3 -
Joined
-
Last visited
bobsa's Achievements
Explorer (1/14)
0
Reputation
-
Картинки с сылкой в ряд по горизонтали по центру блока с авто margin
bobsa replied to bobsa's question in HTML Coding
Switch74Все получилось как надо. ОГРОМНОЕ СПАСИБО!!! -
Картинки с сылкой в ряд по горизонтали по центру блока с авто margin
bobsa replied to bobsa's question in HTML Coding
Galaxy Да как я уже только не пробовал и с процентами и без. Насчет названий эт я тут на форуме, чтоб понятней было по названием стилей, чего я хочу. Switch74Ну именно так и я и хотел. Щас вот ток попробую, смогу ли двигать текст ссылки выше ниже, использовать a:hover, ну и все такое прочее. Кода 3 слова и все на местах, а я тут горы кода понаписал и все не так как надо Большое Спасибо полюбому. -
Картинки с сылкой в ряд по горизонтали по центру блока с авто margin
bobsa posted a question in HTML Coding
Доброе утро всем. Начал переделывать сайт под различные девайсы, айпад и тд. Столкнулся с такой проблемкой. Как сделать картики ссылкой в ряд по горизонтали, но чтобы они были по центру блока, если реально то с авто оступами. Проблема в том, что при уменьшении окна, если картинка не влезает, она переносится по левому краю и остается большой кусок пустым это если я использую float left, если его не использовать тогда они у меня выстраиваются по центру но по горизонтали. Вобщем, чтобы понятней было скриншот и приблизительный код ниже: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { margin: 0; } .seredina{max-width:1000px; height:auto;margin:0 auto;border: 1px solid #ff0000;} .kartinkivnutri {margin:5px auto;} .dizkartinki {text-align: center;width: 182px;height: 135px;float:left;} .dizkartinki a{text-decoration: none;display: block;color:#333333;border: 1px solid #333333;} .dizkartinki a :hover{text-decoration: none;color:#d90c1b;border: 1px solid #0000ff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .dizkartinki a:hover img{opacity: 0.7;} .dizkartinki span.textssilka{bottom:0px;left:1px;width:180px;height:auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} </style> </head> <body> <div class="seredina"> <div class="kartinkivnutri" align="center"> <div class="dizkartinki"><a href="/link1"><img src="1.jpg" alt="img1" width="180" height="135"><span class="textssilka">Link 1</span></a></div> <div class="dizkartinki"><a href="/link2"><img src="2.jpg" alt="img2" width="180" height="135"><span class="textssilka">Link 2</span></a></div> <div class="dizkartinki"><a href="/link3"><img src=3.jpg" alt="img3" width="180" height="135"><span class="textssilka">Link 3</span></a></div> <div class="dizkartinki"><a href="/link4"><img src="4.jpg" alt="img4" width="180" height="135"><span class="textssilka">Link 4</span></a></div> </div> </div> </body></html>Всем спасибо, кто подскажет. С уважением Максим.