Divs 3spaltig setzen

Status
Nicht offen für weitere Antworten.

fredolin

Erfahrenes Mitglied
Hallo CSS Gemeinde

ich denke ich sehe den Baum vor lauter Wälder nicht.
Ich habe da ein Problem, was eigentlich nicht sein dürfte - Aber nun mal ist.

So ich Poste hier mal nur die betreffenden HTML und CSS Tags.
CSS:
#navi_hori_3 {
	margin: 0;
	padding: 0;
	z-index: 10;	
}
#navi_hori_3 ul a {
	position: relative;	
}
#navi_hori_3 ul li {
	display: inline;
	width: 130px;
	float: left;
	height: 20px;
	margin: 5px 2px 0 0;
	padding: 4px 3px;
	border-top: 1px solid #575757;
	border-left: 1px solid #575757;
	border-right: 1px solid #575757;
	border-bottom: 1px solid #575757;
	background-color: #ABABAB;	
}
#navi_hori_3 ul li div {
	display: none;	
}
#navi_hori_3 ul li:hover div {
	display: block;
	position: absolute;	
	margin-top: 6px;
}
.box_subnavi {
	position: relative;
	margin-left: -25%;
	background-image: url(../../img/bg_subnavi.png);
	background-repeat: no-repeat;
	width: 616px;
	height: 256px;	
}

#subBox {
	margin: 5px 5px;
	padding: 5px 5px;
	width: 100%;
	float: left;
	border: 1px solid #aac;	
}
#navi_hori_3 .subBox_left {
	margin: 0;
	padding: 5px 5px;
	width: 150px;
	float: left;	
}
#navi_hori_3 .subBox_middle {
	margin: 0;
	padding: 5px 5px;
	width: 150px;
	float: left;
	border-left: 1px dashed #D6D6D6;
	border-right: 1px dashed #D6D6D6;	
}
#navi_hori_3 .subBox_right {
	margin: 0;
	padding: 5px 5px;
	width: 150px;
	float: left;	
}

HTML:
<div id="navi_hori_3">
                	<h1>Navigation</h1>
                    <ul>
                        <li><a href="?act=home">Startseite</a></li>
                        <li><a href="?act=page1">Page1</a>
                        	<div class="box_subnavi">
                            	<div class="subBox_left">
                                	<ul>
                                        <li><a href="?act=page2?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page2?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page2?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page2?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page2?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page2?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                </div>
                    			<div class="subBox_middle">
                                	DU
                                <!--
                                	<ul>
                                        <li><a href="?act=page3?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page3?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page3?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page3?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page3?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page3?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                //-->
                                </div>
                    			<div class="subBox_right">
                                	DA
                                <!--
                                	<ul>
                                        <li><a href="?act=page4?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page4?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page4?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page4?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page4?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page4?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                //-->
                                </div>
                    		</div>	
                        </li>
                        <li><a href="?act=page2">Page2</a>
                        	<div class="box_subnavi">
                            	<div class="subBox_left">
                                	Hallo
                                <!--
                                	<ul>
                                        <li><a href="?act=page2?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page2?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page2?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page2?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page2?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page2?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                //-->
                                </div>
                    			<div class="subBox_middle">
                                	DU
                                <!--
                                	<ul>
                                        <li><a href="?act=page3?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page3?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page3?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page3?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page3?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page3?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                //-->
                                </div>
                    			<div class="subBox_right">
                                	DA
                                <!--
                                	<ul>
                                        <li><a href="?act=page4?sub=submenu1">Submenu1</a></li>
                                        <li><a href="?act=page4?sub=submenu2">Submenu2</a></li>
                                        <li><a href="?act=page4?sub=submenu3">Submenu3</a></li>
                                        <li><a href="?act=page4?sub=submenu4">Submenu4</a></li>
                                        <li><a href="?act=page4?sub=submenu5">Submenu5</a></li>
                                        <li><a href="?act=page4?sub=submenu6">Submenu6</a></li>
                                    </ul>
                                //-->
                                </div>
                    		</div>	
                        </li>
                        <li><a href="?act=page3">Page3</a>
                        	<div class="box_subnavi">
                            	
                    		</div
                        </li>
                        <li><a href="?act=page4">Page4</a>
                        	<div class="box_subnavi">
                            	
                    		</div
                        </li>
                        <li><a href="?act=login">Login</a>
                        	<div class="box_subnavi">
                            	
                    		</div
                        </li>
                    </ul>
                </div>

Was passiert da!
Also bei überwegfahren der Navigation, öffnet sich ein großer Div Container. In diesem Container will ich nun div 3spaltig neben einander positionieren. Doch momentan legt der alle 3 Divs oben Links in der Ecke übereinander.

Ich sehe den Baum nicht mehr...:confused:

Kann mir da einer Helfen..

Danke vorab

Fredolin
 
Hat sich erledigt.

Denn verlesen kann ist klar in Vorteil....

Dieses Thema kann geschlossen werden..

Gruß
Fredolin
 
Status
Nicht offen für weitere Antworten.
Zurück