Помогите с css меню

CyBer · March 25, 2011

У меня такая проблема хотел сверстать горизонтальное меню для сайта !

но возникла такая проблема вот само меню я его разрезал на 3 части

но вот в чем проблема слева и справа закругелые углы и у меня не как не получается собрать меню вместе


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>менюшка</title>
<style type="text/css">
<!--
*{margin:0px; padding:0px;}
ul {
    list-style-type:none;
	background-image:url(images/bg.gif);
	background-repeat:repeat-x;
	width:700px;
	height:56px;
	}
li {
    display:inline-block;	
	padding:20px;
	}
#left {
       background-image:url(images/left.gif);
	   background-repeat:no-repeat;
	   height:56px;
	   display:block;
	   width:60px;
	   }

#right {
        background-image:url(images/right.gif);
		background-repeat:no-repeat;
		width:41px;
		height:56px;
		display:block;
		}
#container-menu a {
	               text-decoration:none;
				   color:#FFF;}
-->
</style>
</head>
<body>
       <div id="container-menu"><!--container-menu-->
          <div id="left"></div>
           <ul>

             <li><a href="#">Home</a></li>
             <li><a href="#">News</a></li>
             <li><a href="#">Blogs</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Services</a></li>

         </ul>
           <div id="right"></div>
       </div><!--container-menu-->
</body>
</html>

но получается у меня так

помогите сделать нормально

Edited March 25, 2011 by CyBer

tius · March 25, 2011

#left, #right, ul {float: left;}

CyBer · March 25, 2011

спасибо оказалось 2 часа гемороя из за одной строчки в коде

Edited March 25, 2011 by CyBer

CyBer · March 25, 2011

возникла еще 1 проблема

но проблема в том что при на ведение должно быть так

а у меня получается так

помогите


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>менюшка</title>
<style type="text/css">
<!--
*{margin:0px; padding:0px;}
ul {
     list-style-type:none;
  background-image:url(images/bg.gif);
  background-repeat:repeat-x;
  width:500px;
  height:56px;
  }
li {
     display:inline-block;  
  padding:10px;
  }
#left {
        background-image:url(images/left.gif);
     background-repeat:no-repeat;
     height:56px;
     width:60px;
     }

#right {
         background-image:url(images/right.gif);
   background-repeat:no-repeat;
   width:41px;
   height:56px;
   }
#container-menu a {
                 text-decoration:none;
        color:#FFF;
        }
#left, #right, ul {float: left;}
#container-menu a:hover {  
           text-decoration:none;  
     background-image:url(images/a-hover.gif);  
           background-repeat:no-repeat;
     background-color:#95009E;
     display:inline-block;
     width:100px;
     height:56px;
          }
-->
</style>  
</head>
<body>
        <div id="container-menu"><!--container-menu-->
           <div id="left"></div>
            <ul>

              <li><a href="#">Home</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Blogs</a></li>
              <li><a href="#">About</a> </li>
              <li><a href="#">Services</a></li>

          </ul>
            <div id="right"></div>
        </div><!--container-menu-->
</body>
</html>

psywalker · March 25, 2011

1. Ие6-7 не понимают

li {
     display:inline-block;

2. Этот контейнер схлопывается

 <div id="container-menu">

CyBer · March 25, 2011

Quote
1. Ие6-7 не понимают

чем можна заменить?

Quote
2. Этот контейнер схлопывается

я его пробывал убирать нечего не поменялась

psywalker · March 25, 2011

On 3/25/2011 at 6:40 PM, CyBer said:
чем можна заменить?
я его пробывал убирать нечего не поменялась

1. display: inline; zoom:1;

2. Его не убирать надо, а например задать ему overflow:hidden;,чтобы он мог обхватить всех своих плавающих потомков.

CyBer · March 25, 2011

поставил но всеравно не то вот что получилось

Quote
1. display: inline; zoom:1;

получается совсем нето но я найду как решить эту проблему у меня щас другай проблема!

tius · March 25, 2011


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>менюшка</title>
<style>
*{margin:0; padding:0;}
#left {
	background:#000 url(images/left.gif) no-repeat;
	height:56px;
	width:60px;
	float: left;
}
#right {
 	background: #000 url(images/right.gif) no-repeat;
	width:41px;
	height:56px;
	float: left;
}
ul {
	list-style: none;
	background: #000 url(images/bg.gif) repeat-x;
	height: 56px;
	float: left;
}
ul li {
	display: block;
	float: left;
	height: 56px;
}
ul li a {
	text-decoration: none;
	color: #fff;
	padding: 0 10px;
	height: 56px;
	display: table-cell;
	vertical-align: middle;
}
ul li a:hover {  
	background: #95009E url(images/a-hover.gif) no-repeat;  
}
</style>  
</head>
<body>
	<div id="container-menu">
	<div id="left"></div>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blogs</a></li>
		<li><a href="#">About</a> </li>
		<li><a href="#">Services</a></li>
	</ul>
	<div id="right"></div>
	</div>
</body>
</html>

CyBer · March 25, 2011

tius , спс щас попробую

CyBer · March 25, 2011

:(

пришлось убрать тень меню и поигратся с ним но все получилось большое спасибо

tius · March 25, 2011

Не во что.

Sign In

Помогите с css меню

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information