I am just starting out wit html5 and CSS. I can't seem to get my first heading under the top logo and the middle image centered and under the heading. Basically I want to know how to space elements in order.
Here is my screenshot and the code below:
screenshot
body {
text-align: center;
background-color: white;
color: black;
}
#logo {
align: left;
}
#tagline {
text-align: left;
color: black;
font-family: arial;
}
#car {
align: center;
}
table {
text-align: center;
}
#p01 {
color: black;
font-size: 24;
line-height: 10%
}
#p02 {
color: blue;
font-size: 24;
line-height: 25px;
}
#h102 {
color: green;
font-family: arial;
}
<div id="logo">
<img src="auto.png" alt="autologo" width="200" align="left" />
</div>
<div id="tagline">
<h3><em>Explore the world's supercars</em>
<h3>
</div>
<div id="car">
<img src="aventador-coupe-facebook-og.jpg" alt="lambo" width="700" border="5px" />
</div>
<p id="p01">Here is a picture of the Lamborghini Aventador</p>
<p id="p02">The Lamborghini flagship model</p>
<table cellspacing="0" cellpadding="4" border="4" align="center">
<tr>
<td>aventador</td>
<td>huracan</td>
<td>centenario</td>
</tr>
<tr>
<td>asterion</td>
<td>esoque</td>
<td>murcielago</td>
</tr>
<tr>
<td>gallardo</td>
<td>diablo</td>
<td>countach</td>
</tr>
</table>
<h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1>
You use a lot of invalid CSS properties and HTML attributes. I commented out what needs to be fixed. Removing some of the invalid markup sort of fixed itself. Hope this helps.
Run the snippet below and make full page to see results
<html>
<head>
<title>My Car Website</title>
<!-- Start of internal style sheet -->
<style type="text/css">
body {
text-align: center;
background-color: white;
color: black;
}
#logo {
margin: auto;
/* align: left; not a valid property */
}
#tagline {
text-align: center; /* centered text */
color: black;
font-family: arial;
}
#car {
/* align: center; not a valid property */
}
table {
text-align: center;
}
#p01 {
color: black;
font-size: 24;
line-height: 10%
}
#p02 {
color: blue;
font-size: 24;
line-height: 25px;
}
#h102 {
color: green;
font-family: arial;
}
</style>
<!-- End of internal style sheet -->
</head>
<body>
<div id="logo">
<img src="http://i.imgur.com/jUinHhf.png" alt="autologo" /> <!-- removed invalid attributes -->
</div>
<div id="tagline">
<h3><em>Explore the world's supercars</em></h3>
</div>
<div id="car">
<img src="http://i.imgur.com/lfAFZaA.png" alt="lambo" width="700" border="5px" />
</div>
<p id="p01">Here is a picture of the Lamborghini Aventador</p>
<p id="p02">The Lamborghini flagship model</p>
<table cellspacing="0" cellpadding="4" border="4" align="center">
<tr>
<td>aventador</td>
<td>huracan</td>
<td>centenario</td>
</tr>
<tr>
<td>asterion</td>
<td>esoque</td>
<td>murcielago</td>
</tr>
<tr>
<td>gallardo</td>
<td>diablo</td>
<td>countach</td>
</tr>
</table>
<h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1>
</body>
</html>
Related
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
I am having difficulty jumping to a section on the same page using
ahref and aname. I am making the buttons the link to a specific div further down the page. While clicking on the link makes it go to the right div, it does jumps a few lines into their respective divs, while I would like it to show the top of the div. I would appreciate any help solving this problem.
Here is the html (the href tags are in class navrow):
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td><button>About Me</button></td>
<td><button>Work Samples</button></td>
<td><button>Resume</button></td>
<td><button>Blog</button></td>
<td><button>Contact</button></td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume"><a NAME="resume"></a>Resume Page</div>
<a NAME="blog">
<div class="blog">Blog Page</div>
<a NAME="contact">
<div class="contacts">Contact Page</div>
</div>
</body>
</html>
Here is the CSS in case you need it:
html, body{
font-family: 'Lato', sans-serif;
width: 100%;
padding: 0;
margin: 0;
}
p{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.header{
position: fixed;
z-index: 20;
width: 100%;
background-color: black;
text-align: center;
}
.navrow{
background-color: white;
height: 50px;
width: 100%;
}
.navrow table td{
padding-left: 150px;
}
button{
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
}
.aboutpage h1{
color:red;
}
.samples {
float: left;
height: 70%;
width: 100%;
}
.resume {
float: left;
width: 100%;
height: 900%;
background-color: rgb(0,300,200);
}
.blog {
float: left;
width: 100%;
height: 80%;
background-color: rgb(0,300,150);
}
.contacts {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
#AboutPictures {
margin-top: 170px;
float: right;
background-color: rgb(0,200,255);
}
#AboutPictures h3{
margin-left: 20px;
}
img[src*="tumblr"]{
height:360px;
width:40%;
float: right;
top: 10px;
padding:0 0 0 0;
}
.biopage {
position:relative;
}
.samples table{
position: relative;
width: 100%;
}
.samples td{
text-align: center;
width: 30%;
height:300px;
position:relative;
table-layout: fixed;
background-color: rgb(0,300,300);
}
.samples td img{
width: 290px;
height:290px;
z-index: 0;
}
.samples td:hover img{
opacity: .5;
}
.samples p{
margin: 0;
position:absolute;
left: 0;
top: 50%;
right:0;
z-index: 10;
color: #fff;
font-size: 20px;
text-align: center;
}
.samples td:hover p{
visibility: visible;
}
.samples td p{
visibility: hidden;
}
.container{
background color: white;
width: 25%;
float: right;
}
.container img{
width: 100%;
}
It can be helpful to place the named anchors above the area you want to move to rather than within it.
I would propose:
<a NAME="resumelnk"></a>
<div class="resume">Resume Page</div>
<a NAME="bloglnk"></a>
<div class="blog">Blog Page</div>
<a NAME="contactlnk"></a>
<div class="contacts">Contact Page</div>
And possibly correct your HTML markup to include the closing anchor tags (</a>) which appear to be missing.
One final thought is to not name anchors the same as a class. Not that this is specifically a problem. But I tend to use class names for classes and not for other elements on a page.
The result you are getting is partly a matter of not enough web page content below the targets - - the browser simply can't scroll any lower (which would bring your content to the top of the browser) because the page content is finished.
Also, your targets are inside of the sections you want to target. Target the div's, not anchors within the div's.
Another issue is that you haven't closed your <a> elements for the targets.
Also, you don't really need buttons to accomplish what you want.
Here's some updated code that (just for demonstration) adds a bottom margin to your samples div so that the bottom targets have more room to move up the page. This is just for demonstration, it's not considered a best practice.:
.button { border:1px solid grey; border-radius:1px; background-color:#e0e0e0; text-decoration:none; padding:2px; color:#000; }
.button:active {border:1px solid black; }
.samples {margin-bottom:300px;}
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td>About Me</td>
<td>Work Samples</td>
<td>Resume</td>
<td>Blog</td>
<td>Contact</td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume" id="resume">Resume Page</div>
<div class="blog" id="blog">Blog Page</div>
<div class="contacts" id="contact">Contact Page</div>
</div>
You can provide a little css to your anchor targets to compensate for fixed position headers:
a.anchor{
display:block;
position: relative;
top: -150px;
visibility: hidden;
}
your example with slight tweak
The html file is
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
and this is my css file:
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
And when I use firebug (the extension), I can see that it is the div with id=detailed_div_reminding includes the div with id=detailed_div_basicinfo and div with id=detailed_div_contactinfo rather than the div with id=detailed_fistpart.
One problem is that if you add magin-top: 20px to #detailed_div_reminding, it doesn't produces margin with #detailed_fistpart
Why?
hi there u need to add this line
<div style="clear:both"></div>
before this line of code <div id="detailed_div_reminding">
Did you mean that you are not getting the margin on top of your last section? It is because you have floats present and and you need to clear them for subsequent section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
<style>
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
margin-top:20px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}
Login.css
body {
font-family: "Trebuchet MS", Tahoma, Arial, Geneva, sans-serif, Helvetica, sans-serif;
font-size: 13px;
background: url(../images/bg.png) 0 64px repeat-x;
margin: 0;
}
.wrapper {
xmargin: 0 auto;
}
#border-top.h_green {
background: url(../images/j_header_middle.png) repeat-x;
height: 84px;
xmargin: 0 auto;
}
#contentbox {
width: 755px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#header-top {
width: 960px;
margin: 0 auto;
xbackground: #efefef;
padding: 0px;
position: relative;
}
#menuheader {
position: relative;
}
#contentbox p {
padding: 0 0 10px 0;
}
#menubox {
background: #fff;
padding: 3px 10px;
border-left: 1px solid #cccecc;
border-right: 1px solid #cccecc;
height: 15px;
}
#user_name {
position: absolute;
right: 0px;
top: 0px;
xbackground: url(../../../images/icons/user.png) no-repeat scroll 0 2px
transparent;
padding-left: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
.loginwrapper {
width: 755px;
margin: 0 auto;
}
.btn{
background:url(../images/btn.jpg) repeat-x;
height:28px;
border:none;
color:#fff;
margin-top:20px;
}
.loginbox {
background: url(../images/login_shadow.png) no-repeat;
height: 310px;
padding: 40px;
}
.rightsection {
width: 85%;
float: right;
border-bottom: 1px solid #cccc;
}
.rightboxwrapper {
float: left;
width: 325px;
padding-right: 30px;
background: url(../images/loginleft.png) no-repeat center bottom;
height: 262px;
}
.rightboxwrapper .loginheader h2 {
color: #0588ab;
font-size: 16px;
font-family: trebuchet MS;
margin: 0;
text-align: left;
}
.loginform input {
width: 170px;
}
.loginform input#btnsubmit {
width: 80px !important;
border: none;
}
.loginform {
padding: 10px 0 0 45px;
line-height: 35px;
background: url(../images/lock.png) no-repeat right center;
width: 335px;
}
.loginform td {
color: #333333;
font-family: trebuchet MS;
font-size: 12px;
padding: 0;
margin: 0;
}
.copyright {
width: 100%;
text-align: right;
padding: 5px 0px;
font-size: 11px;;
color: #0588ab;
font-family: trebuchet MS;
}
.copyright p {
padding-right: 15px !important;
}
index.jsp
<%# page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#commentForm1").validate({meta: "validate"});
required: 'Enter this!'
});
</script>
<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error,
form input.submit { color: red; font-size: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<!--maindiv wrapper starts-->
<div id="border-top" class="h_green">
<!--header starts-->
<div id="header-top">
<div><img width="249" height="54" style="padding:15px 0 0 0px" src="images/companylogo.png"> </div>
</div>
</div>
<div id="contentbox">
<div style="background:none;border:none;" id="menubox">
<div id="menuheader">
<div id="message">
<p style="text-align:center; padding-top:10px;" class="message_text"> </p>
</div>
<div id="user_name">
</div>
</div>
</div>
<div class="loginbox">
<div style="width:100%!important;" class="rightsection">
<form name="loginform" action="loginServlet" method="post" id="commentForm1">
<div class="loginwrapper">
<div class="rightboxwrapper">
<table cellspacing="0" cellpadding="0" border="0" align="center" class="loginform">
<tbody><tr class="loginheader">
<th style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:35px;"> <h2>Login</h2></th>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">User ID </td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;">Password</td></tr>
<tr>
<td style="color:#0588ab; font-size:12px; font-family:Helvetica; text-transform:uppercase; height:25px;"><input type="password" id="password" name="password" class="{validate:{required:true, messages:{required:'*'}}}"></td>
</tr>
<tr>
<td colspan="2">
<input value="Login" class="btn" style="width:60px;" type="submit"/>
<input value="Reset" class="btn" style="width:60px; margin-left:10px;" type="reset"/>
</td>
</tr>
</tbody></table>
</div>
<div class="imagewrapper">
<img width="323px" height="262px" src="images/loginimg.png">
</div>
</div> <div style="clear:both; color:fff"></div>
</form>
</div>
<div class="cleared"></div>
</div>
<div id="footerwrapper"><!--Div for the Footer -->
<div class="copyright">
<p>Copyright © 2012 BitsCrafters HRM All rights reserved.</p>
</div><!--ended Footer Div-->
</div>
</div>
</div>
</body>
</html>
What is wrong with this code? can anyone help me out of this? There is something wrong because when i run it through tomcat sometime its work but sometime it doesn't work some icon and image is not displayed. In browser i checked view source to check whether css path is correct or not it is correct.
Ran into the same, just correct the href path:
<link rel="stylesheet" type="text/css" href="./css/login.css"/>
The code and CSS look correct at first glance, so the error is elsewhere.
Use a tool like Firebug or "Inspect Element" to check what your browser gets. All these tools have a network tab where you can see what the browser requested and what it got. Look for:
Do you see all the URLs that you expect?
Could the server serve all these (HTTP status 200)
Check the content of the files. Do they contain what you expect?
Check the error console. Do you get any CSS / JavaScript errors?
Inspect the element in question. Does it have the correct CSS styles? In the CSS panel, do you see the correct styles?