 |
Coders' city
Nasza pasja to programowanie!
|
| Zobacz poprzedni temat :: Zobacz następny temat |
| Autor |
Wiadomość |
TomaszKa
Dołączył: 07 Sie 2012
Posty: 55
Skąd: Pozna?
|
 Wysłany: Sro Wrz 24, 2014 6:21 pm OP Temat postu: [CSS] Wy?rodkowanie menu poziomego |
  |
|
Witam,
próbuj? i nie mog? wy?rodkowa? rozwijanego menu poziomego w stronie internetowej. Strona pisana w html z wykorzystaniem css.
By?bym wdzi?czny za pomoc.
Poni?ej fragmenty kodu.
HTML
| Kod: |   <div id="menu">
 <ol>
 <li><a href="o_mnie.html">1 przycisk</a></li>
 <li>2 przycisk
 <ul><a href="abc.html">abc</a></ul>
 <ul><a href="def.html">def</a></ul>
 <ul><a href="ghi.html">ghi</a></ul>
 </li>
 <li><a href="aaa.html">2 przycisk</a></li>
 <li><a href="bbb.html">4 przycisk</a></li>
</ol>
</div>
|
CSS
| Kod: | #menu {
margin: auto;
width: 1200px;
position: relative;}
ol {
list-style-type:none;
padding:0;
margin:0 auto;
font-size:18px;
color:white;
height:2em;
line-height:2em;
text-align:center;
border-radius: 15px;
}
li {
font-size: 16px;
margin:0 auto;
}
ol a {
display:block;
color:white;
text-decoration:none;
}
ol > li {
float:left;
background-color:#868170;
width:250px;
margin-left:5px;
}
ol > li:first-child {
margin-left:0;
}
ol > li > ul {
/*domy?lnie elementy podmenu nie s? widoczne */
display:none;
list-style-type:none;
padding:0;
margin:0;
background-color:#AAA7A2;
}
/* bia?e przestrzenie mi?dzy elementami */
ol > li > ul > a {
border-top:1px solid #FFF;
}
/* kolor t?a po najechaniu myszk? na g?ówny element*/
ol > li:hover {background-color:#E3E2DE}
/* kolor czcionki po najechaniu myszk? na g?ówny element*/
ol > li:hover > ul {
display:block;
}
ol > li > a:hover {color:black;}
/* kolor po najechaniu myszk? na poboczny element */
ol > li > ul:hover {background-color:#DDD;}
/* kolor po najechaniu myszk? na poboczny element */
ol > li > ul > a:hover {color:black;}
|
_________________
Tomasz K. |
|
| Powrót do góry |
|
 |
|
|
Chemikk
Dołączył: 26 Sty 2008
Posty: 541
Skąd: Wroc?aw
|
| Wysłany: Sro Wrz 24, 2014 10:26 pm Temat postu: |
|
|
Na pocz?tek proponuj? poprawi? kod HTML.
Co do CSS to proponuj? u?y? display: inline-block, zamiast float: left
_________________
Ch?tnie pomog? z D, Ruby on Rails, JavaScript/CoffeeScript, CSS/SASS
“There are only two hard things in Computer Science: cache invalidation and naming things.”
Phil Karlton |
|
| Powrót do góry |
|
|
TomaszKa
Dołączył: 07 Sie 2012
Posty: 55
Skąd: Pozna?
|
| Wysłany: Czw Wrz 25, 2014 9:13 pm OP Temat postu: Dzi?kuj? |
|
|
Dzi?kuj?, zastosowa?em "display: inline-block;" zamiast "float:left" w kodzie CSS. Menu zosta?o wy?rodkowane, chocia? teraz przy rozwijaniu menu (elementy ul) rozwija si? w góre (a nie w dó?) i elementy ul przeskakuj? na dó?. B?d? musia? jeszcze z tym pokombinowa?, aby wróci?o do poprzedniego wygl?du.
Co mia?e? na my?li pisz?c, ?eby poprawi? kod HTML?
_________________
Tomasz K. |
|
| Powrót do góry |
|
|
Chemikk
Dołączył: 26 Sty 2008
Posty: 541
Skąd: Wroc?aw
|
| Wysłany: Czw Wrz 25, 2014 11:50 pm Temat postu: |
|
|
| Kod: | <ul><a href="ghi.html">ghi</a></ul>
|
A to co za potworek? Brakuje mi tu li.
_________________
Ch?tnie pomog? z D, Ruby on Rails, JavaScript/CoffeeScript, CSS/SASS
“There are only two hard things in Computer Science: cache invalidation and naming things.”
Phil Karlton |
|
| Powrót do góry |
|
|
|
|
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Możesz dodawać załączniki na tym forum
Możesz pobierać pliki z tego forum
|
Debug: strone wygenerowano w 0.04652 sekund, zapytan = 12
|
Pomoc
Szukaj
Użytkownicy
Grupy
Rejestracja
Profil
Zaloguj się, by sprawdzić wiadomości
