Forum Coders' city Strona Gwna Coders' city
Nasza pasja to programowanie!
 

 PomocPomoc   SzukajSzukaj   UytkownicyUytkownicy   GrupyGrupy  RejestracjaRejestracja 
Archiwum starego forum + teoria    RSS & Panel/SideBar
 ProfilProfil   Zaloguj si, by sprawdzi wiadomociZaloguj si, by sprawdzi wiadomoci   ZalogujZaloguj 

Potrzebuj szybkiej odpowiedzi na moje pytanie... Zasady

[CSS] Wy?rodkowanie menu poziomego



 
Odpowiedz do tematu    Forum Coders' city Strona Gwna -> Sieci komputerowe i Internet
Zobacz poprzedni temat :: Zobacz nastpny temat  
Autor Wiadomo
TomaszKa



Doczy: 07 Sie 2012
Posty: 55
Skd: Pozna?

PostWysany: Sro Wrz 24, 2014 6:21 pm  OP    Temat postu: [CSS] Wy?rodkowanie menu poziomego Odpowiedz z cytatem Pisownia

Witam,
prbuj? 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.
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo
Chemikk



Doczy: 26 Sty 2008
Posty: 541
Skd: Wroc?aw

PostWysany: Sro Wrz 24, 2014 10:26 pm      Temat postu: Odpowiedz z cytatem Pisownia

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
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo Wylij email Odwied stron autora Numer GG
TomaszKa



Doczy: 07 Sie 2012
Posty: 55
Skd: Pozna?

PostWysany: Czw Wrz 25, 2014 9:13 pm  OP    Temat postu: Dzi?kuj? Odpowiedz z cytatem Pisownia

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 gre (a nie w d?) i elementy ul przeskakuj? na d?. B?d? musia? jeszcze z tym pokombinowa?, aby wrci?o do poprzedniego wygl?du.

Co mia?e? na my?li pisz?c, ?eby poprawi? kod HTML?

_________________
Tomasz K.
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo
Chemikk



Doczy: 26 Sty 2008
Posty: 541
Skd: Wroc?aw

PostWysany: Czw Wrz 25, 2014 11:50 pm      Temat postu: Odpowiedz z cytatem Pisownia

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
Powrt do gry
Zobacz profil autora Wylij prywatn wiadomo Wylij email Odwied stron autora Numer GG
Wywietl posty z ostatnich:   
Odpowiedz do tematu    Forum Coders' city Strona Gwna -> Sieci komputerowe i Internet Wszystkie czasy w strefie CET (Europa)

Strona 1 z 1

 
Skocz do:  
Moesz pisa nowe tematy
Moesz odpowiada w tematach
Nie moesz zmienia swoich postw
Nie moesz usuwa swoich postw
Nie moesz gosowa w ankietach
Moesz dodawa zaczniki na tym forum
Moesz pobiera pliki z tego forum




Debug: strone wygenerowano w 0.04318 sekund, zapytan = 11
contact

| Darmowe programy i porady Jelcyna | Tansze zakupy w Helionie | MS Office Blog |