I'm trying to make it so that I have 2 divs, one on the top part of the screen with a name, and one on the bottom of the screen with some buttons. If you hover over 1 of the divs, they should both become visible. I found out about using the + and the ~ to make the second one appear while hovering over the first div, but can't find any way to do it the other way around. Here's what I have now: http://codepen.io/anon/pen/ojpqao
html:
<div class="bg">
<div class="topbar"></div>
<div class="bottombar"></div>
</div>
css:
.bg {
background-color: red;
width: 200px;
height: 200px;
}
.topbar {
width: 200px;
height: 20px;
background-color: green;
}
.bottombar {
width: 200px;
height: 20px;
background-color: green;
top: 180px;
position: absolute;
}
.topbar:hover, .bottombar:hover, .topbar:hover + .bottombar {
background-color: blue;
}
I would just change up your markup a little, since your bottom bar is absolutely positioned anyway:
<div class="topbar">
<div class="bottombar"></div>
</div>
Then you can do:
.topbar:hover,
.topbar:hover .bottombar {
background-color: blue;
}
http://codepen.io/inorganik/pen/gaoeEQ
Unfortunately I believe there is no CSS solution to this, see [this page] (Is there a "previous sibling" CSS selector?)
You probably need to do it in Javascript
Related
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
ok so i've been working on this website. mostly just as kind of a proof of concept. i haven't coded a website in quite some time now so this is basically me trying to get back onto the horse as they say.
anyway, i've searched this forum for some time now and i did find quite a few questions very similar to mine. but somehow all the solutions and all the ideas they gave me did not seem to work for me. now maybe i have a typo somewhere making my browser go crazy and misinterpret the code i don't know. what i want to do is create something like a fluid layout with 4 "columns" all being 1/4 of the canvas and full height. in each of these four columns i want to place an image which i want to be center center. so that i can move the image up to the top of the column and have some text at the center on mouseover. thing is i can't seem to find a way to place the image in the center. i tried using and containers. i even tried just aligning the without a container, but it just won't go where i want it. as i mentioned maybe i have a typo somewhere or something.
any
so this is the html code i use for layout
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
</div>
image title
</div>
<div id="col_co">last text last text</div>
</body>
and this is the css i use for formatting
html {
width: 1024px;
height: 768px;
margin: auto;
border: 1px solid;
}
body, div {
margin: 0px;
width: 100%;
height: 100%;
}
#col_home {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
}
#col_so {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 1);
}
#col_tra {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 204,51);
}
#col_co {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 153, 0);
}
#picture {
position: absolute;
left: 50%;
clear: left;
}
thanks to any- and everyone for help. as i said i'm mostly doing this for fun but still i would like to figure out a possible solution for my learning curve ;). i did run it with id-tags first but for now i don't think it makes a difference at least not in the results i get.
An easy way to achieve this is using flexbox. To center a child element in its parent, you can use justify-content:center; which aligns an item horizontally, and align-items:center - vertically. flex-flow:row makes your child elements display in a row, if you want them to display in a column, use flex-flow:column. You can see the result by running the snippet by clicking the button below.
html {
width: 1024px;
height: 768px;
margin:auto;
border: 1px solid;
}
body, div {
margin:0;
width: 100%;
height: 100%;
display:flex;
flex-flow:row;
}
#col_home {
width:25%;
}
#col_so {
width:25%;
background-color: rgb(255, 255, 1);
}
#col_tra {
width:25%;
flex-flow:column;
background-color: rgb(255, 204,51);
}
#col_co {
width:25%;
background-color: rgb(255, 153, 0);
}
#picture{
justify-content:center;
align-items:center;
}
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px"/>
</div>
</div>
<div id="col_co">last text last text</div>
</body>
Using float for column layouts like this is a thing of the past - you really want to use the flexible box model (aka "flexbox"). In the example below you can see that setting up the columns takes considerably less CSS code and each column always tries to take up any available space by "flexing." Since there are 4 columns, they all always take up 25% of the space.
Then within any individual column, you can use traditional relative positioning with top/left and margin offsets to perfectly center the image:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-flow: row;
}
.col {
flex: 1 1 auto;
position: relative;
}
#col2 {
background-color: rgb(255, 255, 1);
}
#col3 {
background-color: rgb(255, 204,51);
}
#col4 {
background-color: rgb(255, 153, 0);
}
#picture {
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: relative;
top: 50%;
}
<div class="col" id="col1"></div>
<div class="col" id="col2"></div>
<div class="col" id="col3">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
<br>image title
</div>
</div>
<div class="col" id="col4"></div>
Not sure exactly what you're trying to do on mouse hover, but this should get you pretty close. You could also turn each column into a flexing box and try to align the image with justify or align properties but that might get tricky with hover effects.
I have 3 different divs in html file.
div {
width: 200px;
height: 200px;
position: absolute;
}
.second {
background: red;
left: 200px;
top: 200px;
}
.third {
background: green;
top: 400px;
left: 400px;
}
.first {
background: yellow;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
I want to move one div.Anyone I want.But when I move any divs this must effect others.Example:When I added margin to .second div this divs change position in page flow.I want this effects to .first and .third div.How can I do it?
Expected output:
The purpose of CSS position:absolute is to remove the element from the document flow so that changing the margins or size won't effect other elements around it.
If you want your <div>s to be affected by margins of other divs, instead of using position:absolute try using float:left (or flexbox for a more powerful solution).
Instead of position: absolute let it be relative
Have a look at the CodePen Example if this solves your problem
div {
width: 200px;
height: 200px;
/* position: absolute; */
}
.second {
background: red;
margin-left: 200px;
}
.third {
background: green;
margin-left: 400px;
}
.first {
background: yellow;
}
HTML:
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
If I understand this correctly, you want to add a margin on all three divs?
We can do that by putting them inside a container.
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
And adding the margin to the container class.
.container {
margin: 10px
}
Working JSFiddle: https://jsfiddle.net/pcyq20vx/
I'm wondering the best approach for creating an overlapping navigation. I guess the easiest way is just to position it absolutely relative to the containing div? Any thoughts on an easy way to position this would be great!
I'm currently considering using a bootstrap button group for the "nav".
This is possible with minimal pure css, and without position absolute.
In order to keep your nav centered, I would recommend some markup along the lines of below (a wrapper around your nav to let you center it up).
Note that I understand you intend to use bootstrap, and you will absolutely be able to do that with what you are trying to accomplish. The below is just pseudo-code to get you the key elements / working example of how this could be accomplished.
jsFiddle
Basic markup:
<div class="nav">
<nav class="buttons">
Button 1
Button 2
Button 3
</nav>
</div>
<div class="content">
Borderered content area.
</div>
Demonstrative CSS:
div.nav {
text-align: center;
z-index: 2;
padding-top: 1px;
}
nav {
display:inline-block;
margin:0 auto;
background: white;
}
nav a {
display: inline-block;
padding: 5px 10px;
border: 1px solid black;
}
div.content {
margin-top: -15px;
z-index: 1;
border: 2px solid red;
min-height: 300px;
}
Note
With this markup, you will end up with about 4px of space between the <a> elements due to the whitespace. See this article: Fighting the Space Between Elements.
My typical solution is to move the elements onto the same line. Not quite as readable, but gets the job done, and doesn't require any other "funky" solutions:
<nav class="buttons">
Button 1Button 2Button 3
</nav>
.header {
background-color: blue;
width: 100%;
height: 200px;
margin-top: 25px;
}
.nav {
position: absolute;
left: 50%;
top: 0;
}
.nav div {
position: relative;
left: -50%;
background-color: yellow;
width: 400px;
height: 50px;
}
<body>
<div class="nav">
<div>
</div>
</div>
<div class="header">
</div>
</body>
or you can go with just one div in the nav bar putting left: 25%
I create div which is cotnst. heigth and it's overflowing content is hidden. But when i hover it then i want do display all content. I did some JSFIDDLE but all next divs moves down. I want to hovered div covers another divs on hover but i dont know how. Please, help.
html
<div class="header">
</div>
<div class="container">
<div class="content">
</div>
<div class="button">
<button>
Button
</button>
</div>
</div>
<div class="space">
</div>
<div class="footer">
</div>
css
.header
{
background-color: violet;
height: 40px;
}
.container{
background-color: orange;
width: 400px;
}
.content{
background-color: lightblue;
height: 100px;
overflow: hidden;
}
.content:hover {
overflow: visible;
height: auto;
}
.button{
background-color: lightgreen;
text-align: center;
height: 30px;
}
Make use of the position and z-index attributes as below -
Change the two css classes
.container{
background-color: orange;
width: 400px;
position : relative;
/* height same as that of content. Needed to avoid the jump effect */
height : 100px;
}
.content:hover {
overflow: visible;
position : absolute;
height : auto;
z-index:999;
}
You can try positioning it this way (absolute), it was respond to the position of the divs above it, but over look the position of divs below it so that they can be overlapped.
.container{
position:absolute;
}