Помогите с банальным меню и css

aov000 · March 16, 2012

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

Нормально отображается в chrome, firefox, но в IE - вообще маразм.

Может можно это сделать проще?

ширина сайта 1024px

ширина меню (от первой до последней буквы) 927px

код html:


<div class="main">
    <div class="men">
 <ul class="menu">
   <li class="novosti1"><a href="#"</a>новости</li>
   <li class="biografia1"><a href="#"</a>биография</li>
   <li class="embed1"><a href="#"</a>embed</li>
   <li class="audio1"><a href="#"</a>audio</li>
   <li class="video1"><a href="#"</a>video</li>
   <li class="links1"><a href="#"</a>links</li>
   <li class="gallery1"><a href="#"</a>gallery</li>
   <li class="contacts1"><a href="#"</a>contacts</li>
   <li class="top101"><a href="#"</a>top10</li>
   </ul>
</div>
</div>

код CSS:


	.main {background-color:#000000;
	padding:0;
	width:1024px;
	height:800px;
	margin:0 auto;
	float:none;
	}
	.men {
		background-image:url(images/menu.jpg);
	width:1024px;
	height:41px;
	}
	.menu {
		/*list-style:none;*/
		text-align:center;	
	}
	.menu li{float:left; padding:10px; margin:3px; vertical-align:middle;
	position:relative; list-style:none;
	}
	.menu li.novosti1{ width:80px; margin:4px 0 0 45px;
	}
	.menu li.biografia1{ width:80px;
	}
	.menu li.embed1{ width:80px; margin:4px 0 0 22px;
	}
	.menu li.audio1{ width:80px;
	}
	.menu li.video1{ width:80px;
	}
	.menu li.links1{ width:80px;
	}
	.menu li.gallery1{ width:80px;
	}
	.menu li.contacts1{ width:80px;
	}
	.menu li.top101{ width:80px;
	}
	.menu li a{display:block;
	position:absolute;
	font-family:Tahoma, Geneva, sans-serif;
	color:#FFF;
	text-decoration:none;
	padding:5px;
	vertical-align:middle;
	font-size:18px;
	top:0px;
	left:10px;
	}

Edited March 16, 2012 by aov000

Switch74 · March 16, 2012

в IE вечно маразм.. и что за маразм то? посмотреть результат в этом убогом браузере не представляется возможным.

для .menu li a не вижу смысла ставить position:absolute; и возможно можно избавиться от display:block;, но иногда это требуется.

ширина сайта width:1024px тоже не есть гуд, если вы делаете минимальную ширину для ширины экрана в 1024px то у вас всё равно будет появляться горизонтальная полоса прокрутки при появлении вертикальной полосы прокрутки.

.men и .menu на мой взгляд можно объединить, а height:800px; для .main при большом количестве контента смысл теряет и на больших экранах может не вкатить, но целей ваших не знаю и даю лишь некоторые советы.

aov000 · March 16, 2012

в IE вечно маразм.. и что за маразм то? посмотреть результат в этом убогом браузере не представляется возможным.
для .menu li a не вижу смысла ставить position:absolute; и возможно можно избавиться от display:block;, но иногда это требуется.
ширина сайта width:1024px тоже не есть гуд, если вы делаете минимальную ширину для ширины экрана в 1024px то у вас всё равно будет появляться горизонтальная полоса прокрутки при появлении вертикальной полосы прокрутки.
.men и .menu на мой взгляд можно объединить, а height:800px; для .main при большом количестве контента смысл теряет и на больших экранах может не вкатить, но целей ваших не знаю и даю лишь некоторые советы.

Предполагается, что высота странички сайта будет фиксированной 800px.

Маразм в IE заключается в том, что 4 позиции меню переносятся на вторую строчку.

Switch74 · March 16, 2012

аа... такое в ие часто бывает

1. сделай сброс margin и padding в 0 ибо в разных браузерах он разный по умолчанию,

2. так же советую установить шрифт одного размера

aov000 · March 17, 2012

аа... такое в ие часто бывает
1. сделай сброс margin и padding в 0 ибо в разных браузерах он разный по умолчанию,
2. так же советую установить шрифт одного размера

Сори не указал в коде. margin и padding сброшено по нулям.

А вот с каким бубном плясать возле IE пока не нашёл. Шрифт во всех словах одинаковый.

Вот как оно выглядит в firefox

А вот как в IE

Получается так, что часть меню уползает вниз.

:dash:

Edited March 17, 2012 by aov000

Switch74 · March 17, 2012

попробуй убрать у .menu text-align:center; или для li поставить display:block;

Nanto · March 17, 2012

<li class="audio1"><a href="#"</a>audio</li>

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

<a href="#"</a> - это Вы так ссылки прописываете?

Может лучше так: <li class="audio1"><a href="#">audio</a></li>

oldman · March 17, 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0;padding:0;}
        .main {background:#000000;
        width:1002px;
        height:800px;
        margin:0 auto;
        }
        .menu {
        list-style:none;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
        border-bottom:2px solid #96682E;
        overflow:hidden;
        }
        .menu li{
        width:80px;
        float:left;
        padding:10px;
        margin:3px;
        text-align:center;
        }
        .menu li a{
        display:block;
        width:100%;
        color:#FFF;
        text-decoration:none;
        }
</style>
  </head>
  <body>
<div class="main">
 <ul class="menu">
   <li><a href="#">новости</a></li>
   <li><a href="#">биография</a></li>
   <li><a href="#">embed</a></li>
   <li><a href="#">audio</a></li>
   <li><a href="#">video</a></li>
   <li><a href="#">links</a></li>
   <li><a href="#">gallery</a></li>
   <li><a href="#">contacts</a></li>
   <li><a href="#">top10</a></li>
   </ul>
</div>
  </body>
</html>

DIV с классом men убрал, если уж он так нужен, то можете оставить.

aov000 · March 17, 2012

Спасибо всем за советы! сяду разбираться обязательно отпишусь!

aov000 · March 19, 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0;padding:0;}
        .main {background:#000000;
        width:1002px;
        height:800px;
        margin:0 auto;
        }
        .menu {
        list-style:none;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
        border-bottom:2px solid #96682E;
        overflow:hidden;
        }
        .menu li{
        width:80px;
        float:left;
        padding:10px;
        margin:3px;
        text-align:center;
        }
        .menu li a{
        display:block;
        width:100%;
        color:#FFF;
        text-decoration:none;
        }
</style>
  </head>
  <body>
<div class="main">
 <ul class="menu">
   <li><a href="#">новости</a></li>
   <li><a href="#">биография</a></li>
   <li><a href="#">embed</a></li>
   <li><a href="#">audio</a></li>
   <li><a href="#">video</a></li>
   <li><a href="#">links</a></li>
   <li><a href="#">gallery</a></li>
   <li><a href="#">contacts</a></li>
   <li><a href="#">top10</a></li>
   </ul>
</div>
  </body>
</html>

DIV с классом men убрал, если уж он так нужен, то можете оставить.

Всё классно! Спасибо, но вот в остальных браузерах всё ползёт.

aov000 · March 20, 2012

Люди добрые, подключаемся. Для меня это стало реально проблемой.

Интересует любой метод решения проблемы.

Проблему решил хаком:

<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->

создал дополнительный файл ie8.css - и правил его уже под страшилище IE.

Edited March 20, 2012 by aov000

Gaspode · March 20, 2012

В каких IE проблемы-то, для начала?

aov000 · March 20, 2012

В каких IE проблемы-то, для начала?

Проблема была с IE8 (меню шло не в один ряд, а в два ряда) - эту проблему я решил с помощью хака.

Сейчас пытаюсь решить проблему с IE7, там вообще с сайтом чё попало происходит. Меню горизонтальное очень сильно вытянулось по ширине, расстояния между словами стали значительно больше.

Проблему с меню решил с помощью хака для IE7.

Но теперь вообще жесть.

Есть горизонтальное меню, последний пункт которого каким-то магическим образом связан с подвалом. Выравниваю подвал, и вместе с ним ползёт последний пункт меню...

Если кто знает решение проблемы отпишитесь плиз.

Edited March 20, 2012 by aov000

NeoXidizer · March 20, 2012

