Jump to content
php.lv forumi

Menu iecentreeshana

orion

By orion
in CSS

 Share

Recommended Posts

Kaklz Newbie

Kaklz

Posted
Posted

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
Gacha Newbie

Gacha

Posted
Posted (edited)

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
loderis Newbie

loderis

Posted
Posted (edited)

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 Newbie

loderis

Posted
Posted (edited)
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
orion Newbie

orion

Posted
  • Author
Posted
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
orion Newbie

orion

Posted
  • Author
Posted
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...
Forbidden Newbie

Forbidden

Posted
Posted

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
loderis Newbie

loderis

Posted
Posted

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
 Share
Go to topic listing
×
×
  • Create New...