Jump to content
  • 0

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


Sayitright
 Share

Question

Здравствуйте. Я "верстаю" шаблон, и в 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 by Sayitright
Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0

.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

Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by mishka2
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy