[Erledigt] Divs nebeneinander richtig positionieren das sie nicht verschoben werden

litterauspirna · 07.10.2008, 08:26

Hallo Gemeinde!

Ich fange gerade erst an nur mit DIVs und rein auf CSS zu arbeiten und habe ein Problem. Ich habe auch schon bei css4you nachgelesen aber finde keine Lösung.

Folgendes Problem. Ich habe drei DIVs einen Außendiv und zwei DIVs im Außen DIV.

Der Linke DIV soll ein Menu darstelen und der rechte den Contend. Nun habe ich das Problem das der Menu DIV korrekt angezeigt wird nur der rechte DIV für den Contend ist nach unten versetzt.

Hier mal mein CSS Code.

Code:

#center
{
width: 695px;
height: 440px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-color: #999999;
margin-left: 162px;
padding-left: 5px;
}
 
#menu_head
{
width: 150px;
height: 20px;
border: 1px solid #000000;
}
#menu_link
{
width: 150px;
height: 20px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#contend
{
border: 1px solid #000000;
width: 500px;
margin-left: 180px;
}

Und hier die Index mit der DIV Anordnung.

Code:

<div id="center">
 <div id="menu_head" align="center">
  Allgemeines
 </div>
 <div id="menu_link" align="center">
  <a href="kontakte.php">Kontakte</a>
 </div>
 <div id="menu_link" align="center">
  <a href="kontakte.php">Gästebuch</a>
 </div>

 <div id="contend" align="center">
  Contend
 </div>
</div>

Wie kann ich es jetzt machen das der Menu DIV und der Contend DIV nebeneinander atehen ohne das sie verschoben sind. Ich habe es mit postion absolute und der Höhenangabe top probiert,da wird aber im Firefox alles verschoben und im IE ordentlich angezeigt.

Danke für eure Tips mfg der litter

robo47 · 07.10.2008, 09:01

Das was du gerade bastelst geht in Richtung einer DIV-Suppe

Code:

 <div id="menu_link" align="center">
  <a href="kontakte.php">Kontakte</a>
 </div>
 <div id="menu_link" align="center">
  <a href="kontakte.php">Gästebuch</a>
 </div>

Wenn das hier eine NAV werden soll, dann solltest du mal über ne Liste nachdenken (<ul><li>eintrag</li></ul>), der Sinn mit DIVs zu arbeiten besteht nicht darin, nur noch DIVs für alles zu verwenden, das ist semantisch nicht korrekt.

Desweiteren ist id ein EINDEUTIGER Identifizierer, wenn man also mehr als ein Element im HTML ansprechen will, sollte man keine id nutzen sondern class.

So jetzt mal zum eigentlichen Problem.

Wenn du so wie ich das sehe ein 2-Spalten Layout willst, solltest du auch 2 DIVs haben die gefloatet werden und in die du deine Inhalte (NAV und CONTENT) unterbringst.
Hier ein kleines Beispiel wie du 2 Spalten nebeneinander bekommst:

Code:

<html>
  <head>
    <title>Blub</title>
    <style>
        #root {
            margin: 0 auto 0;
            width: 800px;
            border: 1px solid black;
        }
        #nav {
            float: left;
            width: 230px;
            border: 1px solid black;
        }
        #content {
            float: right;
            width: 550px;
            border: 1px solid black;
        }
    </style>
  </head>
  <body>
    <div id="root">
        <div id="nav">
            <h2>Nav Header</h2>
            <ul>
                <li>Nav Eintrag 1</li>
                <li>Nav Eintrag 2</li>
                <li>Nav Eintrag 3</li>
            </ul>
        </div>
        <div id="content">
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
        </div>
    </div>
  </body>
</html>

Hoffe das hilft dir weiter.

litterauspirna · 07.10.2008, 11:14

Danke für deine Antwort ok das werde ich mal som probieren.

Nun habe ich aber eine Frage noch. Das Menu baut sich dann aus einer Datenbankabfrage aber auf und ich hatte es gern so das wenn ich mit der Maus drüber fahre sich der Punkt vollflächig komplett frablich verändert. Da dürfte es mit der Liste nicht ganz ausreichen oder? Also so das sich der farbliche Hintergrund ändert.

danke für die Hilfe

nikosch · 07.10.2008, 11:16

Kommt drauf an. Ist zu ungenau beschrieben.

litterauspirna · 07.10.2008, 11:20

So wie hier.

Barthel Druck Arnstadt - Willkommen

meine ich das.

nikosch · 07.10.2008, 11:22

Das geht problemlos mit CSS. Hier ein Entwicklungsstrang: http://alistapart.com/stories/taminglists/

Ansonsten Google: "ul list menu"

litterauspirna · 07.10.2008, 11:24

Das, dass mit CSS geht ist mir klar. Nur mich bringt das mit der Liste durcheinander was robo geschrieben hat. Muss da nicht jeder Menu Punkt ein Div sein damit das solch Effckt gibt?

robo47 · 07.10.2008, 11:26

Zitat:

Zitat von litterauspirna

Nun habe ich aber eine Frage noch. Das Menu baut sich dann aus einer Datenbankabfrage aber auf und ich hatte es gern so das wenn ich mit der Maus drüber fahre sich der Punkt vollflächig komplett frablich verändert. Da dürfte es mit der Liste nicht ganz ausreichen oder? Also so das sich der farbliche Hintergrund ändert.

Meinst du sowas:

Code:

<html>
  <head>
    <title>Blub</title>
    <style>
        #root {
            margin: 0 auto 0;
            width: 800px;
            border: 1px solid black;
        }
        #nav {
            float: left;
            width: 200px;
            border: 1px solid black;
        }
        #content {
            float: right;
            width: 550px;
            border: 1px solid black;
        }
        #nav ul li a {
            background-color: green;
            display: block;
            width: 150px;
        }
        #nav ul li a:hover {
            background-color: red;
            display: block;
            width: 150px;
        }
    </style>
  </head>
  <body>
    <div id="root">
        <div id="nav">
            <h2>Nav Header</h2>
            <ul>
                <li><a href="#link1">Nav Eintrag 1</a></li>
                <li><a href="#link2">Nav Eintrag 2</a></li>
                <li><a href="#link3">Nav Eintrag 3</a></li>
            </ul>
        </div>
        <div id="content">
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
            Hier gibts jede Menge Inhalte <br />
        </div>
    </div>
  </body>
</html>

Dazu braucht es keine extra Divs für jede Zeile

nikosch · 07.10.2008, 11:26

Div oder li ist gleich.

litterauspirna · 07.10.2008, 11:33

Vielen Dank für die ANtworten werde das alles mal probieren umzusetzen. Naja ich fange eben erst an rein mit CSS zu arbeiten und auf Tabellendesign zu verzichten. Obwohl es ja nun auch einige Sachen gibt wo man Tabellen nehmen sollte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs nebeneinander?	wers1	HTML, Usability und Barrierefreiheit	13	18.07.2008 14:26
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
FF positioniert DIV's richtig, IE nicht	scooter	HTML, Usability und Barrierefreiheit	6	15.01.2006 13:25
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
Css Problem - Divs anders positionieren	ypsie	HTML, Usability und Barrierefreiheit	7	22.08.2005 17:40
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] 2 divs nebeneinander		HTML, Usability und Barrierefreiheit	8	12.01.2005 17:27
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27

07.10.2008, 08:26
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	[Erledigt] Divs nebeneinander richtig positionieren das sie nicht verschoben werden Hallo Gemeinde! Ich fange gerade erst an nur mit DIVs und rein auf CSS zu arbeiten und habe ein Problem. Ich habe auch schon bei css4you nachgelesen aber finde keine Lösung. Folgendes Problem. Ich habe drei DIVs einen Außendiv und zwei DIVs im Außen DIV. Der Linke DIV soll ein Menu darstelen und der rechte den Contend. Nun habe ich das Problem das der Menu DIV korrekt angezeigt wird nur der rechte DIV für den Contend ist nach unten versetzt. Hier mal mein CSS Code. Code: #center { width: 695px; height: 440px; border-left: 1px solid #000000; border-right: 1px solid #000000; background-color: #999999; margin-left: 162px; padding-left: 5px; } #menu_head { width: 150px; height: 20px; border: 1px solid #000000; } #menu_link { width: 150px; height: 20px; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; } #contend { border: 1px solid #000000; width: 500px; margin-left: 180px; } Und hier die Index mit der DIV Anordnung. Code: <div id="center"> <div id="menu_head" align="center"> Allgemeines </div> <div id="menu_link" align="center"> <a href="kontakte.php">Kontakte</a> </div> <div id="menu_link" align="center"> <a href="kontakte.php">Gästebuch</a> </div> <div id="contend" align="center"> Contend </div> </div> Wie kann ich es jetzt machen das der Menu DIV und der Contend DIV nebeneinander atehen ohne das sie verschoben sind. Ich habe es mit postion absolute und der Höhenangabe top probiert,da wird aber im Firefox alles verschoben und im IE ordentlich angezeigt. Danke für eure Tips mfg der litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.10.2008, 11:14
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Danke für deine Antwort ok das werde ich mal som probieren. Nun habe ich aber eine Frage noch. Das Menu baut sich dann aus einer Datenbankabfrage aber auf und ich hatte es gern so das wenn ich mit der Maus drüber fahre sich der Punkt vollflächig komplett frablich verändert. Da dürfte es mit der Liste nicht ganz ausreichen oder? Also so das sich der farbliche Hintergrund ändert. danke für die Hilfe __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

07.10.2008, 11:16
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Kommt drauf an. Ist zu ungenau beschrieben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.10.2008, 11:20
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	So wie hier. Barthel Druck Arnstadt - Willkommen meine ich das. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

07.10.2008, 11:22
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das geht problemlos mit CSS. Hier ein Entwicklungsstrang: http://alistapart.com/stories/taminglists/ Ansonsten Google: "ul list menu" __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (07.10.2008 um 11:25 Uhr).

07.10.2008, 11:24
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Das, dass mit CSS geht ist mir klar. Nur mich bringt das mit der Liste durcheinander was robo geschrieben hat. Muss da nicht jeder Menu Punkt ein Div sein damit das solch Effckt gibt? __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

07.10.2008, 11:26
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Div oder li ist gleich. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.10.2008, 11:33
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Vielen Dank für die ANtworten werde das alles mal probieren umzusetzen. Naja ich fange eben erst an rein mit CSS zu arbeiten und auf Tabellendesign zu verzichten. Obwohl es ja nun auch einige Sachen gibt wo man Tabellen nehmen sollte. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de