Hallo ich bin recht neu in der Programmierung mit HTML und CSS und habe nun gleich mal eine Frage:
in meinem html steht:
<html lang="de">
<head>
<title>XYZ</title>
<link href="XYZ.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<a href="XYZ.html" title="Hauptmenü">
<img src="XYZ.png" alt="Grafik: Hauptmenü" width="100%" />
</a>
</header>
<nav id="steuerungoben">
<ul>
<li><a href="XYZ.html">Hauptmenü</a></li>
<li><a href="kontakt_1.html">Kontakt</a></li>
<li><a href="hilfe_1.html">Hilfe</a></li>
</ul>
</nav>
<nav id="steuerunglinks">
<ul>
<li><p>Datenbanken</p>
<ul>
<li><a href="/dokdat_1.html">Dokumente</a></li>
<li><a href="/wetterdat_1.html">Wetter</a></li>
</ul>
</li>
...... USW ....
</ul>
</nav>
<aside>
<p>
<b>weiterführende Infos</b>
news1 <br />
news2 <br />
news3 <br />
news4 <br />
</p>
</aside>
<section>
.... Arbeitsbereich ...
</section>
<footer>
<br />
<p id="txtleft";>Copyright XYZ</p>
<p id="txtright";>Version: 1.0.2018 (08.02.2018)</p>
<br />
</footer>
</div>
</body>
</html>
Alles anzeigen
und in meinem CSS steht:
* {
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
}
body {
}
header, nav, footer, aside, section {
display: block;
}
#wrapper {
background-color: #f3f3f4;
width: 1050px;
margin: 0 auto;
text-align: left;
}
header {
background-color: #f3f3f4;
width: 100%;
margin: 0 auto;
}
#steuerungoben {
background-color: #f3f3f4;
}
#steuerungoben ul {
list-style-type: none;
margin-left: 190px;
}
#steuerungoben li {
display: inline-block;
}
#steuerungoben a {
display: inline-block;
width: 230px;
background-color: #f3f3f4;
float: left;
text-align: center;
line-height: 24px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 14px;
text-decoration: none;
color: #003399;
}
#steuerungoben a:hover {
background-color: #e5ecf4;
font-weight: bold;
text-decoration: underline;
}
#steuerunglinks {
background-color: #f3f3f4;
width: 190px;
float: left;
}
#steuerunglinks ul {
list-style-type: none;
background-colcor: #e5ecf4;
padding-top: 0px;
padding-bottom: 50px;
}
#steuerunglinks li {
padding-top: 0px;
padding-bottom: 5px;
background-colcor: #e5ecf4;
}
#steuerunglinks li p {
background-color: #e7e7e7;
padding-top: 5px;
padding-bottom: 5px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
text-decoration: none;
color: black;
padding-left: 1em;
}
#steuerunglinks a {
background-color: #e7e7e7;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
text-decoration: none;
color: #003399;
padding-left: 1em;
}
#steuerunglinks li a:hover {
background-color: #e5ecf4;
font-weight: bold;
text-decoration: underline;
}
aside {
background-color: #f3f3f4;
width: 190px;
float: right;
padding-left: 1em;
}
section {
background-color: #ffffff;
margin-left: 190px;
margin-right: 190px;
width: 652px;
color: #003399;
border: 1px solid #e7e7e7;
}
section h1 {font-style: normal; font-variant: normal; font-weight: bold; font-size: 150%;}
footer {
background-color: #f3f3f4;
clear: both;
}
footer p {
font-size: 10px;
font-weight: bold;
}
Alles anzeigen
Jetzt zu meinem Problem. Ich habe auf der linken Seite eine Steuerungsspalte (#steuerunglinks li) Darin ist einerseits einerseits "normaler" Text drin und zusätzlich auch Links um auf die weiteren Seiten zu verzweigen. Der Text kann über die komplette Breite der Steuerungsspalte (190px) mit einem Hintergrund (ich nenne es mal Balken) hinterlegt werden. Bei den Links funktioniert dies nicht. Da soll der Hintergund sich ändern, wenn ich mit der Maus über den Link fahre. Zwar beginnt der gänderte Hintergrund links am Rand von der Steuerungsspalte, endet aber direkt nach dem Text und setzt den Hintergrund nicht bis zum Ende der Steuerungsspalte fort.
Wie gesagt, ich bin neu in dem Bereich unterwegs und hoffe auf Eure Hilfe. Dafür schon mal Danke!