Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Дивы в одну строку бахнуть, не катит инлайн 
V
    Опции темы
NewDima
Дата 30.8.2009, 18:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 922
Регистрация: 20.2.2006
Где: <?here?>

Репутация: нет
Всего: 12



Эх, плохо у меня с версткой..
В общем проблема в следующем коде:
Код

<div class="longBar" style="background-image:url('images/header_top_gradient.bmp');height:11px;"></div>
<div class="longbar" style="background-color:#474747">
  <div class="together" style="width:30%;">
    <img src="images/logo.gif" />
  </div>
  <div class="together" style="width:40%;">
    <div class="menuItem">
      /*инфо
    </div>
    <div class="menuItem">
      /*блоги
    </div>
    <div class="menuItem">
      /*форум
    </div>
    <div class="acMenuItem">
      ...?> портфолио
    </div>
  </div>
  <div class="together" style="width:30%;">
    <img src="images/logo.gif" />
  </div>
</div>

Код

body {
    background-color: white;
    margin:0;
}
.longBar {
    position: relative;
    background-repeat: repeat-x;
    width: 100%;
}
.together {
    display: inline;
    border:1px solid white
}
.menuItem {
    color: #9C5353;
    font-family: Century;
    border: 0px solid black;
    font-style: italic;
}

дело в следующем: дивы с классом together нифига не together. Проставил им в css display: inline, они все-равно каждая с новой строки. Это была проблема раз.
А вторая в том, что дивы с классом menuItem отображаются с белой рамкой в 1 пиксель. Вообще бред.
Смотрю в IE7 и NN 9.0.0.6 (по NN не особо важно, он все-равно уже забыт)
PM ICQ   Вверх
WebDisaster
Дата 30.8.2009, 20:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



Во-первых, допущена логическая ошибка: дивы с классом together имеют ширину 30% 40% и 30%. При этом у них border: 1px; Они даже теоретически не могут уместиться в одной строке, поскольку имеют в сумме более 100% ширины (поскольку по стандарту ширина рамки прибавляется к ширине блока).

Во-вторых: стандартное решение выглядит примерно так:

Код

.together {
    border:0;
    float: left;
    margin: 0;
    padding: 0;
}

Цитата(NewDima @  30.8.2009,  18:18 Найти цитируемый пост)
А вторая в том, что дивы с классом menuItem отображаются с белой рамкой в 1 пиксель

Никакой рамки в упор не увидел.

Это сообщение отредактировал(а) WebDisaster - 30.8.2009, 20:23
PM MAIL   Вверх
brother79
Дата 31.8.2009, 05:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6



Цитата(WebDisaster @  30.8.2009,  20:23 Найти цитируемый пост)
Во-первых, допущена логическая ошибка: дивы с классом together имеют ширину 30% 40% и 30%. При этом у них border: 1px; Они даже теоретически не могут уместиться в одной строке, поскольку имеют в сумме более 100% ширины (поскольку по стандарту ширина рамки прибавляется к ширине блока).


Немного неправ. Они не могут уместиться в одну строку в нормальном браузере, в ie на сколько я помню, рамка включается в ширину и соотвественно там всё нормально влезет

Добавлено через 5 минут и 10 секунд
Цитата(NewDima @  30.8.2009,  18:18 Найти цитируемый пост)
Проставил им в css display: inline, они все-равно каждая с новой строки. 


Странно как-то, никогда inline для меню не делал, обычно всегда делаю float:left; и ширину. Если надо рамки всякие у п-ов меню - то приходится их ещё в дивы оборачивать, чтобы добиться совместимости с ie, ну а дальше как ширину укажешь, так они и вписываются


--------------------
PM MAIL WWW   Вверх
NewDima
Дата 31.8.2009, 06:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 922
Регистрация: 20.2.2006
Где: <?here?>

Репутация: нет
Всего: 12



я ставил inline не у итемов меню, а у контейнеров, в одном из которых дыли и итемы.
А странного в моей верстке ничего не может быть =) я крайне редко верстаю, мало к сожалению времени на изучение особенностей браузеров и т.п.
А вообще, чтобы меньше кодить, вставил в таблицу, хоть и не нравится, но зато два действия и мат
PM ICQ   Вверх
brother79
Дата 31.8.2009, 06:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6



Цитата(NewDima @  31.8.2009,  06:30 Найти цитируемый пост)
я ставил inline не у итемов меню, а у контейнеров, в одном из которых дыли и итемы.
А странного в моей верстке ничего не может быть =) я крайне редко верстаю, мало к сожалению времени на изучение особенностей браузеров и т.п.
А вообще, чтобы меньше кодить, вставил в таблицу, хоть и не нравится, но зато два действия и мат 



Ну ты бы написал 

Код


.menuItem {
  float:left;
  width:150px;
}



Они бы в одну строку и выстроились. А так див по умолчанию занимает всю ширину и следующий - только с новой строки, вот они и не выстраиваются.

а таблица - в данном случае ИМХО изврат

можно ширину не задавать, тогда она автоматом подберётся, будут разношорстные



--------------------
PM MAIL WWW   Вверх
WebDisaster
Дата 31.8.2009, 18:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



Цитата(brother79 @  31.8.2009,  05:45 Найти цитируемый пост)
Немного неправ.

Я прав.
Цитата(WebDisaster @  30.8.2009,  20:23 Найти цитируемый пост)
по стандарту ширина рамки прибавляется к ширине блока


PM MAIL   Вверх
brother79
Дата 31.8.2009, 18:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6



Цитата(WebDisaster @  31.8.2009,  18:00 Найти цитируемый пост)
Я прав.


Согласен, по стандарту - прибавляется, только эти стандарты для обычных смертных, а в микрософте забили на эти стандарты. 

Возьми да и проверь, чтобы зря воздух не сотрясать.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>

<div style="border:50px solid blue;width:200px;">ssss</div>

</body>
</html>




--------------------
PM MAIL WWW   Вверх
WebDisaster
Дата 1.9.2009, 17:48 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19



Цитата(brother79 @  31.8.2009,  18:42 Найти цитируемый пост)
Возьми да и проверь, чтобы зря воздух не сотрясать.


brother79, мне не нужно проверять. Я не только точно знаю, что и как будет выглядеть, но знаю почему всё будет вылядеть именно так. И поэтому у меня и в IE всё будет выглядеть строго в соответствии со стандартом. То есть вот так:
user posted image
user posted image
user posted image

Учитывая, сколько Вы потратили времени, чтобы открыть мне глаза на секреты вёрстки, я тоже поделюсь несколькими секретами. Но прежде у меня будет вопрос: кто Вас учил так писать DOCTYPE? 

Цитата(brother79 @  31.8.2009,  18:42 Найти цитируемый пост)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Вас нагло обманули, DOCTYPE так не пишется. Идите и требуйте назад свои деньги за учёбу. А потом сможете сами проверить вот такой вариант:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE vs. borders</title>
</head>

<body>
<div style="border:50px solid blue;width:200px;">ssss</div>
</body>
</html>

Как видно из данного примера, если самому написать html по стандарту w3c, то IE прибавит borders снаружи блока, как это положено по стандарту. И уже не потребуется свою собственную кривизну сваливать на чужих дядек из мелкософта. 

Ещё один секрет: поведение IE очень сильно зависит от версии и от режима работы (стандартный/совместимый). А переключателем режимов служит именно DOCTYPE. Поэтому бессмысленно писать "IE не там прибавляет бордеры", "IE не так вычитает марджины", "IE неправильно извлекает квадратный корень". Имеет смысл писать о конкретном глюке только применительно к конкретной версии IE (иногда только о конкретном билде) при конкретном  режиме работы. А безглючных браузеров не существует в природе.
PM MAIL   Вверх
brother79
Дата 1.9.2009, 19:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6



Приколько, оказывается он это умеет. Ну что касаемо книжек - многие довольно авторитетные авторы описывают отдельно особенности ie, вместо того, чтобы указать про doctype, не удивительно, что про эту фишку не каждый знает.


--------------------
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1105 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.