nicht angemeldet
kann Breite der Buttons nicht ändern CSS
0 0 
Gunnar Bittersmann
0
kann Breite der Buttons nicht ändern CSS
Hallo,ich bin absoluter CSS Neuling und habe folgendes Problem.Ich möchte eine Homepage mit einem vertikalen Aufklappmenü erstellen.Das Menü steht,aber der Text von einigen Buttons ist zu groß und ich kann die Größe der Buttons nicht anpassen.Hat irgendjemand eine Idee und eine genaue Beschreibung wie ich es anstelle,das zum Beispiel der Button "Hundeführerschein" und "Kräuter von A-Z" sich an die Textgröße anpassen?
Danke im voraus für eure Hilfe
``
Mein CSS Code sieht folgendermaßen aus:
body {
font-family: arial, helvetica, serif;
background: url(BILDER/hintergrund1.jpg);
}
#header
{
background-color:#FFCC00;
border-top: 5px solid #990000;
border-right: 5px solid #990000;
border-bottom: 5px solid #990000;
border-left: 5px solid #990000;
margin-bottom: 30px;
}
``
Mein HTML Code :
<!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">
<head>
<title>überschrift</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="header">
<h1><p align="center">überschrift</p></h1>
</div><!--Ende header-->
<ul id="nav">
<li><a href="index.html">HOME</a>
<li><a href="startseite.html">STARTSEITE</a>
<ul>
<li><a href="wissenswertes.html">WISSENSWERTES</a>
<ul>
<li><a href="beschreibung.html">KRÄUTER VON A - Z</a></li>
<li><a href="vermehrung.html">VERMEHRUNG</a></li>
<li><a href="mischkultur.html">MISCHKULTUR</a></li>
<li><a href="garten.html">THEMENGARTEN</a></li>
<li><a href="tabelle.html">KRÄUTERTABELLE</a></li>
</ul>
</li>
<li><a href="tips.html">TIPS</a>
<ul>
<li><a href="krankheiten.html">KRANKHEITEN VON A- Z</a></li>
<li><a href="buch.html">BÜCHER</a></li>
<li><a href="bitter.html">SCHWEDENBITTER</a></li>
</ul>
</li>
<li><a href="hausmittel.html">HAUSMITTEL</a></li>
<li><a href="hunde1.html">KRÄUTER FÜR HUNDE</a></li>
<li><a href="hunde2.html">HUNDEFÜHRERSCHEIN</a></li>
</ul>
</li>
<li><a href="rezepte.html">REZEPTE</a>
<ul>
<li><a href="balsam.html">Balsam</a></li>
<li><a href="bonbons.html">Bonbons </a></li>
<li><a href="creme.html">Creme </a></li>
<li><a href="oel.html">Essig und Öl </a></li>
<li><a href="getraenke.html">Getränke </a></li>
<li><a href="gebaeck.html">Gebäck </a></li>
<li><a href="hauptgerichte.html">Hauptgerichte </a></li>
<li><a href="heiloel.htm">Heilöl</a></li>
<li><a href="tee.html">Kräutertee</a></li>
<li><a href="dips.html">Saucen und Dips </a></li>
<li><a href="salat.html">Salat</a></li>
<li><a href="salben.html">Salben</a></li>
<li><a href="suppen.html">Suppen </a></li>
<li><a href="sonstiges.html">Sonstiges </a></li>
<li><a href="saefte.html">Säfte </a></li>
<li><a href="suesses.html">Süßes </a></li>
<li><a href="tinkturen.html">Tinkturen </a></li>
</ul>
</li>
</ul>
<div id="content">
</div>
</body>
</html>
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 15em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 9.5em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color :#FFCC00 ;
border : 4px solid #990000;
padding : 0 0.5em;
}
#nav li a:hover {
color : red;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
-
Ich nochmal,leider ist der CSS Code nicht vollständig gewesen ,darum jetzt noch einmal:
``
body {
font-family: arial, helvetica, serif;
background: url(BILDER/hintergrund1.jpg);
}#header
{
background-color:#FFCC00;
border-top: 5px solid #990000;
border-right: 5px solid #990000;
border-bottom: 5px solid #990000;
border-left: 5px solid #990000;
margin-bottom: 30px;}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 15em;
}#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}#nav li a {
width: 11em;
w\idth : 9.5em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color :#FFCC00 ;
border : 4px solid #990000;
padding : 0 0.5em;
}#nav li a:hover {
color : red;
background-color : black;
}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}#content {
margin-left : 12em;
} -
@@hexilein:
nuqneH
Würdest du dir bitte wenigstens die Mühe machen, nur den relevanten Quelltext zu posten oder deine Testseite zu verlinken?
http://community.de.selfhtml.org/zitatesammlung/zitat1632
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch) -
Hallo nochmals und sorry für mein Unwissen.Sagte ja das ich Anfänger bin.
Die Seite kann man sich unter folgenedem Link ansehen:
http://www.ewetel.net/~ralf.alers/index.html
Mir geht es darum,das die geixten Felder sich an die Länge des Textes anpassen lassen.Über width habe ich das nicht hinbekommen.
Hoffe ,ich hab es diesmal richtig gemacht.
Denke der Fehler liegt im Nav Bereich#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 15em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 9.5em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color :#FFCC00 ;
border : 4px solid #990000;
padding : 0 0.5em;
}