slava
02-10-2007, 06:12 PM
Hi,
I need some help on how to make the divs look better and aligned corectly, cause things are different in FF Op and IE, and why Opera and IE does not recognize the UTF-8 charset.
Here is the link: http://tintasii.moldovacrestina.net
Thanks in advance!
the HTML code and the Stylesheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">
/***********************************************
* Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<meta HTTP/EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title>
Template
</title>
<link rel="stylesheet" type="text/css" href="tintasii_style.css" media="all" />
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
body {
background-color: #fee3e8;
}
#cfnavbar{
width: 840px;
margin: 0;
padding: 0;
}
#cfnavbar ul{
background: url(media/but-backgd.jpg) bottom center repeat-x;
padding-left: 0;
margin: 0 ;
float: left;
font: bold 90% Verdana;
}
* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}
#cfnavbar ul li{
display: inline;
font-variant: small-caps;
font-size: 9pt;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/but-line.jpg) bottom right no-repeat;
}
#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/but-left.jpg) bottom left no-repeat;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/but-right.gif) bottom right no-repeat;
}
#cfnavbar ul li a:hover{
text-decoration: underline;
}
#horizontline {
width: 840px;
padding: 0;
background: #fc0629;
clear: both;
height: 8px;
line-height: 8px;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
/*----------The sidebar menu---------*/
#content {
width: 840px;
float: none;
padding: 0;
margin: 0;
}
#sidebar {
float: left;
text-align: center;
background-color: #fcf6f8;
border: solid 1px blue;
border-right: solid 1px red;
border-top: solid 2px red;
width: 246px;
height: 400px;
margin: 0 ;
padding: 0;
}
#bgside {
padding: 20px 0 16px 0;
margin: 0;
background-image:url(media/sidebackground.gif) ;
}
#bodycontent {
text-align: center;
float: right;
background-color: #fefaf6;
border: solid 1px yellow;
border-left: solid 1px red;
border-top: solid 2px red;
width: 590px;
height: 400px;
padding: 18px 0 16px -250px;
margin: -20px 0 0 -20px;
}
#titlebg {
padding: 20px 0 18px 0;
margin: 0;
background-image:url(media/contentbackground.gif) ;
}
</style>
</head>
<body>
<div id="cusma">
<img src="media/cusma_tintasii.gif"><br>
</div>
<div id="horizontline"> </div>
<div id="cfnavbar">
<ul>
<li><span><a href="index.html" id="leftcorner">Home</a></span></li>
<li><a href="">Despre Club</a></li>
<li><a href="">Istoric</a></li>
<li><a href="">Grupe</a></li>
<li><a href="">Proiecte</a></li>
<li><a href="">Scopuri</a></li>
<li><a href="">Rezultate</a></li>
<li><a href="">Marturii</a></li>
<li><a href="">Marturii</a></li>
<li><a href="">Noutati</a></li>
<li><a href="" id="rightcorner">Contacte </a></li><br>
</ul><br>
</div>
<br style="clear: left" />
<div id="content">
<div id="sidebar">
<h1 id="bgside">Noutati</h1>
<p> </p>
<script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay = 3000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>Ce este nou?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';
var fwidth='244px'; //set scroller width
var fheight='150px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
<p> Va puteti inscrie <i><a href="">AICI</a></i></p>
<p id="separator"> </p>
</div>
<br style="clear: top" />
<div id="bodycontent">
<h1 id="titlebg">Bine ati venit pe Site-ul F.C. "Tintasii"</h1>
<div id="slider1" class="contentslide">
<div class="contentdiv">
Content 1
</div>
<div class="contentdiv">
Content 2
</div>
<div class="contentdiv">
Content 3
</div>
</div>
<div class="pagination" id="paginate-slider1"></div>
<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds
</script>
</div>
<br style="clear: top" />
</div>
</body>
<html>
I need some help on how to make the divs look better and aligned corectly, cause things are different in FF Op and IE, and why Opera and IE does not recognize the UTF-8 charset.
Here is the link: http://tintasii.moldovacrestina.net
Thanks in advance!
the HTML code and the Stylesheet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">
/***********************************************
* Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<meta HTTP/EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<title>
Template
</title>
<link rel="stylesheet" type="text/css" href="tintasii_style.css" media="all" />
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
body {
background-color: #fee3e8;
}
#cfnavbar{
width: 840px;
margin: 0;
padding: 0;
}
#cfnavbar ul{
background: url(media/but-backgd.jpg) bottom center repeat-x;
padding-left: 0;
margin: 0 ;
float: left;
font: bold 90% Verdana;
}
* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}
#cfnavbar ul li{
display: inline;
font-variant: small-caps;
font-size: 9pt;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/but-line.jpg) bottom right no-repeat;
}
#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/but-left.jpg) bottom left no-repeat;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/but-right.gif) bottom right no-repeat;
}
#cfnavbar ul li a:hover{
text-decoration: underline;
}
#horizontline {
width: 840px;
padding: 0;
background: #fc0629;
clear: both;
height: 8px;
line-height: 8px;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
/*----------The sidebar menu---------*/
#content {
width: 840px;
float: none;
padding: 0;
margin: 0;
}
#sidebar {
float: left;
text-align: center;
background-color: #fcf6f8;
border: solid 1px blue;
border-right: solid 1px red;
border-top: solid 2px red;
width: 246px;
height: 400px;
margin: 0 ;
padding: 0;
}
#bgside {
padding: 20px 0 16px 0;
margin: 0;
background-image:url(media/sidebackground.gif) ;
}
#bodycontent {
text-align: center;
float: right;
background-color: #fefaf6;
border: solid 1px yellow;
border-left: solid 1px red;
border-top: solid 2px red;
width: 590px;
height: 400px;
padding: 18px 0 16px -250px;
margin: -20px 0 0 -20px;
}
#titlebg {
padding: 20px 0 18px 0;
margin: 0;
background-image:url(media/contentbackground.gif) ;
}
</style>
</head>
<body>
<div id="cusma">
<img src="media/cusma_tintasii.gif"><br>
</div>
<div id="horizontline"> </div>
<div id="cfnavbar">
<ul>
<li><span><a href="index.html" id="leftcorner">Home</a></span></li>
<li><a href="">Despre Club</a></li>
<li><a href="">Istoric</a></li>
<li><a href="">Grupe</a></li>
<li><a href="">Proiecte</a></li>
<li><a href="">Scopuri</a></li>
<li><a href="">Rezultate</a></li>
<li><a href="">Marturii</a></li>
<li><a href="">Marturii</a></li>
<li><a href="">Noutati</a></li>
<li><a href="" id="rightcorner">Contacte </a></li><br>
</ul><br>
</div>
<br style="clear: left" />
<div id="content">
<div id="sidebar">
<h1 id="bgside">Noutati</h1>
<p> </p>
<script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay = 3000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>Ce este nou?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';
var fwidth='244px'; //set scroller width
var fheight='150px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
<p> Va puteti inscrie <i><a href="">AICI</a></i></p>
<p id="separator"> </p>
</div>
<br style="clear: top" />
<div id="bodycontent">
<h1 id="titlebg">Bine ati venit pe Site-ul F.C. "Tintasii"</h1>
<div id="slider1" class="contentslide">
<div class="contentdiv">
Content 1
</div>
<div class="contentdiv">
Content 2
</div>
<div class="contentdiv">
Content 3
</div>
</div>
<div class="pagination" id="paginate-slider1"></div>
<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds
</script>
</div>
<br style="clear: top" />
</div>
</body>
<html>