Hilfe beim Planen einer Navigation mit CSS + HTML!

Xandy Lee

Hallo ihr da draußen
Könnte bitte hilfe brauchen bei einer Navigation.
Es sollte so aussehen:

Und sieht noch zurzeit so aus:

Hier ist der HTML-Code:

HTML

<html>
<head>
    <title>Navigation</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
    <div id="all">
        <div id="halter">
            <div id="vfx">
                <ul class="using">
                    <li class="pad">
                    <li class="pad">
                        <div class="img"><img src="dcd70b33f9178a37d297714e2c5ae81f.jpg" height="150" width="200"
                                              alt="Image Freizeit und Aktivität"></div>
                        <a
                                href="#"><span>Freizeit u. Aktivit&auml;t ▾</span></a>
                        <ul class="unterpunkte">
                            <div class="sub-wrapper-all">
                                <div class="sub-con">
                                    <div class="sub-hol">
                                        <div class="sub-l">
                                            <h3>Freizeit u. Aktivit&auml;t</h3>
                                            <ul>
                                                <li><a href="#">Men&uuml;punkt 1</a></li>
                                                <li><a href="#">Men&uuml;punkt 2</a></li>
                                                <li><a href="#">Men&uuml;punkt 3</a></li>
                                                <li><a href="#">Men&uuml;punkt 4</a></li>
                                                <li><a href="#">Men&uuml;punkt 5</a></li>
                                                <li><a href="#">Men&uuml;punkt 6</a></li>
                                            </ul>
                                        </div>


                                        <div class="sub-m">
                                            <h3>vfx sofware</h3>
                                            <div class="sub-in-l">
                                                <ul>
                                                    <li><a href="#">3DEqualizer</a></li>
                                                    <li><a href="#">After Effects</a></li>
                                                    <li><a href="#">boujou</a></li>
                                                    <li><a href="#">Composite</a></li>
                                                    <li><a href="#">Final Cut Pro</a></li>
                                                    <li><a href="#">Ftarck</a></li>
                                                    <li><a href="#">Fusion</a></li>
                                                    <li><a href="#">MatchMover</a></li>
                                                </ul>
                                            </div>
                                            <div class="sub-in-r">
                                                <ul>
                                                    <li><a href="#">mocha</a></li>
                                                    <li><a href="#">SNuke</a></li>
                                                    <li><a href="#">PFClean</a></li>
                                                    <li><a href="#">PFTrack</a></li>
                                                    <li><a href="#">Photoshop</a></li>
                                                    <li><a href="#">Premiere Pro</a></li>
                                                    <li><a href="#">Red Giant Suites</a></li>
                                                    <li><a href="#">Smoke</a></li>
                                                </ul>
                                            </div>
                                        </div>


                                        <div class="sub-r">
                                            <h3>More</h3>
                                            <ul>
                                                <li><a href="#">New Training</a></li>
                                                <li><a href="#">Learning Paths</a></li>
                                                <li><a href="#">CG101</a></li>
                                                <li><a href="#">VFX News</a></li>
                                                <li><a href="#">Forums</a></li>
                                                <li><a href="#">All in VFX</a></li>
                                            </ul>
                                        </div>


                                    </div>
                                </div>
                         </ul>
            </div>




            <div id="all">
                <ul class="using">
                    <li class="pad">
                        <div class="img"><img src="index01a.jpg" height="150" width="200" alt="Image Mode und Wohnen">
                        </div>
                        <a href="#"><span>Mode und Wohnen ▾</span></a>
                        <ul class="using">
                            <div class="sub-wrapper-all">
                                <div class="sub-con">
                                    <div class="sub-hol">


                                        <div class="sub-l">
                                            <h3>VFX subjects</h3>
                                            <ul>
                                                <li><a href="#">Compositing</a></li>
                                                <li><a href="#">GettingStarted</a></li>
                                                <li><a href="#">Matchmoving</a></li>
                                                <li><a href="#">Motion Graphics</a></li>
                                                <li><a href="#">Scripting</a></li>
                                                <li><a href="#">Video editing</a></li>
                                            </ul>
                                        </div>


                                        <div class="sub-m">
                                            <h3>vfx sofware</h3>
                                            <div class="sub-in-l">
                                                <ul>
                                                    <li><a href="#">3DEqualizer</a></li>
                                                    <li><a href="#">After Effects</a></li>
                                                    <li><a href="#">boujou</a></li>
                                                    <li><a href="#">Composite</a></li>
                                                    <li><a href="#">Final Cut Pro</a></li>
                                                    <li><a href="#">Ftarck</a></li>
                                                    <li><a href="#">Fusion</a></li>
                                                    <li><a href="#">MatchMover</a></li>
                                                </ul>
                                            </div>
                                            <div class="sub-in-r">
                                                <ul>
                                                    <li><a href="#">mocha</a></li>
                                                    <li><a href="#">SNuke</a></li>
                                                    <li><a href="#">PFClean</a></li>
                                                    <li><a href="#">PFTrack</a></li>
                                                    <li><a href="#">Photoshop</a></li>
                                                    <li><a href="#">Premiere Pro</a></li>
                                                    <li><a href="#">Red Giant Suites</a></li>
                                                    <li><a href="#">Smoke</a></li>
                                                </ul>
                                            </div>
                                        </div>


                                        <div class="sub-r">
                                            <h3>More</h3>
                                            <ul>
                                                <li><a href="#">New Training</a></li>
                                                <li><a href="#">Learning Paths</a></li>
                                                <li><a href="#">CG101</a></li>
                                                <li><a href="#">VFX News</a></li>
                                                <li><a href="#">Forums</a></li>
                                                <li><a href="#">All in VFX</a></li>
                                            </ul>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </ul>
                </ul>
            </div>


            <div id="all">
                <ul class="using">
                    <li class="pad">
                        <div class="img"><img src="spielen-macht-schlau-kinder-lernen-mit-allen-sinnen.jpg" height="150"
                                              width="200" alt="Image Image Spielen und Lernen"></div>
                        <a href="#"><span>Spielen und Lernen ▾</span></a>
                        <ul>
                            <div class="sub-wrapper-all">
                                <div class="sub-con">
                                    <div class="sub-hol">
                                        <div class="sub-l">
                                            <h3>design Subjects</h3>
                                            <ul>
                                                <li><a href="#">2D Animation</a></li>
                                                <li><a href="#">digital Painting</a></li>
                                                <li><a href="#">GettingStarted</a></li>
                                                <li><a href="#">Graphic Design</a></li>
                                                <li><a href="#">IIlustration</a></li>
                                                <li><a href="#">Image Editing</a></li>
                                            </ul>
                                        </div>
                                        <div class="sub-m">
                                            <h3>Design Software</h3>
                                            <div class="sub-in-l">
                                                <ul>
                                                    <li><a href="#">Artrage</a></li>
                                                    <li><a href="#">Corel Painter</a></li>
                                                    <li><a href="#">IIlustration</a></li>
                                                    <li><a href="#">InDesign</a></li>
                                                    <li><a href="#">Photoshop</a></li>
                                                    <li><a href="#">SketchBook</a></li>
                                                </ul>
                                            </div>
                                            <div class="sub-in-r">
                                                <ul>
                                                    <li><a href="#">Toon Boom Animate Pro</a></li>
                                                    <li><a href="#">Toon Boom Harmony</a></li>
                                                    <li><a href="#">Toon Boom Storyboard Pro</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="sub-r">
                                            <h3>More</h3>
                                            <ul>
                                                <li><a href="#">New Training</a></li>
                                                <li><a href="#">Learning Paths</a></li>
                                                <li><a href="#">CG101</a></li>
                                                <li><a href="#">Design News</a></li>
                                                <li><a href="#">Forums</a></li>
                                                <li><a href="#">All in Design</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                </ul>
            </div>


            <div id="all">
                <ul class="using">
                    <li class="pad">
                        <div class="img">
                            <img src="iStock_000013112749Large_Mädchen_Blumenwiese-620x310.jpg" height="150" width="200"
                                 alt="Image Beauty und Gesundheit">
                        </div>
                        <a href="#"><span>Beauty und Gesundheit ▾</span></a>
                        <ul>
                            <div class="sub-wrapper-all">
                                <div class="sub-con">
                                    <div class="sub-hol">


                                        <div class="sub-l">
                                            <h3>Game Dev Subjects</h3>
                                            <ul>
                                                <li><a href="#">Game Art</a></li>
                                                <li><a href="#">Game Design</a></li>
                                                <li><a href="#">Game Programming</a></li>
                                                <li><a href="#">GettingStarted</a></li>
                                            </ul>
                                        </div>


                                        <div class="sub-m">
                                            <h3>Game Dev Software</h3>
                                            <div class="sub-in-l">
                                                <ul>
                                                    <li><a href="#">3ds Max</a></li>
                                                    <li><a href="#">Blender</a></li>
                                                    <li><a href="#">CryENGINE</a></li>
                                                    <li><a href="#">marmoset Toolbag</a></li>
                                                    <li><a href="#">Massive</a></li>
                                                    <li><a href="#">Maya</a></li>
                                                    <li><a href="#">Modo</a></li>
                                                    <li><a href="#">Mudbox</a></li>
                                                    <li><a href="#">Photoshop</a></li>
                                                </ul>
                                            </div>
                                            <div class="sub-in-r">
                                                <ul>
                                                    <li><a href="#">Softimage</a></li>
                                                    <li><a href="#">Substance Designer</a></li>
                                                    <li><a href="#">Substance painter</a></li>
                                                    <li><a href="#">topoGun</a></li>
                                                    <li><a href="#">UDK</a></li>
                                                    <li><a href="#">Unity</a></li>
                                                    <li><a href="#">Unreal Engine</a></li>
                                                    <li><a href="#">XNA</a></li>
                                                    <li><a href="#">ZBrush</a></li>
                                                </ul>
                                            </div>
                                        </div>


                                        <div class="sub-r">
                                            <h3>More</h3>
                                            <ul>
                                                <li><a href="#">New Training</a></li>
                                                <li><a href="#">Learning Paths</a></li>
                                                <li><a href="#">CG101</a></li>
                                                <li><a href="#">Game Dev News</a></li>
                                                <li><a href="#">Forums</a></li>
                                                <li><a href="#">All in Game Dev</a></li>
                                            </ul>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </ul>
                </ul>
            </div>


            <div id="dev">
            </div>


        </div>
    </div>
