• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Scrollbares <td>

Status
Für weitere Antworten geschlossen.
S

Serious

Neues Mitglied
Hallo liebes HTML-Volk,

ich bin Momentan dabei mir durch diverse Tutorials HTML beizubringen.

Nun habe ich folgendes Problem:
Ich habe mir mit Hilfe einer Tabelle folgendes Layout erstellt:
CSS:

Code: 
table
{
    border-style:    solid;
    border-width:    1px;
    border-color:    000000;
    border-spacing: 0px;
    height:            100%;
    width:            100%;
}

td#header
{
    border-style:    solid;
    border-width:    1px;
    border-color:    000000;
    border-spacing:    0px;
    height:            80px;
    width:            100%;
}

td#content
{
    border-style:    solid;
    border-width:    1px;
    border-color:    000000;
    border-spacing:    0px;
    height:            100%;
    width:            100%;
    overflow:        auto;
}

td#bottomline
{
    border-style:    solid;
    border-width:    1px;
    border-color:    000000;
    border-spacing:    0px;
    height:            20px;
    width:            100%;
}

div#content2
{
    overflow:        scroll;
    width:            100%;
    height:            100%;
}


Code: 
<html>

    <head>
        <title>test</title>
        <link "style=text/css" href="Style.css" rel="stylesheet"/>
    </head>
    
    <body>
        <table>
        
            <tr>
                <td id=header>
                    Header
                </td>
            </tr>
            
            <tr>
                <td id=content>
                    <div id=content2>
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                        Content
                        <br />
                        <br />
                        <br />
                    </div>
                </td>                
            </tr>
            
            <tr>
                <td id=bottomline>
                    Bottomline
                </td>                
            </tr>
            
        </table>
    </body>

</html>

nun will ich aber, dass mein Layout immer genau über einen Bildschirm geht, d.h. der Scrollbalken rechts außen soll verschwinden. Stattdessen soll der Inhalt des Content-tds scrollbar sein.

Mein Problem ist, dass sich das content-td momentan immer der größe des Inhalts anpasst und das Layout somit über einen Bildschirm hinaus geht...

ich hoffe hier kann mir geholfen werden.
Danke schonmal im Vorraus!

Simon
 
Zuletzt bearbeitet von einem Moderator:
Bitte verwende demnächst die Code-Tags des Forums, damit der Code übersichtlicher und besser zu lesen ist.

Mal ganz allgemein:
Ich weiß zwar nicht, welche Tutorials du liest, aber besonders aktuell können die nicht sein, denn mit Tabellen macht man eigentlich keine Layouts mehr. Ich sage voraus, dass Efchen hier bald auftauchen und es dir genauer erläutern wird. :mrgreen:

Zu deiner Frage:
Das geht mit CSS: overflow: auto; musst du dem td geben, außerdem eine Höhe, dann geht das mit den Scrollbalken.
 
ja, ich weiß, dass das Layout per Tabellen nicht mehr besonders aktuell ist, habe meine Testseite aber so begonnen und würde gern dieses eine Problem noch lösen. Nächstes mal werde ich das Layout wohl gleich mit css-boxen machen.

mein Problem hier ist, dass ich dem <td> keine feste größe zuweisen will, es soll den verfügbaren Platz zwischen Header und Bottomline füllen...
 
Serious schrieb:
ja, ich weiß, dass das Layout per Tabellen nicht mehr besonders aktuell ist
Zum Vergrößern anklicken....
Layout mit Tabellen zu machen war ein Hack aus dem letzten Jahrtausend, aus einer Zeit, in der es keine eigene Sprache gab, um Layout und Design einer Webseite festzulegen. Diese Sprache wurde aber auch schon im letzten Jahrtausend begonnen und ist schon seit vielen Jahren etabliert und heißt CSS.

Nächstes mal werde ich das Layout wohl gleich mit css-boxen machen.
Zum Vergrößern anklicken....
Aber vergiss nicht HTML richtig zu lernen. Das Tutorial, das Dir Layout mit Tabellen beibringt, kannst Du dabei gleich in die Tonne klopfen. Mit HTML legt man nur die Bedeutung des Inhalts fest, unabhängig vom Aussehen. Das macht man dann rein in CSS. Beides wird sauber voneinander getrennt. Man macht auch kein "Layout mit divs", weil das oft gesagt wird.

