XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Sidebar Höheneinstellung (http://xhtmlforum.de/showthread.php?t=72035)

css-neuling 16.05.2015 19:59

Sidebar Höheneinstellung
 
Hallo!

leider habe ich ein Problem, bei dem ich als CSS-Anfänger an meine Grenzen stoße. Ich hoffe ihr könnt mir helfen.

Mein Problem: Ich möchte eine Webseite erstellen mit Header, Sidebar, Hauptinhalt ( bei mir mainframe) und einem Footer. Die Anordnung der einzelnen Elemente passt auch schon so, wie ich das haben will, jedoch wird meine Sidebar/Mainframe zu lang, sodass die beiden viel zu lang werden und der Footer außerhalb des Fensters landet.
Ich habe schon den ganzen Tag im Internet gesucht, doch irgendwie führte nichts zum gewünschten Ergebnis.

Das Problem habe ich schon erkannt (bei position: relative; height: 100% ist das gewünschte div genau so hoch wie das übergeordnete div.

So ist es gerade:
http://abload.de/img/istemuwb.jpg

So soll es werden:
http://abload.de/img/sollzwur7.jpg

Logischerweise sollen die div's über den unteren Browserrand hinausgehen, sofern der Inhalt es verlangt.

Hier mein html- und CSS-Code:

HTML:
HTML-Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Startseite</title>
</head>
<body>
        <div id="content">
                <div id="header">
                        <h1>Startseite</h1>
                        <p>Hallo Gast!<p>
                </div>
               
                <div id="holder">       
                        <div id="sidebar">
                                <p>Hier ist die Sidebar.
                        </div>


                <div id="mainframe">
                <p>irgendwas</p>
                </div>

        </div>
                <div id="footer">
                <p>footer
                </div>
               
        </div>
</body>
</html>

CSS:
Code:

body , html{        font-family: Arial;
                        text-align: center;
                        height: 100%;
}
#content {        text-align: left;
                        display: inline-block;
                        height: 100%;
}
#sidebar {        width: 250px;
                        border: dotted;
                        float: left;
                        height: 100%;
}
#mainframe {        border: dotted;
                        margin-left: 265px;
                        width: 900px;
                        height: 100%;
}
#holder {        margin: auto;
                        margin-top: 10px;
                        margin-bottom: 10px;
}
#header {        height: 150px;
                        border: dotted;
                        width: 1165px;
}
#footer {        border: dotted;
                        margin-top: 5px;
                        margin-bottom: 0px;
}


MrMurphy 16.05.2015 20:52

Hallo,

alter Merksatz: Wer floatet muss auch clearen.

Such mal bei Google nach "css float clear" und lies dich ein. Danach nach "css float clear clearfix".

Insgesamt wäre es natürlich sinnvoller du würdest aktuelles HTML5 und CSS3 und deren neue Elemente nutzen.

Gruss

MrMurphy

css-neuling 16.05.2015 23:39

Ich muss gestehen, das bringt mich jetzt nicht so richtig weiter. Wo muss ich jetzt clearen?
Sorry, dass ich so doof frage, ich bin auf dem Gebiet ziemlich neu.

Wie könnte ich das ganze denn geschickter (mit HTML5 und CSS3) lösen?

MrMurphy 17.05.2015 00:53

Hallo,

Zitat:

Sorry, dass ich so doof frage, ich bin auf dem Gebiet ziemlich neu.
Es bringt erfahrungsgemäß wenig dir eine Lösung hinzubasteln, die du nicht versteht. Zumal deine Seite noch keinen Inhalt hat.

Zitat:

Ich muss gestehen, das bringt mich jetzt nicht so richtig weiter.
Ich sehe meine Aufgabe nicht darin dir hier zeitintensiv float und clear zu erklären, zumal es zu dem Thema alleine im deutschsprachigen Bereich hunderte Anleitung im Internet gibt. Um's lernen kommst du nicht herum wenn du Webseiten erstellen willst. Du solltest schon wissen was du tust.

Eine Anleitung findest du zum Beispiel unter

Little Boxes - IV CSS-Positionierung

in den Kapiteln 12 bis 17.

Zitat:

Wie könnte ich das ganze denn geschickter (mit HTML5 und CSS3) lösen?
Auch hier bringt es wenig dir eine Lösung, zumal für eine Seite ohne Inhalt, zu erstellen, die du dann nicht verstehst. Du musst dich schon entscheiden HTML5 und CSS3 zu lernen und das dann auch umsetzen.

Vorteile sind zum Beispiel eine bessere Übersicht im Quelltext, ein paar Pluspunkte bei Google und die Möglichkeit Webseiten besser an Smartphones und Tablets anpassen zu können. Stichwort: Media Queries. Insgesamt sind Seiten mit HTML5 und CSS3 zukunftssicherer.

Du hast offensichtlich zum Lernen zu veralteten Anleitungen oder Vorlagen gegriffen. Darauf wollte ich dich eigentlich nur aufmerksam machen, da eine spätere Umstellung in der Regel sehr zeitaufwändig ist.

Gruss

MrMurphy


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019