zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div container nebeneinander platzieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.11.2007, 16:31
Benutzerbild von müsli
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
  #2 (permalink)  
Alt 11.11.2007, 16:48
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.11.2007, 17:08
Benutzerbild von müsli
müsli
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 12
müsli befindet sich auf einem aufstrebenden Ast
Standard

danke für die schnelle antwort.

ich will die registerkarten nebeneinander und über dem content haben.
ich werds mal mit der liste probieren.
__________________
“Ich hoffe mein Schaden hat kein Gehirn genommen.”
Mit Zitat antworten
  #4 (permalink)  
Alt 11.11.2007, 17:09
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Nicht probieren, mach es. Vielleicht hilft dir das hier: Cascading Style Sheets { Tutorials : Site-Navigation mit Listen }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 11.11.2007, 17:14
Benutzerbild von müsli
müsli
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2007
Beiträge: 12
müsli befindet sich auf einem aufstrebenden Ast
Standard

danke ... wenn ichs geschafft hab schick ich den link dann kannstes anschaun
wie gesagt ...
... WENN
__________________
“Ich hoffe mein Schaden hat kein Gehirn genommen.”
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Website Konstrukt - Div Container polest (X)HTML 2 27.06.2010 18:55
Header entfernen tripple CSS 17 15.06.2010 16:41
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
Div Container beinhaltet weitere Divs,wie den Container scrollen lassen? SpecialK CSS 9 01.09.2008 12:17
2 Div Container, unten anordnen, keine feste Höhe Hausmeista (X)HTML 0 06.06.2006 18:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:34 Uhr.