Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.04.2011, 11:32   #1
belka0011
 
Регистрация: 24.04.2011
Сообщений: 3
По умолчанию просьба покритиковать

Табличную верстку я знаю хорошо, а вот с блочной дела пока плохо обстоят, просьба, прокомментировать мой код. В хроме и ФФ ображается все правильно, но наверняка есть какие-то подводные камни о которых мне пока не известно...
и еще вопрос как заставить работать с ним IE?

Код:
<html>
<head>
<title>1234567890-09876543234567890-987654</title>

<style type="text/css">
a {
color:#FFF;
text-decoration:underline
}

a:hover {
color:#FFF;
text-decoration:none
}

#menu {
border-radius:10px;
margin-left:40px;
text-decoration:none;
width:334px
}

#menutable {
background:url(images/menu.png) #FB9338;
font-family:verdana;
font-size:12px;
padding-left:20px;
width:250px
}

#menu a:hover {
color:#FB9338
}

#menu18910 {
font-size:14px;
font-weight:bold;
vertical-align:middle
}

#menu1234567 {
padding-left:15px
}

#main2 {
background:#527EBF;
border-radius:10px;
color:#FFF;
font-family:verdana, trebuchet ms;
font-size:12px;
left:15px;
letter-spacing:.5px;
line-height:1.7em;
margin-bottom:294px;
padding:18px 10px 5px;
position:relative;
text-align:justify;
top:15px;
width:565px
}

#topmenu {
color:#FFF;
font-family:verdana, trebuchet ms, tahoma;
font-size:12px;
font-weight:bold;
padding-left:50px
}

#topmenu a:hover {
text-decoration:underline
}

#back {
background:url(gradient-bg.png) repeat-x #FB9338;
border-radius:10px;
height:1045px;
margin:0 auto;
padding:0 10px 25px 0;
width:965px
}

#main1 {
background:url(images/textback.jpg) no-repeat left bottom #3f65b4;
border-radius:10px;
height:1012px;
left:323px;
margin-bottom:-998px;
padding:1px 10px 0;
position:relative;
top:-998px;
width:618px;
z-index:1
}

#ads_ballon {
background:url(images/ads_ballon.png) no-repeat;
color:#3f65b4;
font-family:verdana;
font-size:14px;
height:153px;
margin-top:30px
}

#ads_photo {
background:url(images/ads_photo.png) no-repeat;
color:#3f65b4;
font-family:verdana;
font-size:14px;
height:153px;
margin-top:30px
}

#menu a,#topmenu a {
text-decoration:none
}

#ads_ballon a,#ads_photo a {
color:#3f65b4;
display:block;
height:122px!important;
padding-top:35px;
text-decoration:none;
width:250px
}
</style>

</head>
<body>
    <div id="back">
        <a href="h#"><img src="images/logo.jpg" border="0" style="border-radius:10px; padding: 10px 10px 0 10px"></a>
        <div id="menu">
        <table cellpadding="0" cellspacing="0" ><tr><td>
            <table cellpadding="0" cellspacing="0" id="menutable">
             &nbsp;  <tr><td height="53px"><a id="menu18910" href="#">Галерея</a></td></tr>
             &nbsp;  <tr><td height="30px"><a id="menu1234567" href="#">Доставка сюрпризов</a></td></tr>
            </table>
            </td></tr>
            <tr><td height="40px"/></tr>
            <tr><td id="ads_ballon"><center>
            <a href="#"><p style="margin-top: 0pt; font-size: 16px;"><b>some text</b><br></p>/a>
            </td></tr>
            <tr><td height="40px"/></tr>
            <tr><td id="ads_photo"><center>
             &nbsp;  <a href="#"><p style="margin-top: 0pt; font-size: 16px;"><b>some text</b><br></p>/a>
            </td></tr>
            <tr><td height="40px"/></tr>
            <tr><td id="ads_ballon"><center>
             &nbsp;          <a href="#"><p style="margin-top: 0pt; font-size: 16px;"><b>some text</b><br></p>/a>
</a>
            </td></tr>
            </td></tr>
            
            </table>
        </div>

        <div id="main1">
            <p id="topmenu">главная | ajhvf pfzdrb </p>
            <div id="main2">
<center><font size=+1>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </font></center><br>

<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
            </div>
        </div>
    </div>
</body>
</html>
belka0011 вне форума Ответить с цитированием
Старый 24.04.2011, 12:26   #2
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию

