HTML controlling
Posted: Fri Jan 02, 2015 6:58 pm
SORRY FOR ASKING VERY LONG QUESTION, IT IS BECAUSE IT HAS DISTURBED ME SO MUCH
Iam a beginer in web programming during my practise when I write my web page with differnt division (div) the page does not maintain its appearence such the right most div drops down, especially whe i minimize the browser window, but if I look to others web pages there is no such a problemm how would I solve the problem? here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Div elemets</title>
<style type="text/css" media="screen">
#burner {
border-color:#ffffcc ;
border-bottom-style: double;
border-left-style:double;
border-right-style:double;
border-top-style:double;
background-color:rgba(13, 75, 120, 0.8);
color:white;
text-align:center;
padding:5px;
auto;
}
tftextinput{
margin: 0px;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
auto;
}
#menubar{
text-align:center;
line-height:3px;
height:50px;
padding:6px;
background-color:#666666;
auto;
}
.tfbutton::-moz-focus-inner {
border: 0;
}
#leftlinks {
float:left;
background-color:#eeeeee;
height:504px;
color:black;
padding:25px;
border-style: double;
border-spacing:0px;
width:21%;
}
#vline{
background-color:blue;
width:5px;
height:560px;
float:left;
auto;
}
#searchbox{
float:right;
padding:22px;
}
#searchactn{
background-color:#fcooe4;
}
h3.head2{
background-color:blue;
padding:2px;
border:2px;
color:white;
border-left-width:56;
}
#contents{
position:inherit;
border-right-radius:10;
float:left;
background-color: #fdd0d0;
padding:10px;
height:540px;
width:49%;
margin:auto;
}
#rightpane{
border-right-radius:10;
float:right;
background-color:red;
padding:10px;
height:540px;
width:22%;
margin:auto;
}
#foot{
text-align:center;
line-height:3px;
height:14%;
padding-left:6px;
clear:both;
color: white;
background-color:#660099;
bottom-border:12px;
auto;
}
.tfbutton {
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}.tfclear{
clear:both;
}
#wowslider-container1{
width:87%;
heiht:120px;
float:left;
}
.ws_images{
width:1120px;
heiht:1120px;
float:left;
}
.ws_bullets{
width:1120px;
heiht:1120px;
float:left;
}
<!--
-->
</style>
<link rel="icon" href="li.gif" />
<script type="text/javascript">
function load()
{
alert("You ere logging in ok!")
}
function me()
{
prompt("ok")
}
<!--
// -->
</script>
<title>Image carousel generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Image carousel" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color: coral; background-image: url(Cap.png);onload="clock()";" onload="load()">
<div id="burner">
<table summary="">
<tr>
<td> <img src="logo.png" alt="ju!" height="200px" style="border-radius:23px;"></td>
<td><img src="nup.gif" alt="io" align="top">
<h2 style="color:white"> IS 383: <u>INTERNET APPLICATION AND PROGRAMMING</u> </h2><br/>
<h3 style="color:red"> COURSE INSTRUCTOR: Dr. E.Kalinga, CSE, CoICT, UDSM</h3>
</td>
</tr>
<button onclick="me()" type="button">nokia</button>
</table>
</div>
<div id="searchactn">
<form id="searchbox" method="get" action="Emali.html">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"/>
<input type="submit" class="tfbutton" value="search" />
</form>
</div>
<div id="menubar">
<table summary="" style="margin-right:5px" text-align="center">
<tr>
<td><a href="#"><h3 class="head2"onclick="document.write("uyt")"> Home </h3> </a></td>
<td style="float:center"><a href="#"><h3 class="head2"> Games </h3> </a></td>
<td> <a href="lec1.ppt"><h3 class="head2"> Lectures </h3> </a> </td>
<td><a href="#"><h3 class="head2"> Contacts </h3> </a></td>
</tr>
</table>
</div>
<div id="leftlinks">
<img align="right" alt="ik" src="l.gif" width="40px" height="40px" />
<h4>follow these links</h4>
<ul>
<li><a href="login.htm" target="blank">log in</a></li><br />
<li><a href="https://www.facebook.com/duckling.kabata" target="_blank">Facebook</a></li><br />
<li><a href="Emali.html" target="_blank">Is Class Labs</a></li> <br />
<li><a href="contact.htm" target="_blank">Contacts:</a></li><br />
<li><a href="#" target="_blank">log out</a></li><br />
</ul>
</div>
<div id="vline">
</div>
<div id="contents">
<h3>About Me</h3>
<p>My Name is Linus John Iam taking IS/MT at DUCE </p>
<table>
<tr>
<td></td>
</tr>
</table>
<tr>
<td>
<video width="210" height="210" controls loop>
<source src="ko.ogv" type="video/mp4">
</video></a></td>
<td><img src="linus.png" alt="please wait.." width="185" height="185" style=""></td>
<td><img src="shoes.gif" alt="please wait.." width="160" height="405" style="float:right"></td>
</tr>
</table>
</div>
<div id="rightpane">
mmmmmmmmmmmmmmmmmmmm
</div>
<div id="vline2"></div>
<div id="foot">
<br />
<img src="smiley.gif" alt="oo" style="float:right;">
<img src="smiley.gif" alt="oo" style="float:left;">
<p>Mungu hakika ndo anajua yote!</p>
Copyright © 2014 Reserved:
<marquee />
<p>Life wents well if programmed I will never hate programming THANKS Dr. Kalinga</p><br />
</div>
</body>
</html>
Iam a beginer in web programming during my practise when I write my web page with differnt division (div) the page does not maintain its appearence such the right most div drops down, especially whe i minimize the browser window, but if I look to others web pages there is no such a problemm how would I solve the problem? here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Div elemets</title>
<style type="text/css" media="screen">
#burner {
border-color:#ffffcc ;
border-bottom-style: double;
border-left-style:double;
border-right-style:double;
border-top-style:double;
background-color:rgba(13, 75, 120, 0.8);
color:white;
text-align:center;
padding:5px;
auto;
}
tftextinput{
margin: 0px;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
auto;
}
#menubar{
text-align:center;
line-height:3px;
height:50px;
padding:6px;
background-color:#666666;
auto;
}
.tfbutton::-moz-focus-inner {
border: 0;
}
#leftlinks {
float:left;
background-color:#eeeeee;
height:504px;
color:black;
padding:25px;
border-style: double;
border-spacing:0px;
width:21%;
}
#vline{
background-color:blue;
width:5px;
height:560px;
float:left;
auto;
}
#searchbox{
float:right;
padding:22px;
}
#searchactn{
background-color:#fcooe4;
}
h3.head2{
background-color:blue;
padding:2px;
border:2px;
color:white;
border-left-width:56;
}
#contents{
position:inherit;
border-right-radius:10;
float:left;
background-color: #fdd0d0;
padding:10px;
height:540px;
width:49%;
margin:auto;
}
#rightpane{
border-right-radius:10;
float:right;
background-color:red;
padding:10px;
height:540px;
width:22%;
margin:auto;
}
#foot{
text-align:center;
line-height:3px;
height:14%;
padding-left:6px;
clear:both;
color: white;
background-color:#660099;
bottom-border:12px;
auto;
}
.tfbutton {
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}.tfclear{
clear:both;
}
#wowslider-container1{
width:87%;
heiht:120px;
float:left;
}
.ws_images{
width:1120px;
heiht:1120px;
float:left;
}
.ws_bullets{
width:1120px;
heiht:1120px;
float:left;
}
<!--
-->
</style>
<link rel="icon" href="li.gif" />
<script type="text/javascript">
function load()
{
alert("You ere logging in ok!")
}
function me()
{
prompt("ok")
}
<!--
// -->
</script>
<title>Image carousel generated by WOWSlider.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Image carousel" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color: coral; background-image: url(Cap.png);onload="clock()";" onload="load()">
<div id="burner">
<table summary="">
<tr>
<td> <img src="logo.png" alt="ju!" height="200px" style="border-radius:23px;"></td>
<td><img src="nup.gif" alt="io" align="top">
<h2 style="color:white"> IS 383: <u>INTERNET APPLICATION AND PROGRAMMING</u> </h2><br/>
<h3 style="color:red"> COURSE INSTRUCTOR: Dr. E.Kalinga, CSE, CoICT, UDSM</h3>
</td>
</tr>
<button onclick="me()" type="button">nokia</button>
</table>
</div>
<div id="searchactn">
<form id="searchbox" method="get" action="Emali.html">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120"/>
<input type="submit" class="tfbutton" value="search" />
</form>
</div>
<div id="menubar">
<table summary="" style="margin-right:5px" text-align="center">
<tr>
<td><a href="#"><h3 class="head2"onclick="document.write("uyt")"> Home </h3> </a></td>
<td style="float:center"><a href="#"><h3 class="head2"> Games </h3> </a></td>
<td> <a href="lec1.ppt"><h3 class="head2"> Lectures </h3> </a> </td>
<td><a href="#"><h3 class="head2"> Contacts </h3> </a></td>
</tr>
</table>
</div>
<div id="leftlinks">
<img align="right" alt="ik" src="l.gif" width="40px" height="40px" />
<h4>follow these links</h4>
<ul>
<li><a href="login.htm" target="blank">log in</a></li><br />
<li><a href="https://www.facebook.com/duckling.kabata" target="_blank">Facebook</a></li><br />
<li><a href="Emali.html" target="_blank">Is Class Labs</a></li> <br />
<li><a href="contact.htm" target="_blank">Contacts:</a></li><br />
<li><a href="#" target="_blank">log out</a></li><br />
</ul>
</div>
<div id="vline">
</div>
<div id="contents">
<h3>About Me</h3>
<p>My Name is Linus John Iam taking IS/MT at DUCE </p>
<table>
<tr>
<td></td>
</tr>
</table>
<tr>
<td>
<video width="210" height="210" controls loop>
<source src="ko.ogv" type="video/mp4">
</video></a></td>
<td><img src="linus.png" alt="please wait.." width="185" height="185" style=""></td>
<td><img src="shoes.gif" alt="please wait.." width="160" height="405" style="float:right"></td>
</tr>
</table>
</div>
<div id="rightpane">
mmmmmmmmmmmmmmmmmmmm
</div>
<div id="vline2"></div>
<div id="foot">
<br />
<img src="smiley.gif" alt="oo" style="float:right;">
<img src="smiley.gif" alt="oo" style="float:left;">
<p>Mungu hakika ndo anajua yote!</p>
Copyright © 2014 Reserved:
<marquee />
<p>Life wents well if programmed I will never hate programming THANKS Dr. Kalinga</p><br />
</div>
</body>
</html>