1
ich versuche horizontal zentriert mein nav-Menü auf meiner Seite, und ich habe Text versucht: ausrichten und margin: 0 und display: inline, aber nichts funktioniert. Ich denke, ich weiß, was das Problem ist. Ich versuche nicht, den Text in den Blöcken zu zentrieren. Das habe ich schon gemacht. Ich versuche, die Blöcke auf der Seite so zu zentrieren, dass sie eine gerade Linie sind, die perfekt zentriert ist. Wie Sie sehen können, ist mein Nav-Menü keine Zeile, sondern eine Reihe von Blöcken, die alle in demselben "ul" -Element eingeschlossen sind. Meine Frage ist also, wie bekomme ich die Blöcke in einer geraden Linie perfekt horizontal auf der Seite zentriert? Ich habe von der Html auf das CSS-Dokument um den Ordnerpfad Doppel asterix setzen, also, wenn Sie es starten Sie das ändern können, wo es auf Ihrem Computer gespeichert wird.Wie zentriere ich horizontal mein Nav-Menü in CSS?
Meine CSS:
body {
width: 75%;
min-width: 720px;
margin: 0 auto;
/*vertical center*/
font-size: 1em;
font-weight: bold;
font-family: "Century Gothic", Palatino, Georgia, Serif;
color: #02849D;
/*dark navy blue*/
text-align: left;
/*Personal Addition*/
background-image: url('../Images/Black_Rainbow.jpg');
background-size: 175% 100%;
/*mess with*/
background-repeat: no-repeat;
/*boxing, borders, and padding*/
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: double;
border-color: #006E5F;
border-width: 4px;
border-width: 4px;
}
h1 {
font-family: Rockwell, Baskerville, Warnock, Serif;
font-size: 2.2em;
font-weight: bold;
color: #02849D;
text-align: center;
padding: 0.75em;
border-style: solid;
border-color: #006E5F;
border-width: 4px;
}
h2, h3 {
font-family: Rockwell, Baskerville, Warnock, Serif;
font-size: 1.5em;
margin-left: 10%;
margin-right: 10%;
padding: 0.5em;
border-style: solid;
border-color: #006E5F;
border-width: 3px;
margin: 1em;
}
.box {
/*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #006E5F;
border-width: 3px;
margin: 1em;
background-color: #111111;
}
p {
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #00594D;
border-width: 5px;
margin: 1em;
}
ul {
margin-left: 10%;
margin-right: 10%;
padding: 0.35em;
border-style: solid;
border-color: #00594D;
border-width: 5px;
margin: 0.35em;
}
table {
border: 0.2em solid black;
background-color: white;
}
th {
border: 0.15em solid black;
padding: 0.35em;
text-align: center;
font-weight: bolder;
}
td {
border: 1px solid black;
padding: 0.35em;
color: black;
font-weight: normal;
}
a:link {
color: #31AEC5;
/*dark blue*/
}
a:visited {
color: #015261;
/*darker blue*/
}
a:hover,
a:focus {
color: #505050;
/*grey*/
}
nav {
clear: left;
font-size: 1.2em;
}
.gamebutton {
background-color: #707070;
/*grey*/
border: none;
color: #02849D;
/*bright blue*/
width: 450px;
height: 75px;
text-align: center;
line-height: 75px;
/*centers the text vertically*/
text-decoration: none;
display: inline-block;
font-size: 1.1em;
font-family: Century Gothic;
font-weight: bold;
}
.info {
width: 40%;
font-size: 1.25em;
float: left;
}
.temp {
font-style: italic;
}
#main {
color: #008B8B;
clear: left;
}
#overview {
color: #7FFFD4;
}
#overview:first-letter {
font-size: 1.3em;
font-family: "Times New Roman", sans-serif;
}
#DigDug {
float: right;
position: absolute;
right: 0;
border-width: 0;
}
#DigCaption {
position: absolute;
left: 833.5px;
bottom: 10px;
font-size: 13px;
}
#BlockGame {
float: right;
position: absolute;
right: 550px;
border-width: 0;
}
#skipnav {
position: relative;
right: 12.5%;
width: 10.5em;
}
/* navigation menu styles */
nav ul {
list-style-type: none;
border: 0;
padding-bottom: 1em;
}
nav ul li {
float: left;
margin-right: 1em;
}
nav ul li a {
padding: 0.125em 0.5985243em;
text-decoration: none;
/* no underline */
background-color: #55FA99;
/* dark green */
border: 2px solid black;
border-top-left-radius: 1em 1em;
/* rounded corner! */
border-top-right-radius: 1em 1em;
/* another rounded corner! */
}
nav ul li a:hover,
nav ul li a:focus {
color: #014C65;
background-color: #006E5F;
/*medium green*/
font-weight: bold;
}
.nav_menu {
border: 0;
}
Mein HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="Style.css" media="screen">
<link rel="icon" href="Images/favicon-16x16.png" type="image/png">
<title>Web Portfolio: Patrick White's Index Page</title>
</head>
<body>
<div class="box" id="skipnav">
<a href="#main">Skip to main content</a>
</div>
<h1>Patrick White Web Portfolio</h1>
<div class="info">
<ul>
<li>Patrick White</li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>843-653-3474</li>
<li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>
<li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>
</ul>
</div>
<div class="info">
<ul>
<li>I.T. 9 (1-2)</li>
<li>Mr. Gabriel Jones</li>
<li>Web Design</li>
<li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>
</ul>
</div>
<div class="nav_menu">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Accesibility.html">Accessibility</a></li>
<li><a href="Usability.html">Usability</a></li>
<li><a href="Graphics.html">Graphics</a></li>
<li><a href="JavaScript.html">JavaScript</a></li>
<li><a href="Tools.html">Tools</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="Games.html">Games</a></li>
</ul>
</nav>
</div>
<div>
<main id="main">
<p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>
<h2>Unit 2</h2>
<p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.
In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which
I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>
<h2>Unit 3</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 4</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 5</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 6</h2>
<p class="temp">This section will be completed soon</p>
<h2>Unit 7</h2>
<p class="temp">This section will be completed soon</p>
</main>
</div>
<a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a>
<!--Game Button-->
</body>
</html>
Haben Sie versucht, eine 'Marge geben: 0 auto;' für ''