Если ориентироваться на IE7+ то:
1. Укажите правильный !DOCTYPE без него IE переходит в "режим совместимости", у Вас !DOCTYPE вообще нету.
2. Свойство border-radius работает только в IE9, для старых версий нужно использовать хаки (костыли).
3. Тег <center> явялется устаревшим, не используйте его. Для выравнивания: текста есть text-align, для блоков margin,padding,float.
4. Тег <b> устаревший, используйте css-свойство font-weight.
5. Тег <font> устаревший, для стилизации текста используйте соответствующие css-правила.

И у Вас это не блочная верстка.

P.S. И это еще не все )).

Последний раз редактировалось Magneto; 24.04.2011 в 12:29.
Magneto вне форума Ответить с цитированием
Старый 24.04.2011, 14:33   #3
belka0011
 
Регистрация: 24.04.2011
Сообщений: 3
По умолчанию

2Magneto
спасибо. буду исправлять указанные недочеты.

А что же такое блочная верстка?
belka0011 вне форума Ответить с цитированием
Старый 25.04.2011, 10:42   #4
Wicort
Форумчанин
 
Аватар для Wicort
 
Регистрация: 04.08.2009
Сообщений: 684
По умолчанию

Ну а какая же это блочная верстка, если вся разметка основана на таблице? Убирайте таблицу, заменяя ее дивами. Тогда и получите блочную верстку.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Wicort вне форума Ответить с цитированием
Старый 26.04.2011, 10:33   #5
div-looser
 
Регистрация: 21.04.2011
Сообщений: 9
По умолчанию

А еще кроме всего вышесказанного, ИМХО конечно, не очень хорошо лепить Css и html в один файл.
Что мешает подключать файл со свойствами со стороны?
div-looser вне форума Ответить с цитированием
Старый 26.04.2011, 14:17   #6
dekameron
Форумчанин
 
Аватар для dekameron
 
Регистрация: 27.04.2010
Сообщений: 185
По умолчанию

Цитата:
Сообщение от div-looser Посмотреть сообщение
А еще кроме всего вышесказанного, ИМХО конечно, не очень хорошо лепить Css и html в один файл.
Что мешает подключать файл со свойствами со стороны?
На практике не очень хорошо, т.к. стили кешируются, если их вынести во внешний файл, а вот имення для представления на форуме такой вариант более удобен. скопировал все вместе и смотришь
Помог - тырк на весы
dekameron вне форума Ответить с цитированием
Старый 26.04.2011, 16:04   #7
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию

Как раз кэширование внешних стилей это одно из преимуществ.
Magneto вне форума Ответить с цитированием
Старый 27.04.2011, 01:10   #8
dekameron
Форумчанин
 
Аватар для dekameron
 
Регистрация: 27.04.2010
Сообщений: 185
По умолчанию

Цитата:
Сообщение от Magneto Посмотреть сообщение
Как раз кэширование внешних стилей это одно из преимуществ.
Прочтите пост внимательней, там это и имелось ввиду
Помог - тырк на весы
dekameron вне форума Ответить с цитированием
Старый 28.04.2011, 20:57   #9
Aleksey1408D
Пользователь
 
Регистрация: 19.01.2011
Сообщений: 38
По умолчанию

1. укажите версию html (советую 5 версию, она полностью поддерживает 4 версию, а если и будите переводить на новую версию то и менять ничего не придется)
2. укажите кодировку!
3. для удобства вынесите стили в отдельный файл
4. не хорошо для столбцов и строк указывать высоту прям в html, лучше это делать так <tr style="height:20px;">
5. ну и как уже говорили это не блочная верстка, а табличная
6. к закругленным углам ещё лучше прописывать: -moz-border-radius и -webkit-border-radius
и ещё, не суть как важно, но над оформлением кода стоит поработать, если не на единичный раз верстаете
Aleksey1408D вне форума Ответить с цитированием
Старый 19.06.2011, 14:34   #10
belka0011
 
Регистрация: 24.04.2011
Сообщений: 3
По умолчанию

случилось что-то странное.
поменяла немного верстку, во всех браузерах нормально отображается кроме IE, причем локально все красиво, а если сайта смотреть -все съездает. heeeelllp!

вот ссылка - http://vdrakon.ru/delivery.html

небольшое дополнение - не работает в IE 9
и если там включить "представление совместимости" то все отображается как надо
belka0011 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Просьба Twisti Помощь студентам 0 06.12.2010 20:38
Просьба Neymexa Помощь студентам 2 27.01.2009 17:25
просьба Aivar Софт 1 03.09.2008 23:46