div 100% abzgl. rand

[Steffi Pfahler]

hallöschen zusammen,

gibt es eine möglichkeit, ein div-element mit 100% breite abzgl. ein gewissen pixel-breite rechts zu setzen? leider geht margin-right nicht...

weiß jemand rat oder eine andere methode?

merci für eure hilfe!

steffi

[Elya]

Hallo Steffi,

gibt es eine möglichkeit, ein div-element mit 100% breite abzgl. ein gewissen pixel-breite rechts zu setzen? leider geht margin-right nicht...

Was passiert, wenn du dem div überhaupt keine Breite, sondern nur margin-right zuweist?

Gruß aus Köln-Ehrenfeld,

Elya

[Steffi Pfahler]

hy elya,

bringt leider nix... :(

das problem ist, dass ich 2 verschiedene divs synchron scrollen muß - mit den scrollbalken eines 3. divs, das außenrum liegt. daher müssen die beiden inneren divs immer ca. 20 pixel rand rechts aufweisen, damit die scrollbalken des 3. divs sichtbar sind... verständlicher?

trotzdem merci!

steffi

[Elya]

Hallo Steffi,

das problem ist, dass ich 2 verschiedene divs synchron scrollen muß - mit den scrollbalken eines 3. divs, das außenrum liegt. daher müssen die beiden inneren divs immer ca. 20 pixel rand rechts aufweisen, damit die scrollbalken des 3. divs sichtbar sind... verständlicher?

ich schätze, wenn Du ein wenig Beispielcode rausrückst oder einen Link zur Seite, könnte Dir eher geholfen werden. Klingt nicht trivial.

Gruß aus Köln-Ehrenfeld,

Elya

[Steffi Pfahler]

habe leider noch keinen eigenen webspace, drum also der code im folgenden:

---

-- head --

<link rel="stylesheet" type="text/css" href="stylesheet.css">

<script>

function showClient() {  alert('document.body.clientWidth is ' + document.body.clientWidth); }

</script>

<style type="text/css"> <!-- div {         position: absolute; }

#div1 /* scrollbox / {         overflow: auto;         left: 10px;         top: 20px;         width: 100%;         height: 253px;         color: #ffffff; / schriftfarbe wie seitenhintergrund wählen = 'blinder' text */         background-color : #FFFFFF;   scrollbar-face-color : white;   scrollbar-shadow-color : #027508;   scrollbar-highlight-color : white;   scrollbar-3dlight-color : #027508;   scrollbar-darkshadow-color : white;   scrollbar-track-color : white;   scrollbar-arrow-color : #027508; }

#div2 /* top-header */ {         overflow: hidden;         left: 10px;         top: 20px;         width: 100%;         height: 35px;         padding-right : 20px }

#div4 /* content */ {         overflow: hidden;         left: 10px;         top: 55px;   width : 100%;         height:200px;         padding-right : 20px } --> </style>

<script type="text/javascript" src="syncscroll.js"></script> <script type="text/javascript"> <!-- window.onload = function () {         addScrollSynchronization(document.getElementById("div2"), document.getElementById("div1"), "horizontal");         addScrollSynchronization(document.getElementById("div4"), document.getElementById("div1"), "both"); }; //--> </script>

---

-- body --

<div id="div1"> <nobr><img border="0" src="../../spacer_blank.gif" width="1550" height="790">

</nobr> </div>

<div id="div2">  <table border="0" width="1490" cellspacing="0" cellpadding="0" class="data">          <tr>           <td class="header1" width="70" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>          </tr>  </table> </div>

<div id="div4">

<table border="1" width="1490" cellspacing="0" cellpadding="0" class="data">       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>

</table> </div>

[Ingo Turski]

Hi,

habe leider noch keinen eigenen webspace, drum also der code im folgenden:

es gibt genügend (werbefinanzierten) kostenlosen Webspace.

div
{
        position: absolute;
}

ob das tatsächlich nötig ist?

#div1 /* scrollbox */
{
        left: 10px;
        width: 100%;

100% + 10px ?

scrollbar-face-color : white;

Du weißt, daß nicht wenige Browser die Scrollbalken in ihren egenen Farben darstellen? Ob mein hellblau da so paßt?

#div2 /* top-header */
{
        overflow: hidden;

der Rest ist unwichtig? also das, was durch

left: 10px;
        padding-right : 20px

ausgeblendet wird.

#div4 /* content */
{
        overflow: hidden;

hier ebenso? unwichtig?

window.onload = function () {
        addScrollSynchronization(document.getElementById("div2"),

Tja, was diese Funktion macht, kann man nur raten.

<div id="div1">
<nobr><img border="0" src="../../spacer_blank.gif" width="1550" height="790">

was soll ein so breites Bild überhaupt? Und <nobr> muß ja auch nicht sein...

<div id="div2">
<table border="0" width="1490" cellspacing="0" cellpadding="0" class="data">
         <tr>
          <td class="header1" width="70" width="70">header1</td>
          <td class="header1" width="70">header1</td>

doppelt hält besser? ;-) Aber warum nicht ins CSS damit?
Davon abgesehen: wozu die Tabelle? Und warum stets dieselbe Klasse?
#div2 td {} wäre ein geeigneter Selektor.

<table border="1" width="1490" cellspacing="0" cellpadding="0" class="data">

Schon wieder Überbreite?

Alles in allen kann ich mir bei diesem Code nicht vorstellen, was dabei herauskommen soll.

freundliche Grüße
Ingo

[Steffi Pfahler]

danke für deine lehrreichen worte, der source-code an sich ist aber in ordnung und alles hat seine berechtigung - also bitte einfach ignorieren. und falls du trotzdem eine lösung für problem suchen solltest, hier noch mal in kürze für dich die erläuterung:

die header-zellen und contentzellen sollen synchron nach oben/rechts gescrollt werden (analog excel) und liegen beide jeweils in einem div.
ein 3. div (breite 100%) umschließt diese beiden und gibt die scrollbars an. damit diese auch sichtbar sind, müssten die inneren beiden also 100% breite minus 20 px haben... jetzt weiß ich leider nicht, wie ich das im source-code schreibe!

merci!

[Elya]

Hallo Steffi,

danke für deine lehrreichen worte, der source-code an sich ist aber in ordnung

alles hat seine berechtigung - also bitte einfach ignorieren.

na toll...  ;-) Dein problem kann "nur" mit der Optimierung Deines Source-Codes gelöst werden, wenn überhaupt.

ein 3. div (breite 100%) umschließt diese beiden und gibt die scrollbars an. damit diese auch sichtbar sind, müssten die inneren beiden also 100% breite minus 20 px haben... jetzt weiß ich leider nicht, wie ich das im source-code schreibe!

Ein Blockelement (hier: div), das, wie ich oben schrieb, keine Breite zugewiesen bekommt, breitet sich automatisch auf den verfügbaren Raum  (hier:umgebendes div) aus. Dies funktioniert aber imho nur bei nicht-absolut positionierten Elementen. Du siehst also, daß die "lehrreichen Worte" von Ingo durchaus auch eine gewisse "Berechtigung" haben. Du kannst sie natürlich trotzdem ignorieren ,-)

Überlege, ob du auf absolute Positionierung verzichten kannst, um das gewünschte Ergebnis zu erzielen.

Gruß aus Köln-Ehrenfeld,

Elya

[Steffi Pfahler]

sorry, daß ich euch so belege - war auch nicht böse von mir gemeint!!! also hier nochmal mein source-code, die content-zeilen können unendlich viele werden... zur absoluten positionierung: wenn ich auf relative umschalte, verreist es mir dummerweise das layout :(

<html> <head> <meta http-equiv="Content-Language" content="de">

<title>SCROLLABLE TABLE</title> <link rel="stylesheet" type="text/css" href="stylesheet.css">

<style type="text/css"> <!-- div {         position: absolute; }

#div1 /* scrollbox */ {         overflow: auto;         left: 10px;         top: 20px;         width: 100%;         height: 253px;         color: #ffffff;         background-color : #FFFFFF;   scrollbar-face-color : white;   scrollbar-shadow-color : #027508;   scrollbar-highlight-color : white;   scrollbar-3dlight-color : #027508;   scrollbar-darkshadow-color : white;   scrollbar-track-color : white;   scrollbar-arrow-color : #027508; }

#div2 /* top-header */ {         overflow: hidden;         left: 10px;         top: 20px;         width: 100%;         height: 35px;         padding-right : 20px }

#div4 /* content */ {         overflow: hidden;         left: 10px;         top: 55px;   width : 100%;         height: 200px;         margin-right : 20px } --> </style>

<script type="text/javascript" src="syncscroll.js"></script> <script type="text/javascript"> <!-- window.onload = function () {         addScrollSynchronization(document.getElementById("div2"), document.getElementById("div1"), "horizontal");         addScrollSynchronization(document.getElementById("div4"), document.getElementById("div1"), "both"); }; //--> </script> </head>

<body>

<div id="div1"> <nobr><img border="0" src="../../spacer_blank.gif" width="1550" height="790">

</nobr> </div>

<div id="div2">  <table border="0" width="1490" cellspacing="0" cellpadding="0" class="data">          <tr>           <td class="header1" width="70" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>           <td class="header1" width="70">header1</td>          </tr>  </table> </div>

<div id="div4">

<table border="1" width="1490" cellspacing="0" cellpadding="0" class="data">       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>       <tr>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>        <td class="content" width="70">content</td>       </tr>      </table> </div>

</body>

</html>

[Ingo Turski]

Hi,

sorry, daß ich euch so belege - war auch nicht böse von mir gemeint!!! also hier nochmal mein source-code,

wozu? der einzige - aber vermutlich auch nicht relevante - Unterschied ist margin-right anstelle von padding-right für #div4

zur absoluten positionierung: wenn ich auf relative umschalte, verreist es mir dummerweise das layout :(

wieso überhaupt Positionierung?

#div1 {left: 10px; top: 20px;} -> margin:20px 0 0 10px;
#div2 {left: 10px; top: 20px;} -> margin:0;
#div4 {left: 10px; top: 55px; margin-right : 20px;} -> margin:0 20px 0 0;

Wobei ich jedoch immer noch nicht berücksichtigen kann, was addScrollSynchronization() evtl. noch erfordert, da ich auf syncscroll.js keinen Zugriff habe.

freundliche Grüße
Ingo

[Steffi Pfahler]

synscroll.js beinhaltet folgendes:

// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement) {
        return function () {
                if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
                        oElement.scrollLeft = event.srcElement.scrollLeft;
                if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
                        oElement.scrollTop = event.srcElement.scrollTop;
        };

}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
        removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
        fromElement._scrollSyncDirection = direction;
        fromElement._syncTo = toElement;
        toElement.attachEvent("onscroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
        if (fromElement._syncTo != null)
                fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

fromElement._syncTo = null;;
        fromElement._syncScroll = null;
        fromElement._scrollSyncDirection = null;
}

[Ashura]

Hallo Steffi Pfahler.

<td class="content" width="70">content</td>

Wo soll das hinführen? Wenn die Frage erlaubt ist: Was gedenkst du hier darzustellen?

Gruß, Ashura

[Steffi Pfahler]

am besten wäre es natürlich, wenn ich die verfügbare anzeige-fläche des browsers auslesen könnte und davon jeweils 20px abziehen könnte - weiß jemand, wie das geht?