Jump to content
php.lv forumi

Menu iecentreeshana


orion
 Share

Recommended Posts

Vārdusakot mēģinu taga uzcīnīt webu pilnībā uz CSS.

Ir augšējais menu, kas atrodas zem divām bildēm(logo + top_banner). šamās abas baigi smuki iecentrējās. Tjip viena + otra un abas kopā - centrā. Ceru, ka sapratāt ((:

 

A zem jamām man nepieciešams menu, kas arī ir viss kopā iecentrēts...

<div id="top_menu"><a href="?k=1">menu1</a></div>
<div id="top_menu"><a href="?k=2">menu2</a></div>
<div id="top_menu"><a href="?k=3">menu3</a></div>
<div id="top_menu"><a href="?k=4">menu4</a></div>
<div id="top_menu"><a href="?k=5">menu5</a></div>

#top_menu a{
background-color: #ECFFF2;
width: 160px;
float: left;
position: static;
padding: 0px;
font-weight: bold;
color: #000000;
       text-align: center;
}

Viss izskatās baigi lieliski, vienādi bloki ar smuku linku pa vidu.

Tikai viss menju pie kreisaas malas pielipis. Meegjinaaju visaadi. Ar klaseem, ar <center> tagu ... Visu veidu centreeshanu, kaadu vien zinu.

Nu kaut kaa taa...

Vobšem - kā man jamo iecentrēt??

augšējās bildes iecentrējās ar text-align: center;

Link to comment
Share on other sites

1) id vietā lieto class (id nevajadzētu atkārtoties, elementiem kuri atkārtojas paredzēts class)

2)

<div id="top_menu">
<a href="?k=1">menu1</a>
<a href="?k=2">menu2</a>
<a href="?k=3">menu3</a>
<a href="?k=4">menu4</a>
<a href="?k=5">menu5</a>
</div>

un CSS

#top_menu {
text-align: center;
width: 800px;
margin: 0 auto;
}

#top_menu a{
background-color: #ECFFF2;
width: 160px;
float: left;
padding: 0px;
font-weight: bold;
color: #000000;
text-align: center;
}

Link to comment
Share on other sites

pieliec pie #top_menu a{
display: block; 
width: 150px;
}

 

A vispār šitādus menu gudri vīri taisa ar

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>

 

palīdzību:

 <style type="text/css">
 ul {
list-style-type:none;
margin: 0;
padding: 0;
}

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;
}


</style>

+

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

Link to comment
Share on other sites

ORION: A kamdēļ nepieciešams, tas "float: left;" ? ja var iztikt ar "display: block;" ? Iesaku floatus lietot tikai tur, kur tas patiešām nepieciešams, jo ar viņiem dažreiz var iebraukt auzās.

Link to comment
Share on other sites

A vispār šitādus menu gudri vīri taisa ar

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>

 

Taatad - man vajag, lai menu viens otram buutu blakus, nevis sarakstaa uz leju!!!

 

 

ORION: A kamdēļ nepieciešams, tas "float: left;" ? ja var iztikt ar "display: block;" ? Iesaku floatus lietot tikai tur, kur tas patiešām nepieciešams, jo ar viņiem dažreiz var iebraukt auzās.

12923[/snapback]

Bez float: left - jamie iezkaartojas uz leju rindaa, nevis viens otram blakus!!!

 

 

Tas pats notiekaas arii tad, ja liek class, nevis id un ja visiem liek vienu, nevis atsevishkji katram pa <div>!!!

Link to comment
Share on other sites

ok ok, es ir nebuut CSS guru ((: liidz shim CSS tik klaseem izmantoju - tjip teksta u.c. fignju noformeeshanai. Pa blokiem neko nekad neesmu licis (: Shitas pirmais meegjinaajums (:

Thnks par padomiem (:, bet nu eniivei man tas menu nav centraa ((:

Link to comment
Share on other sites

tu apskatījies manis doto kodu?

 

Tur viss ir darboties spējīgs - elementi ir viens otram blakus, noteiktā platumā, teksts pogās iecentrēts vertikāli un horizontāli. Mainās fona krāsa pie uzbraukšanas ar peli. Ko tu vēl gribi?

 

Ja tu izmanto display: inline, tad tas ir plūsmas nevis bloka elements. Plūsmas elementiem nevar norādīt platumu.

Link to comment
Share on other sites

tu apskatījies manis doto kodu?

 

Tur viss ir darboties spējīgs - elementi ir viens otram blakus, noteiktā platumā, teksts pogās iecentrēts vertikāli un horizontāli. Mainās fona krāsa pie uzbraukšanas ar peli. Ko tu vēl gribi?

 

Ja tu izmanto display: inline, tad tas ir plūsmas nevis bloka elements. Plūsmas elementiem nevar norādīt platumu.

12948[/snapback]

Šādu rezultātu dabūju bez problēmām, bet man jau no paša sākuma vajag, lai šis menu būtu IECENZTRĒTS. Ne tikai katrs atsevišķš elements, kaa tavā piemērā, bet arī viss menu kopumā!!

piemeers: lapas platums 1000px, menu platums 800px. Vajag, lai menu abaas pusees buutu pa 100px. Un nebuutu gljuku mainot monitora izšķirspēju. T.i. - nevar konkrētu atrašanās vietu px noteikt. Obligāti vajag CENTER.

Mēģināju liekt visu menu atsevišķā blokā, bet nezinkāpēc arī necentrējas :/

Link to comment
Share on other sites

 Share

×
×
  • Create New...