How do I make a display:none; div within a div to display the hidden div when I hover over it?
The code:
#inside_content{
display:none;
}
#box:hover #inside_content{
display:block; <!--Dosen't work-->
}
<div id="box">
<div id="inside_content">
</div>
</div>
Is it better to use class?
Your code works very well. See the following code:
#inside_content {
display:none;
}
#box:hover #inside_content{
display:block;
}
<div id="box">
Show content inside!
<div id="inside_content">Hello World</div>
</div>
You don't have content in the div section. Your code
<div id="inside_content">
</div>
Related
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
In my css I have the following:--
and my html code is
<div class="contanier">
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
</div>
But I am getting the page which is not appearing in the middle..To achieve this,what I have to do??
add in display:block in place of display:inline-block
.contanier
{
display:block;
}
I have a parent div and 3 divs inside it. I want to hide the last child div. I tried using last-child CSS selector, but it is not working.
The order of divs:
<div class="wysibb-toolbar">
<div class="wysibb-toolbar-container"></div>
<div class="wysibb-toolbar-container"></div>
<div class="wysibb-toolbar-container">//(This is to be made display:none)
<div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
<div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
</div>
</div>
I have tried this:
div.wysibb-toolbar div:last-child {
display:none;
}
Try this
div.wysibb-toolbar>div:last-child {
display:none;
}
or just
div.wysibb-toolbar-container:last-child{
display:none;
}
or More generic
div.wysibb-toolbar>div.wysibb-toolbar-container:last-child{
display:none;
}
Your problem is that you have mis-typed the word display and have spelt it disply
Try this out
div.wysibb-toolbar div:last-child {
display: none;
}
<div class="wysibb-toolbar">
<div class="wysibb-toolbar-container">Test 1</div>
<div class="wysibb-toolbar-container">Test 2</div>
<div class="wysibb-toolbar-container">Test 3 (should be hidden)</div>
</div>
:last-child selector matches every element that is the last child of its parent.Try this JSFIddle
.wysibb-toolbar-container:last-child {
display:none;
}
I have 3 div tags inside a div tag, all I want in same line. That I did using some css, but when I zoom out/in browser content goes in different lines.
css code:
#about{
float:left;
width:33%;
}
.about-panel{
width:100%;
}
html code:
<div class="about-panel">
<div id="about">
<p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
</div>
<div id="about">
<p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
</div>
<div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
</div>
</div>
I want all content as it is in same line even after zoom in/out
How I need the contents to be aligned
A jsfiddle would have been nice but for time being, try display:inline-block; in you about-panel. It throwing up because of missing display type for the div most probably!!
.about-panel{
width:100%;
display:inline-block; /* add this and check*/
}
#about{
float:left;
width:33%;
}
There can only be one id.. change the "about" to class.. That should work!