</div>
</body>
</html>

Alles anzeigen

Hier der CSS Code:

Code

body{
   margin: [COLOR=#0000ff]0[/COLOR];
   padding: [COLOR=#0000ff]0[/COLOR];
   font-family: arial;
   font-size: [COLOR=#0000ff]12[/COLOR]px;
}
ul li{
   list-style-type: none;
}


.wrapper{
   width: [COLOR=#0000ff]980[/COLOR]px;
   margin: [COLOR=#0000ff]0[/COLOR]px auto;

}


.vfx{


}
h3{
   color: #[COLOR=#0000ff]000000[/COLOR];
   font-weight: normal;
   font-size: [COLOR=#0000ff]10[/COLOR]px;
   margin: [COLOR=#0000ff]0[/COLOR];
   padding: [COLOR=#0000ff]0 0 12 0[/COLOR];

}
ul{
   margin: [COLOR=#0000ff]0[/COLOR];
   padding: [COLOR=#0000ff]0[/COLOR];




}
li.pad{
   float: left;


}
.holder  li{
   color: #fff;
   text-decoration: none;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;


}
a{
   color: #[COLOR=#0000ff]838080[/COLOR];
   text-decoration: none;
   display: block;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;


}
.pad a{
   padding: [COLOR=#0000ff]18 17 22 17[/COLOR];
}
#halter ul{
   width: [COLOR=#0000ff]100[/COLOR]%;
}
#halter ul li span{
   padding: [COLOR=#0000ff]7 0[/COLOR];
}
.pad > a:hover, .using > li:hover > a {
   background: #ffffff;
   text-decoration:none;
}


#t-d ul li a:hover span, .using > li:hover > a > span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #ff4300;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
   text-decoration:none;


   
}
#all ul li a:hover span, #all .using > li:hover > a > span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #ff4300;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
    text-decoration:none;


}
.sub-wrapper-all{
   border-bottom: [COLOR=#0000ff]1[/COLOR].[COLOR=#0000ff]5[/COLOR]px solid lightgray;


}
.sub-wrapper-all a:hover{
   color: #ff4300;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]3[/COLOR]s;
}
#web ul li a:hover span, #web .using > li:hover > a > span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #C0BBBB;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
    text-decoration:none;
}
#cad ul li a:hover span, #cad .using > li:hover > a > span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #[COLOR=#0000ff]1[/COLOR]CA6E0;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
   text-decoration:none;
    font-color: #[COLOR=#0000ff]7[/COLOR]D7B7B;
}
#dev ul li a:hover span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #F26621;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
    text-decoration:none;

}
#internettagebuch ul li a:hover span{
   border-bottom: [COLOR=#0000ff]2[/COLOR]px solid #[COLOR=#0000ff]777777[/COLOR];
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]1[/COLOR]s;
    text-decoration:none;


}
.sub-wrapper-all{
   width: [COLOR=#0000ff]100[/COLOR]%;
   height: auto;
   background: #ffffff;
   position: absolute;
   left: [COLOR=#0000ff]0[/COLOR];
   padding: [COLOR=#0000ff]40 0[/COLOR];


}
#halter ul li > ul{
   position: absolute;
   left: -[COLOR=#0000ff]9000[/COLOR];

}
#halter ul li:hover ul{
   left: [COLOR=#0000ff]0[/COLOR];
   text-decoration:none;
}
.sub-con{
   width: [COLOR=#0000ff]900[/COLOR]px;
   margin: [COLOR=#0000ff]0[/COLOR]px auto;
}
.sub-l{
   float: left;
   width: [COLOR=#0000ff]250[/COLOR]px;


}
.sub-hol ul li a{
   padding: [COLOR=#0000ff]8 0 8 0[/COLOR];
    font size: [COLOR=#0000ff]13[/COLOR]px;
   transition: [COLOR=#0000ff]0[/COLOR].[COLOR=#0000ff]3[/COLOR]s;


}
.sub-m{
   padding-left: [COLOR=#0000ff]20[/COLOR]px;
   float: left;
   border-left: [COLOR=#0000ff]1[/COLOR]px solid #[COLOR=#0000ff]7[/COLOR]D7B7B;
   border-right: [COLOR=#0000ff]1[/COLOR]px solid #[COLOR=#0000ff]7[/COLOR]D7B7B;
   padding-right: [COLOR=#0000ff]240[/COLOR]px;
}
.sub-in-l{
   float: left;
   width: [COLOR=#0000ff]135[/COLOR]px;

}
.sub-in-r{
   float: right;
   width: [COLOR=#0000ff]135[/COLOR]px;
}
.sub-r{
   float: right;
   padding-left: [COLOR=#0000ff]20[/COLOR]px;
}


.sub-wrapper-all::before {
    background-color: #fefefe;
    border-color: #fefefe lightgray lightgray #fefefe;
    border-style: solid;
    border-width: [COLOR=#0000ff]0 1[/COLOR]px [COLOR=#0000ff]1[/COLOR]px [COLOR=#0000ff]0[/COLOR];
    content: [COLOR=#008000][B]""[/B][/COLOR];
    height: [COLOR=#0000ff]31[/COLOR]px;
    left: [COLOR=#0000ff]12[/COLOR]px;
    position: relative;
    top: -[COLOR=#0000ff]14[/COLOR]px;
    transform: rotate([COLOR=#0000ff]45[/COLOR]deg);
    width: [COLOR=#0000ff]10[/COLOR]px;
}
.sub-wrapper-all {
    display: block;
    padding-top: [COLOR=#0000ff]8[/COLOR]px;
    position: relative;
    border-top: [COLOR=#0000ff]1[/COLOR]px solid lightgray;
    font-size: [COLOR=#0000ff]12[/COLOR]px;
    margin-top: [COLOR=#0000ff]1[/COLOR]px;
    font-size: [COLOR=#0000ff]10[/COLOR]px;
}


 .img {
    border:[COLOR=#0000ff]10[/COLOR]px solid white


}


.unterpunkte {


}

Alles anzeigen

Wenn noch andere fehler gefunden werden könnt Ihr sie gerne und bitte verbessern.

Dankeschön schon im vorrauß :3

Mit freundlichen Grüßen

Sailor

Ich kann das zwar nicht so genau identifizieren, was du mit diesen vielen div's, ul's und sonstigen Elementen anstellen willst, aber im Prinzip könnte dir folgende Idee vielleicht weiter helfen.
HTML:

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>CSS Popup Menue</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css_popup.css">
</head>
<body>


<nav>
   <div id="top_menue">
      <div class="menue_container">
         <ul class="item_1">
            <li class="list_item_1"><img src="https://alsoehmjoar.files.wordpress.com/2011/02/freizeit.gif" style="height: 150px; max-width: 95%;" alt="Image Freizeit und Aktivität"><br>
            Freizeit und Aktivität
                <ul class="popup_item">
                   <li>Position 1</li>
                   <li>Position 2</li>
                   <li>Position 3</li>
                </ul>
            </li>
         </ul>
      </div>
      <div class="menue_container">
         <ul class="item_2">
            <li class="list_item_1"><img src="https://pbs.twimg.com/profile_images/591711011436036096/Te4df2k2.jpg" style="height: 150px; max-width: 95%;" alt="Image Mode und Wohnen"><br>
            Mode und Wohnen
                <ul class="popup_item">
                   <li>Position 1</li>
                   <li>Position 2</li>
                   <li>Position 3</li>
                </ul>
            </li>
         </ul>
      </div>
      <div class="menue_container">
         <ul class="item_3">
            <li class="list_item_1"><img src="http://www.baby-und-familie.de/multimedia/103/200/252/15762759697.jpg" style="height: 150px; max-width: 95%;" alt="Image Spielen und Lernen"><br>
            Spielen und Lernen
                <ul class="popup_item">
                   <li>Position 1</li>
                   <li>Position 2</li>
                   <li>Position 3</li>
                </ul>
            </li>
         </ul>
      </div>
      <div class="menue_container">
         <ul class="item_4">
            <li class="list_item_1"><img src="http://guiasaludable.net/wp-content/uploads/2015/11/Cremas-caseras-a-base-de-algas-marinas-1-1024x683.jpg" style="height: 150px; max-width: 95%;" alt="Image Beauty und Gesundheit"><br>
            Beauty und Gesundheit
                <ul class="popup_item">
                   <li>Position 1</li>
                   <li>Position 2</li>
                   <li>Position 3</li>
                </ul>
            </li>
         </ul>
      </div>
   </div>
</nav>


</body>
</html>

Alles anzeigen

und das CSS:

HTML

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


#top_menue {
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  width: 1000px;
  max-width: 95%;
}


.menue_container {
  flex: 1;
  margin: 2px;
  background-color: rgba(100, 100, 100, 0.9);
  border: 0px;
  padding: 5px;
}


li {
  list-style-type: none;
}


.item_1, .item_2, .item_3, .item_4, .popup_item {
  list-style-type: none;
  cursor: pointer;
}


.popup_item {
  display: none;
  background-color: rgba(100, 100, 160, 0.9);
  padding: 5px;
  font-size: 1.2em;
}


.item_1 .list_item_1:hover .popup_item {
  position: absolute;
  display: block;
}


.item_2 .list_item_1:hover .popup_item {
  position: absolute;
  display: block;
}


.item_3 .list_item_1:hover .popup_item {
  position: absolute;
  display: block;
}


.item_4 .list_item_1:hover .popup_item {
  position: absolute;
  display: block;
}

Alles anzeigen

Viel Spaß beim Basteln!

Hilfe beim Planen einer Navigation mit CSS + HTML!

Tags

Benutzer online in diesem Thema