Digi
alle pijlers
DIV achtergrond problemen! (script) HULP GEZOCHT!!
zaterdag 14 mei 2011 om 17:43
Geachte Viva leden.
Ik ben zo wel bezig met een website, alleen is er een kleine probleem met deze website:
http://web.artcreations.nl/
Aan de rechter kant zie je een witte vlak. Dit heeft te maken met de achtergrond. Wat ik ook probeer, rechts wilt hij er niet vandaan.
Weet iemand hier voldoende van af en kan jij mij helpen?
De script ziet er tot nu toe zo uit:
<html>
<head>
<title>WEB.Artcreations.NL - Digital webart. In all sorts, sizes and all the colours. You can not imagine.</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
</style>
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
text-align:justify;
font-family: Verdana;
font-size:8pt;
letter-spacing:0pt;
line-height:14px;
color: #7C7C7C;}
A:link
{ text-decoration: none; color:#0E6169; cursor: none; }
A:visited
{ text-decoration: none; color:#7C7C7C; cursor: none; }
A:active
{ text-decoration: none; color:#A7A7A7; cursor: none; }
A:mouseover
{ text-decoration: none; color:#FFFFFF; cursor: none; }
A:hover
{ text-decoration: none; color:#0E6169; cursor: none; }
P {
align:justify
}
blockquote {
margin-left:10px;
margin-right:10px;
}
-->
</STYLE>
</head>
<body background="http://web.artcreations.nl/web/BGweb.jpg" text="#000000"
onLoad="window.onresize=new Function('if (navigator.appVersion==\'Netscape\') history.go(0);');">
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script language=JavaScript1.2>
//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=20
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</SCRIPT>
<div id="root" style="position:absolute;top:0;left:0;width:0px;height:0px">
<div style="position: absolute; top: 0; left: 0"> <img src="http://web.artcreations.nl/web/layoutweb.jpg" BORDER=0 ALT="" USEMAP="#layout_Map">
</div>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 4px;
background-color:#5CB5C9;
color:#13414B;
width:190px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #59838C;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu")
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7787159-3");
pageTracker._trackPageview();
} catch(err) {}</script>
<style><!--a:hover{text-transform:uppercase; }--></style>
<script language=JavaScript>
<!--
var message="© Web.Artcreations.NL |>> DO NOT COPY! <<| All rights reserved. For any questions, please take contact with me on the contact-page.";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<div id="Layer2" style="position: absolute;top:458;left:146;width:701px;height:0px">
<div style="position: absolute; left: 0; top: 0; width:701; height: 0">
<font face="Verdana" size="1">
test
</font>
</td></tr></table></div></div>
<div id="Layer2" style="position: absolute;top:732;left:146;width:701px;height:0px">
<div style="position: absolute; left: 0; top: 0; width:701; height: 0">
<font face="Verdana" size="1">
<style type="text/css">
</style>
M.v.g,
M.m.89
Ik ben zo wel bezig met een website, alleen is er een kleine probleem met deze website:
http://web.artcreations.nl/
Aan de rechter kant zie je een witte vlak. Dit heeft te maken met de achtergrond. Wat ik ook probeer, rechts wilt hij er niet vandaan.
Weet iemand hier voldoende van af en kan jij mij helpen?
De script ziet er tot nu toe zo uit:
<html>
<head>
<title>WEB.Artcreations.NL - Digital webart. In all sorts, sizes and all the colours. You can not imagine.</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
</style>
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
text-align:justify;
font-family: Verdana;
font-size:8pt;
letter-spacing:0pt;
line-height:14px;
color: #7C7C7C;}
A:link
{ text-decoration: none; color:#0E6169; cursor: none; }
A:visited
{ text-decoration: none; color:#7C7C7C; cursor: none; }
A:active
{ text-decoration: none; color:#A7A7A7; cursor: none; }
A:mouseover
{ text-decoration: none; color:#FFFFFF; cursor: none; }
A:hover
{ text-decoration: none; color:#0E6169; cursor: none; }
P {
align:justify
}
blockquote {
margin-left:10px;
margin-right:10px;
}
-->
</STYLE>
</head>
<body background="http://web.artcreations.nl/web/BGweb.jpg" text="#000000"
onLoad="window.onresize=new Function('if (navigator.appVersion==\'Netscape\') history.go(0);');">
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script language=JavaScript1.2>
//Gradual-Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=20
}
function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</SCRIPT>
<div id="root" style="position:absolute;top:0;left:0;width:0px;height:0px">
<div style="position: absolute; top: 0; left: 0"> <img src="http://web.artcreations.nl/web/layoutweb.jpg" BORDER=0 ALT="" USEMAP="#layout_Map">
</div>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 4px;
background-color:#5CB5C9;
color:#13414B;
width:190px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #59838C;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu")
ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7787159-3");
pageTracker._trackPageview();
} catch(err) {}</script>
<style><!--a:hover{text-transform:uppercase; }--></style>
<script language=JavaScript>
<!--
var message="© Web.Artcreations.NL |>> DO NOT COPY! <<| All rights reserved. For any questions, please take contact with me on the contact-page.";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<div id="Layer2" style="position: absolute;top:458;left:146;width:701px;height:0px">
<div style="position: absolute; left: 0; top: 0; width:701; height: 0">
<font face="Verdana" size="1">
test
</font>
</td></tr></table></div></div>
<div id="Layer2" style="position: absolute;top:732;left:146;width:701px;height:0px">
<div style="position: absolute; left: 0; top: 0; width:701; height: 0">
<font face="Verdana" size="1">
<style type="text/css">
</style>
M.v.g,
M.m.89
zaterdag 14 mei 2011 om 18:03
Ik heb niet heel veel verstand van websites maken, maar wat mij opvalt is dat een gedeelte van de scrollbalk wit is, en de rest grijs. En ik denk dat je door dit stuk aan te passen het kunt veranderen:
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
Als je van die laatste 2x #FFFFFF, #E5E5E5 maakt, wordt denk ik alles grijs en valt het minder op.
Andere optie is de afbeelding van de achtergrond kleiner maken, zodat een scrollbalk niet nodig is.
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
Als je van die laatste 2x #FFFFFF, #E5E5E5 maakt, wordt denk ik alles grijs en valt het minder op.
Andere optie is de afbeelding van de achtergrond kleiner maken, zodat een scrollbalk niet nodig is.
zaterdag 14 mei 2011 om 18:06
zondag 15 mei 2011 om 02:10
De witte balk die je rechts ziet komt omdat je "http://web.artcreations.nl/web/BGweb.jpg" die je als background image gebruikt gerepeteerd wordt zowel verticaal (wat goed is) als horizontaal (waardoor je dus die witte balk ziet).
Oplossing: stel alleen een verticale repeat in van dat plaatje. Dan staat weliswaar niet je echte beeld in het midden, wat ik persoonlijk mooier vind (dus links en rechts evenveel 'loze' ruimte), maar is je achtergrond wel egaal van kleur.
Daarna ook je background colour instellen op: #E5E5E5
Het eerste deel van je code wordt dan zo:
BODY {
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
text-align:justify;
font-family: Verdana;
font-size:8pt;
letter-spacing:0pt;
line-height:14px;
color: #7C7C7C;
background-color: #E5E5E5;
background-image: url(http://web.artcreations.nl/web/BGweb.jpg);
background-repeat: repeat-y;
}
A:link
{ text-decoration: none; color:#0E6169; cursor: none; }
A:visited
{ text-decoration: none; color:#7C7C7C; cursor: none; }
A:active
{ text-decoration: none; color:#A7A7A7; cursor: none; }
A:mouseover
{ text-decoration: none; color:#FFFFFF; cursor: none; }
A:hover
{ text-decoration: none; color:#0E6169; cursor: none; }
P {
align:justify
}
blockquote {
margin-left:10px;
margin-right:10px;
}
-->
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="#E5E5E5" text="#000000"
onLoad="window.onresize=new Function('if (navigator.appVersion==\'Netscape\') history.go(0);');">
Oh en... de achtergrond lijkt beveiligd tegen kopiëren waarbij deze boodschap tevoorschijn komt: 'For any questions, please take contact with me on the contact-page.'
Dat is een erg slechte vertaling van 'neem contact met me op' en zou ik veranderen in 'please contact me' en dan misschien hier al je email adres i.p.v. mensen eerst naar je contact page te sturen.
Overigens, als ik de URL van je background image in een browser plak kan ik 'm daarna wel kopiëren (maar dat werkt misschien alleen omdat je de code hier hebt neergezet...)
Succes!
(God, wat voel ik me een nerd nu!)
Oplossing: stel alleen een verticale repeat in van dat plaatje. Dan staat weliswaar niet je echte beeld in het midden, wat ik persoonlijk mooier vind (dus links en rechts evenveel 'loze' ruimte), maar is je achtergrond wel egaal van kleur.
Daarna ook je background colour instellen op: #E5E5E5
Het eerste deel van je code wordt dan zo:
BODY {
scrollbar-face-color:#E5E5E5;
scrollbar-shadow-color:#E5E5E5;
scrollbar-highlight-color:#E5E5E5;
scrollbar-3dlight-color:#E5E5E5;
scrollbar-darkshadow-color:#E5E5E5;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
text-align:justify;
font-family: Verdana;
font-size:8pt;
letter-spacing:0pt;
line-height:14px;
color: #7C7C7C;
background-color: #E5E5E5;
background-image: url(http://web.artcreations.nl/web/BGweb.jpg);
background-repeat: repeat-y;
}
A:link
{ text-decoration: none; color:#0E6169; cursor: none; }
A:visited
{ text-decoration: none; color:#7C7C7C; cursor: none; }
A:active
{ text-decoration: none; color:#A7A7A7; cursor: none; }
A:mouseover
{ text-decoration: none; color:#FFFFFF; cursor: none; }
A:hover
{ text-decoration: none; color:#0E6169; cursor: none; }
P {
align:justify
}
blockquote {
margin-left:10px;
margin-right:10px;
}
-->
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="#E5E5E5" text="#000000"
onLoad="window.onresize=new Function('if (navigator.appVersion==\'Netscape\') history.go(0);');">
Oh en... de achtergrond lijkt beveiligd tegen kopiëren waarbij deze boodschap tevoorschijn komt: 'For any questions, please take contact with me on the contact-page.'
Dat is een erg slechte vertaling van 'neem contact met me op' en zou ik veranderen in 'please contact me' en dan misschien hier al je email adres i.p.v. mensen eerst naar je contact page te sturen.
Overigens, als ik de URL van je background image in een browser plak kan ik 'm daarna wel kopiëren (maar dat werkt misschien alleen omdat je de code hier hebt neergezet...)
Succes!
(God, wat voel ik me een nerd nu!)
zondag 15 mei 2011 om 02:17
Zo te zien heb ik iets heel anders geleerd dan jij... ik snap je code ook niet helemaal.
Anyway: ben je bekend met het begrip container? Dat is zeg maar het vlak waarop je werkt. Je zou dat groter kunnen maken of zorgen dat het varieert met de schermgrootte.
Dat witte vlak is volgens mij gewoon achtergrond. Als je je werkveld groter maakt heb je minder achtergrond.
Anyway: ben je bekend met het begrip container? Dat is zeg maar het vlak waarop je werkt. Je zou dat groter kunnen maken of zorgen dat het varieert met de schermgrootte.
Dat witte vlak is volgens mij gewoon achtergrond. Als je je werkveld groter maakt heb je minder achtergrond.
Life isn't about waiting for the storm to pass, it's about learning how to dance in the rain
zondag 15 mei 2011 om 10:56
zondag 15 mei 2011 om 12:31
Zoals jij hem neerzet snap ik m al beter Capricorn. Ik ben gewend twee documenten te gebruiken: Eén voor de HTML-code, één voor CSS.
Mijn advies blijft: Stop alles van de body in een container, waarvan je zelf de maten en positie aangeeft. De rest is background en die kun je iedere kleur geven (dan hoeft het dus geen witte background te zijn, kan ook wat anders)
Mijn advies blijft: Stop alles van de body in een container, waarvan je zelf de maten en positie aangeeft. De rest is background en die kun je iedere kleur geven (dan hoeft het dus geen witte background te zijn, kan ook wat anders)
Life isn't about waiting for the storm to pass, it's about learning how to dance in the rain
zondag 15 mei 2011 om 13:15
Ik ben de laatste tijd ook veel meer aan het doen met CSS waar ik echt zoveel mogelijk in probeer te stoppen zodat je een heel clean HTML bestandje overhoudt en verandering in ontwerp dus makkelijker te doen zijn.
Javascript gaat me over het algemeen wel boven de pet, eerlijk gezegd en ik kan ook niet goed zien wat het doet in de website van TO (behalve de achtergrondplaat beveiligen?).
Javascript gaat me over het algemeen wel boven de pet, eerlijk gezegd en ik kan ook niet goed zien wat het doet in de website van TO (behalve de achtergrondplaat beveiligen?).
zondag 15 mei 2011 om 23:40
Je zou ook je background image kunnen centreren in de css, en de kleur van de achtergrond precies hetzelfde grijs maken. Eventueel kun je dan de linkerkant die witte krullen wat uitfaden, zoals je aan de rechterkant hebt gedaan, zodat het niet "afgesneden" lijkt links.
En dan uiteraard die div met de inhoud ook centreren.
Die scripts zijn wel leuk, maar denk eraan dat ze niet overal werken. Ik gebruik onder andere Google Chrome, en de gekleurde scrollbars werken hier niet, en dat Gradual Highlight Image script ook niet. Op zich geen ramp hoor, je ziet gewoon de standaard scrollbar en de eventuele plaatjes op volle sterkte.
En dan uiteraard die div met de inhoud ook centreren.
Die scripts zijn wel leuk, maar denk eraan dat ze niet overal werken. Ik gebruik onder andere Google Chrome, en de gekleurde scrollbars werken hier niet, en dat Gradual Highlight Image script ook niet. Op zich geen ramp hoor, je ziet gewoon de standaard scrollbar en de eventuele plaatjes op volle sterkte.
