Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu w css problem(border-top).
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Mac123
19.05.2013, 18:04:30
Chciałbym się dowiedzieć jak usunąć ten odstęp robiony przez border-top w tym menu (chodzi o te tak zwane "skakanie menu" ) . Gdyż przesuwa mi wszystko o te 2px które ustawiłem w borderze a nie taki miał być efekt ;p .

Kod html:
Kod
<html>
<head>
<meta charset="utf-8">

<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>

<header>
<!--<div id="logo">
logo
</div>-->
<div id="menu-contener">
<nav id="mainmenu">
    <ul>
        
        <li class="first"><a href="#">Home</a>
            <ul>
                <li class="top"><a href="#">Home 1</a></li>
                <li><a href="#">Home 2</a></li>
                <li><a href="#">Home 3</a></li>
                <li><a href="#">Home 4</a></li>
                <li><a href="#">Home 5</a></li>
                
            </ul>
            </li><!--Zamkniecie 1 listy-->
        <li><a href="#">Sliders</a></li>
        <li><a href="#">Headers</a></li>
        <li><a href="#">Page</a></li>
    </ul>
</nav>
</div>


</header>




</body>
</html>



I CSS:
Kod
*{
    margin:0px;
    padding:0px;
}

body{
    background:#333;
}




/*=============MENU=============*/
    background:#fff;
    width:100%;
    padding:0px;
}

#mainmenu{
    font-family:Verdana,Arial, sans-serif;
    position:relative;
    width:377px;
    height:56px;
    font-size:14px;
    color:#333;
    margin:0px auto;

}

#mainmenu ul {
    list-style-type: none;
}

#mainmenu ul li{
    float:left;
    position:relative;
}

#mainmenu ul li a {
    text-align:center;
    padding:20px;
    display:block;
    text-decoration:none;
    color:#000;

}

#mainmenu ul li a:hover {
    color:#43af2b;
    display:block;
    border-top:2px solid #43af2b;
    text-decoration:none;
}



#mainmenu ul li ul {
    display:none;
}

#mainmenu ul li:hover ul {
    display:block;
    position:absolute;
}
    
#mainmenu ul li:hover ul li a{
    display:block;
    background:#d2d2d2;
    color:#000000;
    width:150px;
    border-bottom:1px solid #f2f2f2;
    border-right:none;
    padding:5px;
    text-align:left;
    text-indent:0.2cm;
    font-size:12px;
    border-top:none;
}
#mainmenu ul li:hover ul li a:hover{
    background:#dfdfdf;
    color:#000000;

    
}

.top{
    border-top: 2px solid #43af2b;
    }
    


/*=============MENU=============*/
Arcioch
19.05.2013, 18:40:09 
[HTML] pobierz, plaintext 
  1. *{
  2.     margin:0px;
  3.     padding:0px;
  4. }
  5.  
  6. body{
  7.     background:#333;
  8. }
  9.  
  10.  
  11.  
  12.  
  13. /*=============MENU=============*/
  14.     background:#fff;
  15.     width:100%;
  16.     padding:0px;
  17. }
  18.  
  19. #mainmenu{
  20.     font-family:Verdana,Arial, sans-serif;
  21.     position:relative;
  22.     width:377px;
  23.     height:56px;
  24.     font-size:14px;
  25.     color:#333;
  26.     margin:0px auto;
  27.  
  28. }
  29.  
  30. #mainmenu ul {
  31.     list-style-type: none;
  32. }
  33.  
  34. #mainmenu ul li{
  35.     float:left;
  36.     position:relative;
  37. }
  38.  
  39. #mainmenu ul li a {
  40.     text-align:center;
  41.     padding:20px;
  42.     display:block;
  43.     text-decoration:none;
  44.     color:#000;
  45.  
  46. }
  47.  
  48. #mainmenu ul li a:hover {
  49.     color:#43af2b;
  50.     display:block;
  51. 	padding:18px 20px 20px 20px;
  52.     border-top:2px solid #43af2b;
  53.     text-decoration:none;
  54. }
  55.  
  56.  
  57.  
  58. #mainmenu ul li ul {
  59.     display:none;
  60. }
  61.  
  62. #mainmenu ul li:hover ul {
  63.     display:block;
  64.     position:absolute;
  65. }
  66.  
  67. #mainmenu ul li:hover ul li a{
  68.     display:block;
  69.     background:#d2d2d2;
  70.     color:#000000;
  71.     width:150px;
  72.     border-bottom:1px solid #f2f2f2;
  73.     border-right:none;
  74.     padding:5px;
  75.     text-align:left;
  76.     text-indent:0.2cm;
  77.     font-size:12px;
  78.     border-top:none;
  79. }
  80. #mainmenu ul li:hover ul li a:hover{
  81.     background:#dfdfdf;
  82.     color:#000000;
  83.  
  84.  
  85. }
  86.  
  87. .top{
  88.     border-top: 2px solid #43af2b;
  89.     }
  90.  
  91.  
  92.  
  93. /*=============MENU=============*/
[HTML] pobierz, plaintext


Przy hoverze zmniejsz padding górny o 2px ponieważ do wysokości elementu dochodzi wtedy border smile.gif
Mac123
19.05.2013, 18:46:03
No no ładnie ;p Próbowałem z paddingiem ale inaczej , i dlatego nie wychodziło. Siedziałem tyle czasu i rozkminiałem ;p . Oczywiście działa i dziekuje za pomoc biggrin.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.