I'm wondering why the following selector won't work.
The html:
<div id="commissie">
<img class="logo" src="http://www.dalcanton.it/tito/code/alcaze/foobar.png">
</div>
The css:
#commissie .logo img {
margin-top: 100px;
}
So simple as that, can someone tell?
You are using it in wrong manner. .logo class is used for img.
use like this.
#commissie img.logo {
margin-top: 100px;
}
You're doing mistake at here,
#commissie .logo img
Change this to,
#commissie img.logo
{
margin-top: 100px;
}
Before :
AFTER:
Related
I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work.
Maybe you can give me a hint, thank you.
Example
I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.
You can do this just using CSS:
HTML:
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />
<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>
CSS:
.mnrImageH2 {
position: absolute;
top:1px;
left: 0;
width: 100%;
}
.mnrImageSpan {
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h2 {
color: white;
}
img:hover + h2 {
color: #000;
}
So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.
DEMO HERE
If I correctly understand your point the answer is "You cannot with current schema."
You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.
Add the rule to your example to see what i'm saying:
*:hover + * > * > .work-box{
border: solid red;
}
If your elements have the same parent solution is quite simple - Example
There is good site for Russian speakers about ~ selector
This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.
<div>
<div class="e" >Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
<div class="f">
<div class="e">Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
And use hover like this,
.e
{
width:90px;
border-right:1px solid #222;
text-align:center;
float:left;
padding-left:2px;
cursor:pointer;
}
.f .e
{
background-color:#F9EDBE;
}
.e:hover{
background-color:#FF0000;
}
I have this HTML code:
<div data-width="70"></div>
I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:
div {
width: [data-width];
}
I saw this was done somewhere, but I can't remember it. Thanks.
You need the attr CSS function:
div {
width: attr(data-width);
}
The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):
You cant pass data attribute value directly in to css without pseudo type content.
Rather you can do this way.. CHECK THIS FIDDLE
<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>
CSS
div[data-width="a"] {
background-color: gray;
height: 10px;
width:70px;
}
div[data-width="b"] {
background-color: gray;
height: 10px;
width:80px;
}
div[data-width="c"] {
background-color: gray;
height: 10px;
width:90px;
}
Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}
.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.
div {
width: var(--width);
height: var(--height);
background-color: var(--backgroundColor);
}
<div
style="
--width: 50px;
--height: 25px;
--backgroundColor: #ccc;
"
></div>
<div
style="
--width: 100px;
--height: 50px;
--backgroundColor: #aaa;
"
></div>
CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
jsFiddle
I'm just having fun with this, but a jQuery solution would be something like this:
HTML
<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>
CSS
.foo {
background: red;
height: 20px;
margin-bottom: 10px;
width: 0; /** defaults to zero **/
}
jQuery
$(document).ready(function(){
$('.foo').each(function(i) {
var width = $(this).data('width');
$(this).width(width);
});
});
Codepen sketch here: http://cdpn.io/otdqB
KIND OF AN UPDATE
Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.
HTML
<div data-width='70'>Blue</div>
CSS
div[data-width='70'] {
width: 70px;
}
Sketch here: http://cdpn.io/jKDcH
<div data-width="70"></div>
use `attr()` to get the value of attribute;
div {
width: attr(data-width);
}
can you try this
$(function(){
$( "div" ).data( "data-width" ).each(function(this) {
$(this).width($(this..data( "data-width" )))
});
});
Consider the following:
<a>a</a><a>b</a>
How can I align the second anchor (b) to the right?
PS: float is an abuse in this situation. It's not made for this and it causes some problems, so I need other more reasonable solution.
Just do this:
style="float:right"
Like:
<div>
Equipment
Model
</div>
http://jsfiddle.net/umerqureshi/0jx7kf1L/
You'd need separate containers.
<p>
<span>
<a>Left</a>
</span>
<span class="align-right">
<a>Right</a>
</span>
</p>
p {font-size:0; /* Fixes inline block spacing */ }
span { width:50%; display:inline-block; }
span.align-right { text-align:right; }
span a { font-size:16px; }
JSFiddle example.
Try this CSS,
Using CSS3 nth-child()
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
Demo: http://jsbin.com/opexim/3/edit
Note: nth-child is a CSS3 and won't work on older browsers like IE6, 7 and 8
Support for old browsers
Set class to second <a> anchor element and apply the CSS.
<a>a</a><a class="right">b</a>
a.right {
display: inline-block;
text-align: right;
width: 100%;
}
Maybe you can make something like this: <a>a</a><a class="right">b</a>
And CSS like this:
a.right {
position: absolute;
right: 0;
}
Try and use :nth-child():
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
I don’t know if this works for the older browsers.
Assign a class or id to the 'b' containing anchor and give margin-left:100% to it.
For example:
.second{margin-left:100%;}
or else
a:nth-child(2){margin-left:100%;}
or else
you can also do like mentioned below:
css
a:nth-child(1){display:inline-block;width:50%;text-align:left;float:left;}
a:nth-child(2), .second{display:inline-block;width:50%;text-align:right;}
Working Fiddle
You may try the below code:
<a>a</a><a align="right">b</a>
<a>a</a><a style="text-align:right">b</a>
<div class="mydiv">
<a class ="mylink"> test </a>
</div>
.mydiv {
text-align: left;
}
You must enter your styles for the 'a' tag algin give to 'div'.
Im trying to use padding to push an image 18px from the top of a div. Neither margin or padding are working, and after comparing the two padding seems to be what I want anyway.
The problem is with the footer-middle-left-left-image div tag. The margin on the text one works fine though.
Here's the html:
<div id = "footer-middle-left-left">
<div id = "footer-middle-left-left-picture">
<img src = "" alt = "some_text">
</div>
<div id = "footer-middle-left-left-text">
If you would like to join our newsletter, please enter your </br>
email address below.
</div>
<div id = "footer-middle-left-left-email">
</div>
</div>
The CSS I have is:
#footer-middle-left-left {
float: left;
width: 483px;
height: 175px;
}
#footer-middle-left-left-image {
float: left;
width: 483px;
height: 59px;
padding-top: 18px;
}
#footer-middle-left-left-text {
width: 483px;
height: 58px;
float: left;
margin-left: 25px;
color: white;
}
#footer-middle-left-left-email {
height: 58px;
float: left;
width: 483px;
}
Any help would be appreciated! Also any advice, anything at all would be nice too. I'm pretty new so advice not relevant to my problem is also appreciated, like is this a good id-naming convention, etc..
In html you have footer-middle-left-left-picture but in css #footer-middle-left-left-image
Is it this bug or you just make mistake on paste code?
http://jsfiddle.net/CmwHu/
#footer-middle-left-left-image this id doesnt exist in your html.
So i have changed footer-middle-left-left-picture to #footer-middle-left-left-image.
It is working now
DEMO
What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.