Помощник
|
Крайний блок сползает вниз. |
Пятница
|
Сообщение
#1
|
||
|
|
||
|
|||
QuickSite |
14.7.2008, 10:30;
Ответить: QuickSite
Сообщение
#2
|
|
Пятница, мне кажется проблема как раз в том, что Вы добавили внешние отступы. Либо уберите их, либо задайте ширину блоков в px.
|
|
|
Пятница
|
Сообщение
#3
|
|
Блоки должны быть резиновыми.
Посему я убрал оступы между блоками и контентом, но там есть одна проблема - неизвестно откуда взялся отступ в 2px между крайним правым блоком и контентом, может это и стало причиной схода блока вниз? См. скрин: [IMG]http://i275.photobucket.com/albums/jj295/Piatnica/prob.png[/IMG] |
|
|
Webmaster_hb |
14.7.2008, 11:47;
Ответить: Webmaster_hb
Сообщение
#4
|
|
Пятница, причина схода блоков вниз, из за того что в 100% никак не влезет
4 раза по 25% + отступы по 1 пикселю |
|
|
Пятница
|
Сообщение
#5
|
|
Да я по этому поводу тоже думал, пытался сделать 4 раза по 24% - слишком коротко.
Так откуда вообще взялись эти отступы по 1 пикселю? Я же вроде убрал отступы между блоками (хотя они там нужны). |
|
|
Webmaster_hb |
14.7.2008, 12:59;
Ответить: Webmaster_hb
Сообщение
#6
|
|
Пятница, делайте 4 блока по 25%, а потом внутри них делайте блоки которые будут уже 100% с границей какая вам нужна
|
|
|
Пятница
|
Сообщение
#7
|
|
О! А это идея! Сейчас попробую!
Вот за что я люблю русский менталитет!:rjunimagu: |
|
|
Пятница
|
Сообщение
#8
|
|
О нет! За каждой решенной проблемой появляется новая.
То, как вы сказали сделать - вышло на ура! Я уже был не нарадовался, пока не проверил в ИЕ и в ФФ. Опера (на ура!): [IMG]http://i275.photobucket.com/albums/jj295/Piatnica/SITE-1.png[/IMG] ИЕ (в фф почти таже ситуация): [IMG]http://i275.photobucket.com/albums/jj295/Piatnica/SITE2-1.png[/IMG] <div class="up">Категории альбомов</div> <div align="left"> <div class="a"><a class="block1" href="#"><img class="image" src="img/1.jpg" alt=""></a></div> <div class="b"><a class="block2" href="#"><img class="image" src="img/2.jpg" alt=""></a></div> <div class="c"><a class="block3" href="#"><img class="image" src="img/3.jpg" alt=""></a></div> <div class="d"><a class="block4" href="#"><img class="image" src="img/4.jpg" alt=""></a></div> </div> ТО ЖЕ САМОЕ (нижний ряд блоков). .up {
height: 60px; width: 100%; background-color: #B0B0B0; margin: 10px 0px 0px 0px; } a.block1 { border-right: solid 1px #F4F4F4; display: block; width: 100%; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block2 { border-left: solid 1px #F4F4F4; display: block; width: 100%; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block3 { border-left: solid 1px #F4F4F4; display: block; width: 100%; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block4 { border-left: solid 1px #F4F4F4; border-right: solid 1px #BEBEBE; border-bottom: solid 1px #F4F4F4; display: block; width: 100%; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } .a { width: 25%; float: left; } .b { width: 25%; float: left; } .c { width: 25%; float: left; } .d { width: 25%; float: left; } |
|
|
Webmaster_hb |
14.7.2008, 14:07;
Ответить: Webmaster_hb
Сообщение
#9
|
|
у меня такой код нормальной и в FF и в IE
a.block1 { border-right: solid 1px #F4F4F4; display: block; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block2 { border-right: solid 1px #F4F4F4; display: block; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block3 { border-right: solid 1px #F4F4F4; display: block; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } a.block4 { display: block; height: 150px; background-color: #BEBEBE; text-align: center; color: #FFFFFF; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, sans-serif; } .a { width: 25%; float: left; } <div align="left">
<div class="a"><a class="block1" href="#"><img class="image" src="http://dnepr-city.com/test/img/1.jpg" alt=""></a></div> <div class="a"><a class="block2" href="#"><img class="image" src="http://dnepr-city.com/test/img/2.jpg" alt=""></a></div> <div class="a"><a class="block3" href="#"><img class="image" src="http://dnepr-city.com/test/img/3.jpg" alt=""></a></div> <div class="a"><a class="block4" href="#"><img class="image" src="http://dnepr-city.com/test/img/4.jpg" alt=""></a></div> </div> |
|
|
Пятница
|
Сообщение
#10
|
|
Я не выложил весь код, ибо будет очень громоздко, правильным решением будет залить на хост, что я и сделал, нате, полюбуйтесь в ИЕ и в ФФ:wall:
http://dnepr-city.com/test2/ В Опере все отлично!!!! |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Как скрыть блок в приложении на Android | 0 | Вито_052 | 1088 | 15.12.2019, 12:37 автор: Вито_052 |
|
Появляющийся блок | 0 | sergei_burg | 2180 | 1.6.2019, 13:39 автор: -sergei1980- |
|
Перенести блок FAQ с сайта Верстка |
3 | Gera | 2510 | 13.12.2018, 15:40 автор: mmkulikov |
|
Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок. тематика: СМИ,Туризм,Медицина |
4 | SeoGanik | 9605 | 18.2.2017, 12:33 автор: SeoGanik |
|
Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js | 2 | lensoy | 5585 | 27.9.2015, 19:08 автор: -lensoy- |
Текстовая версия | Сейчас: 19.3.2024, 14:13 |