CSS comment faire pour centrer un menu
Je ne peux pas obtenir un menu centrée. J'ai des images, etc. ce centre, mais je ne peux pas le centre du menu.
Voici le site du CSS qui concerne le menu:
@charset "UTF-8";
/* CSS Document */
#nav {
width:975px; /* six main menu buttons at 150px per */
margin:1 auto; /* Based on a suggestion from stackoverflow */
list-style-type:none;
text-align:center;
position: fixed; /* used to render menu bar on top */
top: 0; /* used to render menu bar on top */
z-index: 1000; /* use z-index to render menu bar on top of everything, even the slideshow */
display:inline-block;
}
#nav li {
display:inline-block; /* used to wrap text */
position:relative;
float:left;
background-color: #BDB76B; /* menu background color */;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
#nav li:hover { /* highlights current hovered list item when hovering over the parent menu */
background-color:#BDB76B;
font-weight:500;
color:blue;
}
#nav li a {
display:inline-block; /* used to wrap text */
margin:5px 0; /*space between menu elements */
text-decoration:none;
width:150px; /* this is the width of the menu items */
line-height:15px; /* this is the text height of the menu items */
color:#000000; /* list item font color 000=black, FFF=white*/
}
#nav li a:hover { /* highlights hovered item of the parent menu */
background-color:#BDB76B;
font-weight:500;
color:blue;
font-size:18px;
width:225px;
}
#nav li li a { /* smaller font size for sub menu items */
font-size:90%;
background-color: #BDB76B; /* menu background color for submenues */
}
#nav li li a:hover { /* highlights current hovered list when hovering over sub menues */
background-color:#BDB76B;
font-weight:500;
color:blue;
font-size:120%;
width:200px;
}
/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}
#nav li:hover ul ul {
display:none;
} /* hides sub-sublists */
#nav li:hover ul {
display:block;
} /* shows sublist on hover */
#nav li:hover ul ul ul {
display:none;
} /* hides sub-sub-sublists */
#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:150px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}
#nav li li li:hover ul {
display:block; /* shows sub-sub-sublist on hover */
margin-left:150px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
width:200px;
}
.upcoming_events_list li { /* attributes for the upcoming_events list level */
/* CSS to alter the links in the include list when inside the div */
width: 380px;
text-align: left;
list-style-type:circle;
color:blue;
}
.upcoming_events_list li a:link { /* attributes for the upcoming_events unvisited */
font-family: "Times New Roman", Times, serif;
color: black;
font-size: 18px;
font-weight: 300;
list-style-type: circle;
}
.upcoming_events_list li a:visited { /* attributes for the upcoming_events visited */
font-family: "Times New Roman", Times, serif;
color: blue;
font-size: 18px;
font-weight: 100;
list-style-type: circle;
}
.upcoming_events_list li a:hover { /* attributes for the upcoming_events hover */
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: 500;
}
.upcoming_events_list li a:active { /* attributes for the upcoming_events selected */
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: 500;
text-decoration: underline;
}Voici un sous-ensemble de l'indice.shtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Page_Specific_Title" -->
<title>My Site Home Page SHTML</title>
<!-- InstanceEndEditable -->
<link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #EEE8AA;
}
-->
</style>
<!-- InstanceBeginEditable name="Page_Specific_Head" -->
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle', //choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, //speed at which the transition occurs (in miliseconds)
delay: 1000, //time spent on the first slide before starting the slideshow
continuous: 0, //true (1) to start next transition immediately after current one completes
timeout: 9000 //time spent on each slide
});
});
</script>
<style type="text/css">
<!--
p {margin:0; padding:0}
-->
</style>
<meta name="description" content="A warm welcome to all. We invite everyone to participate in all aspects of our
parish life."/>
<meta name="keywords" content="parish,church,welcome,all are welcome,spiritual,peace,justice"/>
<!-- InstanceEndEditable -->
</head>
<body>
<!-- InstanceBeginEditable name="Page_Specific_Body" -->
<br />
<div>
<?php include("menu_primary1.shtml");
?>
</div>
<div class="block_center_1000_text_left">
<!-- The title was created using the Pristina Regular 36 point font. The background color code is D3AC25-->
<p align="center">
<img src="images/front_page_title.jpg" alt="Parish Site"/>
</p>
</div>
<div class="outer_width_1000" >
</div>
</body>et voici un sous-ensemble du fichier inclus menu_primary1.shtml:
<ul id="nav">
<li><a href="#">Faith Formation</a>
<ul>
<li><a href="adult_faith_formation.shtml">Adult Faith Formation</a></li>
<li><a href="Attachments/RelEdGrades1to5Schedule.pdf" target="_blank">Youth Faith Formation Grades 1 to 5</a></li>
<li><a href="Attachments/RelEdGrades6to8Schedule.pdf" target="_blank">Youth Faith Formation Grades 6 to 8</a></li>
<li><a href="Attachments/ConfirmationPreparation.pdf" target="_blank">Confirmation Preparation</a></li>
</ul>
</li>
<li><a href="#">Parish Groups</a>
<ul>
<li><a href="Attachments/ChurchGroupsListing.pdf" target="_blank">Listing of Groups and Ministries</a></li>
<li><a href="good_art_series.shtml">Good Art Series</a></li>
<li><a href="contact_us.shtml#peace">Peace and Justice Outreach</a></li>
<li><a href="svdp.shtml">Saint Vincent de Paul</a></li>
</ul>
</li>
<li><a href="#">Upcoming Events</a>
<?php include("menu_upcoming_events1.shtml");
?>
</li>
... Three other top-level <li> menu items
</ul>Merci pour votre aide.
InformationsquelleAutor user3138025 | 2016-09-07
Vous devez vous connecter pour publier un commentaire.
si vous le centre de tout élément ou élément de menu, vous devez suivre 2 étapes:
setp1:
etape 2:
et fait. C'est maintenant l'essayer vous-même.
CSS:
HTML:
Je n'ai pas regardé le code, mais http://howtocenterincss.com peut faire de votre vie un peu plus heureux 🙂
display: flex. Vous pouvez étudier. css-tricks.com/snippets/css/a-guide-to-flexboxComme une alternative de ce qui peut être fait avec flexbox. Assurez-vous d'utiliser votre fournisseur de préfixes comme requis (non inclus dans le présent exemple). Je préfère cette méthode car un wrapper n'est pas nécessaire.
CSS:
HTML: