<%# Master Language="C#" %>
<%# Import Namespace="System.Globalization" %>
<!DOCTYPE html>
<script runat="server">
void page_load()
{
PersianCalendar pc = new PersianCalendar();
day.Text = pc.GetDayOfWeek(DateTime.Now).ToString();
hour.Text = string.Format("{0} : {1} : {2}", DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body{
background-color:#FFFACD;
}
#Main{
margin:5px;
}
#Title{
background-color:#F0FFFF;
height:50px;
position:relative;
top: 0px;
left: 0px;
}
#Title span{
background-color:#FDF5E6;
text-align:center;
font-family:"Sakkal Majalla";
font-size:larger;
margin-top:7px;
border:solid 1px #DEB887;
display:block;
width:60px;
height:35px;
float:left;
}
#hour{
background-color:red;
}
</style>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="Main">
<div id="Title">
<span style="float:right;margin-right:10px;">به نام خداوند جان و خرد</span>
<span style="margin-left:5px"><asp:Label runat="server" ID="hour">aaa</asp:Label></span>
<span style=" ">ساعت</span>
<span style=" "><asp:Label runat="server" ID="day" BorderWidth="0px" Font-Names="Sakkal Majalla" Font-Size="Large" BackColor="#3366FF" Height="15px"></asp:Label></span>
<span style=" ">امروز</span>
</div>
</div>
</form>
</body>
</html>
its really strange to me ! here is the full code ... why not changed the background-color of the label_id = hour ??? where i made a mistake? please help ! i refreshed the code please test it on your own vs !
your code is working in here and in jsfiddle so the problem might be that you have another css rule that forcing span to not having a background color.
you can try to add !important at the end of the line of background-color to check if it is working at all .
good luck .
Related
I'm trying to fix the top and bottom div bars on scroll with the text centred
Top bar is fixed but text align isn't working
Bottom bar isn't appearing at all
I can't see what is wrong with the css, I get no errors in the dev console in chrome
Thanks
<!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
div{ margin-left: 20%;
padding-left: 20%
}
#headbar
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<body>
</style>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
Something like this?
#headbar
{
display:inline-block;
text-align:center;
position:fixed;
width:100%;
}
#footbar
{
display:block;
text-align:center;
position:fixed;
width:100%;
bottom:0;
}
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<div id="footbar" style="background-color: #ffff66";>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
body{
margin:0;
padding:0;
}
.spacer{
height:1em;
width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
</style>
<body>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
I try to correct some issues. your text align is not working because of <div> padding and margin. hope this helps.
here is a screenshot how it seems on my screen
http://prntscr.com/a794gf
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I'm out of ideas here, but I'm sure I'm missing something obvious. I want the video to float left and the paragraph above the contact form all to float right. The paragraph is cooperating but the form is out there on it's own.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description" content- "best=" " junk=" " car=" " buyers=" "
in=" " austin"="">
<meta name="author" content="Lucky">
<title>ATX Junk Cars</title>
<style>
iframe {
clear: left;
float: left;
}
<p> {
float: right;
display: inline-block;
vertical-align: middle;
float: right;
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<h1> ATX Junk Cars &nbs p;
&n bsp;
<hr size="2" width="100%"> </h1>
<iframe src="https://www.youtube.com/embed/dNWh2w5VSn4" allowfullscreen="" width="700" frameborder="0" height="450"></iframe>
<p>If you're ready to turn that old car in your driveway into cash, we want to hear from you. Tell us who you are, how we can reach you, and most important, tell us about that car. For the fastest response, call or send a text to 512-229-5424. If it's 2:00 in the morning or you just don't like phones, send us a message with the form below.</p>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Contact Form</title>
<style>
body {
background-color: #330000;
color: ffcc00;
</style>
<style>
label {
display:block;
margin-top:20px;
letter-spacing:2px;
</style>
<style>
/* Centre the page */
.body {
display:block;
margin:0 auto;
width:576px;
}
/* Centre the form within the page */
form {
margin:0 auto;
width:459px;
}
/* Style the text boxes */
input, textarea {
width:439px;
height:32px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
</style>
<header class="body"></header>
<section class="body">
<label>Who are you?</label>
<input name="name" placeholder="Name">
<label>How do we call you?</label>
<input name="phone" placeholder="Phone number with area code" type="phone">
<label>Do you have keys and a clear title?</label>
<input name="keys" placeholder="Keys, title or both?" type="keys">
<label>Does it start, run and drive?</label>
<input name="runs" placeholder="Yes or no?" type="runs">
<label>Anything not working on it?</label>
<textarea name="problems" placeholder="Dents, check engine lights, broken things?"></textarea>
<input id="submit" name="submit" value="Submit" type="submit">
</section>
<footer class="body"></footer>
</body>
</html>
Add style="float:right;" as below:
<section class="body" style="float:right;">
<label>Who are you?</label>
<!-- your form code -->
</section>
The div is moving when browser window is resized.The image can be any gif/png image
Master page Code behind
protected void Page_Load(object sender, EventArgs e)
{
const string imageGreen = "~/App_Ressources/Images/traffic_light_green_small.png";
HtmlGenericControl imgDiv = new HtmlGenericControl();
HtmlImage imgGreen = new HtmlImage();
imgGreen.Src = imageGreen;
imgDiv.Controls.Add(imgGreen);
HtmlGenericControl txtDiv = new HtmlGenericControl();
txtDiv.Attributes.Add("style", "color:green;");
StringBuilder sb = new StringBuilder();
sb.Append("Feed name as of " + DateTime.Now.ToString("dd MMM yyyy HH:mm"));
sb.Append("<br/>");
sb.Append("<br/>");
txtDiv.InnerHtml = sb.ToString();
imgDiv.Controls.Add(txtDiv);
Refeshbox.Controls.Add(imgDiv);
}
Master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.Refeshdiv
{
position: absolute;
top: 130px;
right: 400px;
width: 240px;
height: 244px;
padding: 10px;
color: green;
display: none;
border: 1px solid green;
z-index: 98001;
background-color: White;
}
.imgdivclass
{
position: absolute;
top: 56px;
right: 640px;
display: inline;
white-space: nowrap;
margin-left:0px;
margin-right:0px;
}
.anchordivclass
{
position: absolute;
top: 62px;
right: 530px;
text-align: right;
display: inline;
white-space: nowrap;
margin-left:0px;
margin-right:0px;
}
body
{
width: 100%;
background-color: white;
}
</style>
</head>
<body>
<form runat="server">
<script type="text/javascript" language="javascript">
function Show(id, visibility) {
var id = '<%=Refeshbox.ClientID%>';
document.getElementById(id).style.display = visibility;
}
</script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<%--<div id="divlink" class="adiv">--%>
<div id="imgdiv" class="imgdivclass">
<img id="imgLights" src="App_Ressources/Images/traffic_light_green_small.png" height="29px"
width="20px" alt="" />
</div>
<div id="anchordiv" class="anchordivclass">
<a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');">
last updates info</a>
</div>
<%--</div>--%>
<div id="Refeshbox" class="Refeshdiv" runat="server">
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
when browser window is resized the div's are moving to the left.
The problem is with these below div tag's.
<div id="anchordiv" class="anchordivclass">
<a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');">
last updates info</a>
</div>
Any help is highly appreciated.
Thanks
shiva
Look at your anchordivclass CSS. You have that class with position: absolute, and right: 530px. In that case, the div will not follow normal layout. It will always keep itself 530 pixels from the right edge of the window, since there is no ancestor element that has a position specified.
.anchordivclass
{
position: absolute;
top: 62px;
right: 530px;
text-align: right;
display: inline;
white-space: nowrap;
margin-left:0px;
margin-right:0px;
}
which is almost right on Chrome and firefox but the problem is the position of the submit button on IE if too right than the css. Please check the code and help as soon as possible.
HTML &CSS Code you can find on the link http://jsfiddle.net/7vUW6/
i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width.
Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. please copy this code and run your system.
complete codings:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
<meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<script type="text/javascript">
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<style>
/*-- Reset CSS --*/
.wraper{
width:70%;
margin: 0px auto;
padding:0;
}
#field {
}
#ftext{
font-family: 'Capriola', sans-serif;
}
#btext{
font-family: 'Quando', serif;
font-weight:400;
}
#space{
padding-left:5%;
}
.submit{
padding-left:54%;
padding-right:60%;
clear:both;
}
#value{
color:#999;
}
textarea {
resize: none;
}
#noscrollbars {
overflow:hidden;
}
#inform{
color:#C00;
font-size:12px;
text-align:justify;
}
select{
color:#00F;
}
textarea{
border-right: #a9a9a9 1px solid;
border-top: #a9a9a9 1px solid;
border-left: #a9a9a9 1px solid;
border-bottom: #a9a9a9 1px solid;
color:#00F;
}
#show1{
color:#10e684;
font-size:18px;
font-weight:600;
}
#show2{
color:#9e2a28;
font-size:18px;
font-weight:600;
}
#show3{
color:#9e2a28;
font-size:10px;
}
fieldset{
width:400px;
padding-top:5px;
}
legend{
font-family: "Quando", serif;
}
.umame
{
text-align:right;
float:left;
padding-bottom:5px;
padding-right:8px;
}
.umame1
{
text-align:left;
float:left;
padding:0px;
margin:0px;
padding-bottom:5px;
}
</style>
</head>
<body class="wraper">
<div>
<img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;" />
<br />
<br />
<div class="container">
<center>
<br /><br /><br />
<h2 id="btext">Please perfectly enter the following fields :</h2>
<form name="login" action="" method="post">
<fieldset>
<table width="337" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="169" class="umame">
<span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169">
<span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169"> </td>
<td width="156" class="umame1">
<input type="submit" name="ok" value="Login" />
</td>
</tr>
</table>
</fieldset>
</form>
<table width="337">
<tr>
<td ><span id="inform"><br />
* Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link Get Password with your YMOFF Registration ID. </span>
</td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
If you want to center it, remove class="submit" and replace it with style="text-align: center;".
That will center the button in the row.
Also for IE, don't forget to specify a DOCTYPE declaration in your markup. Use this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">