Μενού στο κέντρο

[tpelek]

Έχω φτιάξει αυτό το μενού.

 

CSS

>#navigation { 
background-image:url(../img/menu_backgraound.jpg); 
width: 663px; 
height: 56px; 
margin: 0 auto; 
padding: 0; 
}
#menu {
margin: 0; 
padding: 0; 
list-style-type: none;
}
#menu li { 
display: inline; 
list-style:none; 
float: left; 
margin: auto; 
padding-right: 2px; 
padding-left: 2px; }

#menu li a { 
padding:20px 10px 14px; 
color:gray; 
text-decoration:none; 
font-weight:bold; 
margin:0; 
display: block;}

#menu li a:hover, .active { 
background-image:url(../img/menu_a_hover.gif); 
background-position:50% 87%; 
background-repeat:repeat-x; 
color:#000; font-weight: bold; 
text-decoration: none; }
.clear {
clear:both;
}

 

HTML

><div id="navigation" align="center">
<ul id="menu" align="center">
				<li><img src="img/menu_space.gif" align="center"></li>
				<li><a href="index_iframe.html" title="Αρχική" target="main_iframe">Αρχική</a></li>
				<li><img src="img/menu_space.gif" align="center"></li>
				<li><a href="#" title="Υπηρεσίες" target="main_iframe">Υπηρεσίες</a></li>
				<li><img src="img/menu_space.gif" align="center"></li>
				<li><a href="#" title="Έργα"  target="main_iframe">Έργα</a></li>
				<li><img src="img/menu_space.gif" align="center"></li>
				<li><a href="#" title="Ποιοι είμαστε" target="main_iframe">Ποιοι είμαστε</a></li>
				<li><img src="img/menu_space.gif" align="center"></li>
				<li><a href="#" title="Επικοινωνία" target="main_iframe">Επικοινωνία</a></li>
				<li><img src="img/menu_space.gif" align="center"></li>
			</ul></div>

 

Demo > http://www.tpelek.gr/temp

 

Το πρόβλημα μου είναι ότι δεν μπορώ να κάνω τις επιλογές του μενού να στοιχίζονται στο κέντρο.

Το Float δεν μπορεί να είναι Center, έχω ψάξει στο Google για λύση αλλά δεν βρήκα κάτι που να το φτιάχνεί.

 

Ευχαριστώ εκ των προτέρων

[Dikemou]

Αν βάλεις ένα

><center>

έξω απ' το div;

[tpelek]

Αν βάλεις ένα

><center>

έξω απ' το div;

 

Το δοκίμασα αλλά δεν πιάνει.

[Dikemou]

Για δοκίμασε να βγάλεις και το "margin: 0 auto; " από το navigation...

[ALR]

#menu li a {

padding:20px 10px 14px;

 

Αντί για 20 10 14 κάντο 20 27 14. Αν κατάλαβα καλά δηλαδή τι θέλεις να κάνεις, γιατί είναι και 5 τα ξημερώματα!

[spiteo]

γεια σας

 

δοκιμασε το επομενο margin-left: 10px; κανε αλλαγες στην τιμη 10

 

#navigation {

background-image:url(../img/menu_backgraound.jpg);

width: 663px;

height: 56px;

margin: 0 auto;

margin-left: 10px;

padding: 0;

}

 

εαν δεν εχεις αποτελεσμα δοκιμασετο στο #menu

 

εαν και παλι δεν κανεις τιποτα τοτε στις ιδιοτητες <div>

θα πρεπει να δωσεις position:absolute;

left: 180px; top: 76px; (δηλαδη τιμες που θελεις)

 

____________________________________________

 

http://www.betgr.gr

[tpelek]

Ευχαριστώ,

Δεν έχω προλάβει ακόμα να τεστάρω αυτά που λέτε. Μόλις το κάνω θα σας ενημερώσω.

[daremon]

Αν κατάλαβα τι θες, δοκίμασε το παρακάτω:

 

