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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Проблемы в DIV вёрстке, help! оцентровка, выравнивание, текст 
V
    Опции темы
Dopelgander
Дата 29.4.2008, 10:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Доброе время суток всем!

Я первый раз верстаю DIV'ами и у меня кое-что не получается, а именно:

(http://www.krasnoyarsk-remont.ru/index2.html - вот страница сайта, которая верстается)

1) Как правильно сделать отцентровку? потому что тот пример, который я нашёл и по которому сделал, мне не кажется особо корректным. Сейчас это выглядит как матрёшка, 3 дива друг в друге ... 
2) Почему текст в Эксплорере и в Мозиле отображается по-разному? (в Эксплорере всё ок вроде, фон был сделан как раз под него, но в Мозиле всё поехало) Это лечится?
3) Как сделать чтобы второй столбец был по высоте такой же, как и первый? (читал похожие темы форума, но то, что предлагают - не подходит ... хотя может не всё нашёл) Меня в принципе устраивает вариант, когда я выставляю фиксированную высоту 1100px (можно только 2му столбцу) тогда он опускается до конца и выглядит всё нормально, и в IE и в FF, ... НО из-за того, что текст отображается по-разному высота в IE отличается от высоты в FF
4) Самый нижний прямоугольник, как в нём сделать отцентровку по вертикали? Стандартные способы не подходят.
5) Слово "Подробнее..." как сделать нижнее подчёркивание, чтобы оно было постоянным? Кроме <u> (валидатор ругается) Андэрлайн в CSS тоже не воспринимается. Другие способы есть?

Более опытные люди, посмотрите, пожалуйста, может я ошибся где-то? Может вообще не так надо было сделать?

Напишите, как решить вышеописанные проблемы на данном примере.
Спасибо!

Код

