11.11.2007, 15:31
|
||||
|
||||
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.” 
|
| Sponsored Links |
|
11.11.2007, 15: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.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ
|
| Sponsored Links |
|
11.11.2007, 16:08
|
||||
|
||||
|
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.”
|
|
11.11.2007, 16:09
|
||||
|
||||
|
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
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Website Konstrukt - Div Container | polest | (X)HTML | 2 | 27.06.2010 17:55 |
| Header entfernen | tripple | CSS | 17 | 15.06.2010 15:41 |
| Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 18:05 |
| Div Container beinhaltet weitere Divs,wie den Container scrollen lassen? | SpecialK | CSS | 9 | 01.09.2008 11:17 |
| 2 Div Container, unten anordnen, keine feste Höhe | Hausmeista | (X)HTML | 0 | 06.06.2006 17:28 |
Linear-Darstellung
