I have two classes which share properties for example:
.divone{ width:10px; height:20px; float:right; cursor:pointer; }
.divtwo{ width:11px; height:10px; float:right; cursor:pointer; }
As you can see, both classes share properties: "float" and "cursor". How can I declare both properties in a same class and then apply it to both classes? Kind of like this:
.sharedproperties{ float:right; cursor:pointer; }
.divone{ width:10px; height:20px; (+ .sharedproperties)}
.divtwo{ width:11px; height:10px; (+ .sharedproperties)}
Thanks!
You just have to call them in your html file like that :
<div class="sharedproperties divone"><!-- Some content here --></div>
or
<div class="sharedproperties divtwo"><!-- Some content here --></div>
And your CSS file would be :
.sharedproperties{
float: right;
cursor: pointer;
}
.divone {
width:10px;
height:20px;
}
.divtwo {
width:11px;
height:10px;
}
If you do not want to add extra classnames in the mark-up you can use a comma in your CSS to apply rules to several selectors:
.divone, .divtwo { float:right; cursor:pointer; }
.divone{ width:10px; height:20px; }
.divtwo{ width:11px; height:10px; }
Related
I'm working on the beginnings of an html web page with an external css file. It appears to work fine on my laptop, but when I zip all the files together to email it, the css code no longer displays on the web page. I believe I have the html page associated with a relative link, so I'm not sure why it's not working. All of the files are in the same folder and they display correctly on my end before zipping the folder.
Html code for external css
<link rel="stylesheet" type="text/css"
href="AlphaOmegaCSS.css">
css code
/*====================================================================
Primary Background style
====================================================================*/
a
{
color:white;
padding:18px;
}
/*====================================================================
Main Body style
====================================================================*/
body
{
background-color:#666;
font-family:aria, georgia;
font-size:18px;
font-weight:bold;
}
body.main
{
background-image:url(edit.jpg);
background-position:99% 0%;
background-repeat:no-repeat;
background-size:319px 200px;
}
/*====================================================================
div-menu-container
====================================================================*/
div.menu
{
background-color:#666;
clear:both;
color:white;
margin:0px auto;
padding:15px;
text-align:center;
width:56%;
}
div.container
{
margin:0px auto;
width:100%;
}
div.FirstPanel
{
background-color:#777;
color:white;
float:left;
height:1000px;
padding:10px;
width:48%;
}
div.SecondPanel
{
background-color:#flflfl;
color:black;
float:left;
height:1000px;
padding:10px;
width:48%;
}
div.footer
{
background-color:#ccc;
clear:both;
color:white;
padding:15px;
width:99%;
}
/*====================================================================
Heading styles
====================================================================*/
h1
{
font-size:56px;
text-align:center;
}
h2
{
color:white;
background-color:#ccc;
font-size:35px;
padding:4px;
}
h3
{
background-color:#ccc;
color:white;
font-size:25px;
padding:18px;
text-align:center;
}
/*====================================================================
picture styles
====================================================================*/
img
{
padding:20px;
}
/*====================================================================
background 2 styles
====================================================================*/
background 2
{
background-color:white;
font-size:32px;
font-weight:bold;
padding:10px;
width:600px;
}
/*====================================================================
Labeled style
====================================================================*/
labeled
{
display:inline-block;
font-size:28px;
width:600px;
}
/*====================================================================
Map style
====================================================================*/
#mapLeaflet
{
margin:20px auto;
}
/*====================================================================
Wording style
====================================================================*/
p, li
{
color:white;
font-size:24px;
padding:4px;
}
/*====================================================================
Button style
====================================================================*/
.fieldsetStyle
{
background-color:#flflfl;
padding-left:40px;
width:25%;
}
.formButtonStyle
{
background-color:#666;
color:white;
font-size:30px;
font-weight:bold;
margin:20px;
padding:20px;
width:400px;
}
.radioButtonStyle
{
width:80px;
}
File names might change when downloading since there could be many copies of the same file. Try making sure that you refer to the same css file in your html file after downloading. But this shouldn't occur if you're using the relative path to the css file.
For example instead of an absolute path like this,
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Try to use a relative path like this,
<img src="/images/picture.jpg" alt="Mountain">
And to rephrase what chris said, links to a compressed file will not work.
I can't seem to make that image appear in my logo square, why?
background-color works perfectly well, but in this one the image won't appear and when I inspect with Chrome it gives that yellow warning + it bars it.
Can anyone help me figure it out?
I tried adding it in the HTML code already, if that helps..
.logo {
margin:auto;
width:150px;
height:150px;
background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}
#logotext {
color:red;
position:absolute;
margin-left:50px;
margin-top:62px;
}
#navbar {
background-color:black;
height:50px;
width:800px;
margin:auto;
margin-top:38px;
}
#navbartext {
color:white;
position:absolute;
margin-top:15px;
margin-left:370px;
}
#content {
background-color:black;
height:650px;
width: 800px;
margin:auto;
margin-top:38px;
}
#contenttext {
color:white;
position:absolute;
margin-left:370px;
margin-top:300px;
}
#footer {
background-color:black;
margin:auto;
height:75px;
width:800px;
margin-top:38px;
}
#footertext {
color:white;
position:absolute;
margin-left:370px;
margin-top:25px;
}
You made a syntax error, remove = from your code.
Wrong:
background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
Correct:
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
change this class..
.logo {
margin:auto;
width:150px;
height:150px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}
This is the proper way to use the background-image property in css.
background-image:url('paper.gif');
So in your case it will be:
background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
JsFiddle
remove = in your url=('')
it should be..
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
Check CSS:
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
For the following facebook like button, there is a # of likes bubble (?) on the right of the button (see below - the bubble with the text of '3.5k' on it)
The question is - was it drawn using css? How to create it?
Fiddle Link : http://jsfiddle.net/zEVbe/1/
Yes, that bubble can be drawn by CSS in various way. One of the way is written below.
HTML :
<div class="like">Like</div>
<div class="counter">3.5k</div>
CSS :
body{
font-family:Calibri;
}
.like{
background:#3b5998;
padding:0px 10px;
border-radius:2px;
color:#fff;
cursor:pointer;
float:left;
height:25px;
line-height:25px;
}
.like:hover{
background:#444;
}
.counter{
background:#fafafa;
border:1px solid #aaa;
float:left;
padding:0px 8px;
border-radius:2px;
margin-left:8px;
height: 23px;
line-height:23px;
}
.counter:before{
display:block;
float:left;
content:' ';
width:6px;
height:6px;
background:#fafafa;
margin-left:-12px;
border-right:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin-top:8px;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
HTML
<div id='divTop'>divTop<br>divTop<br>divtop</div>
<div id='btnHome'>Home</div>
<div id="player">player<br>player<br>player</div>
CSS
body{
position:relative;
max-width:1024px;
height:100%;
margin:0 auto;
font-family: "Trebuchet MS", sans-serif;
text-align:center;
}
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:absolute;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:relative;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
}
JS
y = $(window).innerHeight() - $('#player').height();
$('#player').css ('margin-top', y/2);
$('#player').show();
$("#btnHome").click(function() {
$('#divTop').slideToggle('slow');
});
Why is btnHome inside player. It should be fixed on top-left of page ?
Clicking on btnHome why is player pushed down ? It should be also fixed. I just want to show-hide divTop by overlapping everything bellow.
fiddle is here
Remove position:relative from body.
UPDATE: add a parent wrapper to the #divTop
#wrapper {
width:100%;
overflow:hidden;
}
#divTop{
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
JS
var dTHei = $('#divTop').outerHeight(); //get height of the #div top
$('#wrapper').height(dTHei); //set it as the height of the wrapper
$('#divTop').hide(); // hide the div top
//run your function here
http://jsfiddle.net/2zAm5/1/
Try changing position from relative to absolute
and use top,bottom,right and left instead.
change positions of btnHome and player to fixed, and also use top property for player so it will not move: e.g. top : 200px.
#divTop{
display:none;
position:relative;
z-index:5;
text-align:center;
background:#008080;
border-bottom:medium ridge #D10000;
}
#btnHome{
cursor:pointer;
position:fixed;
top:1.5vh;
left:1vw;
max-width:3.4vw;
z-index:6;
}
#player{
display:none;
position:fixed;
z-index:3;
max-width:95vmin;
max-height:95vmin;
border:medium ridge #ffffff;
border-radius:9px;
top:200px;
}
The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>