CSS Menu

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
mariosal
Honorary Member
Δημοσιεύσεις: 1473
Εγγραφή: 09 Νοέμ 2007 23:55

CSS Menu

Δημοσίευση από mariosal » 18 Ιαν 2008 14:52

Γεια σας! Εδώ και καιρό προσπαθώ να βρω πώς να βάλω το menu που έχω στην ιστοσελίδα μου να μπαίνει στη μέση.

Το style του CSS είναι αυτό:

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(../nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../nav_bg.png) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(../nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

Τα links του menu κ.τ.λ. είναι αυτά:

<div>
<ul id='menu'>

<li class='button'><a class='current' href='http://www.mariosaldinger.gr/mariosaldinger/'>Κεντρική Σελίδα</a></li>
<li class='button'><a href='aboutme/index.html'>Σχετικά Με Εμένα</a></li>
<li class='button'><a href='hobbies/index.html'>Χόμπυ</a></li>
<li class='button'><a href='portfolio/index.html'>Portfolio</a></li>
<li class='button'><a href='contact/index.html'>Επικοινωνία</a></li>
</ul>
</div>

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Menu

Δημοσίευση από manolism » 18 Ιαν 2008 15:12

Αντικατέστησε όλο το ul#menu με το:

Κώδικας: Επιλογή όλων

ul#menu 
&#123; 
margin&#58;0 auto; 
padding&#58;0; 
list-style-type&#58;none; 
display&#58;block; 
width&#58;580px;
height&#58;30px; 
font-size&#58;12px; 
font-weight&#58;bold; 
background&#58;transparent url&#40;../nav_bg.png&#41; repeat-x top left; 
font-family&#58;Arial, Helvetica, sans-serif; 
border-bottom&#58;1px solid #000000; 
border-top&#58;1px solid #000000; 
&#125; 
και θα είσαι εντάξει. Αν θέλεις να βάλεις και άλλες επιλογές μην ξεχάσεις να αλλάξεις το Width.

mariosal
Honorary Member
Δημοσιεύσεις: 1473
Εγγραφή: 09 Νοέμ 2007 23:55

CSS Menu

Δημοσίευση από mariosal » 18 Ιαν 2008 15:24

Θέλω να είναι όπως το παλιό αλλά τα γράμματα να είναι στο κέντρο.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης