X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Крайний блок сползает вниз.
Пятница
Пятница
Topic Starter сообщение 13.7.2008, 15:18; Ответить: Пятница
Сообщение #1


Мир вам!:hihi:
Есть одна проблема.
Имеется контент, резиновый, padding: 10px; в нем заложен один блок шириной 100%, и под этим блоком размещаются 4 блока шириной по 25% каждый.
Дабы их хоть как-то разделить - было решено добавить между ними margin: 10px; и тут вышла каша, правый блок съехал вниз, БЕДА!:(

Что делать? В чем ошибка? Ума не приложу!
Вот сама идея: http://dnepr-city.com/test/

CSS:
.content {
padding: 0 10px 10px 10px;
overflow: hidden;
height: 500px;
margin-left: 0px;
font-size: 100%;
text-align: justify;
width: *;
background: #F4F4F4;
}


a.block1 {
           margin-right: 1px;
    display: block;
    width: 25%;
    height: 150px;
    float: left;
    background-color: #BEBEBE;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}
a.block2 {
           margin-right: 1px;
    display: block;
    width: 25%;
    height: 150px;
    float: left;
    background-color: #BEBEBE;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}
a.block3 {
           margin-right: 1px;
    display: block;
    width: 25%;
    height: 150px;
    float: left;
    background-color: #BEBEBE;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}
a.block4 {
    display: block;
           width: 25%;
    height: 150px;
    float: left;
    background-color: #BEBEBE;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}
.up {
    height: 60px;
    width: 100%;
    background-color: #B0B0B0;
    margin: 10px 0px 0px 0px;
}


<div class="up">(серая верхушка над блоками)</div>

<div align="left">
<a class="block1" href="#"><img class="image" src="img/1.jpg" alt=""></a>
<a class="block2" href="#"><img class="image" src="img/2.jpg" alt=""></a>
<a class="block3" href="#"><img class="image" src="img/3.jpg" alt=""></a>
<a class="block4" href="#"><img class="image" src="img/4.jpg" alt=""></a>
</div>


Вот скрин самой проблемы:
[IMG]http://i014.radikal.ru/0807/b7/6652a36f06b0.jpg[/IMG]

Спасибо за ваше понимание!:boyan:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
QuickSite
QuickSite
сообщение 14.7.2008, 10:30; Ответить: QuickSite
Сообщение #2


Пятница, мне кажется проблема как раз в том, что Вы добавили внешние отступы. Либо уберите их, либо задайте ширину блоков в px.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Пятница
Пятница
Topic Starter сообщение 14.7.2008, 11:04; Ответить: Пятница
Сообщение #3


Блоки должны быть резиновыми.
Посему я убрал оступы между блоками и контентом, но там есть одна проблема - неизвестно откуда взялся отступ в 2px между крайним правым блоком и контентом, может это и стало причиной схода блока вниз?
См. скрин:
[IMG]http://i275.photobucket.com/albums/jj295/Piatnica/prob.png[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 14.7.2008, 11:47; Ответить: Webmaster_hb
Сообщение #4


Пятница, причина схода блоков вниз, из за того что в 100% никак не влезет
4 раза по 25% + отступы по 1 пикселю
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Пятница
Пятница
Topic Starter сообщение 14.7.2008, 12:42; Ответить: Пятница
Сообщение #5


Да я по этому поводу тоже думал, пытался сделать 4 раза по 24% - слишком коротко.

Так откуда вообще взялись эти отступы по 1 пикселю? Я же вроде убрал отступы между блоками (хотя они там нужны).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 14.7.2008, 12:59; Ответить: Webmaster_hb
Сообщение #6


Пятница, делайте 4 блока по 25%, а потом внутри них делайте блоки которые будут уже 100% с границей какая вам нужна
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Пятница
Пятница
Topic Starter сообщение 14.7.2008, 13:03; Ответить: Пятница
Сообщение #7


О! А это идея! Сейчас попробую!
Вот за что я люблю русский менталитет!:rjunimagu:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Пятница
Пятница
Topic Starter сообщение 14.7.2008, 13:57; Ответить: Пятница
Сообщение #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
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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Пятница
Пятница
Topic Starter сообщение 14.7.2008, 14:36; Ответить: Пятница
Сообщение #10


Я не выложил весь код, ибо будет очень громоздко, правильным решением будет залить на хост, что я и сделал, нате, полюбуйтесь в ИЕ и в ФФ:wall:
http://dnepr-city.com/test2/

В Опере все отлично!!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как скрыть блок в приложении на 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-


 



RSS Текстовая версия Сейчас: 19.3.2024, 14:13
Дизайн