✔ Menuleiste durch Div

Status
Nicht offen für weitere Antworten.
MsvP@habdichliebhasi

MsvP@habdichliebhasi

Erfahrenes Mitglied
Hi zusammen,

ich arbeite mich gerade etwas intensiver in das Thema CSS-Gestaltung ein, um endlich von den Tabellen Abstand zu nehmen.

Allerdings stehe ich gerade vor einem kleinen Problem:

Ich möchte folgende Grafik (Menü) gerne mit Divs realisieren. Habt ihr vielleicht einen kleinen Tipp, wie ich das am Besten umsetze? Ich habe bisher noch keine Meinung dazu, wie es am einfachsten und am Übersichtlichsten zu erstellen ist.

-> http://www.simadesign.de/privat/submenu_kasten.jpg

Vielen Dank für eure Hilfe.

Liebe Grüße
Micha
 
Hi,

Divs verschachteln:

HTML: 
<div id="menu">
    <div>
         <img src="...." alt="" />
         <div>
             <h3>Projektierung</h3>
             <ul>
                 <li><a href="....">Anlagenplanung</a></li>
                 <li><a href="....">Handelsvertretung</a></li>
                 </ul>
             </div>
         </div>
    <div>
         <img src="...." alt="" />
         <div>
             <h3>Sicherheit</h3>
             <ul>
                 <li><a href="....">Universal</a></li>
                 <li><a href="....">Rührwellenschutz</a></li>
                 </ul>
             </div>
         </div>
    <div>
         <img src="...." alt="" />
         <div>
             <h3>Maschienen</h3>
             <ul>
                 <li><a href="....">Gebrauchthandel</a></li>
                 <li><a href="....">Wartung</a></li>
                 <li><a href="....">Modifizierung</a></li>
                 </ul>
             </div>
         </div>
    </div>

CSS:
HTML: 
#menu { ... definition der hauptbox (rahmen, abstand, etc) ...}
#menu div { ... definition der 3 div layer mit den bildern, überschriften, listen ...}
#menu div img { ... definition der bilder (float:left; damit div-box rechts davon ist ) ...}
#menu div h3 { ... definition der überschriften (für blauen pfeil background:url('...prfeil.gif') left no-repeat; padding:0 0 0 20px; ) ...}
#menu div ul li a { ... definition der Links ...}

Hoffe konnte helfen :)

Gruß tyg3r

/edit: musste noch etwas ändern!
 
Zuletzt bearbeitet:
Hi,

es führen bekanntlich viele Wege nach Rom - das hier wäre mein Routenplaner ;-)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_MsvP@habdichliebhasi</title>

<style type="text/css">
<!--
.outerwrap {
padding:15px 15px 0 15px;
width:250px;
border:1px solid silver;
}

img {
float:left;
}

ul {
margin:0;
padding:0;
list-style:none;
}

ul.listmenu {
margin-left:95px;
}

.innerwrap {
margin-bottom:15px;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div class="outerwrap">
     <div class="innerwrap clearfix">
          <img src="..." alt="...">
          <ul class="listmenu">
              <li><a href="#">toplink 1</a>
                     <ul>
                         <li><a href="#">sublink 1.1</a></li>
                         <li><a href="#">sublink 1.2</a></li>
                     </ul>
              </li>
          </ul>
     </div>
     <div class="innerwrap clearfix">
          <img src="..." alt="...">
          <ul class="listmenu">
              <li><a href="#">toplink 2</a>
                     <ul>
                         <li><a href="#">sublink 2.1</a></li>
                         <li><a href="#">sublink 2.2</a></li>
                     </ul>
              </li>
          </ul>
     </div>
     <div class="innerwrap clearfix">
          <img src="..." alt="...">
          <ul class="listmenu">
              <li><a href="#">toplink 3</a>
                     <ul>
                         <li><a href="#">sublink 3.1</a></li>
                         <li><a href="#">sublink 3.2</a></li>
                     </ul>
              </li>
          </ul>
     </div>
</div>

</body>
</html>
 
Vielen Dank für die schnelle Hilfe.

Dann werde ich mich mal daran setzen und die beiden Varianten testen. Letztendlich sind sie ja von der Grundstrukturierung relativ ähnlich.

Liebe Grüße
Micha
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück