div: html-css @ DeForum.ru
DeДверь  
Логин:  
Пароль:  
  Автологин  
   
Разместить рекламу
Письмо админу
Правила | FAQ | *Поиск | Наша команда | Регистрация | Вход
 
 
 Страница 1 из 1 [ Сообщений: 24 ] 
*   Список форумов / Начинка и техника / Программирование для WWW » ответить » создать топик « | »
Автор Сообщение
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Заголовок сообщения: div: html-css
Сообщение Добавлено: 19 Август 2007, 14:27:06 
теперь вопросы по блочной html-верстке:

то, что сделано таблицами:
http://www.kareltd.spb.ru/tmp/template3.html

нужно сделать div-ми:
http://www.kareltd.spb.ru/tmp/kare.html

что-то у меня не получается.… :confused: может, конечно, я не проникся самой идеей слоев. помогите, пожалуйста, разобраться на простом примере.

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


Последний раз редактировалось White777 25 Август 2007, 15:13:04, всего редактировалось 5 раз(а).
bong13
соучастник
0
Сообщения: 806
Зарегистрирован: 21.12.04
Откуда: Moscow
Сообщение Добавлено: 19 Август 2007, 15:02:07 
Код:
P.item A:hover {
   WIDTH: 100%;
   FONT-WEIGHT: bold;
   FONT-SIZE: 12px;
   COLOR: #ffff00;
   FONT-FAMILY: "Tahoma";
   TEXT-DECORATION: none;
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 12px;
   PADDING-BOTTOM: 0px;   
   PADDING-TOP: 0px;
   BACKGROUND: #2c7f09;
   LINE-HEIGHT : 200%;
        display:block;                     /* лекарство, должно помочь */
}

А вообще такое меню, правильные ребята списком делают.
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 19 Август 2007, 15:07:56 
списком не сделать, по-моему, т.к разные ячейки таблицы.
bong13
соучастник
0
Сообщения: 806
Зарегистрирован: 21.12.04
Откуда: Moscow
Сообщение Добавлено: 19 Август 2007, 15:11:02 
В смысле разные :confused:
Таблицы там вообще выкинуть следует.
bong13
соучастник
0
Сообщения: 806
Зарегистрирован: 21.12.04
Откуда: Moscow
Сообщение Добавлено: 19 Август 2007, 15:16:26 
Код:
<ul>
   <li id="current">Новости</li>
   <li>О компании</li>
   <li>Филиалы</li>
   <li>Продукция</li>
   <li>Рецепты</li>
   <li>Контакты</li>
   <li>Написать письмо</li>
</ul>


Это весь код в html, который требуется для вашего меню.
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 19 Август 2007, 15:53:22 

Цитата:
3) профессионален ли код? как его можно усовершенствовать?



Нет не профессионален. Его можно сократить в разы. Hint: использовать сокращения.
Например:

Код:
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 12px;
   PADDING-BOTTOM: 0px;   
   PADDING-TOP: 0px;


благополучно можно заменить на

Код:
padding:0 0 0 12px;

_________________
Frontend developer: IonDen.com
Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 19 Август 2007, 16:56:48 
По-моему такой код может сделать только какая-то автоматическая функция какой-то программы. Ну, например фотошоп.
Или есть такие люди которые ТАКОЕ руками пишут? :-)

Ответы на вопросы:
1. Потому что разработчики браузеров по разному программировали их и каждый из них (разработчиков) читал разные страницы спецификации CSS
2. см. п.1
3. Код не профессионален. На уроках информатики в школе детки лучше делают.

То что вам интересно - очень хороший симптом :-)
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 20 Август 2007, 16:53:26 
bong13, IonDen666, :beer: спасибо. меню сделал.

Кира, а что такое профессиональный код? почему симптом?

теперь осталось решить главный вопрос №2.
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 20 Август 2007, 17:52:47 
С таблицами, колспанами и роспанами явный перебор. Например, для чего в левом столбике вообще применена вложенная таблица? Судя по содержанию там достаточно такой вот конструкции:

<div id="logo"></div>
<ul id="menu"><ul>

И все.

Чтобы главный левый столбик не ломался на низких разрешениях, достаточно вставить туда распорку типа:
<div style="width:253px;"></div>



- valign="middle" на <table> писать не надо, все равно работать не будет :)
- пустые ячейки в таблицах должны сопровождаться хотябы &nbsp;
- отступы внутри ячеек таблицы делать гораздо лучше так: <td style="padding:0 20px;">, а не пустыми ячейками с роспанами.
- футер не стоит объеденять с основным лэйаутом в одну таблицу, полюбому гденить разъедится.
- если вы задали таблице высоту 110px то совсем уже не нужно каждой ячейке её же прописывать.
-
BODY {
margin : 0;
}
недостаточно необходимо еще добавить padding:0; а лучще вообще все обнулить вот так: * {margin:0; padding:0;}
- font-family: "Tahoma"; - в кавычки заключаются лишь названия шрифтов состоящие из нескольких слов.