mein Problem hier ist, dass ich dem <td> keine feste größe zuweisen will, es soll den verfügbaren Platz zwischen Header und Bottomline füllen...
Zum Vergrößern anklicken....
Wenn Du einem Element keine Größe gibst, kann das Element auch keine Scrollbalken erzeugen. Um Scrollbalken zu erzeugen, muss der Browser wissen, ab welcher Größe diese kommen sollen. Man kann Größen aber nicht nur in Pixel angeben, sondern auch in % oder em. Das erste orientiert sich an der Größe des Elternelements, das zweite an der Größe des Fonts.

Gruß,
-Efchen
 
Du willst so eine Art 100% Höhe minus Höhe von Header und Bottomlinie?
Das ist ein etwas komplexeres Unterfangen, welches der Internet Explorer, soweit ich weiß, nur bei Gebrauch von "expressions" hinbekommt, die wiederum nicht funktionieren, wenn JavaScript abgeschaltet ist.
 
Wenn Höhe von Header und Bottomline auch in % angegeben sind, ist das in jedem Browser möglich. Ansonsten würde ich das lieber gleich vergessen. Es muss auch nicht oben und unten immer etwas fest stehen bleiben, das ist reine Platzverschwendung. Die Bildschirme werden ja leider zunehmends breiter anstatt höher, leider taugt das nur fürs Fernsehen, nicht aber für alles andere wie WWW oder Entwicklung. Und auf nem Eee PC würden mir solche feststehenden Elemente noch mehr stinken.
 
Hi Efchen und danke schonmal.

ich habe dem <td> einen prozentualen Wert zugewiesen. 100%. Da der Header und die Bottomline beide eine feste in px angegebene größe haben, sollte die Content-Zeile somit ja den restlichen, verbleibenden Platz bekommen. Dies ist auch so.
Nun habe ich innerhalb dieses <td>s eine <div> erzeugt mit
height: 100%;
width: 100%;
overflow: scroll;

So, nun meine Theorie:D:

dem content-td ist der restliche Platz zwischen header und bottomline zugewiesen, dem div ist 100% seines parents zugewiesen. also, sollte es doch so funktionieren wie ich es mir denke...

Aber nochmal etwas anderes:

Wenn man sein Layout brav mit css erstellt, wie macht man es dann wenn nicht mit <div>?

Gruß
simon

edit:

Efchen schrieb:
Es muss auch nicht oben und unten immer etwas fest stehen bleiben, das ist reine Platzverschwendung.
Zum Vergrößern anklicken....

in meinen Header soll ein Logo, welches Leider eine feste Größe hat, gleiches gilt für die Bottomline
 
Zuletzt bearbeitet:
du wirst es nicht glauben aber du kannst css styles auch anderen elementen zuweisen als divs!
wenn du eine liste hast dann nimmst du ul und li
wenn du einen link hast nimmst du ein a
wenn du ein bild hast nimmst du ein img
und alle kannst du mit css bearbeiten!
Gruß KY
 
Serious schrieb:
Wenn man sein Layout brav mit css erstellt, wie macht man es dann wenn nicht mit <div>?
Zum Vergrößern anklicken....

Unter sinnvoller Nutzung der zur Verfügung stehenden HTML-Elemente.
Überschriften sind <h1> bis <h6>, Navigationen sind meistens Listen <ul> oder <ol>, Text steht in Absätzen <p>, mehrere Absätze werden häufig mit <div> gruppiert (Gruppieren ist sein übliches Einsatzgebiet, nichts anderes) usw.

EDIT: Ok, ky_fr34k war schneller, aber bei mir steht mehr. :-P
 
Serious schrieb:
ich habe dem <td> einen prozentualen Wert zugewiesen. 100%. Da der Header und die Bottomline beide eine feste in px angegebene größe haben, sollte die Content-Zeile somit ja den restlichen, verbleibenden Platz bekommen. Dies ist auch so.
Zum Vergrößern anklicken....
Hmmm...ich hätte dagegen gesetzt, dass es so sein könnte.

Nun habe ich innerhalb dieses <td>s eine <div> erzeugt
Zum Vergrößern anklicken....
Wozu? Gehörst Du auch zu den Leuten, die ihre Geschenke zweimal einwickeln?
<div> ist dazu da, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. Was willst Du hier gruppieren? Du sagst, Du willst das aktuelle Problem erstmal angehen. Aber so in der Form brauchst Du das nie wieder, es funktioniert alles anders und Du bringst Dir hier Vorgehensweisen bei, die Dich später nur behindern werden. Kurzum, Du schlägst den falschen Weg ein. Einen steinigen.

