I'm having a problem, which already searched the internet but can not solve. I have an iframe, and inside I have a page that is loading the following CSS.
html, body {
position:relative;
height:100%;
}
.c1{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:100%;
}
.c2{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:50%;
}
.cvalue{
float:left;
width:40%;
padding-right:3px;
text-align:right;
}
.titulo{
DISPLAY: inline-block;
padding-left:5%;
}
.abaA{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;;
background-color:#F9F9F9;
}
.abaA:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.abaF{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;
background-color:#EEE;
}
.abaF:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.areaA{
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
background-color:#F9F9F9;
}
.areaF {
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
display:none;
background-color:#F9F9F9;
}
And the following HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspxmlhttp.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspbroker.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/cratera/sys/function.js"></script><script language="JavaScript">cspHttpServerMethod("KJnjcEnDVCs$h8WvTvpH0LQbuqWLNC_moK_PLd1scC8cNx6fZxqGz_mS6Q0_HRLRO2oUxExyIGwafKPhULXcfw--")</script>
<link rel="stylesheet" type="text/css" href="/csp/cratera/themes/default/css/style.css">
<title>Cadastro de Empresa</title>
<script language="JavaScript">
function Salvar(){
$CR.Submit("xiHqkWth9sV+2005/P0B5LY6k4AfsjV4hbGb3cevM8A",$("form"));
}
function Consultar(){
$CR.Submit("tD3yLZP6yievtRoRMZLtjvnyw4Udr3eWUQNev/osmtg",$("form"));
}
function Novo(){
$CR.ClearAll($("form"));;
$CR.Submit("4evrj0yE4oGqBy1wKeKE+RJP0R4192anMoOcSNx5gJE",$("form"));
}
</script>
</head>
<body>
<div class="titulo">Cadastro de Empresa</div><br><hr size="1" style="margin:0px">
<div class="c1" style="text-align:right;">
<input id="btnCad1" name="btnCad1" onClick="Salvar();" type="button" value="Cadastrar"></input>
<input id="btnNov1" name="btnNov1" onClick="Novo();" type="button" value="Novo"></input>
<input id="btnCon1" name="btnCon1" onClick="Consultar();" type="button" value="Consultar"></input>
</div>
<br>
<span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
<span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
<span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
<br>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
<br>
<form id="form">
<!-- ALL FORM CODE HERE -->
</form>
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
</body>
</html>
As can be seen in the settings tab (class = "abaA" and class = "abaF") I am not able to put the "height: 90%." It works in Mozilla and Internet Explorer, but in Chrome and Safari - both important to my project - it does not work. I have looked on the internet, and many people have this problem, and none of the solutions suggested worked for me.
Appreciate any help.
Thanks
Have a div before
<div class="areaA" id="area.endereco.cad" ...
So something like
<div>
<br>
<span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
<span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
<span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
<br>
</div>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
<br>
<form id="form">
<!-- ALL FORM CODE HERE -->
</form>
</div>
will do the trick.
By the way you should check your code, it is far from being valid.
Related
Hi I'm trying to learn css. But for my page , the used styles are not working. Here below shows the script I used. Can some one please let me know the issue that I had made.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
<style type="text/css">
button{
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
}
</style>
</head>
<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>
Try this:
.big, .small {
font-size:8px;
}
#green{
color:green;
}
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
You have enclosed the whole CSS in the button { } which is not required and is not the proper syntax. Remove the outer button { } from your CSS. Hope it helps
You can remove the button in the style tag. Also remove the corresponding parentheses. So you should be left with the below code in the style tag.
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
Try This:
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>
So I'm making a webpage in html5 for a school project, and some of my hyperlinks that were working before have become completely broken, so much so that even the a:hover attribute doesn't work.
Here is the exact code (comments included) for my About page, on which the hyperlinks on the left do work:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="About.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<!-- CONTENT DIV HERE -->
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
<!--<div style="border-left:1px solid #000;height:500px"></div>
for vertical line -->
Here is the complete code for my main page, on which only the link leading back to the main page works:
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
padding-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
Any answers to this would be much appreciated, as I have yet to find anything wrong. Thank you in advance for any advice you could throw my way
Two things to note:
First, you have an improperly formatted link href.
href="Title Goes Here.html"
As a rule, it is best practice to omit spaces in file names and replace them with dashes instead.
href="title-goes-here.html"
Second, when it comes to writing URL paths for things like images, if the goal is to grab files from a relative root directory, you should lead all URLs with a forward slash.
background-image:url(/Images/All%20Pages/Background.png);
Your #content element is overlaid on top of your #left_bar element because of the padding-left. You can use margin-left instead.
#charset "UTF-8";
/* CSS Document */
#container {
width:1024px;
height:800px;
background-image:url(Images/All%20Pages/Background.png);
}
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
footer{
width:1024px;
height:80px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
background-image:url(Images/All%20Pages/Bottom_Border.png);
}
#content{
width:869px;
height:620;
margin-left:155px;
padding-bottom:80px;
position:absolute;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
h2{
color:#FFF;
}
h4{
color:#FFF;
}
p{
color:#FFF;
}
#left_bar{
background-image:url(Images/All%20Pages/Sidebar.png);
height:700px;
width:155px;
text-align:center;
}
a{
text-decoration: none;
color:#FFF;
}
a:hover{
color:#000;
text-decoration: none;
}
<!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>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>
<body>
<div id="container">
<header>
<div style="line-height:5%;">
<br>
</div>
<h2>[Title Goes Here]:</h2>
<h4>Adventures in Design</h4>
</header>
<div id="content">
<h2> Hello and welcome to [Title Goes Here], <br />
one adventure in design, from websites to photos and beyond!</h2>
<div style="line-height:217px;">
<br />
</div>
<img src="Images/Front Page/Landscape.png" />
</div>
<div id="left_bar">
<br />
<h2>ABOUT</h2>
<br />
<h2>PORTFOLIO</h2>
<br />
<h2>CONTACT</h2>
</div>
<footer>
<br />
<p>Last Updated: 05-08-2017</p>
</footer>
</div>
</body>
</html>
There's also an extra "s" in the .header css section. Check the background-image line after the ";".
header{
width:1024px;
height:100px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(Images/All%20Pages/Top_Banner.png);s
display:inline;
}
I have a from inside a div (with a border). This looks good on Firefox and IE 10 (not sure about older versions of IE). However, sometimes IE activates the compatibility mode and then the form (input box and submit button) fall out of the div. Is there some css tweak to prevent this?
My HTML:
<!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>test</title>
</head>
<body>
<div class="box">
<h2 style="display:inline;">Some sample text</h2>
<form id="frm">
<input type="text" id="tb" />
<input type="submit" class="button" />
</form>
</div>
</body>
</html>
and my css
.box {
display:block;
height:40px;
magin-left:5px;
padding:5px 0 0 10px;
width:740px;
background:green;
border:1px solid black;
}
h2 {
margin:0 0 7px;
padding:0;
font:1.6em Arial;
letter-spacing: -1px
}
#tb {
width:225px
}
.button {
float:right;
width:93px;
margin-left:5px;
padding:2px 0
}
form {
float:right;
}
#frm {
margin-right:10px;
margin-top:2px;
width:330px;
}
Live example at jsfiddle:
http://jsfiddle.net/d3EdW/1/
Screenshot:
Since your form is floated, try clearing it by putting overflow: auto; on a parent of the form, such as .box.
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533