>
<div id="navigation">
    <img src="index_files/menu_space.gif" align="middle">
		<a href="http://www.tpelek.gr/temp/index_iframe.html" title="Αρχική" target="main_iframe">Αρχική</a>
		<img src="index_files/menu_space.gif" align="middle">
		<a href="#" title="Υπηρεσίες" target="main_iframe">Υπηρεσίες</a>
		<img src="index_files/menu_space.gif" align="middle">
		<a href="#" title="Έργα" target="main_iframe">Έργα</a>
		<img src="index_files/menu_space.gif" align="middle">
		<a href="#" title="Ποιοι είμαστε" target="main_iframe">Ποιοι είμαστε</a>
		<img src="index_files/menu_space.gif" align="middle">
		<a href="#" title="Επικοινωνία" target="main_iframe">Επικοινωνία</a>
		<img src="index_files/menu_space.gif" align="middle">
</div>

 

>
body {
margin: 0;
background-image:url(../img/background.gif);
background-repeat:repeat-x;
}
#lang{
text-decoration: none;
width: 663px;
height: 22px;
margin: 0 auto;
padding: 0; }
#lang li { display: inline; margin:0; list-style:none; float:right; padding: 0; }

#lang li a { margin:0; color:gray; text-decoration:none; font-weight:bold; padding: 2px 1px 0 0; display: block; }

#container {
margin: 0 auto;
padding: 0;
width: 663px;
height:800px;
}
#logo {
background-image:url(../img/home_03.jpg);
width: 663px;
height: 117px;
margin: 0;
padding: 0;
}
#navigation {
background-image:url(../img/menu_backgraound.jpg);
width: 663px;
height: 56px;
margin: 0;
padding: 0;
border:1px solid black;
text-align: center;
}
#navigation a {
padding:20px 10px 14px;
color:gray;
text-decoration:none;
font-weight:bold;
margin:0;
}
#content{
margin: 0 auto;
padding: 0;
width: 663px;
height:623px;
background-image:url(../img/content_background.gif); }

[tpelek]

Αυτό που θέλω να κάνω είναι να οι επιλογές "Αρχική" κτλ να στοιχίζονται από το κέντρο προς τις άκρες. Τώρα όπως το έχω κολλάνε αριστερά.

Τα δοκίμασα όλα όσα μου είπατε και κανένα δεν το κάνει αυτό.

Αυτό που είπε ο ALR μόνο μεγαλώνει τις αποστάσεις και το μενού πιάνει όλη την γραμμή.

Το πολύ πολύ να το αφήσω έτσι

[daremon]

Περίεργο, αυτό που σου έστειλα κάνει αυτό που θες και το δοκίμασα σε IE και FF:

 

----κενό----Επιλογή1 | Επιλογή2 | Επιλογή3----κενό----

 

Έχω κάνει αλλαγές και στο html και στο CSS. Και αφού βάλεις τον κώδικα κάνε ένα control+refresh για να είσαι σίγουρος...

[tpelek]

Περίεργο, αυτό που σου έστειλα κάνει αυτό που θες και το δοκίμασα σε IE και FF:

 

----κενό----Επιλογή1 | Επιλογή2 | Επιλογή3----κενό----

 

Έχω κάνει αλλαγές και στο html και στο CSS. Και αφού βάλεις τον κώδικα κάνε ένα control+refresh για να είσαι σίγουρος...

 

Κατ’ αρχή σε ευχαριστώ για τον χρόνο σου

 

Δεν το δοκίμασα σωστά πρίν, έχεις δίκιο δουλεύει.

Έβαλα και ότι χρειάζεται για το εφέ όταν πάει το ποντίκι επάνω και δουλεύει.

Το μόνο που δεν δουλεύει είναι όταν κάνεις Zoom είτε - είτε +, τότε χαλάει τελείως το μενού...θα το παλέψω όμως.

[spiteo]

παντως εαν προσθεσεις στο CSS κωδικα και το

margin-left: 10px; (οπου 10 η αποσταση απο αριστερα)

ειναι σιγουρο οτι δουλευει