I'm working on a sidebar menu and want it to be partially collapsing, which means I have to show text on hover and hide the text when not hovering. I know another question has been asked about changing another element's property on hover, but I'm having trouble changing itself and another property.
General HTML layout:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Is there a pure css solution to this problem? Any help would be appreciated!
I think what you are trying to achieve is the animation for the width, if that's what you want just remove > .text from the hover selector:
.sidebar {
position: fixed;
top: 0;
left: 0;
background-color: #1d326b;
height: 100%;
width: 60px;
transition: 0.3s;
border-radius: 0 5px 5px 0;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
color: #FFF;
}
.sidebar:hover {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.text {
width: 150px;
display: none;
}
.sidebar:hover .text {
display: block;
}
<div class="sidebar">
<!--more containers...-->
<!--text below is deeply nested-->
<p class="text">Displayed Text</p>
</div>
Would doing something like this be what you're looking for?
.text{
display: none;
}
.sidebar:hover > .text {
display: block; /*Supposed to display text*/
width: 150px; /*Expands the sidebar*/
}
.sidebar .text {
visibility: hidden;
}
.text:hover {
display: block;
width: 150px;
}
Related
Is there a way to position an img separately from the source (text) in an anchor element? For instance, in the picture, I want the word "dot" to be aligned further right than the arrow but stay on top of the arrow.
current
what I want
I know I could make them as separated anchors but I want the color of the word to change when you hover on the arrow as well and if they are separate, the a:hover doesn't work together.
I tried changing the position under .left img to be different but it moves the img and the source.
HTML code:
<span class="leftarrow">
dot<img src="images/leftarrow.png">
</span>
CSS code:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
Try this, using Pseudo-Elements. It could definitely be more optimized than this though.
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
First: wrap the dot into a <span> or <div> for better control,
Second: use a more powerfull display mode (e.g: flex or grid)
here is a sample:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>
body {
background: #caa178;
}
.navbar {
overflow: hidden;
background-color: #605f5f;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.navbar a {
display: block;
color: #cdcdcc;
text-decoration: none;
padding: 30px;
float: right;
margin-right: 10px;
postion: fixed;
}
.navbar a:hover {
background: #3a3b3b;
font-weight: 1000;
}
<!DOCTYPE>
<html>
<div class="navbar">
ABOUT ME
MY WORK
CONTACT ME
</div>
</html>
I want to bold the words inside the buttons of the navigation bar when I hover over them, but I do not want to move the other 2 buttons slightly, what can I do to solve this? Thank you.
You can either assign fixed widths to the a elements in your menu or you can use a monospace font:
body {
background: #caa178;
}
.navbar {
overflow: hidden;
background-color: #605f5f;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.navbar a {
display: block;
color: #cdcdcc;
text-decoration: none;
padding: 30px;
float: right;
margin-right: 10px;
font-family: monospace;
}
.navbar a:hover {
background: #3a3b3b;
font-weight: 1000;
}
<html>
<div class="navbar">
ABOUT ME
MY WORK
CONTACT ME
</div>
</html>
Also note that you tried to apply position: fixed to the a elements which wouldn't work properly (they would overlap by default), which only doesn't apply because you have a typo in there ("postion: fixed").
I want to make a minimal landing page, where a whole screen is divided into 2 with text links to click through to each part of the site.
I figured out this much:
https://jsfiddle.net/m2ne5f3b/
I used 2 halves to create the divide, using a border on one side to create the line in the middle. It's super rudimentary.
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
Now what I want to do is make the whole of each half clickable, instead of the text only. Tried a couple different options to no avail. Any suggestions?
Just make the <a> the block! There is absolutely no need to use JS for this.
<a href="http://www.google.com" class="left-half">
<article>
<p>Google</p>
</article>
</a>
Then just style your <a> as a block because you are setting the height in your .left-half class, <a> elements are inline by default, so to make the height work, you need to make it a block:
.container a {
display: block;
// add any other CSS you want to apply
}
Working Snippet: Your Google looks exactly like the Youtube one in this, excelt that the whole block is now the link:
* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
line-height: 150%;
text-decoration: none;
}
a.left-half {
height: 100%;
display: block;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
a {
color: inherit;
text-decoration: none;
}
<section class="container">
<a href="http://www.google.com" class="left-half">
<article>
<p>Google</p>
</article>
</a>
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</section>
If you do not wish to mofify your HTML structure, then you can use a pseudo to fill the entire area to be responding as the link.https://jsfiddle.net/m2ne5f3b/7/
* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style:italic;
line-height: 150%;
text-decoration: none;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
display:table-cell;
text-align:center;
vertical-align:middle;
}
.container {
}
.left-half {
position: absolute;
display:table;
top:0;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
top:0;
right: 0px;
width: 50%;
display:table;
}
a { color: inherit;
text-decoration: none;}
a:before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
}
<section class="container">
<div class="left-half">
<article>
<p>Google</p>
</article>
</div>
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</section>
Note: if the page is meant to be 2 links side by side with little styling, then the html can be reduced to 2 links
html {
height: 100%;/* necessary for the table-layout box model demo */
width: 100%;/* necessary for the table-layout box model demo */
display: table;/* necessary for the table-layout box model demo */
table-layout: fixed;/* necessary for the table-layout box model demo */
border-collapse: collapse;
background: tomato;
}
body {
display: table-row;/* necessary for the table-layout box model demo */
}
a {
display: table-cell;/* necessary for the table-layout box model demo */
text-align: center;/* necessary for the table-layout box model demo */
vertical-align: middle;/* necessary for the table-layout box model demo */
box-shadow: 0 0 0 1px;
text-decoration: none;
color: black;
font-size: 40px
}
a:nth-child(odd) {
background: rgba(255, 114, 25, 0.5);
}
Google
YouTube
your common a tags arent going to cut it here. Your best bet is to use Javascript or jquery function calls on the divs.
<div class='left-half' onclick="fakeLink()" >
<!-- some stuff here in the div -->
</div>
then in the script file
function fakeLink() {
window.location = "http://www.yoururl.com/link";
}
* {
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Cormorant Garamond', serif;
font-style:italic;
line-height: 150%;
text-decoration: none;
}
section {
color: #000;
text-align: center;
}
div {
height: 100%;
}
article {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 20px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: absolute;
left: 0px;
width: 50%;
border-style: solid;
border-width: 1px;
border-left: none;
border-top: none;
border-bottom: none;
}
.right-half {
position: absolute;
right: 0px;
width: 50%;
}
a { color: inherit;
text-decoration: none;}
<section class="container">
<a href="http://www.google.com">
<div class="left-half">
<article>
<p>Google</p>
</article>
</div>
</a>
<a href="http://www.youtube.com">
<div class="right-half">
<article>
<p>YouTube</p>
</article>
</div>
</a>
</section>
There is a block 225px. Inside you insert a picture large size (850px). And she goes outside.
It looks like this:
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
Using slick slider. I want to add dots to control the slider.
When I add the dots they are placed in the middle of the block. It's okay, I understand. But I want to place them in the center of the picture. How to do it?
UPD: The image goes beyond the block, that's right! And I need to do to the dots were at the center of the image, not the block
I see that your dots are in the center of the window.
To do this, your dots list must be inside a container with the image's width.
I think you should enlarge your slider or limit image's width with a max-width: 100%;
if you want to need image in box then change
.single-slide img { width: auto;}
to
.single-slide img { max-width: 100%;}
Updated: The inherit keyword specifies that a property should inherit its value from its parent element [ Source ]. and image can't be a parent element. see this example.
Here is a solution on based on inherit and position on your latest update.
See the html section I have added a class "img-holder" on div which hold the img and add a class "div_center" on div which contain text's.
img inherit width from its parent div class "img-holder". "img-holder" and "div_center" inherit width from parent div class slider.
N.B: if you set the img width auto text will always center of the div class slider.
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
Previous: Position absolute for slick-dots class but you dont set any relative position for that. so you need to add position relative to your slide div.
And make the image responsive. I have added responsive property for your image on css section and added border on li for clear view.
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>
I'm trying to show a relevant submenu when the user hovers over an item in the main menu. The problem I am having is that I need to have a common parent for the hover selector to do its magic, but then that seems to screw up my styling. Any suggestions that forgo javascript/jquery would be appreciated as I use that as a crutch too much for things that I should probably be solving with css alone.
HTML
<div id="header">
<div id="header_headline">
Heading
</div>
<div id="menu">
<div id="menu_inset">
HOME
PROFILE<div class="sub_menu_arrow"></div>
PROJECTS<div class="sub_menu_arrow"></div>
NEWS
CONTACT
</div>
</div>
<div id="sub_menu">
<div class="sub_menu_inset" id="sub_menu_profile">
1
2
3
</div>
<div class="sub_menu_inset" id="sub_menu_projects">
1
2
3
4
</div>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
font-family: 'Pathway Gothic One', sans-serif;
color: #212121;
}
a {
text-decoration: none;
color: #212121;
}
#header {
width: 100%;
}
#header_headline {
margin: 1em 1em 1em 1em;
font-size: 2em;
text-transform: uppercase;
}
#menu {
margin-top: 1em;
width: 100%;
text-align: center;
white-space: nowrap;
}
#menu_inset {
display: inline-block;
word-spacing: 5em;
}
.menu_item {
position: relative;
}
.menu_item:hover .sub_menu_arrow {
display: inline-block;
}
#menu_item_profile:hover ~ #sub_menu_profile {
display: inline-block;
}
#menu_item_people:hover ~ #sub_menu_people {
display: inline-block;
}
.sub_menu_arrow {
position: absolute;
display: none;
left: 0;
width: 100%;
bottom: -1.05em;
}
.sub_menu_arrow:after {
content: '';
margin: 0 auto;
border-width: 0 .5em .5em;
border-style: solid;
border-color: #CCCCCC transparent;
display: block;
width: 0;
}
#sub_menu {
margin-top: 1em;
background-color: #CCCCCC;
width: 100%;
text-align: center;
white-space: nowrap;
position: relative;
height: 2em;
}
.sub_menu_inset {
display: none;
top: 0.5em;
position: absolute;
left: 0;
width: 100%;
background-color: #CCCCCC;
word-spacing: 5em;
}
http://jsfiddle.net/u9v0mcvo/
You don't necessarily have to use <ul> and <li> elements. Although, you should avoid nesting <a> tags in <a> tags. I think this is what you might be trying to accomplish (hover over project):
http://jsfiddle.net/u9v0mcvo/1/
When making CSS-only drop downs, tooltips, or whatever, it helps to nest the initially hidden item in the element that is in charge of opening it.
Your menu's should be <ul> and the submenu should be <ul> inside the <li>s.
The sub ul should then be positioned absolutely and display: none. the top level <li>s should have a :hover that changes the inner <ul>s to disbplay block.