В целом пока еще все очень плохо.

_________________
Frontend developer: IonDen.com
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 20 Август 2007, 18:08:23 
IonDen666, спасибо)

Я нашел решение.

Код:
<table>
<tr>
<td width="1%">
<div style="width:253px; height:0; font-size:0"><br /></div>
</td>
<td width="99%"></td>
</tr>
Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 20 Август 2007, 18:20:05 
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<table class="main">
<tr>
 <td id="col-left">
</td>
<td id="col-right"></td>
</tr>
<table>
</body>
</html>



Цитата:
- Минимизация и оптимизация кодировки страниц (избавление от излишней вложенности элементов - матрешек)
- Отделение стилей оформления от содержания (Complete Presentational Separation)

IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 20 Август 2007, 18:39:14 
White777, на самом деле второй колонке совсем не нужно задавать ширину :) костыль это. Достаточно левой колонке написать нужную ширину и таблице 100%. Если же у вас левая колонка разъехалась, значит что-то внутри нее её распирает.

_________________
Frontend developer: IonDen.com
bong13
соучастник
0
Сообщения: 806
Зарегистрирован: 21.12.04
Откуда: Moscow
Сообщение Добавлено: 21 Август 2007, 10:11:45 
Код:
<div class="line"></div>
<li class="here"><a href="">Новости</a></li>
<div class="line"></div>

div между li - низя.

http://www.cadensia.ru/ - посмотрите как сделано правое меню, вроде вы такого хотели.
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 21 Август 2007, 13:16:10 
bong13, спасибо.
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 25 Август 2007, 13:10:46 
смотрим новый вариант и новые вопросы.
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 25 Август 2007, 23:27:55 
ну почему никто не отвечает.…
Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 26 Август 2007, 05:54:05 
а где новый вариант, по какой ссылке, и где вопросы ? :-)
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 26 Август 2007, 12:07:35 

White777 писал(а):
то, что сделано таблицами:
http://www.kareltd.spb.ru/tmp/template3.html

нужно сделать div-ми:
http://www.kareltd.spb.ru/tmp/kare.html

Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 26 Август 2007, 13:57:08 

White777 писал(а):
смотрим новый вариант и новые вопросы.


ну новый вариант посмотрела. А вопросы где новые?
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 26 Август 2007, 14:19:07 
Да тут один большой вопрос :lying: :insane:
Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 26 Август 2007, 14:59:44 
тогда один большой ответ
http://www.w3.org/TR/REC-CSS2/cover.html#minitoc
White777 Муж.
минус одно ухо
12
Сообщения: 1454
Зарегистрирован: 31.10.03
Сообщение Добавлено: 26 Август 2007, 15:43:17 
ну повеселили. :lol: а Я, думаете, идиот?

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

нужен CSS макета в две колонки c футером, левая - фиксированная, правая - резиновая
Код:
<div id="main">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>
<div id="footer">
</div>

и CSS макета в три колонки, левая и правая - фиксированные, центральная - резиновая
Код:
<div id="main">
    <div id="left">
    </div>
    <div id="center">
    </div>
    <div id="right">
    </div>
</div>

чтобы во всех броузерах IE5+, Opera, Firefox и Safari смотрелось одинаково хорошо.
Кира Жен.
новый человек
4
Сообщения: 143
Зарегистрирован: 20.06.06
Сообщение Добавлено: 26 Август 2007, 16:55:05 
есть хорошая поисковая система google.ru
вводите слова для поиска и получаете результат
http://webhost.bridgew.edu/etribou/layo … _left.html
http://css-discuss.incutio.com/?page=CssLayouts
и т.д. и т.п.
Писать за вас css тут ни кто не будет. Если бы был заковыристый вопрос, то тогда подумали бы. А тут вопрос из учебника :-)
IonDen666 Муж.
постоянный участник
109
Сообщения: 3234
Зарегистрирован: 25.11.04
Откуда: Москва
Сообщение Добавлено: 27 Август 2007, 14:00:33 
White777, ну нафига это надо :) Я всегда делаю такой лэйаут таблицей, ибо надежней и кросбраузерней, особенно при требованиях ИЕ5+

_________________
Frontend developer: IonDen.com
*   Список форумов / Начинка и техника / Программирование для WWW « | » » ответить » создать топик
 Страница 1 из 1 [ Сообщений: 24 ] 
Показать сообщения за:   Поле сортировки  
Найти:
Перейти:  
Уровень доступа: Вы не можете начинать темы. Вы не можете отвечать на сообщения. Вы не можете редактировать свои сообщения. Вы не можете удалять свои сообщения. Вы не можете добавлять вложения.
cron


ООО ДеФорум
При использовании материалов сайта ссылка на DeForum.ru — обязательна.
Проект Павла Батурина ©2001-2077; // Powered by phpBB © 2013 phpBB Group
Rambler's Top100