What has been done:
Have created the required Html tags as shown in the code below:
<html>
<head>
....
....
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.3.2.min.js"></script>
<style style="text/css">
html, body {
padding: 0;
margin: 0;
position:relative;
width: auto;
height: auto;
}
.container {
width: 150px;
align-content: center;
margin-top: 980px;
clear: both;
}
.container input {
width: 82%;
clear: both;
}
</style>
</head>
<body>
...
...
<div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">
<form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
Name: <input type="text" name="name" size="15px" required><br><br>
Email: <input type="text" name="email" size="15px" required><br><br>
</form>
<input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
</div>
<script>
function Page5() {
$("#page4").hide();
$("#page5").show();
}
</script>
<div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
</div>
</body>
</html>
Functionality:
User is supposed to be able to view page 5 and the background image "Page 5" is being displayed, after the user has submitted the form in page 4. Hence, when user navigate from page 4 to page 5, user is suppose to the see the content of page 5 which is just the background image.
Issue
When user navigates from page 4 to 5, page 5's content is not displayed, the entire background image is not displaying. Hence, I would like to ask for help,
1.) why is this happening
2.) what is the best rectification process
NOTE
I have to input the following attribute:
display:none
Reason: I have created the following stack in the form of block, hence the individual <div> block will only appear when the <script> is implemented. Hence, please do not suggest that I need to remove the display:none as doing so will
cause the to merge and furthermore, it does nothing as well.
Thanks
first of all there is no "width" and "height" attribute to div's so move the width and height declarations to CSS. Also add height 100% to html and body otherwise the div has no basis to calculate the height upon
html, body {
padding: 0;
margin: 0;
position:relative;
width: 100%;
height: 100%;
}
#page5{
background-color: red;
width: 100%;
height:100%
}
http://jsfiddle.net/arrhyppz/
P.S. use the inspect function of your browser to see the applied css, you will find where your mistakes are
Related
I am buliding a custom email template and i am trying to put text in a specific position on an image. This template is built dynamically via mustache on a camunda workflow model.
The codes below can be tested/viewed at w3schools
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: left;
color: white;
}
.top-left {
position: absolute;
top: 170px;
left: 250px;
}
</style>
</head>
<body>
<div class="container">
<img data-imagetype="External" src='img_snow_wide.jpg' width="1000" height="600">
<div class="top-left">{{happyBirthday}}</div>
</div>
</body>
</html>
As you may see {{happyBirthday}}, which will display values dynamically, is showing on the desired place on the image when using CODE A.
However the template received via email shows the value for {{happyBirthday}} below the image. I was able to get the snippet of code, CODE B, from the elements tab on chrome console via inspect,
CODE B
<div>
<style>
<!-- .rps_9d84 .x_container {
text-align: left;
color: white
}
.rps_9d84 .x_top-left {
top: 170px;
left: 250px;
color: #000080
}
-->
</style>
<div class="rps_9d84">
<div>
<div class="x_container">
<img data-imagetype="External" src="img_snow_wide.jpg" width="1000" height="600">
<div class="x_top-left">{{happyBirthday}}</div>
</div>
</div>
</div>
</div>
As you may see the two codes are similar in the key aspects of the css code i.e. top-left, which determines the position of the dynamic text on the image.
I am not an html expert and i do not see the difference between the two sets of code. Could someone point out what i am missing here ?
You are missing the position: absolute; property on .x_top-left
Since your top-left class element doesn't seem to apply the absolute position style (in CODE B), which will by default always be placed under or next to the previous element.
Try to set the position element with the !important flag.
.top-left {
position: absolute !important;
top: 170px;
left: 250px;
}
I am developing an HTML based ui, as i am new to css so please suggest.
I want to format my UI so that spacing between the top & bottom line & button decreases.
Also the text to be moved little up so that it comes in center of alligned with button.
Please see the attached image, i have edited it and added arrow to it.
Also is it possible to replace multiple with some single TAB ?
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#292B3B;
}
h1 {color:white;}
p {color:#DDDFED; font-size:150%; text-indent:5px; align="middle"}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<hr>
<p>
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" />
Button One
</p>
<hr>
<p>
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" />
Button Two
</p>
<hr>
</body>
</html>
The issue is that you are not resetting the default margin and padding applied by the browser, so use the snippet below..
* {
margin: 0;
padding: 0;
}
Demo
Or to have max consistent cross browser experience, you can use CSS Reset Stylesheet.
You will require the snippet below for aligning your image vertically centered..
input[type=image] {
vertical-align: middle;
}
Also, align="middle" is incorrect, you should use text-align: center; instead.
Rounding up the entire thing...
Final Demo
* {
margin: 0;
padding: 0;
}
body {
background-color:#292B3B;
}
h1 {
color:white;
padding: 10px;
}
p {
color:#DDDFED;
font-size:150%;
text-indent:5px;
padding: 10px;
}
input[type=image] {
vertical-align: middle;
}
Updated your css. Working Fiddle
input[type=image]{
display:inline-block;
vertical-align:middle;
}
I'm currently having some trouble coding the navigation bar for a new website. I currently have it set up so that each 'link' (not currently hyperlinked) is in the form of an image. I am then using some free javascript code to display the current UTC time.
I want the links (images) to display in the center of the navigation bar and the outputted time to appear on the right of the navigation bar. I have managed to do this using the float:right; attribute on the tag however this then causes the centered images to move to the left slightly. I have been trying to stop them from moving but I've been unsuccessful, hence why I'm asking here. If anyone knows how I can keep the images completely centered with the javascript time to the right that would be great. Thanks!
HTML:
<html>
<head>
<title>Personnel Tracking System - E-3+</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script language="JavaScript">
function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; }
function tN(){ return new Date(); }
function lZ(x){ return (x>9)?x:'0'+x; }
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) }
function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Arial color=white><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); }
var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+'~'+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '";
</script>
</head>
<body>
<div id="navbar">
<center>
<img src="images/homebutton.png" />
<img src="images/e-3button.png" />
<img src="images/resignedbutton.png" />
<img src="images/firedbutton.png" />
<img src="images/desertersbutton.png" />
<img src="images/mosrosterbutton.png" />
<img src="images/divider.png" />
<p style="float:right;"><script language="JavaScript">dT();</script></p>
</center>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #bababa;
}
#navbar {
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
vertical-align: middle;
margin: 0;
}
img {
margin: 0;
padding: 0;
}
Maybe something like this:
#navbar {
position: relative;
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
vertical-align: middle;
margin: 0;
}
#navbar p{
position: absolute;
top: 0;
right: 0;
}
Then remove the float from the p tag. Positioning something absolute will remove it from the flow of the container, so it won't push everything else around.
I am working on Ken university website, and i am getting issue of cross browser.
In IE 8 it is not showing properly.
But in firefox and chrome it works fine.
it is the image with the textbox which i am trying to fix..
Here is the Demo Page.
http://safijustonline.com/Forms/Student/StudentRegistration.aspx
please check it in both IE and firefox..
How to solve this cross-browser image alignment issue?
login details:
username = alinisar#ken.com
pass =123
update:
I have also added reset.css file in my theme.
generated HTML of my code:
<div id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift" class="WindowsStyle" style="display:inline-block;">
<table id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;">
<tbody>
<tr>
<td class="ajax__combobox_textboxcontainer">
<td class="ajax__combobox_buttoncontainer">
<button id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Button" type="button" style="height: 25px; width: 25px; margin: 0px; padding: 0px; visibility: visible;"></button>
</td>
</tr>
</tbody>
</table>
<ul id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_OptionList" class="ajax__combobox_itemlist" style="display: none; visibility: hidden; z-index: 10000; overflow: hidden; width: 215px; position: absolute; height: 30px;">
<li>Morning</li>
<li>Evening</li>
</ul>
<input id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_HiddenField" type="hidden" value="0" name="ctl00$CPH_Content$TabContainerStudentRegistration$TabPanelMain$Cmb_Shift$Cmb_Shift_HiddenField">
</div>
the css of my button and image:
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
background-image: url("Images/windows-arrow.gif");
background-position: left top;
border: 0 none;
height: 22px;
margin: -10px 0 0;
padding: 0;
width: 22px;
}
Image on top of button.
Add this and try
.ajax__combobox_textboxcontainer{
vertical-align:top;
}
I tested in IE8. It works
DEMO
Your solution is simple: Just add display: block to those elements style.
It have solve the problem on IE 10.
Element which is not displayed block don't use: padding and margin.
And my advice, try to use classes insted of inline style codding.
did you try position:relative; or position:absolute;
Try adding the below meta tags in the Head section
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Remember the meta tag that is on top will be given first preference
Here is my site: http://mytestsite.nfshost.com/.
If you make your browser window thinner, you'll notice that the content in the page's 'body' tag overtakes the 'footer' element. Instead, I'd like it to merely push the 'footer' content down without engulfing it.
How do I do that?
Below are the relevant sections from the HTML and CSS.
<html>
<head>
-- HEAD CONTENT HERE --
</head>
<body>
<h1>U.S. Neighborhood Income Map</h1>
<h2>See how rich or poor every part of every city in America is</h2>
<div id="address-form-container">
<span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span>
<br>
<input id="address" type="textbox">
,
<select id="state-select">
<input type="button" value="Search">
<br>
<span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span>
</div>
<div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
-- MAP HERE --
</div>
<div id="below-map">
<p id="source-note" class="italics">
</div>
</body>
<footer>
<p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p>
</footer>
</html>
Here's the relevant CSS
html {
float: right;
height: 100%;
text-align: center;
width: 100%;
}
body {
background:url(./images/bg.png);
height: 85%;
position: relative;
right: 8px;
width: 100%;
}
#map-canvas {
height: 75%;
margin-top: 5px;
width: 100%;
}
footer {
margin-top: 3em;
}
footer must be inside body tag.
use css padding
footer {
padding-top: 25px;
}
Create a division with class = "clear"
css
div.clear {
clear:both
}
Use this above any division that you want to push down as page content grows. Also footer must be in body tag as Alex stated.