Форум Практика оптимизации Любые вопросы от новичков по оптимизации

1 px что по высоте, что по ширине отражается как 10 px

ПG
На сайте с 23.01.2007
Offline
7
Практичный Gendo
358

Пользуюсь Dreamweaver 4.0 ( а интересно, что будет если тоже самое я в "Блокноте" наберу :rolleyes: ? )

Пытаюсь сделать нечто подобное меню сайта .bosch.com , что б все разделы в меню были, как бы, разграничены, такой тонкой светлой линией, толщиной в 1 пиксель как в "примере 1"

По какой-то причине высота в 1 пиксель у меня отображается как 10 пикселей и получается этакое уродство где эта "пограничная" лини имеет толщину такую-же как и один из разделов меню как в "примере 2"

Через HTML пытался выставить :

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<LINK href="menushka.css" type=text/css rel=stylesheet>

<body bgcolor="#FFFFFF" text="#000000">

<br><TABLE cellSpacing=0 cellPadding=0>

<TBODY>

<TR vAlign=top>

<td width=200 >

<TABLE cellSpacing=0 cellPadding=0>

<tbody>

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot>&nbsp;</td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody>

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot>&nbsp;</td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody>

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_bot></td>

<td width=180 class=mash_bot>&nbsp;</td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody>

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot>&nbsp;</td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody>

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 ></td>

<td height=2 class=mash_bot>&nbsp;</td>

</tr></tbody></table>

</table></body>

</html>

И через CSS расписывал :

BODY {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans-serif}

TABLE {BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none}

.mash_1{BACKGROUND: #153B62; FONT: bold 12px Verdana, Arial, sans-serif; COLOR: #fff; HEIGHT: 20px; TEXT-ALIGN: margin-left : 5 px}

.mash_2{BACKGROUND: #153B62; height : 2px }

.mash_bot {BACKGROUND: #B4C6DA; HEIGHT: 2px}

Но это уродство не правится :mad:

Пожалуйста, укажите на мои ошибки

jpg 4212.jpg
jpg 4213.jpg
albion
На сайте с 07.10.2005
Offline
247
albion
#1

Уберите все &nbsp; из кода и все будет ok (и кстати у вас в коде не 1 пиксель проставлен, а 2)

CSS я засунул здесь в файл (просто так удобней сюда запостить HTML код) 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

<!--

BODY {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, sans-serif}



TABLE {BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none}



.mash_1{BACKGROUND: #153B62; FONT: bold 12px Verdana, Arial, sans-serif; COLOR: #fff; HEIGHT: 20px; TEXT-ALIGN: margin-left : 5 px}

.mash_2{BACKGROUND: #153B62; height : 2px }



.mash_bot {BACKGROUND: #B4C6DA; HEIGHT: 2px}

-->

</style>

</head><body bgcolor="#FFFFFF" text="#000000">

<br><TABLE cellSpacing=0 cellPadding=0>

<TBODY>

<TR vAlign=top>

<td width=200 >

<TABLE cellSpacing=0 cellPadding=0>

<tbody> 

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot></td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody> 

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot></td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody> 

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_bot></td>

<td width=180 class=mash_bot></td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody> 

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 class=mash_2 height="2"></td>

<td height=2 class=mash_bot></td>

</tr></tbody></table>

<TABLE cellSpacing=0 cellPadding=0>

<tbody> 

<tr>

<td width=5></td><td width=15 class=mash_1></td><td class=mash_1> Новости</td></tr>

<tr>

<td width=5 height="2"></td>

<td width=15 ></td>

<td height=2 class=mash_bot></td>

</tr></tbody></table>



</table></body>

</html>
ПG
На сайте с 23.01.2007
Offline
7
Практичный Gendo
#2

albion,

Агромное Спасибо за подсказку ! 🍻

TimeBomb
На сайте с 19.07.2005
Offline
93
TimeBomb
#3

Да, это не 10px на 10px, а просто пробел.

Если это ваш первый и последний проект - все в порядке. Если Вы собираетесь продолжать, то:

1. попробуйте хотя бы первое время обойтись без вивера, пользуйте блокнот.

2. поизучайте CSS... ("то уродство" правится "на ура", и в зависимости от его содержимого у Вас может случиться что угодно. Хотите бабочек по всему сайту - пожалуйста.)

3(Если уж совсем согласны продолжать). менюха которую Вы заюзали - вовсе не верх совершенства как с точки зрения кода, так и с точки зрения SEO(мы здесь за этим, uh?) попробуйте взять на вооружение различные CSS трюки с <ul>

типа этого (горизонтальные кнопы от alistapart) или этого (снова горизонтальные кнопы... Статья - перевод все тех же alistapart. Толковый, кстати) или еще одного alistapart CSS-меню, но уже с вертикально расположенными кнопами

Ну и удачи!

ЗЫ: для параноиков: ссылки - первое что нашел Яндекс.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий