Помогите пожалуйста выронять меню

Sayitright · April 16, 2010

Здравствуйте. Я "верстаю" шаблон, и в ie6 верхнее меню не пристыковывается с левой стороны к шапке. А firefoxe всё хорошо.

Вот вёрстка

HTML

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rational by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer">
	<div id="header"><img src="images/logo.gif" />
    <div id="poisk"></div>
	</div>


	      <div class="invertedshiftdown">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="New">New</a></li>
<li class="current"><a href="#" title="Revised">Revised</a></li>
<li><a href="#" title="Tools">Tools</a></li>
<li><a href="#" title="CSS">CSS</a></li>
<li><a href="#" title="DHTML Forums">Forums</a></li>
</ul>
</div>
<br style="clear: both;" />


	<div id="content">
		<div id="primaryContentContainer">
			<div id="primaryContent">
				текст
			</div>
		</div>
		<div id="secondaryContent">
			меню
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		<p>Copyright </a></p>
	</div>
</div>
</body>
</html>

CSS



*
{
	margin: 0em;
	padding: 0em;
}

h1,h2,h3,h4,h5,h6
{
	color: #6a6a6a;
}

body
{
	font-family: "Trebuchet MS", sans-serif;
	color: #7a7a7a;
	font-size: 11pt;
}

a
{
	color: #AF0A0A;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}

/* Outer */

#outer
{
	margin: 0;
}

/* Header */

#header
{
	height: 175px;
	width: 15.625em;
	float: left;
	position: relative;
	background: #AF0A0A url('images/a1.gif') top right no-repeat;
}
#poisk {
	position:absolute;
	background-image:url(images/poisk.jpg);
	height:36px;
	top:175px;
	left:0;
	width:250px;

}
/* Menu */

.invertedshiftdown{
height: 12em;
margin-left: 17em;
position: relative;
padding: 0;
border-top: 5px solid #FB3434; /*Red color theme*/
background: transparent;

}

.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/


-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #FB3434; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #FB3434; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}




/* Content */

#content
{
	background: #fff url('images/a3.gif') top left repeat-x;
	margin-top: 1px;
	padding-top: 1.5em;
}


/* Primary Content */

#primaryContentContainer
{
	float: right;
	margin-left: -19em;
	width: 100%;
}

#primaryContent
{
	margin: 0em 0em 0em 18em;
	padding: 1.5em;
	border-left: dotted 1px #cacaca;
}

/* Secondary Content */

#secondaryContent
{
	float: left;
	width: 15em;
	padding: 1.5em;
}

/* Footer */

#footer
{
	margin-top: 1.0em;
	border-top: dotted 1px #cacaca;
	padding: 1.5em;
	font-size: 0.9em;
	text-align: center;
}

.clear
{
	clear: both;
}
}



























/* Content */



#content

{

	background: #fff url('images/a3.gif') top left repeat-x;

	margin-top: 1px;

	padding-top: 1.5em;

}





/* Primary Content */



#primaryContentContainer

{

	float: right;

	margin-left: -19em;

	width: 100%;

}



#primaryContent

{

	margin: 0em 0em 0em 18em;

	padding: 1.5em;

	border-left: dotted 1px #cacaca;

}



/* Secondary Content */



#secondaryContent

{

	float: left;

	width: 15em;

	padding: 1.5em;

}



/* Footer */



#footer

{

	margin-top: 1.0em;

	border-top: dotted 1px #cacaca;

	padding: 1.5em;

	font-size: 0.9em;

	text-align: center;

}



.clear

{

	clear: both;

}

Edited April 17, 2010 by Sayitright

Nird · April 16, 2010

лучше ссылку отсавь на верстку

Sayitright · April 16, 2010

