Scrollbalken
Franz
- html
Hi Leute,
ich habe einen Frameset mit 2 Spalten und würde gerne beide Seiten mit einem einzigen Scrollbalken im rechten Frame bewegen. Kann man das irgendwie hinkriegen?
Hi Leute,
ich habe einen Frameset mit 2 Spalten und würde gerne beide Seiten mit einem einzigen Scrollbalken im rechten Frame bewegen. Kann man das irgendwie hinkriegen?
Ich frage jetzt nicht warum das so machst und warum du es nicht ganz anders ohne frames löst. Weil Dir das weder weiterhilft, usw... blabla. Aber als Denkanstoß vielleicht trotzdem.
Also einen einfachen weg kenne ich nicht. Mit einem Monstum an Javascript ist es vielleicht möglich (position des einen Frame, ode rder Mouse irgendwie abfragen udn dann das andere bewegen, ...). Aber da stünde meiner meinung nach der Aufand in keinem Verhältnis zum Nutzen. Ich stelel es mir sehr Aufwendig vor.
(Stop using Frames!)
Bin ich ein Idiot. Da habe ich gar nicht dran gedacht. Das müsste ja mit einer Tabelle viel einfacher gehen. Dankeschön für deine Hilfe! :)
Hallo Franz,
Bin ich ein Idiot. Da habe ich gar nicht dran gedacht. Das müsste ja mit einer Tabelle viel einfacher gehen. Dankeschön für deine Hilfe! :)
Bist du sicher, dass du tabellarische Daten in deinen beiden Spalten hast, also Daten, die in einem inhaltlichen Bezug zueinander stehen? Sonst nimm doch lieber ein tabellenloses Spaltendesign.
Gruß Gernot
Ich habe deinen Rat befolgt und habe das Problem mit CSS versucht zu lösen. Es funktioniert auch alles ganz gut, nur im Firefox sind die Spalten alle verschoben und überlappen sich. Was kann man dagegen machen?
Gruß Franz
Hallo Franz,
Es funktioniert auch alles ganz gut, nur im Firefox sind die Spalten alle verschoben und überlappen sich. Was kann man dagegen machen?
Ohne Quellcode kann man da schwer was sagen, es könnte aber am DOCTYPE liegen. Achte mal darauf, welcher in dem von mir genannten Beispiel verwendet wird. Hast du überhaupt einen DOCTYPE deklariert? Befindet sich dein Dokument vielleicht im Quirksmode?
Gruß Gernot
Ich habe das gleiche Prinzip wie in dem Beispiel:
eine Seite mit fester Spaltenbreite als div mit css angepasst und in der Seite mehrer div-bereiche
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm
das hab ich kopiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
was ist ein quirksmode?
Hallo Franz,
wahrscheinlich hast du für die rechte Spalte weniger margin-left eingestellt, als die linke Spalte breit ist.
Mainen painlichen Legasthenikerfehler ('gemainsam') habe ich jetzt auch mal im Titel korrigiert.
Gruß Gernot
Das ist nicht das Problem. Ich habe einen großen div-Bereich, der ist 760 pixel breit, damit man nicht immer scrollen muss. Da drin sollten eigentlich 2 Spalten sein. Der große div bereich ist aber nur ein paar pixel hoch und die Spalten hängen praktisch nach unten über den Rand hinaus.
Hallo Franz,
Das ist nicht das Problem. Ich habe einen großen div-Bereich, der ist 760 pixel breit, damit man nicht immer scrollen muss.
Das verstehe ich nicht: Wenn du eine Breite vorgibst, kommt es doch noch häufiger dazu, dass man scrollen muss, als wenn du das nicht tust und sich alle Elemente in deinem Dokument ihren Platz eigenständig suchen.
Da drin sollten eigentlich 2 Spalten sein. Der große div bereich ist aber nur ein paar pixel hoch und die Spalten hängen praktisch nach unten über den Rand hinaus.
Man müsste halt mal Quellcode von dir sehen, aber ich darf ja dreimal raten, bevor du das tust. Mein letzter Rateversuch ist also: verpass dem 760 Pixel breiten Eltern-Div, in dem Elemente floaten, etwas anderes als overflow:visible, damit sich ein [http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow@title=Block darum herum] formatiert.
"Hidden" solltest du aber in Verbindung mit einer Höhe vermeiden, denn sonst wird der Inhalt, der in dem Container keinen Platz mehr hat, einfach nach unten hin abgeschnitten, was leicht passieren kann, wenn sich der Nutzer eine Mindestschriftgröße in seinem Browser eingestellt hat, die größer ist als was du in deinem Stylesheet vorgesehen hast.
Gruß Gernot
Hier ist der Quelltext. Ich habe erst mal das Grundgerüst fertig und das geht noch nicht einmal richtig. Ich hoffe jemandem fällt was auf, warum das nicht geht.
MfG Franz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TITEL</title>
<style type="text/css">
<!--
body {
color: #000000;
background-color: #CCCCCC;
margin: 0;
padding: 5px;
text-align: center;
}
div#Seite {
text-align: left;
margin: 0 auto;
padding: 0.5em;
width: 760px;
border: 2px solid black;
background-color: #CC0000;;
}
div#Links {
float:left;
width: 150px;
text-align: center;
}
ul#Navigation {
float: left;
text-align: center;
margin: 0;
border: 1px solid black;
width: 150px;
background-color: #CCCCCC;
}
ul#Navigation li {
list-style: none;
border: 1px solid black;
margin: 1px;
}
ul#Navigation a {
display: block;
text-decoration: none;
}
ul#Navigation a:link {
color: black; background-color: #EEEEEE;
}
ul#Navigation a:visited {
color: #666666; background-color: #EEEEEE;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Rechts {
background-color: #EEEEEE;
border: 2px ridge silver;
margin-left: 170px;
padding: 0.5em;
}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="Seite">
<div id="Links">
<ul id="Navigation">
<li><a href="index.html">Startseite</a></li>
<li><a href="index.html">1. Link</a></li>
<li><a href="index.html">2. Link</a></li>
</ul><br><br>
Hier kommt noch ein Besucherzähler her
</div>
<div id="Rechts">Hier kommt dann der Inhalt der Homepage her</div>
</div>
</body>
</html>
Hallo Franz,
also habe ich doch beim letzten Mal richtig geraten!
> div#Seite {
> text-align: left;
> margin: 0 auto;
> padding: 0.5em;
> width: 760px;
> border: 2px solid black;
> background-color: #CC0000;
/* es fehlte, damit sich der rote Block
um die floatenden Kinder erstreckt: */
overflow:hidden;
> }
/* ... */
> ul#Navigation {
> float: left;
> text-align: center;
> margin: 0;
> border: 1px solid black;
> width: 150px;
> background-color: #CCCCCC;
/* das Default-Padding des Firefox willst du bei
deiner Liste wahrscheinlich auch nicht haben. */
padding:0;
> }
Hier nochmal der Link, der das letzte Mal verstümmelt war, damit du das nachlesen kannst.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow
Für Netscape 7 und wahrscheinlich auch ältere Mozillas empfiehlt es sich übrigens, als letztes nach den floatenden Elementen ein <br class="clear" />
einzufügen.
In der Klasse .clear definierst du dann die Eigenschaft clear:left
oder clear:right
, je nachdem, wie deine Elemente davor floaten, denn ansonsten kann es sein, dass Netscape zwar den Block darum formatiert, die floatenden Elemente darin aber nicht anzeigt.
Gruß Gernot
Vielen, vielen Dank.
Hat mir wirklich sehr weitergeholfen.
Ich bin halt doch noch ein Anfänger, was CSS angeht.
LG Franz
Hallo Franz.
was ist ein quirksmode?
Siehe http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=SELFHTML.
Einen schönen Samstag noch.
Gruß, Ashura