XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   div container nebeneinander platzieren (http://xhtmlforum.de/showthread.php?t=48835)

müsli 11.11.2007 16:31

div container nebeneinander platzieren
 
hallo zusammen,

ich bin leider ein anfänger in css (:oops:) und frage deshalb hier mal die profis !

zu meinem problem:
ich will mit html und css so eine navigation mit registekartenreiter wie bei clipfish realisieren.
ich hab mir daraufhin mal den code von clipfish angeschaut und versucht,
das menü "nachzumachen".
das hat auch soweit alles geklappt.
nur bei mir sind die einzelnen div container also die registerkarten nicht bnebeneinander sondern übereinender.

gugst du hier:

http://ammonj.am.funpic.de/dateien/screenshot1.gif


ich will sie aber (logischerweise) wie bei clipfisch nebeneinander haben .
wenn ich jetzt den float befehl anwende ist der ganze block der übereinender gelegten redisterkarten links von der untererenn box.

gugst du hier:

http://ammonj.am.funpic.de/dateien/screenshot2.gif



meine frage also:
wie kann ich die div container neben einander plazieren ??



hier die ausschnitte aus dem quellcode:


html:

Code:

<!-- navi anfang -->

<div class="navi">


<!-- item1 -->

<div class="item active">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="content"><a>Home</a></div>


<!-- item2 -->

<div class="item" style="float: left;">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="content"><a href="#">...</a></div>
</div>

<!-- item3 -->

<div class="item" style="float: left;">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="content"><a href="#">...</a></div>
</div>


<!-- item4 -->

</div>

<!-- navi ende -->

<!-- box anfang -->

<div id="box">

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><b><font face="Arial Black" size="4">Galerie</font></b></p>
<p></p>
<p><font face="Arial Black">...</font></p>
<p><font face="Arial Black">...</font></p>
<p><font face="Arial Black">...</font></p>
<p><font face="Arial Black">...</font></p>
<p><font face="Arial Black">...</font></p>
<p><font face="Arial Black">...</font></div>

</div>

<!-- box ende -->


css:

Code:

div.navi {
width:100%;
height:70px;
padding:15px
}


.navi .item { position:relative;width:92px;float:none;text-align:center; }
.navi .item.active { width:92px; }

.item a { color:#ffffff; font-size:11px;font-weight:bold;}

.n1, .n2, .n3 { overflow:hidden;height:1px;border-color:#B6B6B6; border-style:solid; }
.n1 { margin:0px 4px;background-color:#B6B6B6;border-width:0px}
.n2 { margin:0px 2px;border-width:0px 2px;background-color:#B6B6B6; }
.n3 { margin:0px 1px;border-width:0px 1px;background-color:#B6B6B6;height:2px }

.item .content {background-color:#B6B6B6; border-width:0px 1px 1px 1px; overflow:hidden; border-color:#000 #605E5F #000 #949494; border-style:solid; height:18px; padding-top:3px; }

.item.active .n1, .item.active .n2, .item.active .n3 { border-color:#000; }
.item.active .n1 { background-color:#000;}
.item.active .n2 { background-color:#0099CB; }
.item.active .n3 { background-color:#0099CB; }

.item.active .content { background-color:#0099CB; border-width:0px 1px 1px 1px; border-color:#000 #000 #0099CB #000; }







#box {
  width: 100%;
  padding: 15px;
  vertical-align: center;
  text-align: left;
  background-color: #ffffff;
}


Crizzo 11.11.2007 16:48

Du musst deiner Navi "float:left" verpassen und deinem Content "float:right" und schon stehen sie nebeneinander, falls genug Platz ist. Sprich ist die Navi 100% vom Browserfenster breit, ist kein Platz für den Inhalt daneben, dass musst du anpassen.

Oder willst du die einzelnen Registerkarten nebeneinander liegend haben, aber über dem Content? Dann solltest du die Registerkarten in eine Liste packen und der Liste "display:inline" geben.

müsli 11.11.2007 17:08

danke für die schnelle antwort.

ich will die registerkarten nebeneinander und über dem content haben. :mrgreen:
ich werds mal mit der liste probieren.

Crizzo 11.11.2007 17:09

Nicht probieren, mach es. ;) Vielleicht hilft dir das hier: Cascading Style Sheets { Tutorials : Site-Navigation mit Listen }

müsli 11.11.2007 17:14

danke ... wenn ichs geschafft hab schick ich den link dann kannstes anschaun
wie gesagt ...
... WENN


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:56 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020