I created one webpage with HTML and when I am viewing in a maximized size its working correctly, but when reduced the size of the browser the header portion is not reducing its size but its creating vertical scroll bars in the header portion. I am pasting my code here, please have a look at it and help me please..
<html>
<head>
<style>
h1{text-align:"center";color:"black"; font-face:"Monotype Corsiva" size= "7"}
h2{text-align:"center";color:"black";font-face:"monotype corsiva" }
</style>
<script type="text/javascript">
var sndEl="audio.mp3" //Set to name and path of your sound file
var music_on="music_on1s_o.gif" //Set to image to display while music is on
var music_off="music_off1s_o.gif" //Set to image to display while music is off
var active_img="active_img1_o.gif"
var da=document.all
var preload=[music_on, music_off, active_img]
var preloading=new Array();
for (var i_tem = 0; i_tem < preload.length; i_tem++){
preloading[i_tem]=new Image();
preloading[i_tem].src=preload[i_tem]
}
function textReveal(el, state){
var text=da? da.text : document.getElementById('text')
text.style.visibility=state=='on'? 'visible' : ''
el.src=state=='on'? active_img : el.lowsrc
}
function toggleSound(el){
var text=da? da.text : document.getElementById('text')
if (da&&da.sound&&da.sound.src!==''){
da.sound.src=''
el.lowsrc=music_off
text.innerHTML=' '
}
else if (document.getElementById('snd')){
sndEl=document.getElementById('snd')
document.getElementById('sndC').removeChild(sndEl)
el.lowsrc=music_off
text.innerHTML=' '
}
else if (da&&da.sound&&da.sound.src==''){
da.sound.src=sndEl
el.lowsrc=music_on
text.innerHTML=' '
}
else {
document.getElementById('sndC').appendChild(sndEl)
el.lowsrc=music_on
text.innerHTML=' '
}
}
</script>
</head>
<body bgcolor="white">
<IMG BORDER="0" width="160" height="140" ALIGN="left" SRC="Logo.gif">
<IMG BORDER="0" width="160" height="140" ALIGN="right" SRC="rushi.gif">
<h1>గుంటూరు తిరుపతి</h1><h1>శ్రీ వెంకటేశ్వర స్వామి వారి దేవాలయం</h1>
<color="black"></color>
<style>ul{align:center;width:100%;height:100%;list-style-type:none;padding:1;margin:1;float:"center"}
li{display:inline;}
a{background-color:"red" ;text-decoration:none;padding:"1mm 5mm";border-center:"1px solid white"}</style>
</head>
<body bgcolor="black"><center>
<li><A HREF="HOME.HTML" target="f2" STYLE="display:inline"> HOME</A></li>
<li><A HREF ="EVENTS.HTML" target="f2" STYLE="display:inline"> EVENTS</A></li>
<li><A HREF="HISTORY.HTML" target="f2" STYLE="display:inline">HISTORY</A></li>
<li><A HREF="SPECIAL_PUJAS.HTML" target="f2" STYLE="display:inline"> SPECIAL PUJAS</A></li>
<li><A HREF="PHOTO_GALLERY.HTML" target="f2" STYLE="display:inline"> PHOTO GALLERY</A></li>
<li><A HREF="MEMBERS.HTML" target="f2" STYLE="display:inline"> MEMBERS</A></li>
<li><A HREF="CONTACT_US.HTML" target="f2" STYLE="display:inline"> CONTACT US</A></li>
</ul></center>
<script type="text/javascript">
if (document.getElementById&&!document.getElementById('sound')){
document.write('<div id="sndC" style="width:0;height:0;position:absolute;top:-100px:left:-100px;visibility:hidden;">')
document.write('<embed id="snd" style="width:0;height:0;position:absolute;top:-1000px:left:-1000px;visibility:hidden;" src="'+sndEl+'" autostart="true" hidden="true" loop="true">')
document.write('<\/div>')
}
if ((da&&da.sound)||document.getElementById)
document.write('<img style="cursor:pointer;" lowsrc="'+music_on+'" src="'+music_on+'" onmouseout="textReveal(this, \'off\')" onmouseover="textReveal(this, \'on\');" onclick="toggleSound(this);"><span id="text"><\/span>')
</script>
</BODY>
</html>
