Mein erster Beitrag:
----------------------
Hallo zusammen,
nach einiger Zeit möchte ich mich mal wieder mit html/css beschäftigen und schon die erste offene Frage. Und ich hoffe ihr könnt mir weiterhelfen.
Die Buttons sollen immer die Breite der Textlänge annehmen, aber alle Buttons haben immer die gleiche Breite wie die des längsten textes.
Ich dachte display:block; + width:auto; sollten den gewüschten Effekt erfüllen.
Hier mein Code:
------------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style>
#menuCon {
background-color: #9F0;
float:left;
width:auto;
}
/* menu1 */
a.menu { display:block;
margin-top:6px;
padding: 4px;
font-family: "Courier New", Courier, monospace;
font-size: 19px;
text-align:left;
color:#FFF;
text-align: right;
width:auto;
}
a.sub { display:block;
overflow:visible;
margin-top:2px;
padding-left:3px;
font-family: "Courier New", Courier, monospace;
font-size: 19px;
text-align:left;
color:#FFF;
}
.sitebtn
{ display:block;
margin-top:4px;
padding-left:3px;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
font-weight:bold;
text-align:left;
color:#FFF;
background-color:#000;
}
a.menu:link { background-color:#333; text-decoration:none; }
a.menu:visited { background-color:#333; text-decoration:none; }
a.menu:hover { background-color:#000; text-decoration:none; }
a.menu:active { background-color:#000; font-weight:none;}
a.sub:link { background-color:#333; text-decoration:none; }
a.sub:visited { background-color:#333; text-decoration:none; }
a.sub:hover { background-color:#000; text-decoration:none; }
a.sub:active { background-color:#000; font-weight:none;}
</style>
</head>
<body><div id="menuCon">
<div class="menu">
<a class="menu" href=" ">Home</a>
<a class="menu" href=" ">Design</a>
<a class="menu" href=" ">Galerie</a>
<a class="menu" href=" ">Network</a>
</div></div>
</body>
</html>
----------------------
Hallo zusammen,
nach einiger Zeit möchte ich mich mal wieder mit html/css beschäftigen und schon die erste offene Frage. Und ich hoffe ihr könnt mir weiterhelfen.
Die Buttons sollen immer die Breite der Textlänge annehmen, aber alle Buttons haben immer die gleiche Breite wie die des längsten textes.
Ich dachte display:block; + width:auto; sollten den gewüschten Effekt erfüllen.
Hier mein Code:
------------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style>
#menuCon {
background-color: #9F0;
float:left;
width:auto;
}
/* menu1 */
a.menu { display:block;
margin-top:6px;
padding: 4px;
font-family: "Courier New", Courier, monospace;
font-size: 19px;
text-align:left;
color:#FFF;
text-align: right;
width:auto;
}
a.sub { display:block;
overflow:visible;
margin-top:2px;
padding-left:3px;
font-family: "Courier New", Courier, monospace;
font-size: 19px;
text-align:left;
color:#FFF;
}
.sitebtn
{ display:block;
margin-top:4px;
padding-left:3px;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
font-weight:bold;
text-align:left;
color:#FFF;
background-color:#000;
}
a.menu:link { background-color:#333; text-decoration:none; }
a.menu:visited { background-color:#333; text-decoration:none; }
a.menu:hover { background-color:#000; text-decoration:none; }
a.menu:active { background-color:#000; font-weight:none;}
a.sub:link { background-color:#333; text-decoration:none; }
a.sub:visited { background-color:#333; text-decoration:none; }
a.sub:hover { background-color:#000; text-decoration:none; }
a.sub:active { background-color:#000; font-weight:none;}
</style>
</head>
<body><div id="menuCon">
<div class="menu">
<a class="menu" href=" ">Home</a>
<a class="menu" href=" ">Design</a>
<a class="menu" href=" ">Galerie</a>
<a class="menu" href=" ">Network</a>
</div></div>
</body>
</html>