Wenn man sein Layout brav mit css erstellt, wie macht man es dann wenn nicht mit <div>?
Zum Vergrößern anklicken....
Ich verstehe diese Frage eigentlich überhaupt nicht. Sie ist ein Widerspruch in sich: Vor dem Komma sagst Du, Du machst Layout mit CSS, hinter dem Komma sagst Du, Du machst Layout mit div. div ist aber HTML. Aber eben hast Du noch gesagt, Layout macht man mit CSS.

Layout macht man mit CSS. Das heißt, Du gibst den Elementen, die Du in Deiner Seitenstruktur festgelegt hast, gewisse Eigenschaften. CSS-Eigenschaften kann man aber prinzipiell jedem Element geben. Das ist so wie oben mit Deiner Tabellenzelle. Du hast eine Zelle und packst sie nochmal in ein anderes Element, als hättest Du Angst, die Tabellenzelle zu stören oder anzufassen :-)

Basis für ein Layout mit CSS ist ein valider, semantisch korrekter Aufbau mit HTML. Das sind aber zwei Paar Schuhe, nicht umsonst spricht man auch von der "Trennung von Inhalt und Layout". Man kann das weitestgehend auch gedanklich trennen, vom Code her auf jeden Fall. Es ist auch einfacher, zuerst die Struktur in HTML festzulegen und erst dann Aussehen mit CSS zu definieren.

Es gibt eigentlich überhaupt keinen Grund für "Layout mit div". Das ist semantisch gesehen genau der selbe Blödsinn wie "Layout mit Tabellen".

-Efchen

Nachtrag:
Serious schrieb:
in meinen Header soll ein Logo, welches Leider eine feste Größe hat, gleiches gilt für die Bottomline
Zum Vergrößern anklicken....
Wenn Du das auch "leider" findest, warum änderst Du es dann nicht? Und jetzt bitte nicht "der Kunde will es so". Der Kunde hat keine Ahnung und braucht einen kompententen Berater. Und dann redet man ihm das aus.

Nachtrag 2:
Meine Frage ist aber wie ich grundsätzlich das Grundgerüst der Seite festlege.
Zum Vergrößern anklicken....
Idealerweise schreibst Du erst Deinen Inhalt. Dann zeichnest Du ihn mit HTML aus. Dabei hat man dann das Layout groß im Hinterkopf. Wenn alles ausgezeichnet ist, macht man das Stylesheet und damit das Layout. Wenn man gut ist, gibts zu dem Zeitpunkt keinen Grund mehr, noch einmal in die HTML-Datei zu fassen.
 
Ich will einen Header, links ein Menü, rechts den Content und eine Bottomline
Zum Vergrößern anklicken....
So zum Beispiel:
Kopf: h1 (ist ja die Seitenüberschrift)
Menü: ul (Weil's ja eine Liste ist)
Inhalt: div zum Gruppieren von Absätzen u.A. (im div dann korrekt ausgezeichnete Inhalte)
Fuss: p (ist ja im Normalfall Text)
 
Serious schrieb:
Ich will einen Header, links ein Menü, rechts den Content und eine Bottomline
Zum Vergrößern anklicken....

Der Header wird wohl <h1> sein, das entweder Text enthält oder ein <img> umschließt oder Text enthält und ein Hintergrundbild hat; das Menü ist eine Liste <ul> oder <ol> mit Listenpunkten, die Links enthalten, darin und was eine "Bottomlinie" ist, hatte ich vorhin schon nicht verstanden. :mrgreen:

EDIT: Mann, in dem Thread habe ich heute kein Glück, ich geh jetzt... ^^

EDIT2: Ich sehe es gerade erst: Drei Beiträge genau zur gleichen Zeit, das ist doch nicht normal. ;ugl
 
Zuletzt bearbeitet:
Die Bottomlinie ist üblicherweise das unsinnige Ding, in dem nichts steht außer dem hübschen C im Kreis. Reine Platzverschwendung.

@ingoS: Du hast doch mein Erscheinen voraus gesagt, tut mir leid, wenn ich Dir jetzt die Show stehle ;-)
 
Ja, aber hier ist sie nicht am unteren Rand des Viewports fixiert. DAS ist Platzverschwendung. Alles andere ist wurscht.

ingoS schrieb:
Ich sehe es gerade erst: Drei Beiträge genau zur gleichen Zeit, das ist doch nicht normal.
Zum Vergrößern anklicken....
Nur, dass Ihr zwei ert Stunden nach mir angefangen habt zu tippen ;-)
 
