I'd like to affect multiple divs on a single :hover. For instance, two divs floated left and right of each other. When a :hover statement over one of them is activated (or, probably over a parent div) I would like for both of them to change width, color, opacity, etc.
<div id='maincontainer'>
<div id='mainleft'>
Left div that shrinks on maincontainer:hover
</div>
<div id='mainright'>
Right div that grows on maincontainer:hover
</div>
</div>
Do I need a container div for this? Is this even possible in CSS alone?
simply use
#maincontainer:hover #mainleft { ... }
#maincontainer:hover #mainright { ... }
and change your css properly. This will work everywhere except IE<7 which allows hover only for <a> elements
You could also think to trigger a CSS transition on newer browser so the size of inner divs change gradually.
By using this css it would be possible
#maincontainer:hover #mainleft{
width: 100px;
}
#maincontainer:hover #mainright{
width: 200px;
}
this is how u can do it with javascript
i prefer javascript because older browser restrict hover only to anchor tags
document.getElementById("maincontainer").onmouseover = func;
function func(event){
document.getElementById("mainleft").style.width = newwidth + px;
document.getElementById("mainright").style.width = newwidth + px;
}
try this to apply css for both:
#maincontainer > div:hover { *your css* }
#maincontainer:hover #mainleft css selector will match mainleft div when the maincontainer is hovered.
Related
I have a site with multiple menus. I have defined enteire page content inside a div with a class container and applied bootstrap css styles (margin-left:auto and margin-right:auto etc.,) to make the page centered. Now elements in one of the file must start from extreme left side of the browser. Because of the css applied for parent i could not start the element from left side. I have applied margin-left with minus pixels to solve the issue. But when the browser window is small element is not completely visible in browser because of minus value applied for margin-left.
<div class="container" style="margin-left:auto;margin-right:auto">
<div id="start_from_left" style="margin-left=-50px"> </div>
</div>
if your tags have
style=""
that takes priority over anything else.
What you could try is the !important on your css tags, but its bad practice.
eg
margin-left:1px!important;
margin-right:0px!important;
You can have additional class for your container.
.container {
margin-left: auto;
margin-right: auto;
}
.container.wide {
margin-left: 0;
margin-right: 0;
}
I have the following structure:
<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>
I'd like to apply some CSS only to .div1, considering that it's on the same level as (not a children or parent of) .div2.
EDIT: To bring some light in the issue: The first div is actually my website's logo and the second div is a navigation that MAY or MAY NOT exist depending on the page viewed. If the navigation is present, I need to display the logo in a different manner (resize it).
CSS works as a cascade then you can never refer to elements based on what is next to them, just possible refer elements based on what was there before them.
The subjects of a selector are always a subset of the elements matching the last simple selector
For this you may need the help of Jquery:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
Since the class of both the divs are different, you can apply some specific rules to div1 by using class selector .div1
.div1 {
/* div1 styles */
}
Ah, so you want to apply css to div1 if div2 exists? CSS can't do that. You need JS. jQuery for example:
$('.div2').parent().find('.div1')
you can then apply the css directly or add another class ('div2exists') and add your style in your css-file
Though there's a way doing this in CSS, I personally would not recommend that.
It will only work if we assume we have a fixed number of div elements inside some ".container" div. And this number is 6, 2nd is the logo (also it is 5th counting from the end), 5th is the navigation.
.container {}
.container .logo {}
.container .navigation {}
.container div:nth-child(2):not(:nth-last-child(5)).logo {
width: 100px;
height: 100px;
}
.container div:nth-child(2):nth-last-child(5).logo {
width: 200px;
height: 200px;
}
The first rule is for the logo with navigation
The second rule is for the logo without navigation
Again don't do this, CSS is not designed for that.
You basically want to select a sibling, you will find a detailed post in this link CSS Tricks - Child and Sibling Selectors
.div1 ~ .div2{
Do your stuff here
}
This chunk will only take place if .div1 exists in your markup, is that what you wanted?
Edit:
I've noticed that your desired selector precedes the other one, this code will only work if the desired selector in this case .div1 is after .div2 .. CSS doesn't have that you will have to use jQuery
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')
I have two sibling divs sitting below each other, both contained in the same parent div.
The requirement is that the divs need a certain amount of space between them, let's say 20px, but the space beween the inner divs and the parent div needs to be the same on all sides (top, right, bottom, left), in this case 0px.
The constraint here is that the inner divs need to have the exact same markup, so I can't apply a different or additional class to just one of them. Also I can't add any markup between the child divs or only above or below one of the child divs.
What would be a good way to solve this problem with CSS (no javascript), in a cross-browser compatible way?
Thanks!
#parentdiv div {
margin-top: 20px;
}
#parentdiv div:first-child {
margin-top: 0;
}
should do it. Alternatively, you could try
#parentdiv div + div {
margin-top: 20px;
}
Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.
you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?
As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:
$("#parentdiv:first").css({ marginTop: 0 })
That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?
Hope this helps someone somewhere.
Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.
Try this example.
<html>
<head>
<style>
div.parent {
background-color: #AAA;
}
div.child {
background-color: #CCC;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
<div class="child"> </div>
</div>
</body>
</html>
You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.
If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.
Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.
<div id="calendar">
<p>Text</p>
<div class="section">blah</div>
</div>
I'm applying the PNG to #calendar, in IE6 I use filter but it makes the content not clickable - I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.
Should I instead wrap all my stuff in another div and apply the png BG to a sibling node such like this, or what?
<div id="calendar">
<div id="calendar-bg"></div>
<div id="calendar-content">
<p>Text</p>
<div class="section">blah</div>
</div>
</div>
Then force the calendar-bg to be absolutely positioned and 100% width/height, and relatively position #calendar-content on top of it? Or is there some other hidden way that the mainstream png fixer scripts ( ala htc, jquery.pngFix ) work?
That is indeed the (only) correct solution to this problem I ever came across. You can't rely on your first solution (positioning the childs relatively), because the opacity filter in IE is thrown over all child elements, with the child elements not being clickable as a result.
So just make sure the png is not in the parent element of a clickable element.
So, create a parent with the property 'position: relative' (or absolute, depends on your layout) and insert two children for the background and the actual content.
Example:
<div id="calendar">
<div id="calendar-bg"></div>
<div id="calendar-content">
<p>Text</p>
</div>
</div>
#calendar { position: relative; }
#calendar #calendar-bg {
position: absolute;
left: 0;
top: 0;
height: 100%; /* Or the height and width in pixels if you know them */
width: 100%; }
#calendar #calendar-content {
position: relative;
z-index: 1; }
I believe the way around this was to force everything inside to be positioned ( eg position:relative ) and have a z-index + hasLayout but sometimes it doesn't work.
Position:relative doesn't trigger hasLayout. You should try something simple like zoom:1 with a z-index.
I'm pretty sure (going from my memory of dealing with a similar problem) that trying to relatively position stuff on top of a png in IE6 doesn't work, but specifying z-index does.