nicht angemeldet
DIV-Elemente in XHTML mit CSS 2 positionieren
Hallo Leute,
ich möchte eine Webseite mal ohne Tabellen und festen Zuweisungen machen. Dazu habe ich die Seite von CSSZenGarden gesehen. Die machen Templates mittels CSS Files. Also habe ich mal einen Entwurf gemacht. Nun habe ich aber ein Problem mit dem Positionieren der Div's.
Hier erstmal der HTML-Code:
<div id="container">
<div id="header">
Filme Online</div>
<div id="menu">
Menu</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" Runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer</div>
</div>
Und auch der bisherige CSS-Code:
body
{
background-color: #336699;
font-size: 10pt;
color: White;
font-family: Verdana;
}
#container
{
width: 900px;
border: solid 1px slategray;
margin: auto;
background-color: Transparent;
}
#header
{
border-bottom: solid 1px slategray;
text-align: center;
height: 60px;
margin: auto;
}
#menu
{
width: 150px;
height: 200px;
margin-top: 2px;
margin-left: 2px;
border: solid 1px slategray;
}
#content
{
border: solid 1px slategray;
margin-left: 157px;
width: 739px;
margin-top: -18px;
}
#footer
{
margin-top: 2px;
border-top: solid 1px slategray;
text-align: right;
}
Wenn ich die Seite nun in einem Browser anzeige (egal welcher), wird das Content-Div immer unter dem Menu-Div angezeigt. Kann ich nicht sagen, dass beide auf einer Höhe beginnen sollen? Oder gibt es bessere Möglichkeiten?
Ich würde mir auch gern Literatur zu diesen Themen zulegen. Kennt jemand was Gutes?
Andreas
-
Tachchen!
Wenn ich die Seite nun in einem Browser anzeige (egal welcher), wird das Content-Div immer unter dem Menu-Div angezeigt. Kann ich nicht sagen, dass beide auf einer Höhe beginnen sollen? Oder gibt es bessere Möglichkeiten?
DIVs sind grundsätzlich erst einmal Blocklevelelemente und damit absatzbildend. Darum werden sie - richtigerweise - untereinander angezeigt.
Da aber ein Blocklevelelement für deinen Zweck durchaus eine gute Wahl ist, wirst du (mindestens) ein Element der nebeneinander anzuzeigenden Elemente aus dem Textfluss nehmen müssen.
Mehr dazu unter der Stichworten: float, position:absolute oder position:relative! ;-)Gruß
Die schwarze Piste
-
Hallo,
Da aber ein Blocklevelelement für deinen Zweck durchaus eine gute Wahl ist, wirst du (mindestens) ein Element der nebeneinander anzuzeigenden Elemente aus dem Textfluss nehmen müssen.
Mehr dazu unter der Stichworten: float, position:absolute oder position:relative! ;-)also ich habe mich mal mit float und position probiert. Da kommt nur Müll raus bei mir. Ich mache garantiert was falsch. Kann mir jemand mal das Beispiel so anpassen, wie ich es beschrieben habe?
Danke.
-
Tachchen!
also ich habe mich mal mit float und position probiert. Da kommt nur Müll raus bei mir. Ich mache garantiert was falsch. Kann mir jemand mal das Beispiel so anpassen, wie ich es beschrieben habe?
Da wirst du hier in diesem Forum eher Pech haben! ;-)
Wenn du aber den aktuellen Stand der Versuche auf deinen Webspace packst und hier verlinkst, werden sicher hilfreiche Tipps eintrudeln.
Gruß
Die schwarze Piste
-
-
-
Moin,
ich möchte eine Webseite mal ohne Tabellen und festen Zuweisungen machen.
Super Idee, Du gehst mit der Zeit!
Hier erstmal der HTML-Code:
<div id="container">
<div id="header">
Filme Online</div>
<div id="menu">
Menu</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" Runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Footer</div>
</div>Sei mir nicht böse, aber das ist div-Soup und auch nicht besser als Tabellenmissbrauch. Warum setzt Du alles in divs? Ein div ist lediglich ein eigenschaftsloses Blockelement. Zeichne Deine Seiten mit semantischem Markup aus! Überschriften mit <h1> bis <h6>, wichtiges mit <em> oder <strong>, Menüs werden mit <ul> gemacht, usw. Ein div brauchst Du nur dann, wenn Du mehrere Elemente gruppieren willst, um ihnen gemeinsame Eigenschaften zu geben.
Wenn ich die Seite nun in einem Browser anzeige (egal welcher), wird das Content-Div immer unter dem Menu-Div angezeigt. Kann ich nicht sagen, dass beide auf einer Höhe beginnen sollen? Oder gibt es bessere Möglichkeiten?
Das wurde ja schon gesagt. Block-Elemente stehen immer untereinander. Mit float kannst Du sie aus dem normalen Textfluss ziehen und nebeneinander anordnen.
Ich würde mir auch gern Literatur zu diesen Themen zulegen. Kennt jemand was Gutes?
Was für den Einstieg und Umstieg von Tabellen:
Englisch: http://www.hotdesign.com/seybold/
Deutsch: http://www.seybold.jan-andresen.de/Ob es dazu schon gute Literatur in Form von Büchern gibt, wage ich zu bezweifeln, angesichts der etlichen Umsteiger, die wie Du statt Tabellenzellen divs nehmen ohne zu kapieren, wozu ein div da ist (keine Beleidigung, nur ne Feststellung eines der häufigsten Einsteigerfehler).
Gruß,
-Efchen