Реклама на сайте Advertise with us

Помогите с версткой, какая то странность...

Расширенный поиск по форуму
 
Новая тема Новая тема   
Автор
Поиск в теме:



С нами с 13.11.06
Сообщения: 777
Рейтинг: 418

Ссылка на сообщениеДобавлено: 18/04/08 в 12:06       Ответить с цитатойцитата 

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   background-color: #9966FF;
}

#main {
   margin: 0 auto;
   width: 760px;
   border: #000000 double 5px;
}

#picContent {
   margin: 0 auto;
   width: 740px;
   height: 752px;
   border: #FFFFFF double 5px;   
}

#picContent a img {
   padding: 0;
   border: #FFFFFF solid 2px;
}

#picContent a:hover img {
   border: #FF0000 solid 2px;
}

#picContent a img.rowPics {
   margin: 2px;
   width: 140px;
   height: 160px;
   float: left;
}

#picContent a img.leftPics {
   margin: 2px;
   width: 288px;
   height: 200px;
   float: left;   
}

#picContent a img.rightPic {
   margin: 2px;
   width: 436px;
   height: 408px;
   float: right;
}
   
-->
</style>
</head>

<body>
  <div id="main">
    <div id="picContent">
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rightPic" /></a>
      <a href="#"><img src="#" class="leftPics" /></a>
      <a href="#"><img src="#" class="leftPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
      <a href="#"><img src="#" class="rowPics" /></a>
    </div>
  </div>
</body>
</html>


Не обращайте внимание на цвета и тд и тп, пытаюсь просто собрать РОВНО тумбы в блоке. Вопрос такой. В данном варианте нижний ряд разьезжается в Дриме, хотя в браузерах последних версий все ок. Что делать? Чито теоретически не нужны float-ы во всех стилях, кроме rightPic, но почему то если не использовать float, то не выдерживаются расстояния между тумбами. Например если убрать float в стиле leftPics - все вроде собирается нормально, а ИЕ7 тогда не выдерживает расстояния не по горизонтали не по вертикали между левыми большими тумбами... В общем у меня сейчас полные непонятки. Как правильно стили задать/что яделаю не так? Ширину и высоту блока, да и вообще размеры тумб, вымерял до пиксела, так что все должно уместиться чисто теоретически.

0
 

чоткий дезайнер

С нами с 20.07.06
Сообщения: 1782
Рейтинг: 731

Ссылка на сообщениеДобавлено: 18/04/08 в 12:25       Ответить с цитатойцитата 

дрим вообще дивную верстку (если она не совсем простая) обычно не правильно показывает, главное что в браузерах все нормально

1
 

Раздаю инвайты, ищу линк-трейд

С нами с 20.08.04
Сообщения: 16503
Рейтинг: 8593


Передовик Master-X (16.11.2006) Передовик Master-X (01.09.2019)
Ссылка на сообщениеДобавлено: 18/04/08 в 12:44       Ответить с цитатойцитата 

Да вроде ок все (как в дриме - не знаю, я его и не открывал ни разу)

Кому ссылку?
RU и EN Dating

1
 



С нами с 12.07.04
Сообщения: 1035
Рейтинг: 678

Ссылка на сообщениеДобавлено: 18/04/08 в 13:00       Ответить с цитатойцитата 

borgivan писал:
В данном варианте нижний ряд разьезжается в Дриме, хотя в браузерах последних версий все ок.


Забей на закладку Design, юзай закладку Code и проверяй в броузерах. ;)

1
 



С нами с 13.11.06
Сообщения: 777
Рейтинг: 418

Ссылка на сообщениеДобавлено: 20/04/08 в 11:29       Ответить с цитатойцитата 

Ясно... А всетаки? Почему когда я тумбы без свойства float делаю, не выдерживаются интервалы заданные! icon_sad.gif

0
 



С нами с 01.04.07
Сообщения: 4378
Рейтинг: 2970

Ссылка на сообщениеДобавлено: 20/04/08 в 11:59       Ответить с цитатойцитата 

Известный глюк ИЕ.
Вылечить можно вытягиванием кода в одну строку, удалив все пробелы и переносы строк (в блоке picContent) или поигравшись с display:inline
Я когда-то игрался, так и не нашёл решения, вытянул всё в строку.

4
 

« ... full on ... »

С нами с 17.03.07
Сообщения: 670
Рейтинг: 1686

Ссылка на сообщениеДобавлено: 20/04/08 в 15:10       Ответить с цитатойцитата 

Цитата:
Вылечить можно вытягиванием кода в одну строку, удалив все пробелы и переносы строк (в блоке picContent)

Точно. А чтобы не делать это вручную, можно для родительского элемента (#picContent) прописать в CSS:
Код:
white-space: nowrap;

Power of the lime madness...

4
 



С нами с 13.11.06
Сообщения: 777
Рейтинг: 418

Ссылка на сообщениеДобавлено: 20/04/08 в 22:23       Ответить с цитатойцитата 

Corex писал:
Точно. А чтобы не делать это вручную, можно для родительского элемента (#picContent) прописать в CSS:
Код:
white-space: nowrap;

Да что то я добавил, но почему то во всех браузерах эти гребаные картинки разьезжаются если не указывать float, блин... либо лыжи не едут... какие ещё свойства у элементов поменять что бы не было лишних "пробелов" между ними. Забыл может что то?

0
 
Новая тема Новая тема   

Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте!


Перейти:  



Спонсор раздела Стань спонсором этого раздела!

Реклама на сайте Advertise with us

Опросы

Рецепт новогоднего блюда 2022



Обсудите на форуме обсудить (11)
все опросы »