I can't solve this problem: If I click this button then it will appear like a pop up. How can I link to another html?
This is the out put html which is to be generated:
<html>
<body>
<fronm action="output.html" method="get">
first name:<input type="text" name:"first name"><br>
last name:<input type="text" name:"last name"><br>
moblieno:<input type="number" name:"mobileno"><br>
email:<input type ="email" name:"email"><br>
age:<input type="number" name:"age"><br>
school:<input type="text" name:"school"><br>
class:<input type="numeber/text" name:"class"><br>
<input type ="submit" value="submit">
</from>
</body>
</html>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
REGISTRATION FROM:
</title>
<style>
p1.position_left {
position: relative;
top: 20px;
down: 30px;
}
p2.position_right {
position: relative;
top: 45px;
right: -65px;
}
</style>
</head>
<body>
<table height: "200px" border: "3">
<tr>
<td colspan="3" style="background-color:#3152A5;" height="0" width="1350">
<p1 style="color:white" class="pos_left" class="thicker"><b> <FONT SIZE=8 face="fantasy">registration</FONT></b>
</p1>
</td>
</tr>
<p style="font-style:italic" "color:black" if you are willing to fillup the registration from pls click below />
<tr>
<td>
<p2>
<from method="get" action="output.html">
<button type="submit">continue</button>
</from>
<p>thanks for submission</p>
</p2>
</tr>
</td>
</body>
</html>
The button then I will pop up the sign up a from. How can I make this possible?
here is the pure css pop up
<style>
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
Related
I finally got my chatbox created (week of work), but now my top chatbox and bottom chatline box are off set? Why is this?
I think it is related to margin functions or padding!
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
top: 100px;
left: 50%;
width: 400px;
margin-left: -250px;
/* half width */
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
}
/*... input message ...*/
input[type=text] {
width: 230px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color: transparent;
}
/*... bubble containers ...*/
.bubble {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 0px 20px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble-r {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 20px 0 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble>img {
position: absolute;
right: 100%;
top: 0;
}
.bubble-r>img {
position: absolute;
left: 100%;
top: 0;
transform: scaleX(-1);
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.2;
letter-spacing: .5px;
}
.right {
right: 50px;
}
/*......... crossfade on buttons .........*/
.hover img {
transition: .3s;
position: absolute;
}
.nohover {
opacity: 0;
}
a:hover .hover {
opacity: 0;
}
a:hover .nohover {
opacity: 1;
}
<div class="chatbox">
<!-- emojis list -->
<div style="background:#2f2f2f;height:42px;display:flex;">
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;"></a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- send button -->
<b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing... </i></b>
<a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
</div>
<!--............... chatlines .................-->
<div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden;">
<div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> Thx your sooo sweet! 😜
</div>
</div>
<div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
</div>
</div>
<div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> cool. see u tomorrow...
</div>
</div>
<div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
</div>
</div>
</div>
<!--...........................................-->
Changes made are :
In chatbox class, set margin-left to -200px.
For the chatbox element (having inline CSS), add margin-left: -225px, and top: 42px in the inline CSS.
Notice that the elements are aligning at center now. The offset was because of padding in the element (chatbox one with inline CSS)
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
top: 100px;
left: 50%;
width: 400px;
margin-left: -200px;
/* half width */
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
}
/*... input message ...*/
input[type=text] {
width: 230px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color: transparent;
}
/*... bubble containers ...*/
.bubble {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 0px 20px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble-r {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 20px 0 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble>img {
position: absolute;
right: 100%;
top: 0;
}
.bubble-r>img {
position: absolute;
left: 100%;
top: 0;
transform: scaleX(-1);
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.2;
letter-spacing: .5px;
}
.right {
right: 50px;
}
/*......... crossfade on buttons .........*/
.hover img {
transition: .3s;
position: absolute;
}
.nohover {
opacity: 0;
}
a:hover .hover {
opacity: 0;
}
a:hover .nohover {
opacity: 1;
}
<div class="chatbox">
<!-- emojis list -->
<div style="background:#2f2f2f;height:42px;display:flex;">
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;"></a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- send button -->
<b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing... </i></b>
<a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
</div>
<!--............... chatlines .................-->
<div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden; margin-left: -225px; top: 42px;">
<div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> Thx your sooo sweet! 😜
</div>
</div>
<div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
</div>
</div>
<div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> cool. see u tomorrow...
</div>
</div>
<div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
</div>
</div>
</div>
<!--...........................................-->
Let me know in case you need any explanation.
I have the following script which brings up a modal window with a form inside. What I would like to do now is modify it such that when the modal window appears the focus is automatically given to the text entry box. I have tried autofocus but that does not appear to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow:target {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
Open modal
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
Close modal<br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
</html>
most likely "autofocus" does not work because you are using a fragment (at least judging by this issue https://bugs.chromium.org/p/chromium/issues/detail?id=1046357)
here is my example using js (changed css, added js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow.show {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
<button id="show-modal">Open modal</button>
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
<button id="hide-modal">Close modal</button><br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
<script>
const modalWindow = document.querySelector('#modalWindow');
const inputEvent = modalWindow.querySelector('#event');
const toggleModal = () => {
modalWindow.classList.toggle('show');
if (modalWindow.classList.contains('show')) {
inputEvent.focus();
}
}
document.querySelector('#show-modal').addEventListener('click', toggleModal);
document.querySelector('#hide-modal').addEventListener('click', toggleModal);
</script>
</html>
Im creating one simple html page as a firefox default homepage. I got the search function working, but now i want to add style into the page.
This is my funtion:
<form action="" onsubmit="return false">
<input name="term_1" size="38" maxlength="50" value="" id="searchbox" placeholder="Enter search term.."><br />
<select name="field_1" id="option">
<option value="t" selected="selected">Title</option>
<option value="a">Author</option>
<option value="s">Subject</option>
<option value="call_number">Call Number</option>
<option value="p">Publisher</option>
</select>
<input value="Submit" type="button" onclick=search()>
<input value="Reset" type="reset">
</form>
<script>
function search()
{
var search_input=document.getElementById("searchbox").value;// value of search box
var option=document.getElementById("option").value; //value of select
window.open('http://webpac.kdu.edu.my/search/query?match_1=MUST&field_1=' + option + '&term_1=' + search_input + '&facet_loc=20000&sort=relevance&theme=kdu', 'bswindow'); //proceed with search
}
</script>
I would like style something like this
https://www.w3schools.com/code/tryit.asp?filename=GAQ6A12ICCQF
In order to style something, you must apply CSS.
As per WW3 Schools Search Button Styling
I've modified your HTML code in the following ways to achieve this:
Changed your Submit input to type button to permit an inner text item (which is used for the magnifying glass search symbol).
Converted your Reset input to type button for the same reason as above.
Moved your input[type="term1"] after your select to be inline with the styling brief you supplied.
Included a reference to the FontAwesome library in the head so the refresh & magnifying glass symbols can be utilised
Referenced the refresh & magnifying glass symbols in an <i> tag inside the relevant <button's
Here is the updated HTML with CSS:
* {
font-size: 14px;
}
select {
height: 35px;
border: 1px solid grey;
background: #f1f1f1;
}
input[type="text"] {
height: 30px;
text-indent: 10px;
border: 1px solid grey;
background: #f1f1f1;
}
form {
display: flex;
flex-direction: row;
width: 100%;
}
input[name="term_1"] {
width: 100%;
}
button {
width: 100px;
background-color: #2196F3;
border: 1px solid grey;
color: white;
}
button:hover {
cursor: pointer;
background-color: #0b7dda;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<form action="" onsubmit="return false">
<select name="field_1" id="option">
<option value="t" selected="selected">Title</option>
<option value="a">Author</option>
<option value="s">Subject</option>
<option value="call_number">Call Number</option>
<option value="p">Publisher</option>
</select>
<input type="text" name="term_1" size="38" maxlength="50" value="" id="searchbox" placeholder="Enter search term.."><br />
<button type="submit" onclick=search()><i class="fa fa-search" aria-hidden="true"></i></button>
<button type="reset"><i class="fa fa-refresh" aria-hidden="true"></i>
</button>
</form>
<script>
function search() {
var search_input = document.getElementById("searchbox").value; // value of search box
var option = document.getElementById("option").value; //value of select
window.open('http://webpac.kdu.edu.my/search/query?match_1=MUST&field_1=' + option + '&term_1=' + search_input + '&facet_loc=20000&sort=relevance&theme=kdu', 'bswindow'); //proceed with search
}
</script>
Here is a JSFiddle for reference as well.
See W3schools css page for more styles
https://www.w3schools.com/howto/howto_css_searchbar.asp
<div id="cover">
<form method="get" action="">
<div class="tb">
<div class="td"><input type="text" placeholder="Search" required></div>
<div class="td" id="s-cover">
<button type="submit">
<div id="s-circle"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>
*
{
outline: none;
}
html, body
{
height: 100%;
min-height: 100%;
}
body
{
margin: 0;
background-color: #ffd8d8;
}
.tb
{
display: table;
width: 100%;
}
.td
{
display: table-cell;
vertical-align: middle;
}
input, button
{
color: #fff;
font-family: Nunito;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
#cover
{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb;
transform: scale(0.6);
}
form
{
height: 96px;
}
input[type="text"]
{
width: 100%;
height: 96px;
font-size: 60px;
line-height: 1;
}
input[type="text"]::placeholder
{
color: #e16868;
}
#s-cover
{
width: 1px;
padding-left: 35px;
}
button
{
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}
#s-circle
{
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}
button span
{
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}
button span:before, button span:after
{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}
#s-cover:hover #s-circle
{
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
#s-cover:hover span
{
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}
#s-cover:hover button span:before
{
bottom: 11px;
transform: rotateZ(52deg);
}
#s-cover:hover button span:after
{
bottom: -11px;
transform: rotateZ(-52deg);
}
#s-cover:hover button span:before, #s-cover:hover button span:after
{
right: -6px;
width: 40px;
background-color: #fff;
}
Demo for the search bar. You can follow this.
or
if you want more different ones. You can check this: https://freefrontend.com/css-search-boxes/
I've been having a problem with a new website theme I'm creating, this didn't occur to me before until I scrolled down.
Here is the problem. I created a fixed menu (which will stick to the top of the page wherever you are on the page). When you scroll down, the menu goes UNDER the content box instead. I couldn't find a solution to this either. I'm not a professional html or css web developer anyway.
Source:
File: Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><img src="interface/images/interface/header.png" title="Home"></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
File: index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
File: Footer.php
<!--Footer Container-->
</body>
</div>
</html>
The CSS Styles: style.css:
#font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
I suppose the problem must be somewhere in my CSS for the menu. I don't think it's layered correctly in the html, but again, I suck at layering, I'm still learning. :)
Thanks in advance.
LIVE VIEW
Scroll down over the content box.
Set the z-index to 2.
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
z-index: 2;
}
Just add z-index in your menu.
CSS
#menu {
z-index: 99999;
}
The admin login form for the website I'm building isn't working in chrome, but it works fine in IE. What could be causing this? I found one other question on here about a similar issue, but its answers didn't work for me.
Preview: http://a.emutek.net/site/admin/
HTML:
<div id="body">
<div class="divhead" id="adminhead">Login to website management:</div>
<div id="adminlogin">
<form name="adminlogon" action="login.do.php" method="post">
<table border="0">
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="user">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
</div>
CSS:
#body {
z-index: -1;
position: relative;
top: -6px;
padding: 7px;
background-color: white;
border-radius: 6px;
}
.divhead{
background-color: #111;
color: #CCC;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
padding: 3px;
margin-bottom: 5px;
border-radius: 6px;
}
#head{
border-radius: 6px;
margin-bottom: -10px;
padding: 5px;
background-image:url('../img/bg_header.png');
}
#adminlogin{
margin-left: 40%;
z-index: 10;
}
#adminhead{
margin-top: 20px;
margin-bottom: 10px;
width: 700px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
}
remove the position: relative; in #body it will work
you can see the cursor its in chrome also tested in firefox and safari
Instead of positioning #body to get it below #nav, you should position #nav to be above #body.
#body{
position: relative;
z-index: -1;
...
}
#nav{
position: relative;
z-index: 1;
}
You need to change your z index css in the body from -1 to something positive
body {
z-index: 1111;
}