Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 11.11.2007, 16:31
Benutzerbild von müsli
müsli müsli ist offline
müsli
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 12
müsli befindet sich auf einem aufstrebenden Ast
Standard div container nebeneinander platzieren

hallo zusammen,

ich bin leider ein anfänger in css () 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:




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:





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;
}
__________________
“Ich hoffe mein Schaden hat kein Gehirn genommen.”
Mit Zitat antworten
Sponsored Links