Solved

How to style my webpage in html5

Posted on 2013-06-05
3
168 Views
Last Modified: 2013-06-05
Hi!

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>

Open in new window


*********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; 
} 

Open in new window



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 ?
0
Comment
Question by:team2005
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39221673
Change the width of your table to 100%

table.servicesT {
  background-color: #FAFAFA;
  border: 0 solid #614912;
  border-collapse: collapse;
  border-spacing: 0;
  color: #404040;
  font-family: Verdana;
  font-size: 20px;
  font-weight: normal;
  margin-top: 0;
  width: 100%; <=============
}
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 39221906
Thanks
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39222013
You are welcome - thanks for the points.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question