Making a div appear upon hovering on another div

Making a div appear upon hovering on another div - css

I have searched a lot for this, I can not find an answer.
I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.
Here is what I have:
Fiddle
HTML:
<div id="NavBar">
<div id="Mainbutton">
<center><h2 style="margin-top: 7px;"> Main </h2></center>
</div>
<div id="topic1button">
<center><h2 style="margin-top: 7px;"> Skiing </h2></center>
</div>
<div id="topic2button">
<center><h2 style="margin-top: 12px;"> Movies </h2></center>
</div>
</div>
<div id="Main">
<div id="IntroImage">
</div>
<div id="Title">
<h2 id="Titlemain"> TYLER POTTS</h2>
</div>
<div id="SubTopicNav">
<div id="subTopicNav1">
<center><h2>About Me</h2></center>
</div>
<div id="subTopicNav2">
<center><h2>Skiing</h2></center>
</div>
<div id="subTopicNav3">
<center><h2>Movies</h2></center>
</div>
</div>
<div id="SubTopicInfo">
<div id="SubTopicInfo1">
<h1> Test </h1>
</div>
<div id="SubTopicInfo2">
</div>
<div id="SubTopicInfo3">
</div>
</div>
<div id="Footer">
</div>
</div>
CSS:
#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}
#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}
#topic2button:hover
{
background-color: #FFD640;
}
#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}
#Mainbutton:hover
{
background-color: #FFD640;
}
#topic1button
{
width: 100px;
height: 45px;
float: left;
}
#topic1button:hover
{
background-color: #FFD640;
}
#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}
#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}
#IntroImage:hover
{
opacity: 0.8;
}
#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}
#Titlemain
{
margin-left: 170px;
margin-top: 6px;
}
#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}
#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav1:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}
#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}
#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}
Thanks.

You wont be able to do so with just CSS in your situation.
#subTopicNav1:hover + #SubTopicInfo1 {}
Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.
explained here:
How to affect other elements when a div is hovered
So you probably should look into a solution with Jquery/javascript!

Please try something like this:
(Hide the extra info panel by default, then make it visible on :hover like below)
<style>
.link {
display: block;
}
.link:hover p{
visibility: visible;
}
.info{
visibility: hidden;
}
</style>
<body>
<div class="link">
Text Here
<p class="info"> Info Here</p>
</div>
</body>

Here is the working Demo http://jsfiddle.net/H9fGP/1/
maybe its not the exact example. but I hope it helps :)
the main thing is that the sub info has absolute position
I rearanged the html and added some css.
.container
{
border-top: 5px solid #FFD640;
margin-top: 25px;
}
#SubTopicNav
{
position:relative;
}
#SubTopicNav > div > div
{
position:absolute;
left:200px;
top:0px;
display:none;
width: 600px;
height: 400px;
margin-top: 25px;
float: left;
}
#SubTopicInfo
{
display:none;
background-color: #FFD640;
}
#SubTopicNav > div:hover >div
{
display: block;
}

Related

How to make image centered and at the bottom in HTML

This is Html page and I can't make the image .loader centered and at the bottom of .please-wait. How to make it centered and at the bottom?
HTML File
<div id="container">
<main id="main" class="welcome">
</main>
<aside id="aside-right">
<img alt="Welcome" src="../images/panel.png" />
<div class="please-wait">
<h3>Please Wait</h3>
<img class="loader" src="../images/loading.gif" alt="Loading">
</div>
</aside>
</div>
</body>
CSS File
#container
{
/* border: 2px solid black; */
width: 100.6%;
margin: 5px;
white-space: nowrap;
overflow: hidden;
position:relative;
}
#main
{
Position:absolute;
/* border: 2px solid blue; */
float: left;
margin: 3px;
width: 65%;
display: block;
top: 25%;
}
#main.welcome
{
test-align: center;
}
#main.welcome h2
{
width: 58%;
margin: 0 auto;
text-align: center;
word-break: normal;
word-wrap: break-word;
white-space: pre-line;
/* border: 2px solid red; */
}
#aside-right
{
position:relative;
max-height:200px;
height:200px;
border: 2px solid green;
float: right;
width: 27%;
}
#aside-right img
{
position:relative;
width:100%;
float:right;
}
.please-wait
{
position:absolute;
border:2px solid red;
height: 100%;
width: 100%;
}
.please-wait h3
{
position: relative;
/* border:2px solid blue; */
margin: 15px;
top:30px;
text-align: center;
}
.please-wait img
{
position: relative;
margin: 15px;
text-align: center;
max-width: 20%;
border:2px solid blue;
}
Can you please help me to center it and make it at the bottom of .please-wait
JSFiddle
Can you please help me to center it and make it at the bottom of .please-wait

