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>
Related
I'm trying to use the media attribute for internal style sheet. I am using media=print and media=handheld for mobile devices. However this is not working. Not to sure why?
EDIT: The outcome I am trying to get is, media="print, test text = blue and picture to be static. Media="handheld" , test text= red and picture to be responsive/dynamic.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
It works fine, but you can't test "print" and "handheld" on jsfiddle. (It doesn't accept media-attributes, and you can't define <style media=""> inside the CSS-field.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
Can anyone tell me why my pseudo selector is not working?
I thought it would be pretty straightforward..
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="registerForm" method="POST" action="register_post.php" >
<p class="registerSubmit">
<input id="submit" type="submit" name="submit" value="submit">
</p>
</form>
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit :hover {
background: red;
}
<style>
</body>
</html>
Would appreciate it.. thanks.
see this code:
<style>
.registerSubmit #submit {
background: white;
}
.registerSubmit #submit:hover {
background: red;
}
<style>
See one more time:
.registerSubmit #submit:hover {
look one last time:
#submit:hover {
Are Achieve see the space?
Bye!
http://jsfiddle.net/NfYrj/
Apply :hover to submit only, not the entire form.
#submit:hover {
background: red;
}
I am on my first Dart project. I already managed to make working tabs.
But I am having trouble making my polymer element appear in the web browser.
The output should be a light grey ribbon, like in Office 2007+.
The only thing I can see is a 0x0px light grey vertical line.
If I use classic HTML and CSS (no templating) it works.
I don't understand what I am doing wrong.
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CVWebkit</title>
<link rel="stylesheet" type="text/css" href="CVWebkit.css" media="screen" />
<script src="scripts/packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="scripts/cvwebkit.dart"></script>
<script src="scripts/packages/browser/dart.js"></script>
</head>
<body>
<polymer-element name="zone-ruban">
<template>
<link rel="stylesheet" type="text/css" href="./CVWebkit.css"/>
<div class="ruban">
<template repeat="{{zone in zones}}">
<div id="{{zone}}">
<template repeat="{{fonction in fonctions}}">
<img src="{{fonction}}"/>
<span class="titre_ruban">{{fonction}}</span>
</template>
</div>
</template>
</div>
</template>
</polymer-element>
</body>
And here is my Dart code (cvwebkit.dart):
import 'dart:html';
import 'dart:async';
import 'packages/polymer/polymer.dart';
import 'packages/observe/observe.dart';
void main() {
querySelectorAll(".onglet")..onClick.listen(ouvrirOnglet);
}
#CustomTag('zone-ruban')
class ZoneRuban extends PolymerElement with Observable {
final List zones = toObservable(['navigation', 'composants', 'propcompo', 'utilisateur']);
final List fonctions = toObservable(['Navigation', 'Composants', 'Propriétés du composant', 'Données utilisateur']);
ZoneRuban.created: super.created();
}
The CSS :
.ruban {
background-color: transparent;
top:0px;
height: 100%;
border-right: 1px solid grey;
position: inherit;
}
#navigation{
width:10%;
}
#composants{
width:25%;
left:10%;
}
#propcompo{
width:40%;
left:35%;
}
#utilisateur{
width:25%;
left:75%;
}
.titre_ruban {
left:0%;
width:100%;
bottom:0px;
position:inherit;
text-align:center;
color:gray;
text-shadow : 0px -1px 1px #000 ;
height:15%
}
.contenu_ruban {
top:0px;
height:85%;
left:0px;
width:100%;
vertical-align:central;
position:inherit;
}
.user_menu {
display:none;
}
Any idea why the ribbon isn't appearing?
I guess you need something like
:host {
display: block;
}
in your elements CSS.
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
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.