layer onder afbeelding - Softwareontwikkeling

zaterdag 16 juli 2005 10:58

Acties:

Verwijderd

Topicstarter

Paginas worden geopend met verschillende scherm resoluties, ik zelf gebruik 1024x768. Wanneer een pagina is gebouwd met deze resolutie komt hij bij een lagere resolutie niet goed over.

Dit probleem heb ik ook in mijn forum, deze is gebouwd in 800x600 en heb later mijn resoltie ingesteld op 1024x768.

Met 800x600 kwam de banner die boven aan de pagina staat goed over, maar met een hogere resoltie is het niet meer zo mooi.

Ik dacht dit probleem te verhelpen door een layer op de achtergrond van de banner te zetten (lege layer met zwarte achtergrond) en de width op 98% te zetten zodat deze achtergrond zich aanpast aan de resolutie.

code:

1
2
3

<div style="position: absolute; width: 98%; height: 100px; z-index: 1; left: 10px; top: 19px; background-color: #000000" id="layer1"> 
<TABLE class=forum style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 
width="1%" align=center border=0>

Maar wanneer ik dit doe heeft echter de hele pagina een zwarte achtergrond terwijl ik om een hoogte heb gevraagd van 100px

Het voorbeeld zie je hier http://52363.forum.onetwomax.de/, dit is slechts een voorbeeld van het forum.

De code zoals ik hem ingevoerd heb binnen het forum ziet er als volgt uit

code:

<center> 
<div style="position: absolute; width: 98%; height: 100px; z-index: 1; left: 10px; top: 19px; background-color: #000000" id="layer1"> 

<TABLE class=forum style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 
width="1%" align=center border=0> 
  <TBODY> 
  <TR> 

<table style="border-collapse:collapse;" border=0 width=1% align=center cellpadding=0 cellspacing=0 class="forum"> 
<tr> 

<body onload=update()> 

<td style="vertical-align: top;" width=2% colspan="9" >[img]"http://www.kellystart.com/forum/forum/a1forumbanner.jpg"[/img]</td><tr> 

<div id="tickertape"> 
<div id="subtickertape" class="subtickertapefont" style="width: 750; height: 22"> 
  <p align="center">Initializing...</div> 
</div> 
  
<script language="JavaScript1.2"> 

var speed=5000 //snelheid in milliseconden 
  
var news=new Array() 
news[0]="<CENTER>The International Kelly Family Forum</CENTER>" // de url's met tekstlinks 

news[1]="<A HREF=http://www.singinglife.com><CENTER>Singing Life Kelly Family Homepage</CENTER></A>" 
news[2]="<A HREF=http://www.kellystart.com><CENTER>The Kelly Family Startings Page</CENTER></A>" 
news[3]="<CENTER>WE WILL BRING FANS FROM ALL OF THE WORLD TOGETHER</CENTER></A>" 

i=0 
if (document.all) 
tickerobject=document.all.subtickertape.style 
else 
tickerobject=document.tickertape.document 
function regenerate(){ 
window.location.reload() 
} 
function regenerate2(){ 
if (document.layers) 
setTimeout("window.onresize=regenerate",450) 
} 
  
function update(){ 
 BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10); 
if (document.layers){ 
document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>') 
document.tickertape.document.subtickertape.document.close() 
} 
else 
document.all.subtickertape.innerHTML=news[i] 
  
if (i<news.length-1) 
i++ 
else 
i=0 
setTimeout("update()",speed) 
} 
  
 function BgFade(red1, grn1, blu1, red2, 
 grn2, blu2, steps) { 
 sred = red1; sgrn = grn1; sblu = blu1; 
 ered = red2; egrn = grn2; eblu = blu2; 
 inc = steps; 
 step = 0; 
 RunFader(); 
 } 
 function RunFader() { 
 var epct = step/inc; 
 var spct = 1 - epct; 
 if (document.layers) 
 tickerobject.bgColor = 
 Math.floor(sred * spct + ered * 
 epct)*256*256 + 
 Math.floor(sgrn * spct + egrn * epct)*256 + 
 Math.floor(sblu * spct + eblu * epct); 
 else 
 tickerobject.backgroundColor= 
 Math.floor(sred * spct + ered * 
 epct)*256*256 + 
 Math.floor(sgrn * spct + egrn * epct)*256 + 
 Math.floor(sblu * spct + eblu * epct); 
 if ( step < inc ) { 
 setTimeout('RunFader()',50); 
 } 
 step++; 
 } 
  
</script> 

<td style="vertical-align: top;"><img 
src="http://www.kellystart.com/forum/forum/abegin.gif" alt="blank" titel="blank"></td> 
  
