Jump to content
php.lv forumi

Menu iecentreeshana


orion

Recommended Posts

Ta ta problēma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
ul {
list-style-type:none;
margin: 0 auto;
padding: 0;
width: 800px;
background-color: red;
}

ul li{
display: block; float: left; width: 150px; height: 25px; background-color: silver; text-align: center;
}

ul li a{
display: block;
line-height: 25px;
}

ul li a:hover{
  background-color: gray;
  color: white;
  font-weight: bold;
}
#container{
width: 1000px;
text-align: center;
border: 1px solid black;
}

</style>
</head>

<body>
<div id="container">
<ul>
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
</ul>
</div>
</body>


</html>

 

Tā kā nav pietiekami daudz menu itemu, tad uzliku ul sarkanu fonu, lai tu redzētu, ka viņš aizņem tiešām tos 800px un ir izlīdzināts pret centru.

Link to comment
Share on other sites

Nu nezinu, bet man uz Firefox kaklz kods rādījās nepareizi :blink:

 

Pats pamēģināju un secināju, ka tā kā orions grib man neizdodas uztaisīt ar <ul>. Taisi kā gribi, bet pats menu nebūs centrā, ja neieliksi to divā ar fixed width, bet tad jau nevarēs mainīt menu textu.

 

Risinājums būtu, ja neizmantotu display: block, bet inline un kubika izmēru kontrolētu ar padding-left un padding-right.

 

Tas izdotos 100 p. BET nevarēsi uztaisīt perfektus garumus.

 

Ps. Ar JavaScript šito arī varētu tīri viegli paveikt!

Edited by Gacha
Link to comment
Share on other sites

pievienoju:

height: 25px;

aiz:

ul {

un

#container{

tagad rādās vienādi gan uz IE gan FF B)

 

a vispār šis neder?:

<style type="text/css">
#container ul {margin: 0;padding: 0;list-style-type: none;text-align: center;}
#container ul li { display: inline;}
#container ul li a {padding: .2em 1em;background-color: #ECFFF2;  width: 160px;font-weight: bold;} 
#container ul li a:hover{background-color: red;} 
</style>

<div id="container">
<ul>
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
</ul>
</div>

Edited by loderis
Link to comment
Share on other sites

loderis: tas itkā jau derētu, bet nav takš centrēts!!!  Es pamēģināju <a></a> un display: inline; un man viss izdevās. Bet te jau laikam ar <ul> vajag  :)

12959[/snapback]

man izskatās šādi

a ko tu vēl vēlies? laikam nesaprotu ko tu tieši gribi :rolleyes:

 

pameigini šo kodu, man viss iet, tas ir no attēlā redzemā:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

#container ul {margin: 0;padding: 0;list-style-type: none;text-align: center;}
#container ul li { display: inline;}
#container ul li a {padding: .2em 1em;background-color: #ECFFF2;  width: 160px;font-weight: bold;}
#container ul li a:hover{background-color: red;}

</style>
</head>

<body>

<div id="container">
<ul>
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 2</a></li>
</ul>
</div>

</body>

</html>

Edited by loderis
Link to comment
Share on other sites

man izskatās šādi

a ko tu vēl vēlies? laikam nesaprotu ko tu tieši gribi :rolleyes:

Taatad veelos aptuveni to, kas tev ir, bet lai arii darbojas katra elementa platums!!! Tev jams ir noraadiits, bet ieliekot piemeeram, menu elementu ar 2 burtiem - uzreiz pamaniisi, kas nedarbojas!

 

Man vir menu stāv attēls platumu 800px, uzreiz redzu, ka nav man 5 menu pa 160px apakšā... :/

 

Plikā failā tavējais arī nedarbojas korekti.

Link to comment
Share on other sites

loderis: tas itkā jau derētu, bet nav takš centrēts!!!  Es pamēģināju <a></a> un display: inline; un man viss izdevās. Bet te jau laikam ar <ul> vajag  :)

12959[/snapback]

Man vienalgā kā tas tiek panākts. Galvenais, lai menu centrā un patiešām ar riktīgu WIDTH katram elementam!

Link to comment
Share on other sites

  • 3 weeks later...

Jau atkal jūtos itkā man jautājums būtu ne tur kur vajag, bet lieku to te, jo man ir problēma menu. Tātad - jautājums ir šāds:

Man šeit ir tā, kad brauc listam (menu) pāri tad mainās lista bg, bet vajag lai kad uz linka brauc tad mainās šis bg, nevis kad listam pāri, bet ja tā padomā arī tas ir labi, ja nevar savādāk. Un vel es vēlētos zināt kā var uzlikt tā lai ka kliko uz linka, tad mainās lista bg uz vel savādāku.

Izmēģināju kad listu kliko tad mainās bg, jo tas links jau arī ir lista daļa, bet nestrādā.

Link to comment
Share on other sites

orion:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

#container ul {margin: 0;padding: 0;list-style-type: none;}
#container ul li a {padding: .2em 1em;background-color: #ECFFF2; font-weight: bold;width: 160px; float: left;text-align: center;}
#container ul li a:hover{background-color: red;}

</style>
</head>

<body>

<div id="container">

   <table align="center">
   <tr>
   <td><ul><li><a href="#">Menu Item 1</a></li></ul></td>
   <td><ul><li><a href="#">2</a></li></ul></td>
   </tr>
   </table>

</div>

</body>

</html>

Link to comment
Share on other sites

×
×
  • Create New...