Here is a simple jsbin example: http://jsbin.com/gusaditako/edit?html,css,output
Can anyone explain why the main part is repainting when hovering over menu items? (enable Paint flashing from chrome devtools to make sure).
As I see the pseudo :before selector is to blame but can't figure out exactly why. If you delete the last ul#menu li:hover:before part it doesn't trigger the main part repaint anymore...
Code from the above jsbin:
HTML:
<div id="sidebar">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="main">Main part. Why does this repaint on menu hover?</div>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar {
width: 200px;
float: left;
background-color: lightgreen;
}
#main {
margin-left: 200px;
width: 500px;
}
ul#menu li {
height: 30px;
line-height: 30px;
padding-left: 20px;
position: relative;
}
ul#menu li:hover {
background-color: lightblue;
}
ul#menu li:hover:before {
content: "";
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
height: 100%;
}
Well I guess Chrome internally thinks it has to repaint the right part as you're inserting a new element which could possibly affect the main content. One quick fix would be to set the whole sidebar to position:absolute; if that's possible in your case.
#sidebar {
position: absolute;
width: 200px;
float: left;
background-color: lightgreen;
}
http://jsbin.com/lilusajufe/4/edit?html,css,output
Related
For example I have fixed nav, is there a way to anchor the list items to the bottom of the nav? I attempted to give the list items a fixed position too but this messes up their layout as you can see at fiddle
here is my code:
#nav {
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav>ul>li {
display: inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: fixed;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
Any suggestions on how this can be done?
When you use a fixed or absolute position it takes an element out of the flow of the document and hence they stack up on top of each other when you apply those positions to the li elements.
Instead you should be absolutely positioning the ul block to the bottom of the #nav:
#nav > ul {
list-style: none;
margin: 0;
position: absolute;
bottom: 0;
}
#nav > ul>li {
display: inline;
}
As I understand your question, you wish to have the list elements at the bottom of your header. Just change position: fixed; to position: relative;. This keeps the elements flow along with the flow of the page.
Here is your solution:
#nav{
height: 75px;
width: 100%;
position: fixed;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav > ul{
list-style: none;
margin: 0;
}
#nav > ul>li{
display:inline;
/*these two lines were my attempt at anchoring the list items to the bottom f the #nav, but it throws everything out of wack*/
position: relative;
top:50px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
If you want something to be anchored to the bottom of an element, but still remain in the flow of the page, try using relative positioning. That essentially means you give the #nav element relative positioning, and you give the li elements relative positioning as well:
#nav {
height: 75px;
width: 100%;
position: relative;
top: 0;
z-index: 1;
border-bottom: 1px solid white;
background-color: #157FFB;
border-bottom: 2px solid #eeeeee;
}
#nav>ul {
list-style: none;
margin: 0;
}
#nav ul li {
display: inline;
position: relative;
top: 45px;
}
<div id="nav">
<ul>
<li class="align_left">LOGO</li>
<li class="align_right">Repairs/Upgrades</li>
<li class="align_right">Networking</li>
<li class="align_right">Remote Backups</li>
<li class="align_right">Data Recovery</li>
</ul>
</div>
This seems to work pretty well, please tell me if it doesn't.
The problem you encountered was that fixed positioning put them all in a mess. Fixed positioning positions ALL the items relative to the viewport, so if you had all the lis with
position: fixed;
top: 45px;
They would all go in the same spot.
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.
I am trying to make a header menu work as I like. I have only minor experience with CSS.
I have only two main menu items, each with a dropdown. I want for it to look something like this when hover on first menu item:
And something like this when hovering on second menu item:
Note: I want the "Menu 1" and "Menu 2" to be positioned as they are in the images, including this: Dropdown for Menu 1 is to the right of Menu 1, dropdown of Menu 2 is to the left of Menu 2. I forgot to include "Logo" in the images, but it is centered in the middle.
I have a fiddle of what I have managed so far (check it out here).
I have two problems:
The width is not 100%. The blue background is 100%, but I tried for the two menu items to be 25% each and then there is a logo-div in the middle that should fill out the rest (with margin: auto), so it is 100% all together.
The active main menu item gets pushed down on hover
How to fix it to work as intended?
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: yellow;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
vertical-align: text-top;
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top:36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
<div class="header">
<section class="nav">
<h3 class="width-25">Menu item 1</h3>
<ul>
<li>Dropdown 1 item 1</li>
<li>Dropdown 1/2</li>
<li>item 1 # 3</li>
<li>Dropdown 1 item 4 long</li>
<li>DD 1-5</li>
<li>Dropdown 1 i. 6</li>
</ul>
</section>
<span class="fill-width">Logo</span>
<section class="nav">
<ul>
<li>Dropdown 2 item 1</li>
<li>Dropdown 2/2</li>
<li>item 2 # 3</li>
<li>Dropdown 2 item 4 long</li>
<li>DD 2-5</li>
<li>Dropdown 2 i. 6</li>
</ul>
<h3 class="width-25">Menu item 2</h3>
</section>
</div>
I updated your fiddle with a way of how you could do this.
JSFiddle
It probably isn't the best or the cleanest way, but I did this in about 10 mins quickly. It should give you a base on how to go further.
The main problem was pretty much not giving your h3 seperate classes like so:
<h3 class="right">
I hope this helps you with your problem :).
Some few things:
Add position: relative to .nav.
Give position: absolute to .nav ul.
Now check this out:
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: green;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
body {
margin: 0px;
}
.header {
background-color: royalblue;
width: 100%;
margin-bottom: 1em;
height: 3.15em;
color: green;
box-shadow: 0px 0px 5px black;
}
.nav h3 {
display: inline-block;
margin-left: 0.3em;
}
section {
display: inline-block;
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top:36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
}
.nav:first-of-type h3 {
text-align: right;
}
.nav ul {
display: inline-block;
padding: 0;
top: 36px;
list-style-type: none;
width: 15em;
margin-top: 4em;
display: none;
}
.nav:nth-of-type(2) ul {
text-align: right;
}
.nav:hover ul {
display: inline-block;
}
.width-25 {
width: 25%;
}
.fill-width {
margin: auto;
}
.nav {
position: relative;
}
.nav ul {
position: absolute;
}
<div class="header">
<section class="nav">
<h3 class="width-25">Toolbox</h3>
<ul>
<li>ECMAScript 2015 (ES6)</li>
<li>TypeScript/ES7</li>
<li>Observables</li>
<li>Building/Deploying</li>
<li>Components</li>
<li>View/Input Data</li>
</ul>
</section>
<span class="fill-width"></span>
<section class="nav">
<ul>
<li>Forms</li>
<li>Pipes</li>
<li>Services</li>
<li>Directives</li>
<li>Dependency Injection</li>
<li>Testing</li>
</ul>
<h3 class="width-25">Angular 2</h3>
</section>
</div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
You need to set the position to absolute on the <ul> element to fix the issue of active menu getting pushed on hover.
position: absolute;
Check out this updated jsFiddle.
Also, what do you mean by the width is not 100%?
How can i create a marker that appears on top of the menu list items when i hover over them ?Like the one they have here .
It's possible to create with only css ?
EDIT:I don't want the code from you , i just want some tips because i don't know from where to start.
Here is a minimal example of what you want to achieve. The most important parts are the :before pseudo element and the position: relative of <a>. Please notice that the width of those "markers" is the width property of your pseudo element. (In this case it's 2px). Here is the CSS-Part of the marker pseudo element.
a:hover:before {
content:"";
width: 2px;
height: 20px;
background: #000;
position: absolute; /* Only works well when the parent is 'position:relative' */
left: 50%;
top: -10px;
}
Minimal Example Snippet
html * {
box-sizing: border-box;
}
ul {
list-style: none;
}
ul > li {
display: inline-block;
}
li > a {
padding: 5px 10px;
position: relative;
}
a:hover:before {
content: "";
width: 2px;
height: 20px;
background: #000;
position: absolute;
left: 50%;
top: -10px;
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
</li>
<li>Item 5
</li>
</ul>
If you have a simple navigation along the lines of:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
...then you can create a basic hover effect using the :hover CSS pseudo-class:
ul li a:hover {
border-top: 2px solid black;
}
If we're talking just CSS, have a look at the :hover pseudo class.
This can be combined with visiblity to create something like this:
span {
visibility: hidden;
font-weight: bold;
}
p:hover span {
visibility: visible;
}
<p><span>| </span>hello</p>
Try this only CSS:
CSS
.menu-wrap {
overflow: hidden;
width: 100%;
height: auto;
position:relative;
}
.menu-wrap div{
position:relative;
margin-top:100px;
display:inline-block;
border:2px solid red;
width:100px;
height:10px;
padding:10px;
}
.menu-wrap div:hover:before{
content:'|'; /*--------you can put image here as marker*/
position:absolute;
bottom:40;
font-size:1.3em;
margin-left:50px;
font-weight:bold;
}
HTML
<div class="menu-wrap">
<div class="menu-item"></div>
<div class="menu-item"></div>
<div class="menu-item"></div>
</div>
See if it is what you want.
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>