нужна критика

belka0011 · April 24, 2011

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

и еще вопрос как заставить работать с ним 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">
                <tr><td height="53px"><a id="menu18910" href="#">Галерея</a></td></tr>
                <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>
                <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>
                        <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>

Temiks · April 24, 2011

border-radius:10px; не воспринимают много браузеров http://htmlbook.ru/css/border-radius

#menu18910, #menu1234567 - это что? :blush:

Int · April 24, 2011

А где тут блочная вёрстка?

<center> не закрыт, да и запрещён к использованию. Так же как и <font>

</p>/a></a> это что? Открывающий <a> был один

</td></tr></td></tr> Так быть не может, <tr> должен быть внутри <table>

Нет доктайпа.

Temiks · April 24, 2011

зачем писать в html если для этого есть css?

Int · April 24, 2011

#menu18910, #menu1234567 - это что?

<a id="menu18910" href="#">Галерея</a>

Да у нас тут чат.

belka0011 · April 24, 2011

#menu18910, #menu1234567 - это что?

для удобства дала такие названия, временно

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

DeD_AvToRuTeT · April 24, 2011

Ну там в некоторых местах тег <a> не закрыт. Или не правильно закрыт. А так мне понравилось, как человеку недавно взявшемуся за html и css.

А где тут блочная вёрстка?
<center> не закрыт, да и запрещён к использованию. Так же как и <font>
</p>/a></a> это что? Открывающий <a> был один
</td></tr></td></tr> Так быть не может, <tr> должен быть внутри <table>
Нет доктайпа.

Со всем выше написанным согласен :blush:

belka0011 · June 18, 2011

случилось что-то странное.

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

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

buddah · June 19, 2011

случилось что-то странное.
поменяла немного верстку, во всех браузерах нормально отображается кроме IE, причем локально все красиво, а если сайта смотреть -все съездает. heeeelllp!
вот ссылка - http://vdrakon.ru/delivery.html

а почему все на абсолютах построено? В чем профит?

А по теме: наверное не срабатывает position: absolute у #main_menu и блок располагается сразу после лого, а не прямо над ним.

Попробуйте включить haslayout для старых ИЕ.

belka0011 · June 19, 2011

небольшое дополнение - не работает в IE 9

и если там включить "представление совместимости" то все отображается как надо

с layout попробую

а почему все на абсолютах построено? В чем профит?

хм, а как лучше сделать?

buddah · June 19, 2011

хм, а как лучше сделать?

я бы делал float:left; для меню. Чтобы пододвинуть наверх поверх лого с шариками - можно использовать margin с минусовым значением и т.д.

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

Анна · June 23, 2011

При переходе на "Свадьбы" и "Вечеринки" фонт неправильно отображается(видимо там он не выставлен). И первые три пункта меню(под "Галерея") имеют один размер фона а другие три другой. Смотрела хромом12.

Bonzash · June 23, 2011

Зачем почти для каждого класса прописывать: font-family: Verdana;?

Пропиши для body и все.

Sign In

нужна критика

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information