I created a css hover menu with only one level.
HTML
<div id="menu">
<ul>
<li id="item1">item1
<div id="content1"> </div>
</li>
<li id="item2">item2
<div id="content2"> </div>
</li>
<li id="item3">item3
<div id="content3"> </div>
</li>
</ul>
</div>
CSS
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#menu {
width: 0%;
padding-left: 16px;
height: 100%;
background-color: red;
}
#menu:hover {
width: 20%;
}
#content1, #content2, #content3 {
width: 300%;
height: 1000%;
margin-left: 100%;
background-color: green;
visibility: hidden;
left:16px;
}
#item1:hover #content1, #item2:hover #content2, #item3:hover #content3 {
visibility: visible;
}
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#item1, #item2, #item3 {
width: 100%;
height: 10%;
display:none;
}
#menu:hover #item1, #menu:hover #item2, #menu:hover #item3 {
display:block;
}
http://jsfiddle.net/6Bv6C/12/
The menu is hidden at first but will show when you hover over it. The content boxes will show, wenn you hover over the menu items. My problem is: I would like all the content boxes (green background) to show at the same position (top:0 relative to body; left:/width of #menu/) and not relative to their parents (#item1,2,3). All elements should maintain dynamic width and height.
Is this possible with css? If not could I use jquery or js?
Cheers!
I used position:absolute to solve your problem. An absolutely positioned item calculates its' point of reference as the closest parent with the position:relative style. I updated your fiddle with the changes so you can see what I mean: http://jsfiddle.net/6Bv6C/13/
Related
I'm trying to make something like this website where you hover over text shows image in the background.
I've tried everything I've found here but nothing's worked. The closest thing I got it to work was from this answer but the image would show inside a small column minimized where the text is located. I'm open to implementing JS if it's impossible with pure CSS. The code is below but here's my jsfiddle. Help would be greatly appreciated.
HTML
<div class="wrapper">
<div class="menu">
<div class="column">
<ul>
<li><span>column 1</span></li>
<li>filler 1</li>
</ul>
</div>
<div class="column">
<ul>
<li><span>column 2</span></li>
<li>filler 2</li>
<li><a id="preview1" href="#page1">link 1</a></li>
<li><a id="preview2" href="#page2">link 2</a></li>
</ul>
</div>
<div class="preview">
<img id="preview1-show" src="http://via.placeholder.com/1000x500">
<img id="preview2-show" src="http://via.placeholder.com/1000x500">
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100vh;
padding: 6em;
position: fixed;
}
.menu {
width: 100%;
height: auto;
overflow: hidden;
}
.column {
float: left;
width: 20%;
padding: 1em;
text-align: center;
z-index: 1;
}
.column ul {
margin: 0;
padding: 0;
}
.column li {
position: relative;
display: block;
padding: .3em;
}
.column li span {
font-weight: bolder;
}
.column li a {
display: inline-block;
color: #000;
text-decoration: none;
cursor: pointer;
}
.preview {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
#preview1:hover ~ #preview1-show {
visibility: visible;
}
#preview2:hover ~ #preview2-show {
visibility: visible;
}
I would create on text hover
{
background-image: url("image url");
background-repeat: no-repeat;
background-position: your position;
}
nvm I figured it out.
For anyone interested I removed the css that targeted div id's and visibility:hidden; from .preview and instead added display: none; z-index: -1; to .preview and used this JS code:
$(function(){
$('#preview1').hover(function(){
$('#preview1-show').show();
},function(){
$('#preview1-show').hide();
});
$('#preview2').hover(function(){
$('#preview2-show').show();
},function(){
$('#preview2-show').hide();
});
});
This isn't the perfect solution since I have to target each individual link (I have 13) but it works exactly the way I want.
If anyone has more elegant solution please share.
For a page on a site I am building, I have implemented an effect where I have a grid of tiles, and the contents of each tile is fixed to the page (position: fixed) and only visible when the tile containing it "scrolls past". So, all tile contents are effectively piled on top of each other at the top of the page, but are clipped from view until the parent element overlaps it.
To briefly explain the technique, tiles are relatively positioned and contain an absolutely positioned element with a clip rectangle, which in turn contain the fixed element.
However, it does not render properly in IE/Edge; when the page initially loads it looks fine, but when scrolling, the clipped tile contents don't appear when they should. It works fine in Chrome, Firefox, and Safari (actually, the same issue occurs in Safari util transform: perspective(0); is added to the tile contents). It seems that IE "forgets" to render the tile contents, and only does so when the window is resized or some other page-wide event occurs that requires it to recalculate all elements.
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
ul li {
margin-top: 10%;
position: relative;
border: 1px solid green;
}
ul li, ul li > div > div a {
width: 35%;
height: 0;
padding-bottom: 25%;
display: block;
}
ul li:nth-child(odd) {
clear: both;
float: left;
margin-left: 10%;
}
ul li:nth-child(even) {
float: right;
margin-right: 10%;
}
ul li > div, ul li > div > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ul li > div > div {
clip: rect(0, auto, auto, 0);
}
ul li a {
top: 0;
margin-top: 10%;
position: fixed;
background-color: #000;
color: #fff;
transform: perspective(0); /* necessary for Safari */
}
ul li:nth-child(odd) a {
left: 10%;
}
ul li:nth-child(even) a {
right: 10%;
}
ul li a h1 {
text-align: center;
line-height: 0;
padding-top: 30%;
}
<ul>
<li>
<div>
<div>
<a><h1>1</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>2</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>3</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>4</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>5</h1></a>
</div>
</div>
</li>
<li>
<div>
<div>
<a><h1>6</h1></a>
</div>
</div>
</li>
</ul>
<div style="clear: both; height: 1000px">
simulating a bunch of height
</div>
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are
32px X 43px. How can I prevent from an inside text to extend the <li> elements?
And how can I make the text appear on the bottom left side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.
http://plnkr.co/edit/kcjCl1?p=preview
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
What I want is a layout for each list item like:
But what I'm getting is more like:
So I want to:
Put div1 to occupy a specific width, for instance 20px (in percentage would be better...) and is heigth to fill is parent heigth (list item heigth). I already tried put heigth:100% but no effect.
div2 should occupy the rest of the horizontal space with some padding.
How can I manipulate css style to do that?
Below is my code so far:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div1"> </div>
<div class="div2">Some content</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.listItem div {
display: inline-block;
}
.div1{
width: 20px;
}
.div2{
padding: 15px;
}
</style>
Something like this? DEMO
ul {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
li {
display: table-row;
}
.listItem div {
display: table-cell;
}
.div1 {
width: 10%;
}
.div2 {
width: 90%;
padding: 15px;
}
Using jQuery Mobile 1.3 I used an example using a listview widget from the docs to achieve what I think you are going for.
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>
<style type="text/css">
.div1, .div2wr{
height:30px;
}
.div1 {
width: 10%;
background:black;
float:left;
}
.div2wr {
width: 90%;
float:right;
}
.div2 {
margin:5px;
height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
background:blue;
}
.clr{
clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>
The solution that I used was:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div2" style="border-left-color: #{{:CorBack}};">
Some content
</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.div2{
padding: 15px;
border-left-width:15px;
border-left-style:solid;
}
</style>