CSS3 Flex can be good idea for manipulate image and flexible layout....
html,
body {
height: 100%;
margin: 0;
}
.main {
height: 100%;
border: 1px dotted blue;
position: relative;
min-height: 500px;
}
.container {
height: 100%;
padding: 0 20px;
}
.image {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image img {
align-self: flex-end;
}
<div class="main">
<div class="container">
<div class="image">
<img src="http://unsplash.it/300/220?random">
</div>
</div>
</div>

Use this fiddle
Added another class for panel image and this...
.please-wait img {
position: relative;
margin: 15px;
text-align: center;
padding: 0 50px;
margin-top: 110px;
padding-bottom: 0;
border: 2px solid blue;
}

Dropdown ignore parent overflow

I have a modal where I have dropdowns in the element.
The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.
Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?
You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?
Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.
Prefer a CSS only solution.
Thanks!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: absolute;
top: 0;
right:0;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: fixed;
border: 1px solid red;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

you need used z-index 999, and position relative in dropdown css.
Example:
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: relative;
z-index: 9999;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

three divs in header, one left, one dynamic, one right

I have a problem concerning three divs in the header of my website: http://www.pianoson.nl.
What I want:
The middlemenu needs to fill up the space between the left and the right menu. When you make the browser smaller, only the middle-menu should get smaller too.
The middle menu needs to have a minimum width, so the text in it does not get messed up.
At the moment the rightmenu drops down below the leftmenu at some point, but the three menu's should always stay together in the top.
I hope this is possible with css/html.
Thanks in advance!
The html-page:
<body>
<div id="menu">
<div id="leftmenu">
<a href="http://www.pianoson.nl">
<div class="key white"ID="home">
<img src="http://www.pianoson.nl/images/home_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="http://www.pianoson.nl/genres.htm">
<div class="key white"ID="repertoire">
<img src="http://www.pianoson.nl/images/music2_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="http://www.pianoson.nl/samples.htm">
<div class="key white "ID="samples">
<img src="http://www.pianoson.nl/images/music_32.png"></img>
</div></a></div>
<div ID="middlemenu"></div>
<div id="rightmenu">
<a href="https://www.linkedin.com/e/fpf/184174635">
<div class="key white "ID="linkedin">
<img src="http://www.pianoson.nl/images/linkedin_32.png"></img>
</div></a>
<div class="key black"ID="Csharp"></div>
<a href="https://www.facebook.comthijs.waleson">
<div class="key white"ID="facebook">
<img src="http://www.pianoson.nl/images/facebook_32.png"></img>
</div></a>
<div class="key black"ID="Dsharp"></div>
<a href="https://plus.google.com/u/0/112443072032497378793/">
<div class="key white "ID="googleplus">
<img src="http://www.pianoson.nl/images/google_32.png"></img>
</div></a></div>
</div>
And the css page:
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;}
div {
display: inline-block;}
#middlemenu {
height: 230px;
float: none;
width: 100%;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;}
#menu{
width: 100%;
display: inline;
position: relative;}
#leftmenu{
float: left;}
#rightmenu{
float: right;}
div a div img{
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;}

Is this you are looking for..
modify the css to this
body {
background-color: #F2F2F2;
width: auto;
overflow: hidden;
}
div {
}
#middlemenu {
height: 230px;
margin-left: 130px;
margin-right: 130px;
min-width:300px;
border: 1px solid #000000;
position: relative;
border-radius: 5px;
z-index: 1;
}
#menu {
width: 100%;
position: relative;
}
#leftmenu {
float: left;
}
#rightmenu {
float: right;
position:absolute;
top:0;
right:0;
}
div a div img {
vertical-align: -210px;
position: static;
bottom:5px;
color: #000000;
}
.key {
float: left;
border-radius: 5px;
border: 1px solid #000000;
position: relative;
text-align:center;
}
.white {
background-color: #FFFFFF;
height: 230px;
width: 40px;
z-index: 2;
}
.black {
background-color: #000000;
height:150px;
width: 24px;
z-index: 3;
margin-left:-15px;
margin-right: -15px;
}
.white:hover {
background-color: #FFFFFF;
height: 345px;
width: 60px;
z-index: 1;
}
.key:hover img {
position: static;
vertical-align: -335px;
bottom: 5px;
padding: 14px;
}

How to have a fixed and % elements alongside one another in a line

I want a container to be filled in a single line in the following way:
60px fixed yellow
And then of the remaining space:
20% blue
60% black
20% red
This is what I have so far (doesn't work):
CSS
body {
background-color: #fff;
padding: 0px;
margin:100px;
}
.container {
overflow: hidden;
padding: 0px;
margin: 0px auto;
width: 90%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 6px 0px #ccc;
}
.blue_container {
background-color: blue;
width: 20%;
float:left;
}
.black_container {
width:60%;
float:left;
background-color: black;
}
.red_container {
width: 20%;
float:left;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}
HTML
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_container"><br/></div>
</div>
<div class="transparent_container" type="resizable">
<div class="blue_container"><br/></div>
<div class="black_container"><br/></div>
<div class="red_container"><br/></div>
</div>
</div>

You were on the right track, all you have to do is subtract that fixed containers width from your fluid container with a left margin. Try this:
.transparent_container {
margin-left: 60px;
}

Here is your answer Meysam:
http://jsfiddle.net/EcZ5j/
HTML:
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_conatiner">
<br/>
</div>
</div>
<div class="transparent_container transparent_container_2" type="resizable">
<div class="blue_container">
<br/>
</div>
<div class="black_container">
<br/>
</div>
<div class="red_container">
<br/>
</div>
</div>
</div>
CSS:
.container {
overflow: hidden;
padding: 0px;
margin: 0px auto;
width: 90%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 6px 0px #ccc;
}
.blue_container {
background-color: blue;
display: inline-block;
width: 20%;
}
.black_container {
width:60%;
display:inline-block;
background-color: black;
}
.red_container {
width: 20%;
display:inline-block;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container_2{
padding-left: 60px;
word-spacing: -1em;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}

How to create such layout in CSS?

Here's what I tried: http://jsfiddle.net/tJxCD/6/
I want to create a layout like this:
But I don't know how to make the third rectangle on bottom of the second.

http://jsfiddle.net/kHT8z/1/
.wrapper {
overflow: hidden;
width: 500px
}
.top {
border: 3px solid #000;
width: 300px;
height: 170px;
margin: 5px;
float: left;
}
.right {
border: 3px solid #000;
width: 150px;
height: 75px;
margin: 5px;
float: left;
}
.bottom_small {
border: 3px solid #000;
float: left;
margin: 5px;
height: 50px;
width: 90px;
}
.bottom_big {
border: 3px solid #000;
float: left;
margin: 5px;
height: 75px;
width: 150px;
}
<div class="wrapper">
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
</div>
<div class="bottom_big"></div>
<div class="bottom_small"></div>

Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.
HTML layout:
<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>
CSS:
div {
border: 1px solid gray;
margin: 5px 5px 0 0;
float: left;
}
div.large{
width: 300px;
height: 175px;
}
div.medium {
width: 150px;
height: 84px;
}
div.small{
width: 100px;
height: 44px;
}

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Making a div appear upon hovering on another div - css

Related

How to make image centered and at the bottom in HTML

Dropdown ignore parent overflow

three divs in header, one left, one dynamic, one right

How to have a fixed and % elements alongside one another in a line

How to create such layout in CSS?

Categories

Resources