zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Scrollbarer, in der größe beschränkter Bereich in der Seitenmitte

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2011, 22:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.01.2011
Beiträge: 1
DerStefan befindet sich auf einem aufstrebenden Ast
Standard Scrollbarer, in der größe beschränkter Bereich in der Seitenmitte

Die Lektüre von FAQ, Hifletexten, etc. hat mir (bislang war ich ausschließlich für die Programmierung zuständig und die Grafikerin hat Skin/SCC/Themendateien geliefert) geholfen, einen Teil der Anforderung zu erfüllen, nämlich das ganze in der Höhe zu zentrieren.
Bei 4 Dingen stehe ich aber komplett an.

Ein Layout mit 3 Spalten sowie Kopf- und Fußzeile soll mittig ausgerichtet sein, eine Höhe von maximal 700px haben und eine Breite von max. 1000px.
Kopf- und Fußzeile sind je 50xp hoch
die linke und die rechte content-spalte 200px breit, die Höhe und Breite mittleren Content-Spalte ergibt sich durch vorhandene Breite - 400 bzw vorhandene Höhe minus 100.

So siehts derzeit aus:
--> http://sso.e-box.at/default.aspx

der Code dazu:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            height: 100%;
        }
        body
        {
            text-align: center; /* horizontal centering for IE Win quirks */
        }
        
        #distance
        {
            width: 1px;
            height: 50%;
            background-color: #fc6;
            margin-bottom: -13.75em; /* half of container's height */
            float: left;
        }      
        
        #inhalt
        {
            vertical-align: middle;
            position: relative;
            text-align: left;
            height: 27.5em;
            width: 45em;
            clear: left;
            text-align: center;
            max-height: 500px;
            width: 600px;
            background-color: #f5f5f5;
        }
        #top
        {
            position: absolute;
            height: 50px;
            width: 100%;
            text-align: left;
            padding: 0px;
            background-color: #ff2222;
        }
        #bottom
        {
            position: absolute;
            height: 50px;
            width: 100%;
            text-align: left;
            padding: 0px;
            bottom: 0px;
            background-color: #ff2222;
        }
        
        #left
        {
            position: absolute;
            height: 100%;
            width: 100px;
            text-align: left;
            top: 51px;
            bottom: 51px;
            padding: 0px;
            background-color: #22ff22;
        }
        #right
        {
            position: absolute;
            height: 100%;
            width: 100px;
            text-align: left;
            top: 51px;
            bottom: 51px;
            right: 0px;
            padding: 0px;
            background-color: #22ff22;
        }
        #content
        {
            position: absolute;
            text-align: left;
            top: 51px;
            bottom: 51px;
            right: 51px;
            bottom: 51px;
            min-width: 200px;
            max-width: 1000px;
            padding: 0px;
            background-color: #2222ff;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="distance">
    </div>
    <div id="inhalt">
        <div id="top">
            AAA</div>
        <div id="left">
            CCC<br />
            CCC<br />
            CCC<br />
            CCC<br />
            CCC</div>
        <div id="content">
             blablabla</div>
        <div id="right">
            EEE<br />
            EEE<br />
            EEE<br />
            EEE<br />
            EEE</div>
        <div id="bottom">
            BBB</div>
    </div>
</body>
</html>
Was ich nicht zusammenbringe ist
1.) dass der blaue Bereich zwischen den beiden grünen ist
2.) dass der grüne bereich nicht untern hinausrutscht. Ist zuviel INhalt da, muß dieser abgeschnitten werden.
3.) dass der blaue Content-Berech einen Scrollbar bekommt, wenn der Inhalt über die verfügbare Höhe hinausgeht, und nur dieser bereich gescrollt wird.
4.) dass der gesamte Bereich mittig ausgerichtet ist.

Vielen Dank für Input im Voraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.01.2011, 22:52
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von DerStefan Beitrag anzeigen
Was ich nicht zusammenbringe ist
1.) dass der blaue Bereich zwischen den beiden grünen ist
2.) dass der grüne bereich nicht untern hinausrutscht. Ist zuviel INhalt da, muß dieser abgeschnitten werden.
3.) dass der blaue Content-Berech einen Scrollbar bekommt, wenn der Inhalt über die verfügbare Höhe hinausgeht, und nur dieser bereich gescrollt wird.
4.) dass der gesamte Bereich mittig ausgerichtet ist.
Hmm, das ist ziemlicher Murks....
Stoff zum lernen:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

zu 1: alle drei Spalten floaten, im bottom clearen
zu 2: siehe 1
zu 3: 'overflow: auto'
zu 4: 'margin: 0 auto' für #inhalt

keinerlei pos. absolute!!

Manfred
Mit Zitat antworten
Sponsored Links
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
iframe Größe bei Laden des Inhalts an dessen Größe anpassen wiseguy Javascript & Ajax 0 24.06.2007 23:04
css - scrollbarer Bereich? timo_81 CSS 11 06.02.2005 10:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:22 Uhr.