сорри, сайт на локалке((

пожалуйста помогите)

sigma77 · April 16, 2010

Sayitright,

Залей страницу на любой бесплатный хостинг. Без этого наврят ли тебе кто сможет помочь.

rus · April 16, 2010

вот это что такое?

*

*
{
margin: 0em;
padding: 0em;
}

Sayitright · April 16, 2010

исправил

Моя верстка

sigma77 · April 16, 2010

.invertedshiftdown{
height: 12em;
margin-left: 17em;
position: relative;
padding: 0;
border-top: 5px solid #FB3434; /*Red color theme*/
background: transparent;

}

Зачем тут margin-left: 17em; задаешь? У тебя лого фиксированной ширины - 250px. Просто задай margin-left: 250px

Sayitright · April 16, 2010

В IE 6 так же не пристыковывает

Помогите пожалуйста))

Edited April 17, 2010 by Sayitright

Faran · April 16, 2010

Попробуй написать left: 15.625em;

Sayitright · April 16, 2010

Не помогает

Sayitright · April 16, 2010

кто знает?

Sayitright · April 19, 2010

ну посмотрите же вы!

slicemasta · April 19, 2010

Sayitright, держи :unsure: проверил в ие6 и фф3.6

.invertedshiftdown{
height: 12em;
position: relative;
padding: 0;
border-top: 5px solid #FB3434; /*Red color theme*/
background: transparent;

position: relative;
margin-left: 250px;
left: -3px;
}

Edited April 19, 2010 by slicemasta

Sayitright · April 20, 2010

спасибо) , права в файрфоксе бордер наступает на лого)

sigma77 · April 20, 2010

Sayitright,

Вынеси это объявление (left: -3px) в отдельный стиль для ИЕ.

* html .invertedshiftdown{

left: -3px

}

Edited April 20, 2010 by sigma77

mishka · April 20, 2010

Чтобы много не писать про задания размеров в em, я дам тебе ссылочку, там 4 поста всего лишь прочти.

http://forum.htmlbook.ru/index.php?s=&...st&p=146624

Если ты действительно понимаешь суть em и для чего это нужно, и ты уверен что в твоей ситуации нужны именно em, то конечно делай так.

На форуме я еще ниодного человека не встретил который бы четко понимал что такое емная верстка и для чего она нужна.

Edited April 20, 2010 by mishka2

s0rr0w · April 20, 2010

На форуме я еще ниодного человека не встретил который бы четко понимал что такое емная верстка и для чего она нужна.

Я понимаю. Мало того, прекрасно знаю для чего ее лучше использовать.

psywalker · April 20, 2010

Я понимаю. Мало того, прекрасно знаю для чего ее лучше использовать.

А я почти уже понял) :unsure:

И если можно, объясни поподробнее.

s0rr0w · April 20, 2010

А самим подумать?

psywalker · April 20, 2010

А самим подумать?

Я использую em в основном для шрифта, раньше использовал для всего живого на сайте, бездумно. Правильно ли я щас делаю?

mishka · April 20, 2010

Я понимаю. Мало того, прекрасно знаю для чего ее лучше использовать.

Ой, как говорится а слона то и не заметил :unsure:

s0rr0w · April 20, 2010

Охохо, сразу видно, что кроме домашних страничек никто ничего больше не делает.

CSS применяться может не только для отображения страничек браузером, но и для конвертации документов в pdf, например.

Так вот, при конвертации документов в pdf можно использовать em для того, чтобы сохранять пропорции отступов относительно размеров шрифта, который может быть разным для разных документов.

Аналогично можно делать для стилей для печати.

psywalker · April 20, 2010

Охохо, сразу видно, что кроме домашних страничек никто ничего больше не делает.
CSS применяться может не только для отображения страничек браузером, но и для конвертации документов в pdf, например.
Так вот, при конвертации документов в pdf можно использовать em для того, чтобы сохранять пропорции отступов относительно размеров шрифта, который может быть разным для разных документов.
Аналогично можно делать для стилей для печати.

Согласен, не делаю ничего кроме домашних страниц. Но вопрос, если брать их, то я правильно поступаю?

Sign In

Помогите пожалуйста выронять меню

Question

Link to comment

Share on other sites

22 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

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