ok, ich werde mein Tabellenlayout erstmal über den Haufen schmeißen und versuchen es mit css umzusetzen.
Danke schonmal für die vielen Tips!

wenn ich soweit bin werde ich hier vielleicht mal einen link reinstellen, obwohl ich befürchte, dass ich hier zerfleischt werde wenn ihr den Code seht ;ugl.
Aber wie gesagt, ich bin halt blutiger anfänger...

Simon

Efchen schrieb:
Wenn Du das auch "leider" findest, warum änderst Du es dann nicht? Und jetzt bitte nicht "der Kunde will es so". Der Kunde hat keine Ahnung und braucht einen kompententen Berater. Und dann redet man ihm das aus.
Zum Vergrößern anklicken....

von "Kunden" kann hier keine Rede sein, ich mach das nur in meiner Freizeit. Der Kunde bin höchstens ich :-)
 
Zuletzt bearbeitet:
Serious schrieb:
ok, ich werde mein Tabellenlayout erstmal über den Haufen schmeißen und versuchen es mit css umzusetzen.
Aber wie gesagt, ich bin halt blutiger anfänger...
Zum Vergrößern anklicken....

Drum solltest Du mit HTML anfangen und nicht mit CSS. Die meisten Umsteiger oder auch Anfänger stürzen sich nämlich als erstes aufs Layout und CSS, bekommen damit so ihre Probleme und haben obendrein noch nichtmal ne fehlerfreie und semantisch sinnvolle Basis in HTML. Sie lernen dann auf sieben Baustellen gleichzeitig, stoßen auf 25 Probleme, von denen 13 noch zu hoch für sie sind.

Es mag ja exotisch klingen, nicht mit dem Layout, sondern mit dem Inhalt anzufangen, aber ich bin nach wie vor der Überzeugung, dass das die einfachere und logischere Methode ist, und es gibt auch einige, die es auf die Weise gelernt haben, die waren begeistert.

Jedenfalls viel Erfolg, auf unsere Hilfe kannst Du zählen!
-Efchen
 
also, jetzt nerv ich euch nochmal ein bißchen :mrgreen:

Code: 
body
{
    background-color:     000000;
    padding:                  0;
    margin:                    0;
    
}

h1
{
    height:                  80px;
    overflow:               hidden;
    text-align:            center;
    border:                        0;
    margin:                0;
    padding:            0;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:ffffff;
    margin-left:        151px;
}

ul
{
    border-right-style:    solid;
    border-right-width:    1px;
    border-right-color:    ffffff;
    width:                152px;
    height:                100%;
    padding-top:        30px;
    padding-bottom:        0;
    padding-left:        0;
    padding-right:        0;
    list-style-type:     none;
    margin:                0;
    
}

li
{
    border-style:        solid;
    border-width:        1px;
    border-color:        000000;
    width:                150px;
    margin:                0;
    padding:            0;
    list-style-type:     none
}

#content
{
    float:                 right;
    color:                ffffff;
    border-style:        solid;
    border-width:        1px;
    border-color:        00ff00;
}

Code: 
<html>

    <head>
        <title>test</title>
        <link "style=text/css" href="Style.css" rel="stylesheet"/>
    </head>
    
    <body>
        <h1>
            <image src="./background/logo_header.jpg"></image>
        </h1>
        
        <ul>
            <li>
                <image src="./background/btn_team_black.jpg"></image>
            </li>
            
            <li>
                <image src="./background/btn_music_black.jpg"></image>
            </li>
            
            <li>
                <image src="./background/btn_graphics_black.jpg"></image>
            </li>
            
            <li>
                <image src="./background/btn_walls_black.jpg"></image>
            </li>
            
            <li>
                <image src="./background/btn_kontakt_black.jpg"></image>
            </li>
            
            <li>
                <image src="./background/oma-logo-menue.jpg"></image>
            </li>
        </ul>
        
        <div id=content>
            test
        </div>
    </body>

</html>

soweit, so gut. habe jetzt also einen header mit <h1> erstellt und ein menue mit <ul>. jetzt fehlt als nächstes ein <div> mit dem Inhalt.

und hier kommt meine Frage:

wie schaffe ich es, dass mein div-Kontainer rechts nebem meiner <ul> angezeigt wird und nicht unterhalb?

Gruß
Simon
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben