This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Closed 8 years ago.
I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="center">
<div id="content">
<h1>Home</h1>
<div id="product1"></div>
<div id="product1hover"></div>
<div id="product2"></div>
<div id="product2hover"></div>
<div id="product3"></div>
<div id="product3hover"></div>
</div>
</div>
</body>
</html>
CSS:
#center
{
position: relative;
margin: auto;
width: 1000px;
height: 600px;
top: 20%;
border:5px solid;
border-radius:15px;
background-color: #305052;
}
#product1
{
position: relative;
float: right;
margin-top: 50px;
margin-right: 40px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product1:hover
{
#product1hover
}
#product2
{
position: relative;
float: right;
margin-top: 50px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product3
{
position: relative;
float: right;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
If you change your HTML as follows
<div id="product1">
<div id="product1hover"></div>
</div>
The following css will do
#product1hover{
display:none;
}
#product1:hover #product1hover{
display:block;
}
Update
With your existing HTMLyou can achieve this as follows:
#product1hover{
display:none;
}
#product1:hover + #product1hover{
display:block;
}
Related
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
I've been doing the codeacademy HTML/CSS course and understood it fine right up until the end where I had to 'Build a Resume'. I've compared my code to the example at the start of the exercise but I just can't understand why my .right class is sitting at the far right and not lining up correctly. Also the header and the footer are the same width (95%) but the footer is noticeably smaller and doesn't stretch as far across the screen as the header.
Any idea's?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
div {
border-radius: 5px;
}
#header {
width: 95%;
height: 50px;
background-color: lightblue;
position: fixed;
z-index: 1;
}
.left {
position: relative;
background-color: lightgreen;
height: 400px;
width: 20%;
float: left;
margin-top: 60px;
}
.right {
position: relative;
background-color: lightgray;
height: 400px;
width: 74%;
float: right;
margin-top: 60px;
margin-bottom: 10px;
}
#footer {
position: relative;
background-color: gray;
width: 95%;
height: 60px;
clear: both;
}
your .right is sitting at the far right because of float: right;, telling the div to float to the right until it hits something(screen/browser edge or another div). If you want it to connect snugly against your left div, try float: left;, which will float that div towards and against your existing .left div.
I want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}
I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It's ok in Firefox, Chrome or Safari, but not in IE.
I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I'm looking for a nice, clean snippet to make this work in all browsers (including IE...)
<style>
body{
background-color: #fff;
margin: 0;
padding: 0;
}
#subtopContainer{
background-color: #f00;
}
#subtop, #header, #content{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 150px;
}
#subtop{
height: 50px;
}
</style>
<div id='container'>
<div id='headerContainer'>
<div id='header'></div>
</div>
<div id='subtopContainer'>
<div id='subtop'></div>
</div>
<div id='contentContainer'>
<div id='content'></div>
</div>
</div>
<style>
body { background-color: #fff; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 980px; background: lime}
div.header { height: 70px; margin-bottom: 40px;}
div.content { height: 400px; }
div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;}
</style>
<body>
<div class="bar"></div>
<div class="wrapper">
<div class="header">
Header Stuff
</div>
<div class="content">
In order for this to work,
div.bar 'top' = div.header 'height'
div.header 'margin-bottom' = div.bar 'height'.
</div>
</div>
</body>
Can anyone see why the following does not quite work. The image is vertically centered within 'VCentInner' correctly but the following Title text seems to align with the image top rather than being vertically within VCentInner.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#header{
position: absolute;
top: 0px;
height: 10em;
width: 100%;
background-color: blue;
}
.VCentOuter {
top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table;
background-color: green;
}
#headinner{
height: 8em;
background-color: yellow;
}
.VCentInner {
display: table-cell; vertical-align: middle;
background-color: pink;
}
#header img {
float: left;
<!--height: 2em;-->
background-color: yellow;
}
#title{
text-align: center;
color: black;
}
#clearheader{
height: 10em;
}
.centered{
display: block;
margin-left: auto;
margin-right: auto;
}
.txtcenter{
text-align: center;
}
#content{
border: 1px red dotted;
}
#menu {
position: absolute;
bottom : 0px;
width:100%;
height: 2em;
background: cyan;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="clearheader"></div>
<div id="content">
Content
</div>
</div>
<div id="header">
<div class="VCentOuter" id="headinner">
<div class="VCentInner" id="title">
<img src="images/burgee2.gif"/>
Title text
</div>
</div>
<div id="menu">
Menu goes here - tab1 - tab2 - tab3 - tab4 - tab5 - tab6 - tab7 - tab8 - tab9 - tab10 - tab11 - tab12
</div>
</div>
</body>
</html>
Unless that image needs to be a link (or otherwise an actual element), the easiest solution is probably to make it into a CSS background-image:
<div class="VCentInner" id="title">
Title text
</div>
With extra CSS:
#title {
background: url(http://dummyimage.com/100x100/000/fff) left center no-repeat
}
If it does need to be an element:
<div class="VCentOuter" id="headinner">
<div class="VCentInner" style="width: 100px">
<img src="http://dummyimage.com/100x100/000/fff" />
</div>
<div class="VCentInner" id="title">
Title text
</div>
</div>