| |
|
|
| | Сделал шапку и горизонтальное меню.
Во всех броузерах (Ghrome,IE,Ffox) отображается как и задумывалось ровно, а в opere смещается вниз
во всех броузерах кроме oпeры:
[img]http://img-fotki.yandex.ru/get/4602/myguest2011.0/0_39868_d6115c0a_XL.jpg[/img]
в опере:
[img]http://img-fotki.yandex.ru/get/4906/myguest2011.0/0_39869_2e4b5477_XL.jpg[/img]
html-код:
<body>
<div id="header-null">
<div id="header">
<div id="rosa">
<h1>Розы</h1>
<span>искуственные</span>
</div>
</div>
<div id="navigation">
<div id="mymenu">
<a href="#">Главная</a>
<a href="#">Цветы</a> <a href="#">Контакты</a>
</div>
</div>
</div>
</body>
|
сss-код:
a {text-decoration: none}
a:link {color: #f83a5a}
a:visited {color: #f83a5a}
a:active {color: #f83a5a}
a:hover {color: #a0182e}
body {
font: 13px/18px Arial, Helvetica, sans-serif;
margin : 0 0 0 0;
}
/** шапка **/
#header-null {
background:url(background.png) 0 0 repeat-x;
width: 100%;
border: 3px solid blue;
padding-right: 20px;
}
#header {
width : 100%;
height : 128px;
float: right;
background : url(img/rose.png) no-repeat right top;
border: 2px solid yellow;
}
#rosa {
padding: 10px;
height: 110px;
font-size: 120%;
color: #fff;
margin : 37px 0 0 81px;
}
#rosa h1 {
font-size: 165%;
border: 0px solid black;
margin-bottom: 18px;
}
/** навигация **/
#navigation {
background: #ececec;
border: 0px solid black;
width: 100%;
clear: both;
margin-top: -17px;
}
#mymenu {
padding: 5px;
border-bottom: 0px solid #b7b7b7;
clear : both;
margin-left :190px;
height: 20px;
}
#mymenu a {
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
padding-top: 5px;
padding-bottom: 7px;
}
#mymenu a:hover {
background: #f6f6f6;
}
/** конец навигации**/
/** и конец шапки **/
|
Подскажите, пожалуйста, можно ли исправить чтобы не смещалось.
Или, возможно, у меня структурно неправильный подход. | |
| |
|
|
| |
|
|
| |
для: Newbie256
(02.09.2010 в 03:33)
| | | >"возможно, у меня структурно неправильный подход"
Не спорю, можно назвать и "структурно" неправильным.
Слямзили с разных сайтов совершенно непонимаемые Вами правила стиля, перемешали их в кучу и теперь пытаетесь выяснить - а почему это у Вас так всё хреново получилось.
Начну с самого начала.
1. Правила стилей для ссылок.
Стандартный порядок указания псевдоклассов для ссылок следующий:
:link, :visited, :hover, :active
|
У Вас же прописано:
:link, :visited, :active, :hover
|
Сравните.
Ответьте на вопрос - "почему?"
На крайняк, если Вам надо именно ТАК как у Вас написано, то почему не записано следующим образом:
a {text-decoration: none; color: #f83a5a}
a:hover {color: #a0182e}
|
Эффект будет тот же, запись В ТРИ РАЗА короче.
Не знали о таком способе записи?
Давайте выясним - а что же Вы вообще знаете.
-----
2. Правила стилей для тела документа.
font: 13px/18px Arial, Helvetica, sans-serif - это что такое?
Делить браузер 13 на 18 должен?
Или 13px - для Arial, а 18px - для Helvetica? А что тогда для sans-serif?
Ответить можете?
Заодно скажите - в чём сокровенный смысл написания двух первых имён с большой буквы, а последнего - с маленькой?
margin : 0 0 0 0; - а почему только четыре нуля? Почему не восемь, не двенадцать или не 256?
А можно всего два нуля? Или даже один? А?
-----
3. Правила стилей для элемента с дебильным id="header-null"
background:url(background.png) 0 0 repeat-x; - Зачем здесь нужны два нуля?
width: 100%; - а это зачем?
-----
И т. д.
В общем, объяснять что-либо человеку, который НИЧЕГО НЕ ЗНАЕТ И ЗНАТЬ НЕ ХОЧЕТ - дело бесполезное. | |
| |
|
|
| |
|
|
| |
для: АЯ
(02.09.2010 в 13:11)
| | | Вы придираетесь к коду. Всё о чем вы написали к разговору дело не имеет.
(Я эксперементировал со смещением и кое-где оставил как было, например margin: 0 0 0 0;)
Меня интересовало как решить вопрос со смещением в Opere, а не как сделать и весь остальной код, который не относится к проблеме смещения на 101% идеальнее. | |
| |
|
|
| |
|
|
| |
для: Newbie256
(02.09.2010 в 16:33)
| | | Соглашусь частично с А-Я, нужно иметь правильное представления, чего вы хотите добиться в итоге от своего творения.
Скиньте полностью ваш код с Doctype который вы используете, если не используете то все понятно. У вас скорее всего ошибка в том что для body,html и др тегов нужно убрать первоначальные отступы. Это для начала
body,html { margin:0; padding:0; }
Для шапки(#header) сделать фиксированный размер по width(если не резинка) и height; и плясать от этого.
Скачал ваше творение и пришел к выводу что у вас не стоит Doctype | |
| |
|
|
| |
|
|
| |
для: Usta
(02.09.2010 в 17:49)
| | | (у меня резиновый дизайн.)
переделал все теперь работает
а как определить какой стоит указывать DOCTYPE?
(HTML 4.01 или возможно XHTML 1.0? или еще какой-то?) | |
| |
|
|
| |
|
|
| |
для: Newbie256
(03.09.2010 в 15:37)
| | | вы его сами ставите какой хотите. до <html> ... </html> смотрите тут http://htmlbook.ru/html/!doctype.html | |
| |
|
|
