0
Es ist schon einige Zeit her, seit ich meine letzte Webseite gemacht habe und es scheint, dass ich viel vergessen habe. Ich kann nicht lösen, warum das letzte Element aus dem #menu ul in die nächste Zeile geht, während das #menu-div ist breit genug, um alle Listenelemente plus das Logo div zu enthalten, hat Rand und Padding auf 0 gesetzt. Ich habe zu tun Menüs so vor haben aber wohl etwas vergessen. Ich suchte nach der Lösung, aber ich kann die Dinge nicht richtig machen.CSS - ul Artikel nicht in einer Zeile
Die Frage ist ... warum sind die li Elemente in einer Zeile? Was überlappen die 850 px, wenn sie alle zusammen 802px breit sind?
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
\t display: block;
\t width: 150px;
\t height: 150px;
\t overflow: hidden;
\t color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
\t background: url("./gfx/logo-small.png");
\t z-index: 5;
\t display: block;
\t width: 150px;
\t height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
\t z-index: 5;
\t position: relative;
float:left;
\t display: inline;
\t height: 31px;
\t overflow: hidden;
\t text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
\t
height: 31px;
\t margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
\t top: 0;
\t left: 0;
\t display: block;
z-index: -1;
\t height: 31px;
\t cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
\t background: url("./gfx/menu-a.png");
\t background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
\t background-position: 0 0;
\t width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
\t background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
\t width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
\t background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
\t width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
\t background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
\t width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
\t background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
\t width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
\t background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
\t width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
\t background-position: -692px 0px;
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
<a href= "">Contact Us</a><br />
<a href= "">FAQ</a> <br />
</p>
</div>
<div id = "footer-links-2">
<p>
<a href= "">Terms of use</a><br />
<a href= "">Insurance</a><br />
<a href= "">Our Team</a><br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>Vielen Dank für Ihre Ratschläge.