кроссбраузерно вплодь до IE6

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
			html,body,div,nav{margin:0;padding:0;}
			nav{display:block;}
			.clear{clear:both;}
			.main{margin:0 auto;width:1002px;height:800px;background:#000;}
			nav.menu{width:100%;border-bottom:2px solid #96682E;}
			nav.menu a{display:inline-block;width:80px;margin:3px;padding:10px;font:18px Tahoma,Geneva,sans-serif;text-align:center;text-decoration:none;color:#fff;}
	</style>
<!--[if lt IE 9]><script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="main">
	<nav class="menu">
		<a href="#">новости</a>
		<a href="#">биография</a>
		<a href="#">embed</a>
		<a href="#">audio</a>
		<a href="#">video</a>
		<a href="#">links</a>
		<a href="#">gallery</a>
		<a href="#">contacts</a>
		<a href="#">top10</a>
		<div class="clear"></div>
	</nav>
</div>
</body>
</html>

Несколько советов:

Начните уже использовать HTML5, он поддерживается всеми браузерами(даже если частично, этого хватает)

Не используйте общие селекторы в CSS (ваша строчка *{margin:0;padding:0;}), это приводит к потери производительности

Используйте UTF8

либо так

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0;padding:0;}
        .main {background:#000000;
        width:1002px;
        height:800px;
        margin:0 auto;
        }
        .menu {
        list-style:none;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
        border-bottom:2px solid #96682E;
        overflow:hidden;
        }
        .menu li{
        width:80px;
        float:left;
        padding:10px;
        margin:3px;
        text-align:center;
        }
        .menu li a{
        display:block;
        width:100%;
        color:#FFF;
        text-decoration:none;
        }
</style>
  </head>
  <body>
<div class="main">
 <ul class="menu">
   <li><a href="#">новости</a></li>
   <li><a href="#">биография</a></li>
   <li><a href="#">embed</a></li>
   <li><a href="#">audio</a></li>
   <li><a href="#">video</a></li>
   <li><a href="#">links</a></li>
   <li><a href="#">gallery</a></li>
   <li><a href="#">contacts</a></li>
   <li><a href="#">top10</a></li>
   </ul>
   <div style="clear:both;"></div>
</div>
  </body>
</html>

но этот вариант хуже, поверьте, хоть и работает

aov000 · March 23, 2012

кроссбраузерно вплодь до IE6

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
			html,body,div,nav{margin:0;padding:0;}
			nav{display:block;}
			.clear{clear:both;}
			.main{margin:0 auto;width:1002px;height:800px;background:#000;}
			nav.menu{width:100%;border-bottom:2px solid #96682E;}
			nav.menu a{display:inline-block;width:80px;margin:3px;padding:10px;font:18px Tahoma,Geneva,sans-serif;text-align:center;text-decoration:none;color:#fff;}
	</style>
<!--[if lt IE 9]><script type="text/javascript" src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="main">
	<nav class="menu">
		<a href="#">новости</a>
		<a href="#">биография</a>
		<a href="#">embed</a>
		<a href="#">audio</a>
		<a href="#">video</a>
		<a href="#">links</a>
		<a href="#">gallery</a>
		<a href="#">contacts</a>
		<a href="#">top10</a>
		<div class="clear"></div>
	</nav>
</div>
</body>
</html>

Несколько советов:

Начните уже использовать HTML5, он поддерживается всеми браузерами(даже если частично, этого хватает)

Не используйте общие селекторы в CSS (ваша строчка *{margin:0;padding:0;}), это приводит к потери производительности

Используйте UTF8

либо так

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title></title>
<style type="text/css">
*{margin:0;padding:0;}
        .main {background:#000000;
        width:1002px;
        height:800px;
        margin:0 auto;
        }
        .menu {
        list-style:none;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
        border-bottom:2px solid #96682E;
        overflow:hidden;
        }
        .menu li{
        width:80px;
        float:left;
        padding:10px;
        margin:3px;
        text-align:center;
        }
        .menu li a{
        display:block;
        width:100%;
        color:#FFF;
        text-decoration:none;
        }
</style>
  </head>
  <body>
<div class="main">
 <ul class="menu">
   <li><a href="#">новости</a></li>
   <li><a href="#">биография</a></li>
   <li><a href="#">embed</a></li>
   <li><a href="#">audio</a></li>
   <li><a href="#">video</a></li>
   <li><a href="#">links</a></li>
   <li><a href="#">gallery</a></li>
   <li><a href="#">contacts</a></li>
   <li><a href="#">top10</a></li>
   </ul>
   <div style="clear:both;"></div>
</div>
  </body>
</html>

но этот вариант хуже, поверьте, хоть и работает

Первый вариант что-то даже в IE8 не хочет открывать вообще

NeoXidizer · March 23, 2012

проверьте запрет на javascript, только что перепроверил, все работает, как в режимах совместимости через IE9, так и через IETester

aov000 · March 26, 2012

проверьте запрет на javascript, только что перепроверил, все работает, как в режимах совместимости через IE9, так и через IETester

Спасибо!

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

NeoXidizer · March 26, 2012

javascript в 99% включен, а шанс того, что у пользователя будет IE меньше 9 + выключенный javascript - очень мал.

А на других браузерах будет отображать нормально вне зависимости от js

Sign In

Помогите с банальным меню и css

Question

Link to comment

Share on other sites

17 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

Join the conversation

Обсуждения

Important Information