team2005
asked on
How to style my webpage in html5
Hi!
Have this page:
*********CSS************** *****
Using <fieldset... on the Button, it wil rezice the button. so it fit the holse screen.
I want to have this -> <tr><td colspan="2" class="servHd" height="40">Vernerunde #1</td></tr>
<tr>
<td class="servBodL" height="30"># Rømningsvei kjeller</td>
</tr>
To be the same size as the button.
How do i fix this ?
Have this page:
<?php // RAY_EE_login.php
require_once('RAY_EE_config.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test system</title>
</head>
<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<table summary="Services, or Links box template" class="servicesT" cellspacing="1">
<tr><td colspan="2" class="header1" height="20"><img src="images/topp1.png" align="left" /></td></tr>
<tr><td colspan="2" class="servHd" height="40">Vernerunde #1</td></tr>
<tr>
<td class="servBodL" height="30"># Rømningsvei kjeller</td>
</tr>
<tr>
<td class="servBodL" height="30"># Toalett bakrom</td>
</tr>
<tr>
<td class="servBodL" height="30"># Butikk bakrom</td>
</tr>
<tr>
<td class="servBodL" height="30"># Butikk inngang</td>
</tr>
</table>
<br>
<fieldset id="servBodL" height="30">
DETT ER EN TEST
</fieldset>
<br><br><br><br>
<fieldset id="actions">
<br>
<input type="submit" id="LOGIN" value="Scan">
</fieldset>
</body>
</html>
*********CSS**************
html, body
{
height: 100%;
}
body
{
font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
margin: 10;
background-color: #614912;
}
/*--------------------*/
#login
{
background-color: #614912;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 400px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
}
#GULKN
{
background-color: #e4ab15;
font: bold 30px Arial, Helvetica;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 50px;
color: #ffffff;
cursor: pointer;
position: left;
}
/*--------------------*/
h1
{
text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
text-transform: uppercase;
text-align: center;
color: #666;
margin: 0 0 30px 0;
letter-spacing: 4px;
font: normal 26px/1 Verdana, Helvetica;
position: relative;
}
h1:after, h1:before
{
background-color: #777;
content: "";
height: 1px;
position: absolute;
top: 15px;
width: 120px;
}
h1:after
{
background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(left, #777, #fff);
background-image: -moz-linear-gradient(left, #777, #fff);
background-image: -ms-linear-gradient(left, #777, #fff);
background-image: -o-linear-gradient(left, #777, #fff);
background-image: linear-gradient(left, #777, #fff);
right: 0;
}
h1:before
{
background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(right, #777, #fff);
background-image: -moz-linear-gradient(right, #777, #fff);
background-image: -ms-linear-gradient(right, #777, #fff);
background-image: -o-linear-gradient(right, #777, #fff);
background-image: linear-gradient(right, #777, #fff);
left: 0;
}
h1:after2
{
background: #614912;
right: 0;
}
h1:before2
{
background: #614912;
left: 0;
}
/*--------------------*/
fieldset
{
border: 0;
padding: 0;
margin: 0;
}
/*--------------------*/
#inputs input
{
padding-right: 25px;
padding: 15px 15px 15px 30px;
margin: 0 0 10px 0;
width: 353px; /* 353 + 2 + 45 = 400 */
font: bold 20px Arial;
color:#ffffff;
background-color: #96825a;
align: center;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#uid
{
height:20px;
padding:10px 25px;
}
#pwd
{
height:20px;
padding:10px 25px;
}
#inputs input:focus
{
background-color: #96825a;
outline: none;
}
/*--------------------*/
#LOGIN
{
background-color: #e4ab15;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#JAKNAPP
{
background-color: #e4ab15;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#NEIKNAPP
{
background-color: #880051;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#LOGGUT
{
background-color: #d1c5b0;
float: center;
height: 55px;
padding: 10px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border-radius:10px;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#submit2
{
background-color: #96825a;
float: center;
height: 35px;
padding: 0;
width: 100%;
cursor: pointer;
font: bold 20px Arial, Helvetica;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
table.hoved
{
background-color: #614912;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 400px;
margin: -150px 0 0 -230px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
}
table.servicesT
{ font-family: Verdana;
font-weight: normal;
font-size: 20px;
color: #404040;
width: 330px;
background-color: #fafafa;
border: 0px #614912 solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;
}
table.servicesT td.servHd
{ border-bottom: 1px solid #614912;
background-color: #96825a;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #ffffff;}
table.servicesT td.header1
{
border-bottom: 1px solid #614912;
background-color: #614912;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: left;
color: #614912;
hight: 50px;
}
table.servicesT td
{ border-bottom: 0px solid #614912;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #d1c5b0;
text-align: center;
padding-left: 3px;}
able.servicesJN td
{
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #ffffff;
text-align: center;
padding-left: 3px;}
table.TESTE td
{
color: #ffffff;
}
.servBodL
{
background-color: #d1c5b0;
border-left: 0px solid #614912;
}
Using <fieldset... on the Button, it wil rezice the button. so it fit the holse screen.
I want to have this -> <tr><td colspan="2" class="servHd" height="40">Vernerunde #1</td></tr>
<tr>
<td class="servBodL" height="30"># Rømningsvei kjeller</td>
</tr>
To be the same size as the button.
How do i fix this ?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome - thanks for the points.
ASKER