This question already has answers here:
Is there a CSS parent selector?
(33 answers)
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 4 years ago.
I've got a menu that looks something like this
<nav role="navigation" class="small--hide">
<ul class="site-nav">
<li class="has-desktop-dropdown collection-dropdown">Link 1</li>
<li>Link 2</li>
<li class="has-desktop-dropdown journal-dropdown">Link 3</li>
</ul>
</nav>
Now I want a div to show when one of the list items is hovered
<div class="desktop-dropdown collection-dropdown-menu small--hide">
<p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
<p>Some content</p>
</div>
The Css I've been trying to use is this:
.collection-dropdown:hover ~ .collection-dropdown-menu {
display:block;
}
.journal-dropdown:hover ~ .journal-dropdown-menu {
display:block;
}
But it's not showing the div on hover. Any ideas what I'm doing wrong?
Fiddle
It won't work like that. In CSS sibling meaning the adjacent elements of a particular dom element. In your question, collection-dropdown doesn't have a sibling of class collection-dropdown-menu.
.collection-dropdown-menu, .journal-dropdown-menu {
display: none;
}
.navigation {
cursor: pointer;
}
.navigation:hover ~ .collection-dropdown-menu,
.navigation:hover ~ .journal-dropdown-menu {
display:block;
}
<nav role="navigation" class="navigation small--hide">
<ul class="site-nav">
<li class='has-desktop-dropdown collection-dropdown'>Link 1</li>
<li>Link 2</li>
<li class='has-desktop-dropdown journal-dropdown'>Link 3</li>
</ul>
</nav>
<div class="desktop-dropdown collection-dropdown-menu small--hide">
<p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
<p>Some content</p>
</div>
Please watch how this works
In this example, the nav with classname .navigation has siblings collection-dropdown-menu and journal-dropdown-menu. But these are not siblings for collection-dropdown which is an inner element of navigation. So I have added the hover styles in navigation and so that works
Related
This question already has answers here:
nth-child doesn't respond to class [duplicate]
(3 answers)
Closed 8 years ago.
I want apply green color for the first nth child flag
<div id="axis">
<div class="super"></div>
<div class="flag">flag 1</div><!-- I want this text to be green-->
<div class="super"></div>
<div class="flag">flag 2</div>
<div class="super"></div>
<div class="flag">flag3</div>
<div class="super"></div>
</div>
Css:
#axis{
color:red;
}
#axis .flag:nth-of-type(1){
color:green;
}
#axis .flag:nth-child(1){
color:green;
}
I tried in both scenario but not working...
Fiddle
Another way DEMO
<ul id="axis">
<li class="flag">flag 1</li>
<li class="flag">flag 2</li>
<li class="flag">flag3</li>
</ul>
.flag {
list-style:none;
color:red;
}
.flag:nth-of-type(1) {
color:green;
}
Another way to acheive this is
<div id="axis">
<div class="super"></div>
<div class="flag">flag 1</div><!-- I want this text to be green-->
<div class="super"></div>
<div class="flag">flag 2</div>
<div class="super"></div>
<div class="flag">flag3</div>
<div class="super"></div>
</div>
In CSS it will be
#axis > div:nth-child(2) {
color: green;
}
Another way:
Apply a common CSS:
.flag {
/* first .flag element styles here */
/* though these styles are applied to all .flag elements, in later step they get overridden. */
}
.flag + .flag{
/* override above styles */
/* Applies css to all the .flag elements except the first one */
}
I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!
This is what I have right now: http://jsfiddle.net/x5yvm50r/
And the code:
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}
If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually
Thanks! :)
Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/
<footer id="wrapper">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
And the CSS:
#wrapper {
background-color: green;
}
Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.
Here is more information: Advantages of using display:inline-block vs float:left in CSS
Check this fiddle
HTML
<div class="floatleft footcontainer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons</div>
<div class="clear"></div>
</div>
CSS
.floatleft {
float: left;
margin: 0 20px 0 0;
width: 400px;
}
.clear {
clear:both
}
.footcontainer {
background-color:lightblue;
float:left;
}
I've added a div which holds the 3 divs and gave it the background color and the float property.
Here you go: http://jsfiddle.net/5s4w19zy/
I wrapped the three floated divs in a container div (footer) and then floated them inside of that.
<footer>
<div>
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div>
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div>
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
footer
{
width: 100%;
height: 150px;
background: #f5f5f5;
overflow: hidden;
}
footer div
{
float: left;
display: block;
margin: 0 0 0 0;
width: 33.333333%;
height: 150px;
}
.clear {clear:both}
HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:
<footer id="footer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
#footer { background-color:#asYouLikeIt; }
I have used flex box:
check this : http://jsfiddle.net/x5yvm50r/9/
HTML:
<footer>
<section class="left">l</section>
<section class="center">c</section>
<section class="right">r</section>
</footer>
CSS:
footer{
width:100%;
display:flex;
}
footer section{
flex:1;
}
I'm attempting to make tabs in a section in my body, but it's not showing up as tabs, but rather just links to sections of the text.
<div class="tabs">
<ul id="tabsnav" data-tab>
<li class="selected">Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
</div>
<div id="tab-1">
<p> tab 1</p>
</div>
<div id="tab-2">
<p> tab 2.</p>
</div>
<div id="tab-3">
<p> tab 3.</p>
</div>
<div id="tab-4">
<p> tab 4.</p>
</div>
In the CSS I have this:
div.tabs #tabsnav {
list-style-type: none;
float: left;
text-align: left;
margin: 60px;
background: #000000;
width:300px;
}
div.tabs #tabsnav li{
display: inline;
}
I'm new to tabs, so if anyone could throw me any hints as to how to make them show up so that only one tab is visible at a time, it would be greatly appreciated.
I believe you will need to use the :target selector in your CSS http://www.sitepoint.com/css3-tabs-using-target-selector/
This is my first foray into Twitter Bootstrap. Take a look at this template here:
http://twitter.github.com/bootstrap/examples/hero.html
Underneath one of the headings, I'd like to break a long ul into two columns:
*item1 *item4
*item2 *item5
*item3 *item6
It can be two separate <ul>s in the code, it just needs to look like two bulleted columns next to each other.
Can someone recommend a method to me? My problem so far is keeping it responsive to screen size so on narrows screens the two separate lists somewhat stack on each other again.
Thanks!
I would use a fluid grid system inside the span4 div tag. Check out the fluid grid system here...
http://getbootstrap.com/css/#grid
Using this method, the lists will stack on each other again when the screen is small.
Here's an example...
<html>
<head>
<title></title>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<h4>Column 1</h4>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="span6">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span4">
<h4>Column 2</h4>
</div>
<div class="span4">
<h4>Column 3</h4>
</div>
</div>
</div>
</body>
</html>
this should help in case you have one ul an many li's
css
#media (min-width:768px) {
.col2{ width:100%;}
.col2 li{width:49%; float:left;}
}
html(haml)
.box-body
.row-fluid
%ul.col2.clearfix
-#categories.each do |category|
%li
=category.title
I have an area on my page #topLeft which has a minimum height set to it.
Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;
At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.
I am assuming the problem is called by mixing a min-height with absolute positioned content?
Any ideas how to get round this, code below:
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#heroBanners {bottom:0; position:absolute;}
It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.
<div id="parent">
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#parent {bottom:0; position:absolute;}