zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Vertikale Navigationsleisten nicht nebeneinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.09.2010, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 3
Christopha befindet sich auf einem aufstrebenden Ast
Standard 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">&nbsp;</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>
und der CSS-Code:
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;
}
Also, kann mir einer erklären, wie ich die Leiste rechts hinbekomme?
Dankeschön!
lg Christopher!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.09.2010, 16:32
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.09.2010, 16:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 3
Christopha befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Generell solltest du dein Markup nochmal überarbeiten.
Inwiefern? Was genau ist verbesserungswürdig?

Wenn ich #Box_r sowohl links als auch rechts floate, ändert sich nichts.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2010, 17:26
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Christopha Beitrag anzeigen
Wenn ich #Box_r sowohl links als auch rechts floate, ändert sich nichts.
Im html steht id="box_r"
__________________
MfG
Jens
Mit Zitat antworten
  #5 (permalink)  
Alt 18.09.2010, 17:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 3
Christopha befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 18.09.2010, 17:38
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von Christopha Beitrag anzeigen
Inwiefern? Was genau ist verbesserungswürdig?

Wenn ich #Box_r sowohl links als auch rechts floate, ändert sich nichts.
Bezweifle ich irgendwie.. Bildschirmfoto 2010-09-18 um 16.36.43.png schau mal da da klappts wenn ich den container floate.

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>
So würde der Code in gewisser Weise mehr Sinn ergeben.
__________________
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?
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:09 Uhr.