|
|||
Vertikale Navigationsleisten nicht nebeneinander
Hallo,
zunächst muss ich sagen, dass ich ein Neuling bei der CSS-Programmierung bin, es ist genaugenommen ein Auftrag, den ich von meiner Chefin bekommen habe, für unser Forschungsprojekt eine Seite aufzustellen. Genug davon. Hier erstmal der Link zu der Seite: www.Management-Wert.de - Ein Forschungsprojekt der HS Niederrhein Wie ihr seht ist unter den beiden Containern noch ein Bild. Das sollte eigentlich auf der rechten Seite neben den beiden Sachen sein. Aber ich bekomme es einfach nicht dort hin. Unter dem Bild soll dann eine vertikale Leiste in der unteren Farbe des Hand-bildes. Dazu die Quellcodes: HTML-Code:
<body> <div id="topBar"> <div id="home">Home</div> <div id="aufbau">Aufbau der Studie</div> <div id="Zentral">Zentrale Ergebnisse</div> <div id="auswertung">Auswertung für Unternehmen</div> <div id="unternehmen">Unternehmensprofile</div> <div id="login"><input name="nick" type="text" value="Name" size="13" style="border: hidden"/> <input name="password" type="password" value="password" size="13" style="border:hidden" /> <input name="Login" type="button" value="Login" style="border:hidden" /></div> </div> <div id="shad1"> </div> <div id="Box_l"> <div id="logo"><img src="img/logo.jpg" alt="Logo Management & Werte" /></div> <div id="teilnehmer">Teilnehmende Unternehmen</div> <div id="teilnehmer_haken"><img src="img/peak.png" /></div> </div> <div id="Textbox">abc</div> <div id="box_r"> <div id="head_img"><img src="img/head_img.jpg" alt="Shake Hands" /></div> </div> </body> </html> Code:
@charset "utf-8"; /* CSS Document */ html { margin: 0; padding: 0; height:100%; } body { font-family:Verdana, Geneva, sans-serif; font-size: 13px; color:#000; background-color:#f4f4f4; margin:0; padding:0; height:100%; } a:link { color: #fff; background-color: #706f6f; text-decoration:none; } a:visited { color: #fff; background-color: #706f6f; text-decoration:none; } a:hover, a:active { background-color: #479dd4; } /* Obere Navigationsleiste ---------> */ #topBar { width: 100%; height: 30px; background-color: #706f6f; color: #fff; filter:Shadow(color=#000000, direction=180); } #home { width: 55px; color: #fff; padding-top: 4px; padding-left: 8px; float: left; } #aufbau { width: 140px; color: #fff; padding-top: 4px; padding-left: 8px; float: left; } #Zentral { width: 155px; color: #fff; padding-top: 4px; padding-left: 8px; float: left; } #auswertung { width: 210px; color: #fff; padding-top: 4px; padding-left: 8px; float: left; } #unternehmen { width: 160px; color: #fff; padding-top: 4px; padding-left: 8px; float: left; } #login { width: 350px; color: #fff; padding-top: 3px; padding-left: 8px; float: right; } #shad1 { background-image:url(img/shad_1.jpg); height: 13; width: 100%; float:left } /* <----- Obere Navigationsleiste */ /* Box mit den Inhalten links ----> */ #Box_l { float:left; min-height: 100%; height: auto; width: 378px; background-color: #f4f4f4; border:thick; padding-left: 20px; } #logo { width: 378px; height: 240px; } #teilnehmer { background-color: #706f6f; width: 220px; color: white; height: 20px; padding-top: 3px; padding-left: 25px; } #teilnehmer_haken { height: 30px; padding-left: 40px; } /*<---- Box mit Inhalten links*/ /*Textbox -----> */ #Textbox { min-height: 100%; height: auto; width: 10%; float:left; padding-top: 150px; padding-left: 10px; } /*<---- Textbox*/ /*Box mit Inhalten rechts ---->*/ #Box_r { min-height: 100%; height: auto; width: 327px; float: none; } #head_img { width: 327px; height: 232px; } Dankeschön! lg Christopher! |
Sponsored Links |
|
||||
du musst floaten.. :P
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) das da am besten durchlesen =) Generell solltest du dein Markup nochmal überarbeiten.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
Inwiefern? Was genau ist verbesserungswürdig?
Wenn ich #Box_r sowohl links als auch rechts floate, ändert sich nichts. |
|
|||
Ui, wie peinlich. Danke.
Letzte Fragen: Ich habe unter dem Shakehands-Bild nun eine Box. Diese soll jetzt den Rest der Homepage hinunterlaufen. Wie definier ich das? Und: Wie mach ich die mittlere Textbox variabel in der Breite. Wenn ich sie als 100% definiere, wird alles andere verdrängt (logisch). www.Management-Werte.de - Ein Forschungsprojekt der HS Niederrhein Ist soweit aktualisiert |
|
||||
Zitat:
Zum Code: HTML-Code:
<!DOCTYPE html> <head> </head> <body> <div id="topBar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Aufbau der Studie</a></li> <li><a href="#">Zentrale Ergebnisse</a></li> <li><a href="#">Auswertung für Unternehmen</a></li> <li><a href="#">Unternehmensprofile</a></li> <li class="right"> <fieldset> <form> <input name="nick" type="text" value="Name" size="13" /> <input name="password" type="password" value="password" size="13" /> <input name="login" type="submit" value="Login" /> </form> </fieldset> </li> </ul> </div> <div id="content"> <div id="Box_1"> <img id="logo" src="img/logo.jpg" alt="Logo Management & Werte" / <h2 id="teilnehmer">Teilnehmende Unternehmen</div> <img src="img/peak.png" id="teilnehmer_haken" /> </div> <div id="Textbox"> <p>abc</p> </div> <div id="box_r"> <div id="head_img"><img src="img/head_img.jpg" alt="Shake Hands" /></div> </div> </div> </body> </html>
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem: 2 Block-Elemente nebeneinander zentrieren | freejay | CSS | 3 | 24.06.2011 11:03 |
Divs nebeneinander... | Sengi | CSS | 4 | 23.05.2009 09:23 |
horizontale Navigation - Button bleiben nicht nebeneinander | brazzo | CSS | 3 | 16.06.2007 14:19 |
divs nebeneinander | bruderbarnabas | CSS | 7 | 07.09.2006 11:28 |
Mehrere Tabellen nebeneinander, aber kein Umbruch | phlux | CSS | 4 | 29.05.2006 17:38 |