• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Nicht korrekte Button-Breite mit display:block; + width:auto;

P

pixeldude

Neues Mitglied
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>
 
Werbung:
Nein, "display: inline;" erfüllt deinen Wunsch. Aber Links (<a>) sind bereits Inline-Elemente, weshalb Du das nicht angeben musst.

Und Menüs werden mit <ul> ausgezeichnet, nicht so wie Du es gerade machst.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben