I have these buttons. However they down't want to show on the page. I don't have any CSS that should conflict with the buttons' visibility. Sorry if this is a dumb question I am a little rusty on my CSS.
HTML:
<!doctype html>
<html>
<head>
<title>Hello, World!</title>
<!--references-->
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id = "box">
<h1 id="head">hello, world!</h1>
<div id = "btn-panel">
<button class="btn" id="btn1">panel1</button>
<button class="btn" id="btn2">panel2</button>
<button class="btn" id="btn3">panel3</button>
<button class="btn" id="btn4">panel4</button>
</div><!--button-panel-->
</div> <!--Box-->
</div> <!--wrapper-->
</body>
<script src="js/Index.js" type="text/javaScript"></script>
</html>
CSS:
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#wrapper {
width: 100%;
height: 100%;
}
#box {
background-color: #EEE;
Width: 100%;
Height: 250px;
margin-left: auto;
margin-right: auto;
Text-align: center;
}
#head {
padding-top: 25px;
font-size: 20pt;
}
#btn-panel {
width: 1000%;
height: 100px;
margin-top: 50px;
}
.btn {
width: 100px;
height: 25px;
border-radius: 5px;
}
Any help would be greatly appreciated. Thanks.
Here's your problem
#btn-panel {
width: 1000%; /* <- Should be 100, not 1000 */
height: 100px;
margin-top: 50px;
}
#btn-panel {
width:100%; /*or pixels, whichever one you chose*/
height:100px;
margin-top:50px;
}
You didn't write 100%.
Related
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've built the front-end HTML/CSS code for a site which now needs transferring onto Wordpress. I'm using the html5blank theme as this was recommended for such purposes. I've watched a tutorial by Chris Lam and it all seems quite straightforward.
However, I'm having quite a few issues with my stylesheets - some rules seem to be applying correctly and some don't which is very strange. As per the tutorial all I've done is delete the styling code in the style.css file and replace it with my own.
Why would some rules apply and not others? Do I need to add something to another file (function.php?) that will allow my styling rules to work?
By way of an example, here's how my header and top section looks in my front-end home page -
And here's the (horrific looking) Wordpress version -
I've re-set the background image to include the link for the Wordpress version -
section#home {
height: 400px;
background: url("http://localhost:8888/wp-content/uploads/2017/07/homepagemain.jpg") center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
But it doesn't seem to want to appear.
On the nav bar, I've had to replace the tags with the following code as per the requirements in the header.php file -
<nav>
<?php html5blank_nav(); ?>
</nav>
Just wrapping the php code within an tag has no effect.
I've read that some themes require child/parent themes but that this shouldn't apply to the HTML5blank theme as its effectively an empty shell.
The same code has been transferred across into the style.css file. Do I have to delete the normalise.css files also? I was using reset.css for the front-end version. Any assistance would be appreciated.
/* GENERAL */
#import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
/* HOME PAGE */
section#home {
height: 400px;
background: url(../images/homepagemain.jpg) center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
#agencyimage {
position: absolute;
margin: 0;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.showreel {
height: 50px;
max-width: 100%;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between;
}
.showreel, .showreel > div.seemore {
display: flex;
align-items: center;
justify-content: flex-start;
flex:1;
}
.showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
.showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px;
}
.seeour i {
margin-right: 30px;
}
<html>
<head>
<meta charset="utf-8">
<title>Feature Media</title>
<meta name="description" content="Video technology and production">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="images/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="images/phone.png">
<p>0113 220 5265</p>
<img src="images/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
<section id="home">
<img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;">
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</section>
it happens when your style-sheet is not properly added to your homepage.
You are giving this path, but this is not including the stylesheet, because the path is not correct.
<link rel="stylesheet" href="css/reset.css" />
try to add this code before your css directory
<?php bloginfo('stylesheet_directory')?>
So, it will be like that
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/css/reset.css" />
It will gives the base url of the site, so this code becomes
www.xyz.com/css/"your css file"
Do this for all link attribute for css, and make sure that all css files put up in that css folder.
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
I am having following code for my master page.
The problem is with FOOTER tag.
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="../JS/jq.js" type="text/javascript"></script>
<script src="../JS/jqui.js" type="text/javascript"></script>
<script src="../JS/script.js" type="text/javascript"></script>
<style type="text/css">
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bigDiv
{
margin: auto;
width: 1000px;
height: 1000px;
background-color: rgba(255,255,255,0.5);
}
header
{
height: 100px;
background-color: white;
font-family: "Source sans pro";
}
#menu a
{
text-decoration: none;
color: white;
}
.menuItem
{
width: 20%;
float: left;
background-color: gray;
height: 50px;
font: normal 18px 'Fjalla One',sans-serif;
color: white;
padding-top: 30px;
text-align: center;
cursor: pointer;
}
#contentMain
{
float: left;
width: 80%;
background-color: rgba(255,255,255,0);
height: 100%;
overflow-y: scroll;
}
#content
{
height: 800px;
background-color: rgba(255,255,255,0);
font-family: "Source sans pro";
}
#contentAd
{
float: left;
width: 20%;
background-color: orange;
height: 100%;
}
footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
footer a, label
{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bigDiv">
<header>
<h1>HR Softwares</h1>
<h4>Advanced softwares and coaching</h4>
</header>
<div id="menu">
<div class="menuItem">HOME</div>
<div class="menuItem">SERVICES</div>
<div class="menuItem">PRODUCTS</div>
<div class="menuItem">CONTACT US</div>
<div class="menuItem">NEWS</div>
</div>
<div id="content">
<div id="contentMain">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="contentAd">
s
</div>
</div>
<footer>
Contact us
<label>| </label>
Feedback
</footer>
</div>
</form>
</body>
</html>
Whenever I try to set the height of FOOTER, height of footer goes behind the CONTENT and CONTENTMAIN divs, I want it to appear below the CONTENT div, but its not working.
For testing purpose, I have set opacity of CONTENT and CONTENTMAIN to 0 so that You can see height of FOOTER behind that. I want FOOTER to appear as per the flow and below CONTENT div.
Update:
clear:both in footer solved my problem. Thanks all anyway
try this i hope this will help for u.
CSS
.footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
HTML
<div class="footer">
Contact us
<label>| </label>
Feedback
</div>
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?