Dagens udfordring: Gennemsigtig scrollbar med 100% tekst !!!

ups - beklager jeg glemte at lave linjeskift i min kode :-(

HER KOMMER MIT SPM LIDT MERE LÆSEVENLIGT:

******************************************************

Jeg har DIV1 som er gennemsigtigt - derfor er scrollbaren på
dette lag også gennemsigtigt. Det synes jeg ser fedt ud! MEN:
Alt tekst, der nu indsættes i DIV1 bliver OGSÅ gennemsigtigt
- det er knap så fedt.

Udfordringen ligger altså i at kunne indsætte tekst & billeder
i DIV1 som skal vises med opacity:100% !!!

Jeg kan ikke placere DIV2 direkte ovenpå DIV1 med absolute placering,
for så kan jeg jo ikke længere bruge min fede gennemsigtige scrollbar
fra DIV1 til at scrolle indholdet i DIV2 - eller kan man ????

Se f.eks. nedenstående eksempel (som ikke virker efter hensigten):


<div id="transparentLayer" style="position:absolute; width:320px;
height:450px; z-index:2; left:10px; top:10px; overflow:auto;
padding:5px; border:1 solid #2372DD; background:#17488B; filter:
Alpha(Opacity=30);">

<div id="nonTransparentLayer" style="color:black; filter:Alpha(Opacity=100);">
jkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>
jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>
k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj
<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj
<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>
jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl
<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl
<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>
kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj
<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkl
</div>

</div>


Er der ikke nogen kloge hoveder, der kan knække denne nød ????

Er det ikke nemmere at farve scroll-baren i samme farve som baggrunden... så virker den da lidt gennemsigtig.

Punkt 1) Du skal have position:absolute på nonTransparentLayer for at kunne sætte opacity
Punkt 2) Du kan godt 'overskrive' opacity, men aldrig med mere en det overlæggende lag, da den arver opacity. Hvis du forsøgsvist sætter opacity til 50 kan du se at nonTL for en opacity svarende til 15.
Beklager, men sådan er livet så hårdt.

Hvad hvis opasity sættes til 320 eller sådan noget...

dutter ikke. max er 100.

øv øv øv - det må da kunne lade sig gøre på en eller anden måde :-(

nstenberg >>>
Der ligger et billede i baggrunden, som skal kunne ses !

HVorfor have <div> ind i <div>??

DU kan jo lave en scroll funktion uden for et <div>, der så kan være trans. (altså ikke i udsøgt dame-/herretøj)

nikolajdu >>

Mener du jeg ikke skal benytte den indbyggede scrollbar i Explorer, men i stedet bruge en
javascript scrollbar ????

Ellers må du lige uddybe hvad du mener?

Jeg ved godt at hvis jeg laver min egen scrollbar med et javascript kan jeg ændre på
udseendet som jeg har lyst til, men jeg kunne nu godt tænke mig at bruge den
indbyggede scrollbar i Explorer !

jeg har lavet noget bras der virker, omend en smule sløvt.
det er rimelig patchy men i en snæver vending....
www.dsr.kvl.dk/~maddog/232309.html

brug flash....
eller du kan bruge
style="filter:alpha(opacity=30);backgroundColor='#8D8D8B'"
onMouseOut="this.style.backgroundColor='#8D8D8B',this.filters.alpha.opacity='30'"
onMouseOver="this.style.backgroundColor='#8D8D8B',this.filters.alpha.opacity='100'"
men det er et kompromis

marz*

se eksempel
http://www.artexibit.com/nyt/sdarkhead%20new5.htm

ok maddog det virker jo fint :)

jeg synes idéen var god og problemet fascinerende, så jeg ofrede lige lidt tid på det.
sådan som det er nu tager den kun højde for scrolbar i højden, men det kan sagtens tilpasses bredden også.
det skulle være en smal sag nu hvor du har 'ideen' til hvordan det løses.

marz* >>>
Jeg tror du har misforstået mit spm ?!?

=maddog= >>>

Jeg er dybt imponeret :-)

Jeg sidder lige og gennemgår scriptet og prøver på at forstå hvad der sker.
Hvad betyder dette i stylesheet´et:
-moz-opacity:0.300;

?!?

=maddog= >>>

Det virker jo fuldstændig som det skal, men der er en del elementer i scriptet, som jeg
ikke fatter en brik af (jeg er ikke særlig stærk til javascript).

Jeg kunne selvfølgelig godt bare gå videre med mit liv og være glad for at problemet
er løst, men det irriterer mig altid grænseløst, når der er noget jeg ikke forstår.
Jeg tænkte derfor på om jeg A) måtte ringe til dig på et tidspunkt eller B) snakke med dig
over ICQ eller C) kunne overtale dig til at kommentere hvad der helt præcist sker i
scriptet ?!?

Tusind tak for hjælpen :-)

a) 38797546
b) 63320874
c) selvfølgelig
no problemos
-moz-opacity er et forsøg på at få det til at virke i NS6. Men det gik ikke så godt endda. Jeg kæmper stadig med den
del af det.

jeg poster lige koden her, så den ikke forsvinder hvis ovenstående link en dag ikke virker mere...

**********************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <script>
    onload=function() {
        if (!document.all && document.getElementById) { // vi bliver nød til at fjerne contentholder i NS6. desværre også bygge styles ind.
          topnode = document.getElementById('contentHolder').parentNode;
          nd = document.getElementById('nonTransparentLayer').cloneNode(true);
          nd.style.overflow = 'auto';
          nd.style.width = '320px';
          nd.style.height = '450px';
          nd.style.padding = '5px';
          nd.style.border = '1px';
          nd.style.backgroundColor = '#bbcaf3'; // farve valgt så det ligner IE.
          topnode.removeChild(document.getElementById('contentHolder'));
          topnode.appendChild(nd);
        } else { // bare derudaf. vi overskrive onscroll fra det gennemskinnelige lag og binder det til style.top på indholdet
          document.getElementById('balloon').style.height=document.getElementById('nonTransparentLayer').clientHeight;
          document.getElementById('transparentLayer').onscroll = function() {
              document.getElementById('nonTransparentLayer').style.top=-document.getElementById('transparentLayer').scrollTop;
          }
        }
    }
    </script>
    <style>
    #contentHolder {
        width:320px; height:450px; z-index:-1;
        overflow:hidden;
    }
    #transparentLayer {
        position:absolute;
        width:320px; height:450px; z-index:1;
        overflow:auto;
        padding:5px; border:1 solid #2372DD;
        background:#17488B;
        filter: Alpha(Opacity=30);
    }
    #nonTransparentLayer {
        position:absolute;
        width:300px; height:450px; z-index:2;
        color:black;
    }
    </style>
    <title>Untitled</title>
</head>

<body>

<!-- Top most layer. Not absolutely positionen. How wonderfull -->
<div id="contentHolder">

<!-- This layer must be inflated to the same clientHeight as the actual content. See the onload handler -->
<div id="transparentLayer">
<div id="balloon"></div>
</div>

<!-- The actual content of the layer -->
<div id="nonTransparentLayer">
jkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>
jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>
k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj
<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj
<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>
jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkljkljkl
<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl
<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj<BR>kl<BR>j<BR>k<P>
kljkl<P>jkl<P>kl<P>jkljkljkl<P>kjklj<BR>jkjkl<BR>jklj<BR>klj<BR>klj
<BR>kl<BR>j<BR>k<P>kljkl<P>jkl<P>kl<P>jkl
</div>

</div>

</body>
</html>

maddog >>>

Nu prøver jeg lige - jeg håber du stadig abbonerer på dette spm, så du ser denne melding !!!

Jeg har ladet mig fortælle at der er problemer med løsningen i IE 4.0 + 5.0. Har ikke selv haft mulighed for at teste det, men har du umiddelbart en ide om hvorfor det ikke fungerer i disse versioner ?

Er det overhovedet muligt at få det til at fungere fra version 4.0 IE ???

problemet hos kunden er at scrollbaren bliver vist, men man kan ikke scrolle med den ?!?

ie5 bør ikke være noget problem, men ie4 stejler over getElementById.
man kan jo ikke have mere end en version af IE installeret, så jeg har ikke mulighed for at tjecke, men du kan prøve:
          } else if (document.all){ // bare derudaf. vi overskrive onscroll fra det gennemskinnelige lag og binder det til style.top på indholdet
          document.all['balloon'].style.height=document.all['nonTransparentLayer'].clientHeight;
          document.all['transparentLayer'].onscroll = function() {
              document.all['nonTransparentLayer'].style.top=-document.all['transparentLayer'].scrollTop;
          }
        }
vi har jo taget højde for NS6 og kan derfor skyde en hvid pil efter god kodepraksis og anvende document.all.

takker - jeg vender lige tilbage med en melding, når jeg har fået afprøvet din script-ændring !

:-)

maddog >>>

Mener du således at det samlede script ser sådan ud:



onload=function() {
if (!document.all && document.getElementById) {
// vi bliver nød til at fjerne contentholder i NS6. desværre også bygge styles ind.
    topnode = document.getElementById('contentHolder').parentNode;
    nd = document.getElementById('nonTransparentLayer').cloneNode(true);
    nd.style.overflow = 'auto';
    nd.style.width = '100%';
    nd.style.height = '100%';
    nd.style.padding = '10px';
    topnode.removeChild(document.getElementById('contentHolder'));
    topnode.appendChild(nd);
    } else if (document.all){ // bare derudaf. vi overskrive onscroll fra det gennemskinnelige lag og binder det til style.top på indholdet
          document.all['balloon'].style.height=document.all['nonTransparentLayer'].clientHeight;
document.all['transparentLayer'].onscroll = function() {
document.all['nonTransparentLayer'].style.top=-document.all['transparentLayer'].scrollTop;
}
}
    else {
// bare derudaf. vi overskrive onscroll fra det gennemskinnelige lag og binder det til style.top på indholdet
    document.getElementById('balloon').style.height=document.getElementById('nonTransparentLayer').clientHeight;
    document.getElementById('transparentLayer').onscroll = function() {
    document.getElementById('nonTransparentLayer').style.top=-document.getElementById('transparentLayer').scrollTop;
    }
}
}

faktisk skal hele den forrige else klynge skiftes ud med den nye else if. som du kan se er de også påfaldende ens :D.

øh - sådan her...



onload=function() {
if (!document.all && document.getElementById) {
// vi bliver nød til at fjerne contentholder i NS6. desværre også bygge styles ind.
    topnode = document.getElementById('contentHolder').parentNode;
    nd = document.getElementById('nonTransparentLayer').cloneNode(true);
    nd.style.overflow = 'auto';
    nd.style.width = '100%';
    nd.style.height = '100%';
    nd.style.padding = '10px';
    topnode.removeChild(document.getElementById('contentHolder'));
    topnode.appendChild(nd);
    } else if (document.all){ // bare derudaf. vi overskrive onscroll fra det gennemskinnelige lag og binder det til style.top på indholdet
          document.all['balloon'].style.height=document.all['nonTransparentLayer'].clientHeight;
document.all['transparentLayer'].onscroll = function() {
document.all['nonTransparentLayer'].style.top=-document.all['transparentLayer'].scrollTop;
}
}
}




???

Ja sådan cirka. Kan ikke lige prøvekøre det p.t. Tilgiv mig

helt i orden !

Men jeg har stadig problemer med scriptet. Jeg bruger det på denne side:

http://new.brio-as.dk (vælg engelsk version)

kunden siger at scrollbaren i IE4 og IE5 ikke fungerer - den bliver vist korrekt, men man kan ikke scrolle med den. Det er som om at den ligger under et andet lag og man derfor ikke kan "fange" scrollbaren.

har du umiddelbart en idé om hvor problemet kan være henne ???

prøv at remarke linjen i onscroll og sæt en alert ind (advarsel! pestilens!) for at se om den overhovedet fanger den skide scrollbar.
document.all['transparentLayer'].onscroll = function() {
alert('scroll active');
//document.all['nonTransparentLayer'].style.top=-document.all['transparentLayer'].scrollTop;
}
hvis den kan registrere at den scroller får du en alert og så er det linjen inde i der er gal, men hvis ikke er inten onscroll ikke defineret for IE4 eller også er lagene humske. under alle omstændigheder kan det løses med en ad hoc løsning a lá NS6 modellen.

det ser bare godt ud! hammer design!

takker :-)

se evt. her:
http://www.eksperten.dk/spm/244110

=maddog= >>>

det er da klart du kan få teksten til at være 100%, når det sidste lag ikke er gennemsigtig... jeg er godt klar over at du har gjort det klart i dit script, men der må da være en måde at lave en tabel gennemsigtig uden at taksten bliver det, oder was??

nej det er der ikke. opacity arves nedad ligesom andre styles.

jeg har selv fået det til at virke nu, uden et ekstra lag, jeg har kun sat tekste som 'div' med 'position:relative;'

sådan her?
<div style="position:relative;filter:alpha(Opacity=50);height:60px;overflow:auto;background:red;">
fff<br>
fff<br>
fff<br>
fff<br>
fff<br>
fff<br>
fff<br>
</div>

På min computer bliver teksten stadig opaque.

css:

****************************************************

body {
    position: relative;
  background-image: url("gfx/mittel.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0.0 0;
    font-family: verdana, arial, sans-serif;
    Text: Link;
    margin: 10px 20px 10px 20px;
   
    }
center {
    position:relative;
    }
p {
    position:relative;
    }
h1 {
    color: #000000;
    font-size: 14;
    text-indent: 0px;
    font-family: verdana, arial, sans-serif;
    }
    table {
    filter: Alpha(Opacity=50);
}
h2 {
    color: #000000;
    font-family: arial, serif;
    font-size: 1em;
    text-indent: 55px;
}
h6 {
    position:relative;
    color: #000000;
    font-family: verdand, arial, serif;
    font-size: 12;
    text-indent: 55px;
}

td {
  font-size: 14;
    color: #000000;
    font-family: verdana, arial, serif;

}
#k1 {
    color: #000000;
    font-family: arial, serif;
    font-size: 16;
    text-indent: 55px;
}
g {
  color: #000000;
    font-family: arial, serif;
    font-size: 10;
    text-indent: 55px;}
#pr {
    position:relative;}
#newsbil {
    float:right;
    width: 0%;
    position:relative;
    }
th {
  font-size: 14;
    text-indent: 5px;
    color: #000000;
    font-family: verdana, arial, serif;
}

A:link {color : #37536d;
}
A:visited {color : #2a4054;
}
A:active {color : #2a4054;
}
A:hover {color : #387aa8;
}

************************************************************

html

***************************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="mittel-style.css">
<!---stor tabel--->   
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td width="200">
<!---nyheds tabel start--->
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td colspan="3" background="gfx/tabel/tabel-top-1.jpg" width="189" height="19"><center>.:NYHEDER:.</center>
<tr><td background="gfx/tabel/tabel-mittel-1-1.jpg" width="2">
<td background="gfx/tabel/tabel-mittel-2-1.jpg" width="178">
<div Id="pr">

<div Id="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>19/6-03</i> - Så kom der en lille opdatering igen, igen. Hvis jeg ellers kan tage mig sammen, kommer der snart en version 2<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div Id="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>14/5-03</i> - Så kom der en lille opdatering på den grafiske del <br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div Id="newsbil">
<img src="gfx/v.1.jpg" alt=""></div><i>10/5-03</i> - Så kom Version 1.0 på, håber i
kan lide det<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div Id="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>8/5-03</i> - Endnu en lille opdate... ikke det store der sker men det går da fremad<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div Id="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>4/5-03</i> - Endnu en lille opdate :)<br><br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div id="newsbil"><img src="gfx/upload.jpg" alt=""></div><i>3/5-03</i> - Så er siden kommet op og køre, dog kun beta i nu og alle knapper virke ikke helt i nu, men kommer snart...
<br>
</div>
</td><td background="gfx/tabel/tabel-mittel-3-1.jpg" width="2">
<tr><td colspan="3" height="19" background="gfx/tabel/tabel-end-1.jpg"></td>
</table>
<!---nyheds tabel slut--->
</td>
<!---stor tabel midtvejs--->
<td align=top>
<!---velkommen tabel start---><center>
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td colspan="3" width="400" background="gfx/tabel/tabel-top-2.jpg" height="19"><p>.:VELKOMMEN:.
<tr><td background="gfx/tabel/tabel-mittel-1-1.jpg" width="2">
<td background="gfx/tabel/tabel-mittel-2-1.jpg" width="596">
<p>
Denne side er min lille "legeplads", hvor jeg vil vise lidt om mig selv, og hvad
jeg har lavet... Så i bund og grund er den højest sandsynligt ikke særlig
spændende for dig... (med mindre du er min hemmelig elsker :)
</div>
</td><td background="gfx/tabel/tabel-mittel-3-1.jpg" width="2">
<tr><td colspan="3" height="19" background="gfx/tabel/tabel-end-2.jpg">
</table>
<!---velkommen tabel slut--->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="http://www.againsttcpa.com">
<img border=0 src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Medium.gif" alt=""></a>
</td>
</table>
<!---stor tabel slut--->
<br><br><br>
Ses bedst i: 1024x768+ og Internet Explorer
</body>
</html>

**********************************************************

det virker i min browser

du må ikke have flere ting med samme id. hvis du udelukkende har det p.g.a. css så brug class i stedet
.newsBil { position:relative }

<div class="newsBil">

Lad mig lige tage et kig på det.

du mangler også <body>
sig mig har du gået det igennem?

kan det ikke gøre lige meget hvormeget der er forkert det virker jo...?

det bliver det ikke ved med og det vises helt sikkert forkert i en anden browser version (selv af IE). Hvad nu hvis du skal rette noget og det så ikke virker længere? Så er du slemt på skideren fordi du aner ikke om det er en ny fejl eller en af de gamle.
Jeg kan simpelthen ikke forstå at du vil forsvare et glemt </head> og <body> med "jamen det virker jo lige nu".
Desuden kan jeg ikke se hvor du har noget opaque henne. Er det ikke kun <h1> der er opaque? Jeg kan ikke se nogen tags med opacitet overhovedet. No wonder at din tekst er 100%.

nu har jeg rettet html'en og css'en

************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="mittel-style.css">
<body>
<!---stor tabel--->   
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td width="200">
<!---nyheds tabel start--->
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td colspan="3" background="gfx/tabel/tabel-top-1.jpg" width="189" height="19"><center>.:NYHEDER:.</center>
<tr><td background="gfx/tabel/tabel-mittel-1-1.jpg" width="2">
<td background="gfx/tabel/tabel-mittel-2-1.jpg" width="178">
<div class="pr">

<div class="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>19/6-03</i> - Så kom der en lille opdatering igen, igen. Hvis jeg ellers kan tage mig sammen, kommer der snart en version 2<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div class="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>14/5-03</i> - Så kom der en lille opdatering på den grafiske del <br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div class="newsbil">
<img src="gfx/v.1.jpg" alt=""></div><i>10/5-03</i> - Så kom Version 1.0 på, håber i
kan lide det<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div class="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>8/5-03</i> - Endnu en lille opdate... ikke det store der sker men det går da fremad<br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div class="newsbil">
<img src="gfx/upload.jpg" alt=""></div><i>4/5-03</i> - Endnu en lille opdate :)<br><br>

<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>
<img src="gfx/mellemrum.jpg" alt=""><br>
<img src="/gfx/tabel/tabel-mittel-2-1" height="3" alt=""><br>

<div class="newsbil"><img src="gfx/upload.jpg" alt=""></div><i>3/5-03</i> - Så er siden kommet op og køre, dog kun beta i nu og alle knapper virke ikke helt i nu, men kommer snart...
<br>
</div>
</td><td background="gfx/tabel/tabel-mittel-3-1.jpg" width="2">
<tr><td colspan="3" height="19" background="gfx/tabel/tabel-end-1.jpg"></td>
</table>
<!---nyheds tabel slut--->
</td>
<!---stor tabel midtvejs--->
<td align=top>
<!---velkommen tabel start---><center>
<table border=0 cellspacing=0 cellpadding=0 bordercolorlight=ffeecb bordercolordark=ffeecb>
<tr><td colspan="3" width="400" background="gfx/tabel/tabel-top-2.jpg" height="19"><p>.:VELKOMMEN:.
<tr><td background="gfx/tabel/tabel-mittel-1-1.jpg" width="2">
<td background="gfx/tabel/tabel-mittel-2-1.jpg" width="596">
<p>
Denne side er min lille "legeplads", hvor jeg vil vise lidt om mig selv, og hvad
jeg har lavet... Så i bund og grund er den højest sandsynligt ikke særlig
spændende for dig... (med mindre du er min hemmelig elsker :)
</div>
</td><td background="gfx/tabel/tabel-mittel-3-1.jpg" width="2">
<tr><td colspan="3" height="19" background="gfx/tabel/tabel-end-2.jpg">
</table>
<!---velkommen tabel slut--->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="http://www.againsttcpa.com">
<img border=0 src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Medium.gif" alt=""></a>
</td>
</table>
<!---stor tabel slut--->
<br><br><br>
Ses bedst i: 1024x768+ og Internet Explorer
</body>
</html>

***************************************************

body {
    position: relative;
  background-image: url("gfx/mittel.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0.0 0;
    font-family: verdana, arial, sans-serif;
    Text: Link;
    margin: 10px 20px 10px 20px;
   
    }
center {
    position:relative;
    }
p {
    position:relative;
    }
h1 {
    color: #000000;
    font-size: 14;
    text-indent: 0px;
    font-family: verdana, arial, sans-serif;
    }
    table {
    filter: Alpha(Opacity=50);
}
h2 {
    color: #000000;
    font-family: arial, serif;
    font-size: 1em;
    text-indent: 55px;
}
h6 {
    position:relative;
    color: #000000;
    font-family: verdand, arial, serif;
    font-size: 12;
    text-indent: 55px;
}

td {
  font-size: 14;
    color: #000000;
    font-family: verdana, arial, serif;

}
#k1 {
    color: #000000;
    font-family: arial, serif;
    font-size: 16;
    text-indent: 55px;
}
g {
  color: #000000;
    font-family: arial, serif;
    font-size: 10;
    text-indent: 55px;}
.pr {
    position:relative;}
.newsbil {
    float:right;
    width: 0%;
    position:relative;
    }
th {
  font-size: 14;
    text-indent: 5px;
    color: #000000;
    font-family: verdana, arial, serif;
}

A:link {color : #37536d;
}
A:visited {color : #2a4054;
}
A:active {color : #2a4054;
}
A:hover {color : #387aa8;
}

nu bliver din snak for avanceret til min noob hjerne, wtf er: opacitet og opaque?? jeg har rettet det du sagde nu... men selve diskutionen gik på om det kunne lade sig gøre, og det kan det....

ok. med teksten bliver stadig opaque og grå hos mig.

bortset fra </head>

kan det have noget at gøre med du ikke har billederne der bliver brugt... 2 sek så oploader jeg det lige...

opacitet = niveauet af gennemskinnelighed (navneord), "den har en opacitet på 75%"
opaque = et gennemskinneligt element (tillægsord). "siden har en opaque overskrift"

www.soeren.h4f.dk

der er jo intet der er delvist gennemskinneligt... (fuld gennemsigtighed er bare background-color:transparent;)
og hele dette her spørgsmål handler jo om at man skal kunne se både SCROLLBAREN på div'en og det der ligger bagved.

ja ja... scrollbaren har jeg ikke gjort noget ved, men jeg havde længe bakset med at få en gennemsigitg tabel og teksten 100%

og det undrede mig granseløst at det ikke kunne lade sig gøre...

til eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base href="www.soeren.h4f.dk">
<title>Untitled - XHTML 1.0</title>
<style type="text/css">
.hello {
    background-color:transparent;
    text-align:center;
    border: 1px solid black;
    font: 16px Verdana, sans-serif;
}
body {
    background: url("gfx/mittel.jpg") no-repeat fixed center top;
}
</style></head><body>
<div class="hello">Hello World</div>
</body></html>

jamen det behøves Opacity ikke for. Og du behøver heller ikke nogen relative elementer. Blot background-color:transparent;
Det er jo så lidt mærkeligt at du åbner en (temmelig avanceret) 10 måneder gammel diskussion i stedet for at åbne et nyt spørgsmål.

hvor vil du hen med det??

ja ja... jeg løb bare over den da jeg søgte efter en kode der kunne og så provokerede det mig at du havde brugt et ikke gennemsigtig lag til at fake en gennemsigtig hed, eller fake er måske ikke ordet, men det så ud som om den var gennemsigtig, og ikke var det... og jeg må indrømme det er første gang jeg har set en kode der kan gøre det, ud over den jeg efterhånden selv fik basket sammen...

btw har dit eksempel hverken farve eller billed som bg...

(altså tabelen) damn jeg glemmer altid et eller andet

det design er sataneme flot!!!!!

takker :-)

/David Krogstrup
Webbureauet Krogstrup & Hede
www.wkh.dk