<td style="vertical-align: top;"><USERMODE=1><a href="signup">[img]"http://www.kellystart.com/forum/forum/3aforumbutonregister.gif"[/img]</a></USERMODE><USERMODE!1><a href="profile"><img src="http://www.kellystart.com/forum/forum/3forumbutonprofile.gif" alt="profil" titel="profil" 
<td style="vertical-align: top;"><A HREF="http://www.kellystart.com/glbe/" TARGET="_blank">[img]"http://www.kellystart.com/forum/forum/guestmap.gif"[/img]</td> 
<td style="vertical-align: top;"><img 
 src="http://www.kellystart.com/forum/forum/aeind.gif" alt="blank" WIDTH="46"  HEIGHT="28" titel="blank" BORDER="0"></td> 

</tr><tr><td colspan="9" style="vertical-align: top;"><img 

src="http://www.kellystart.com/forum/forum/a8forumbanneronder.jpg" WIDTH="750"  HEIGHT="14" titel="blank" BORDER="0"></td> 
</tr> 

</TABLE> 

 <table> 

<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse" bordercolor="#111111"> 
<td style="vertical-align: top;"><a href="http://50308.forum.onetwomax.de/area=87"> 
[img]"http://www.kellystart.com/forum/kleinvlagdanm.gif"[/img]</a></td> 

<td style="vertical-align: top;"><img 
 src="http://www.kellystart.com/forum/zwart.gif" alt="blank" WIDTH="26"  HEIGHT="25" titel="blank" BORDER="0"></td> 

</TABLE>

Omdat de code te lang zou worden heb ik er enkele afbeeldingen uitgelaten.

Hoe kan ik dit aanpassen dat alleen onder de banner de zwarte achtergrond komt???

zaterdag 16 juli 2005 11:50

Acties:

Verwijderd

Je hebt er vast helemaal niks aan, maar je code is één grote afvalberg. Gebruik eens externe stylesheets, zet de javascript code in losse bestanden, gebruik géén inline styles tenzij strict noodzakelijk, etcetera.

Ruim eerst de rommel op, dan wordt de boel veel overzichtelijker, en doe je meteen wat ervaring op. Ik ga in elk geval niet de moeite nemen om dit verder te analyseren.

zaterdag 16 juli 2005 11:52

Acties:

Johnny

ondergewaardeerde internetguru

Door de <div> af te sluiten?

Je sluit een heleboel tags nooit af. bekijk je pagina voor de grap eens in Firefox, en haal hem door de validator.

[ Voor 4% gewijzigd door Johnny op 16-07-2005 11:52 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 16 juli 2005 11:53

Acties:

Verwijderd

Topicstarter

Zou ik best willen doen maar dit is een standaard code van forum aanbieder OneTwoMax, wanneer ik hier iets in verander werkt het niet meer.
Het is slechts een deel van de totale code die nodig is om het forum te runnen.
Het enigste wat ik zelf heb gedaan zijn de verschillende afbeeldingen van de banner.

zaterdag 16 juli 2005 12:01

Acties:

RicX

Het leven is geen ponypark

dan nog! Zoals Johnny al zegt... je laat gewoon TAG's open staan!! Als je een webpage alleen maar kunt maken door te copy-pasten, moet je er niet aan beginnen... (of frontpage express gebruiken) lees eerst eens
dit of dit
stel hierna pas vragen als je er echt niet uit komt...

[ Voor 8% gewijzigd door RicX op 16-07-2005 12:01 ]

Honesty is the best policy, but insanity is a better defense

zaterdag 16 juli 2005 12:14

Acties:

Verwijderd

Topicstarter

Als je even gaat naar http://www.onetwomax.de dan zie je dat ik de code niet zelf maak en dat het een online forum is. Ik kan slecht het hele forum gaan herschrijven als het kant en klaar wordt aangeleverd. Het enigste wat ik moet doen is de onderwerpen aanmaken.
Ik heb alleen een banner ingevoegd, dat is het enigste wat ik aan copy en paste heb gedaan.

Het uiteindelijke forum zie je hier: http://50308.forum.onetwomax.de/

En dus onder die zwarte banner wil ik een zwarte achtergrond die zich aanpast aan de grote van de pagina. Dit zijn dan ook dingen die ik kan aanpassen binnen het programma van onetwomax.

zaterdag 16 juli 2005 12:56

Acties:

Verwijderd

Verwijderd schreef op zaterdag 16 juli 2005 @ 12:14:
[...]
En dus onder die zwarte banner wil ik een zwarte achtergrond die zich aanpast aan de grote van de pagina. Dit zijn dan ook dingen die ik kan aanpassen binnen het programma van onetwomax.

Zorg dat het element met de zwarte achtergrond mee resizet met de pagina (width in CSS een procentuele waarde geven), waarop je dat element met CSS één of meer background properties meegeeft.

Voor een achtergrondplaatje in CSS dus:

Cascading Stylesheet:

1	background-image: url("url/naar/het/plaatje.jpg");

[ Voor 13% gewijzigd door Verwijderd op 16-07-2005 12:58 ]