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

menüe von Vertikal nach Horizontal

Z

zneiva

Neues Mitglied
habe ein code von einem menüe möchte dises aber nicht Vertikal sondern Horizontal haben kann mir da jemand helfen
HTML: 
<style type="text/css">
body {
 background: #222;
 font: 10px Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
}
a:focus {
 outline: none;
}
ul.sidenav {
 font-size: 1.2em;
 float: left;
 width: 200px;
 margin: 20px 0 0 50px;
 padding: 0;
 list-style: none;
 background: #005094;
 border-bottom: 1px solid #3373a9;
 border-top: 1px solid #003867;
}
ul.sidenav li a{
 display: block;
 color: #fff;
 text-decoration: none;
 width: 155px;
 padding: 10px 10px 10px 35px;
 background: url(sidenav_a.gif) no-repeat 5px 7px;
 border-top: 1px solid #3373a9;
 border-bottom: 1px solid #003867;
}
ul.sidenav li a:hover {
 background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
 border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span {
 display: block;
 font-size: 0.8em;
 padding: 10px 0;
}
</style>
</head>
<body>
<ul class="sidenav">
 <li>
  <a href="#">Home
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Blog
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Tutorials
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Forum
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Services
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Portfolio
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Contact
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
</ul>
 
Im Grunde musst du dem li nur ein float:left; geben.
DU hast allerdings 2 Moeglichkeiten:

Fuege folgendes irgendwo in deine CSS Angaben ein:

Code: 
ul.sidenav li{
float:left;
}
Oder aber du fuegst das float:left; einfach hier ein:

Code: 
ul.sidenav li a{
 display: block;
 color: #fff;
 text-decoration: none;
 width: 155px;
 padding: 10px 10px 10px 35px;
 background: url(sidenav_a.gif) no-repeat 5px 7px;
 border-top: 1px solid #3373a9;
 border-bottom: 1px solid #003867;
[COLOR=Red][B] float:left;[/B][/COLOR]
}
Du hast uebrigens Glueck, dass ich hier in den USA bin :-P
Deutschland schlaeft wohl gerade schon ^^

gruesse
 
habe es doch geschaft mein code siht jetzt so aus

HTML: 
<!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=iso-8859-1" />
<title>Untitled Documvvv</title>

<style type="text/css">
 

body {
 background: #222;
 font: 10px Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
}
 
ul.sidenav li {
 font-size: 1.2em;
 
 width: 150px;
 margin: 20px 0 0 20px;
 padding: 0;
 list-style: none;
 background: #005094;
 border-bottom: 1px solid #3373a9;
 border-top: 1px solid #003867;
}
 

ul.sidenav li a{
 display: block;
 color: #fff;
 text-decoration: none;
 width: 105px;
 padding: 10px 10px 10px 35px;
 background: url(sidenav_a.gif) no-repeat 5px 7px;
 border-top: 1px solid #3373a9;
 border-bottom: 1px solid #003867;
}
ul.sidenav li a:hover {
 background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
 border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span {
 display: block;
 font-size: 0.8em;
 padding: 10px 0;
}
ul.sidenav li{
float:left;
}
</style>
 
</head>
<body>
<ul class="sidenav">
 <li>
  <a href="#">Home
  <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
  </a>
 </li>
 <li>
  <a href="#">Blog
  
  </a>
 </li>
 <li>
  <a href="#">Tutorials
  
  </a>
 </li>
 <li>
  <a href="#">Forum
  
  </a>
 </li>
 <li>
  <a href="#">Services
  
  </a>
 </li>
 </ul>
 
farbe änder

noch mal ne andere frage möchte die farbe des hintergrundes ändern aber nur für einen link ist das möglich habe mal ein bild dazugetan damit man weis was ich meine
beispiel..jpg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben