Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Как сверстать, чтобы ничего не ехало...
Winston  
 ۩     Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 9509
Пользователь №: 18161
На форуме: 7 лет, 5 месяцев, 17 дней
Карма: 552




Всем привет. Есть вот такой код
Свернутый текст
<style type="text/css">
.wrap{width: 620px;}
.wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}
.wrap > div.first{margin-left: 0px;}
</style>

<div
class="wrap">
<div
class="item first">1</div>
<div
class="item">2</div>
<div
class="item">3</div>
<div
class="item">4</div>
<div
class="clear"></div>
</div>

в результате получаем это http://screencloud.net/v/4gtc
Но если нажать Ctrl + "-" получаю вот такую фиговину http://screencloud.net/v/kr5K :angry:
Как нужно сделать чтобы ничего, никуда не ехало? :(
Размеры фиксированные, изменять нельзя.
PMСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
asdf27  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 253
Пользователь №: 32917
На форуме: 4 года, 5 месяцев, 5 дней
Карма: 1




Во-первых, на втором скрине "ширине шире".

Во вторых, считаем:
wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}


width 138px умножим на 4 блока = 552px.
margin-left: 20px так же на 4 = 80, в сумме 632px

а у вас весь блок .wrap{width: 620px;} + плюс на бордюры еще 8 пикселей. Меняйте ширинк .wrap
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
asdf27  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 253
Пользователь №: 32917
На форуме: 4 года, 5 месяцев, 5 дней
Карма: 1




Цитата
Размеры фиксированные, изменять нельзя.

Тогда margin-left: 20px; уменьшайте. А лучше первым трем дивам сделайте margin-right, а последний обзовите иначе, скопируйте стиль и уберите margin
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
asdf27  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 253
Пользователь №: 32917
На форуме: 4 года, 5 месяцев, 5 дней
Карма: 1




ПРОЩЕ

Вот тут
    .wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}
делай margin-left 10px
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Winston  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 9509
Пользователь №: 18161
На форуме: 7 лет, 5 месяцев, 17 дней
Карма: 552




Цитата (asdf27 @ 19.11.2012 - 22:37)
margin-left: 20px так же на 4 = 80, в сумме 632px

У меня 3 margin-left, для первого стоит 0, все выходит правильно.
PMСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
killer8080  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 8740
Пользователь №: 26630
На форуме: 5 лет, 9 месяцев, 9 дней
Карма: 591




Цитата (asdf27 @ 19.11.2012 - 23:37)
margin-left: 20px так же на 4 = 80, в сумме 632px

не на 4, а на 3, у первого блока нулевой отступ

Winston
потестил твой код, вроде все нормально. Какой браузер и доктайп?
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Winston  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 9509
Пользователь №: 18161
На форуме: 7 лет, 5 месяцев, 17 дней
Карма: 552




Цитата (asdf27 @ 19.11.2012 - 22:43)
делай margin-left 10px

Я не могу поменять, нужно чтобы было 20, ни больше ни меньше..



Спустя 2 минуты, 55 секунд Winston написал(а):
killer8080
Доктайп html5, и в хроме и в FF такая фигня (остальные не тестил)..




Спустя 1 минута, 1 секунда Winston написал(а):
В опере все OK
PMСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
asdf27  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 253
Пользователь №: 32917
На форуме: 4 года, 5 месяцев, 5 дней
Карма: 1




Да, проглядел.

При .wrap{width: 626px;} съезжает на 63% масштабе.
При .wrap{width: 628px;} съезжает на 33% масштабе.
При .wrap{width: 644px;} не съезжает на минимальном 33% масштабе.

Действительно, проглядел класс первого дочернего дива. Тем не менее, прибавляйте 8px бордюров, получится ровно 620. Наблюдения по смещению я привел выше.

Браузер Chrome.

Цитата
Я не могу поменять, нужно чтобы было 20, ни больше ни меньше..

Видимо это особенность масштабирования и вы ничего с этим не поделаете. А если разберетесь, укажите как.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
killer8080  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 8740
Пользователь №: 26630
На форуме: 5 лет, 9 месяцев, 9 дней
Карма: 591




Winston
значит эти браузеры криво масштабируют, ширина бордюра остается 1px, а ширина блока изменятся в процентном отношении из-за этого блоки оказываются шире обертки. Тут либо увеличить ширину обертки (поможет до определнной величины), либо просто забить, вряд ли нормальные юзеры масштабируют страницу в минус.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
redreem  
Дата
Цитировать сообщение

Пользователь сейчас на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 4259
Пользователь №: 29002
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 147




outline вместо border - не вариант?

.wrap > div.item {float: left; outline:1px solid; margin-left: 20px; width: 140px; height: 260px;top:1px}
.wrap > div.first{margin-left: 0px;left:1px}
PMПисьмо на e-mail пользователю
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
inpost  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Помагите Здесь живу!!!
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 22696
Пользователь №: 20039
На форуме: 7 лет, 4 дня
Карма: 599




Если такой вопрос, то можно див положить внутрь первого дива, уже внутреннему дать border. В таком случае border не будет участвовать в формировании ширины блока.


--------------------
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
PMПисьмо на e-mail пользователюICQ
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Winston  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 9509
Пользователь №: 18161
На форуме: 7 лет, 5 месяцев, 17 дней
Карма: 552




redreem
It works!
Спасибо!!!

inpost
Твой вариант не пробовал, т.к. помог предыдущий совет.

UPD в IE7 бордюров не видно sad.gif

Это сообщение отредактировал Winston - 20.11.2012 - 11:26
PMСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
redreem  
Дата
Цитировать сообщение

Пользователь сейчас на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 4259
Пользователь №: 29002
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 147




Winston

ну да. в седьмом ишаке аутлайна нет. есть еще вариант - делать внешний див с бакграундом цвета бордюра (item) шириной 140, а в нем див item_content, шириной и высотой на 1px меньше и с белым бакграундом. будет эффект бордюра. а так - проблему уже сказали выше - дробный размер пиксела при масштабировании приводит к переполнению строки.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
redreem  
Дата
Цитировать сообщение

Пользователь сейчас на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 4259
Пользователь №: 29002
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 147




еще можно сделать блоки не флоат, а просто inline-block и для обертки поставить overflow-x:hidden. вариантов много, все зависит уже от контекста. я как правило в таких случая просто делаю запас в пару пикселов у обертки, чтобы дробность при масштабировании компенсировалась. визуально не видно и работает.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25994
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 27 дней
Карма: 725

Не курю:
1 год, 2 месяца, 13 дней


Цитата
а просто inline-block и для обертки

а для IE??

*dysplay:inline


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса