Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS - menu poziome - obramowanie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
filip11
29.04.2010, 17:27:03
Bardzo fajnie uzyskałem pomoc poprzednim razem, teraz nie mogę poradzić sobie z obramowaniem tego menu... Ne ważne w które miejsce wstawię: border,border-color,border-style i tak nie uzyskuje obramowania...

Zamieszczam css:

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


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

ul#upper_menu_menu li
{
    float: left;

    
}

ul#upper_menu_menu ul li
{
    margin:0 auto;

}
ul#upper_menu_menu li li
{
    float: none;
    margin:0 auto;  
}
ul#upper_menu_menu li a
{
    display: block;
    width: 255px;
    text-align: center;
    background-color: #72a6fd;
    color: black;
    padding: 3px 0;
    text-decoration: none;
}

ul#upper_menu_menu li a:hover
{
    background-color: #b3ccf5;
    text-decoration: none;
}
ul#upper_menu_menu li ul
{
    position: absolute;
    height: 1px;
    overflow: hidden;
    
}

ul#upper_menu_menu li:hover ul
{
    height:160px;
}


dziękuję za pomoc.

P.S. Jak wstawić kod w odpowiednich znacznikach na tym forum questionmark.gif smile.gif
pedro84
29.04.2010, 17:32:42
Obramowanie dla ul#upper_menu_menu, chyba, że masz diva nadrzędnego. Pokaż strukturę, a najlepiej URL.
krzysztof_kf
29.04.2010, 17:49:18
Cytat(filip11 @ 29.04.2010, 18:27:03 ) *
P.S. Jak wstawić kod w odpowiednich znacznikach na tym forum questionmark.gif smile.gif



masz w odpowiedźi na samym dole Funkcję BBCode tam masz wszystko opisane pokaż link . do strony

Cytat(filip11 @ 29.04.2010, 18:27:03 ) *
[CSS] pobierz, plaintext 
  1.  
  2. }
  3. ul#upper_menu_menu li li
  4. {
  5. 	float: none;
  6. 	margin:0 auto;   
[CSS] pobierz, plaintext


co to ma być ?
filip11
29.04.2010, 20:31:50
Cytat(krzysztof_kf @ 29.04.2010, 18:49:18 ) *
masz w odpowiedźi na samym dole Funkcję BBCode tam masz wszystko opisane pokaż link . do strony



co to ma być ?
eszcze.
A dlaczego tak nie może byćwinksmiley.jpg questionmark.gif

To menu jest w nadrzędnym divie. Nie mogę niestety dać URL, ponieważ nigdzie to nie stoi j
krzysztof_kf
29.04.2010, 20:52:25
Jak nie działa obramowanie jak to sklejasz ?

[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2. ul#upper_menu_menu
  3. {
  4.     list-style-type: none;
  5.  
  6. }
  7.  
  8. ul#upper_menu_menu li
  9. {
  10.     float: left;
  11.  
  12.  
  13. }
  14.  
  15. ul#upper_menu_menu ul li
  16. {
  17.     margin:0 auto;
  18.  
  19. }
  20.  
  21. ul#upper_menu_menu li a
  22. {
  23.     display: block;
  24.     width: 255px;
  25.     border: 1px solid #00ff00;
  26.     text-align: center;
  27.     background-color: #72a6fd;
  28.     color: black;
  29.     padding: 3px 0;
  30.     text-decoration: none;
  31. }
  32.  
  33. ul#upper_menu_menu li a:hover
  34. {
  35.     background-color: #b3ccf5;
  36.     text-decoration: none;
  37. }
  38. ul#upper_menu_menu li ul
  39. {
  40.     position: absolute;
  41.     height: 1px;
  42.     overflow: hidden;
  43.  
  44. }
  45.  
  46. ul#upper_menu_menu li:hover ul
  47. {
  48.     height:160px;
  49. }
  50. </style>
  51. <ul id="upper_menu_menu">
  52. <ul>
  53. <li><a href="index.php">Link 1</a></li>
  54. <li><a href="index.php">Link 1</a></li>
  55. <li><a href="index.php">Link 1</a></li>
  56. <li><a href="index.php">Link 1</a></li>
  57. </ul>
[CSS] pobierz, plaintext
filip11
29.04.2010, 21:02:30
Sklejam to tak (ogólnie to wysuwane menu)

CODE
<ul id="upper_menu_menu">
<li id="upper_menu_menu"><a href="">Menu1</a>
<ul class="one">
<li><a href="">Menu1.1</a></li>
<li><a href="">Menu1.2</a></li>
<li><a href="">Menu1.3</a></li>
<li><a href="">Menu1.4</a></li>
<li><a href="">Menu1.5</a></li>
</ul>
</li>
<li id="upper_menu_menu"><a href="">Menu2</a>
<ul id="two">
<li><a href="">Menu2.1</a></li>
<li><a href="">Menu2.2</a></li>
<li><a href="">Menu2.3</a></li>
<li><a href="">Menu2.4</a></li>
<li><a href="">Menu2.5</a></li>
</ul>
</li>
<li id="upper_menu_menu"><a href="">Menu3</a>
<ul id="three">
<li><a href="">Menu3.1</a></li>
<li><a href="">Menu3.2</a></li>
<li><a href="">Menu3.3</a></li>
<li><a href="">Menu3.4</a></li>
<li><a href="">Menu3.5</a></li>
</ul>
</li>
<li id="upper_menu_menu"><a href="">Menu4</a>
<ul id="four">
<li><a href="">Menu4.1</a></li>
<li><a href="">Menu4.2</a></li>
<li><a href="">Menu4.3</a></li>
<li><a href="">Menu4.4</a></li>
<li><a href="">Menu4.5</a></li>
</ul>
</li>
</ul>
krzysztof_kf
29.04.2010, 21:08:26
Jeśli chcesz pojedyncze elementy obramować to 

[CSS] pobierz, plaintext 
  1. ul#upper_menu_menu li a
  2. {
  3.     border: 1px solid #00ff00;
  4. }
  5.  
[CSS] pobierz, plaintext
filip11
30.04.2010, 08:38:09
dzięki smile.gif jak mogłem tego nie zauważyć...
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.