body {background: #c57128; margin: 0px}
div {font-size: 13px; font-style:normal; color: #1c0000; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: justify; vertical-align: top}
h1 {color: #660000;    font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif}
h2 {color: #660000;    font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif}
A:link {color: #660000; text-decoration: none}
A:visited {color: #660000; text-decoration: none}
A:active {color: #660000; text-decoration: none}
A:hover {color: #a60000; text-decoration: underline}

div {border: 1px solid #000}
#outer {width:100%; display:table; border: 0px}
#container {position:relative; display:table-cell; border: 0px}
#inner {width: 767px; height: 367px; margin-left:auto; margin-right:auto}
#inner2 {width: 769px; margin-left: auto; margin-right: auto; border: 0px}

#one {width: 430px; float: left; background:url(2/b1.jpg) top; padding: 5px}
#two {width: 315px; float: left; background:url(2/b2.jpg) top; padding: 5px}
#third {width: 767px; clear: left; background:url(2/b3.jpg); font-weight: bold; font-size: 10px; text-align:center; height: 52px}
.p {text-align:right; border:none}


Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<meta http-equiv=Content-Type content="text/html;charset=windows-1251">
<meta name="description" lang="ru" content="Ремонт квартир и офисов в Красноярске, строительство, дизайн, перепланировка">
<meta name="keywords" lang="ru" content="Ремонт квартир в Красноярске, ремонт офисов, строительство, перепланировка, дизайн">
<link href="w2.css" rel="stylesheet" type="text/css">
<title>Ремонт квартир в Красноярске</title>
<div id="outer">
   <div id="container">
     <div id="inner">
<object type="application/x-shockwave-flash" data="left.swf" width="439" height="367" align="left">
      <param name="allowScriptAccess" value="sameDomain">
      <param name="movie" value="left.swf">
      <param name="quality" value="high">
      <param name="bgcolor" value="#ffffff">
</object>
<object type="application/x-shockwave-flash" data="rite.swf" width="328" height="367" align="right">
      <param name="allowScriptAccess" value="sameDomain">
      <param name="movie" value="rite.swf">
      <param name="quality" value="high">
      <param name="bgcolor" value="#ffffff">
</object>
     </div>
     <div id="inner2">
       <div id="one">
          <h1>Ремонт квартир в Красноярске</h1>
          <img src="pic/1.jpg" alt="Ремонт квартир в Красноярске" border="0" align="left" style="padding-right:4px"> Наша компания оказывает полный спектр услуг по ремонту квартир в Красноярске. Специалисты высокого уровня квалификации, с большим опытом работы в сфере ремонта и отделки ответят на все интересующие Вас вопросы касательно ремонта, и постараются максимально облегчить Вам этот сложный и многогранный процесс. Мы являемся лицензированной компанией, что даёт преимущества и гарантию, мы отвечаем материально за недостатки и возможный ущерб, взяв, на себя решение всех проблем, связанных с ремонтом. С нашей компанией Вы получите от ремонта удовлетворение и приятные воспоминания.<br>
          <div class="p"><a class="A" href="http://krasnoyarsk-remont.ru/flat.html">Подробнее ...</a></div>
          <h2>Ремонт офисов в Красноярске</h2>
          <img src="pic/2.jpg" alt="Ремонт офисов в Красноярске" border="0" align="left" style="padding-right:4px"> Благодаря большому опыту в этой сфере, мы выполним для Вас отделку и ремонт офиса в Красноярске максимально быстро и качественно. Мы выполним все Ваши пожелания, так как у нас работают давно сложившиеся бригады специалистов в области ремонта офисов в Красноярске. Предлагаемые нашими мастерами услуги имеют высокое качество при достаточно умеренной стоимости. Выбирая нашу компанию - Вы делаете лучший выбор.<br>
          <div class="p"><a href="http://krasnoyarsk-remont.ru/office.html">Подробнее ...</a></div>
          <h2>Перепланировка</h2>
          <center>
            <img src="pic/6s.jpg" alt="Перепланировка квартиры">&nbsp;<img src="pic/8s.jpg" alt="Перепланировка квартиры">&nbsp;<img src="pic/9s.jpg" alt="Перепланировка квартиры">
          </center>
          Перепланировка квартир является нашей специализацией и наши менеджеры, дизайнеры, архитекторы, декораторы и строители с радостью помогут Вам. Наскучил интерьер Вашей квартиры и очень хочется что-то поменять? Мы сможем помочь Вам сделать Вашу квартиру удобной и красивой.<br>
          <div class="p"><a href="http://krasnoyarsk-remont.ru/replan.html">Подробнее ...</a></div>
          <h2>Двери</h2>
          <center>
            <img src="2/1.gif" alt="Дверм">&nbsp;<img src="2/2.gif" alt="Дверм">&nbsp;<img src="2/3.gif" alt="Дверм">&nbsp;<img src="2/4.gif" alt="Дверм">
          </center>
        Представляем Вам двери нового поколения усиленной конструкции с применением жесткого технологического контроля, которые имеют высокую ударную прочность, устойчивость к истиранию, царапинам и растрескиванию. Выбор цвета по каталогу.<br>
        <div class="p"><a href="http://krasnoyarsk-remont.ru/door.html">Подробнее ...</a></div>
       </div>
        <div id="two">
          <h2>Пластиковые окна</h2>
          Растущим спросом пользуются пластиковые окна, разработанные специально для климата России. Важным компонентом пластиковых окон являются система самовентиляции и климатические клапаны. Окна &quot;Эксперт&quot; сочетают функциональность и удобство первоклассного пластика КБЕ и абсолютную безопасность и экологичность рецептуры &quot;green line&quot;. Пластиковые окна, изготовленные по новому прогрессивному европейскому экологическому стандарту, созданные в русле последних тенденций развития европейской оконной отрасли.
          <center><img src="1/win1.gif" alt="Пластиковые окна">&nbsp;<img src="1/win2.gif" alt="Пластиковые окна"></center>
          <div class="p"><a href="http://krasnoyarsk-remont.ru/window.html">Подробнее ...</a></div>
          <h2>Дизайн интерьера</h2>
          Если Вам необходим дизайн интерьера, мы рады предложить Вам свои услуги. Наши дизайнеры выполнят для Вас любой дизайн-проект интерьера, как для жилых, так и для нежилых помещений эксклюзивно и на самом высоком уровне. Современный ремонт квартиры, бесспорно, начинается с дизайн - проекта!
          <center>
            <img src="pic/3s.jpg" alt="Дизайн интерьера">&nbsp;<img src="pic/4s.jpg" alt="Дизайн интерьера">
          </center>
          <div class="p"><a href="http://krasnoyarsk-remont.ru/disign.html">Подробнее ...</a></div>
          <h2>Загородное строительство</h2>
          Мы предлагаем строительство загородных домов и выполняем подрядные работы: закладка фундамента, внутренняя отделка, предлагаем новые технологии строительства, позволяющие получать наилучшие результаты и оптимизировать проектный бюджет.<br>
          <img src="0/z/z-(2).jpg" alt="Строительство">&nbsp;<img src="0/z/z-(9).jpg" alt="Строительство"><br>
          <div class="p"><a href="http://krasnoyarsk-remont.ru/country.html">Подробнее ...</a></div>
        </div>
        <div id="third">
        <a class="A" href="flat.html">РЕМОНТ КВАРТИР</a> -- 
        <a class="A" href="office.html">РЕМОНТ ОФИСОВ</a> -- 
        <a class="A" href="replan.html">ПЕРЕПЛАНИРОВКА</a> -- 
        <a class="A" href="door.html">ДВЕРИ</a> -- 
        <a class="A" href="window.html">ОКНА</a> -- 
        <a class="A" href="disign.html">ДИЗАЙН</a> -- 
        <a class="A" href="country.html">СТРОИТЕЛЬСТВО</a><br>
2007 © Сибирская Ремонтно-Строительная Компания - <a class="A" href="http://krasnoyarsk-remont.ru">Ремонт квартир в Красноярске</a></div>
     </div>
   </div>
</div>

PM MAIL   Вверх
bars80080
Дата 29.4.2008, 11:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



1. центровка вроде нормальная
2. текст одинаковый, а вот отступы разные, поигравшись со свойством margin-top для h2 можно решить эту проблему (но только кусочно), чтобы её правильно решить, следовало бы заключить каждый пункт в свой блок, и уже для каждого блока ставить свой бэкграунд, а не как сейчас - один на всю колонку
3. колонки разные - вот и результат. можно тупо для div#inner2 задать фон и колонки будут казаться до конца страницы, но я бы вообще сверстал таблицей
4. а пробовал? vertical-align: middle; к примеру
5. a:link {color: #660000; text-decoration: underline; }

PM MAIL WWW   Вверх
Dopelgander
Дата 29.4.2008, 12:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



bars80080: спасибо за ответ

1. да нормальная ... но хотелось простоты типо align middle, а не изобретать конструкцию одна в одной
2. попробую вставить отдельными блоками, но всёравно интересно почему IE и FF по разному воспринимают, причём так координально
3. таблицами и верстал всю жись(изначально таблицами и сверстал, вообще влёт), есть мнение что div'ами быстрее загружается и вообще лучше, хотелось проверить на практике и реальных цифрах, но пока что то немогу самое елементарное сделать, высота выравнивание ... итд
4. да пробывал ... попробую ещё через паддинг
5. да, но хочу только на этих словах, а не на всей странице, в этом то и трабл
PM MAIL   Вверх
Itsys
Дата 29.4.2008, 13:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Цитата(Dopelgander @  29.4.2008,  12:41 Найти цитируемый пост)
5. да, но хочу только на этих словах, а не на всей странице, в этом то и трабл 

Назначешь им class
Код

<a href="http://krasnoyarsk-remont.ru/country.html" class="more">Подробнее ...</a>

и прописываешь стиль для класса:
Код

a.more:link {color: #660000; text-decoration: underline}
a.more:visited {color: #660000; text-decoration: underline}
a.more:active {color: #660000; text-decoration: underline}
a.more:hover {color: #a60000; text-decoration: underline}



Это сообщение отредактировал(а) Itsys - 29.4.2008, 13:34
PM MAIL WWW Skype   Вверх
bars80080
Дата 29.4.2008, 13:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(Dopelgander @  29.4.2008,  12:41 Найти цитируемый пост)
всёравно интересно почему IE и FF по разному воспринимают
 а почему они должны воспринимать одинаково?

разные люди писали с разными мыслями

PM MAIL WWW   Вверх
Dopelgander
Дата 30.4.2008, 08:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Вроде всё ...  smile 

1) отцентровку так и оставил 
2) с текстом всё было ок, он из за H2 так ездил. поставил margin и везде одинакого стало. Спасибо bars80080
3) текст одинаковый стал, поэтому фиксированной высотой сделал как и хотел
4) падинг топ с уменьшением общей высоты, и всё на своих местах
5) Itsys, спасибо огромное, респект!

всё!  smile

Добавлено через 2 минуты и 49 секунд
bars80080: вобщем там всё дело в разной интерпритации отступов у каждого браузера, если их не проставить, я их сделал и всё одинакого стало.

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


 




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


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

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