I have a side navigation bar, and I have images beside the text, which show the destination of each link. I want the images and their respective link to be side-by-side. Additionally, I want each link's border to be equal. Here's how it looks now.
In the first line, I need the guitar icon next to the Chords link, and the same for the following links and their icons. Here's the CSS I'm using.
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
font-size: 1.8em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
}
<div class="sidebar" id="sidebar">
<img src="img/chords.png">
Chords
<img src="img/tabs.png">
Tabs
<img src="img/notereading.png">
Note Reading
</div>
I tried setting the position property of the links to relative, and this worked for one link. When I inserted the others, however, they did not act as if they were within an inline-block element. That is, they continued on the same line. I thought the inline-block forced elements on the same line only if they could fit, though. Any help would be appreciated. Thanks!
The inline-block is not cause of your problem. Try this HTML instead.
.sidebar {
display: inline-block;
overflow: hidden;
position: fixed;
margin-top: 60px;
width: 200px;
height: 300px;
background-color: rgba(50, 50, 50, .8);
transition: width .3s ease;
}
.sidebar a {
display: inline-block;
font-size: 1.5em;
text-decoration: none;
color: white;
border: 1px solid rgba(25, 25, 25, .5);
background-color: rgba(50, 50, 50, 1);
border-collapse: collapse;
transition: background-color .1s ease;
width: 140px;
}
.sidebar img {
transform: translateY(15px);
width: 50px;
}
.sidebar_item {
height:60px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sidebar" id="sidebar">
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1TkoF1IzxW9y3Xs1YWYpDeX7qCye3ud45" width=55px height=55px>
Chords
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
Tabs
</div>
<div class="sidebar_item">
<img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px>
Note Reading
</div>
</div>
</body>
</html>
Related
What I want is to hover over my div and give it a box-shadow to show that it is clickable, I have some content and a button inside it which should not have the box shadow. The button enlarges on hover. I managed to get the box-shadow on the div and remove the box-shadow on content by using pointer-events:none but am unable to remove the shadow from the button as it is clickable and cannot use pointer-events:none. Is there any css only solution and if not, any other solution? jsfiddle link->https://jsfiddle.net/uzq13s47/1/
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css"/>
<body>
<div id="container">
<div id="box">
<p>content</p>
<h5><button>click me!</button></h5>
</div>
</div>
</body>
</html>
body {
font-family: sans-serif;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
p {
pointer-events: none;
}
#container :hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
h5 :hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
You are not using :hover as you want to, that white space between selector and pseudo class (#container :hover) it means all child element will have the hover effect, in code means (#content *:hover), and that's why you have the p and the button with the hover effect.
You can remove that white space and apply the hover in #box and button only
Also I would advise not using the heading h5 as parent of the button because it isn't much correct in terms of semantics
body {
font-family: sans-serif;
}
.button {
width: 60px;
height: 60px;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
#box:hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
button:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
<div id="container">
<div id="box">
<p>content</p>
<button class="button">click me!</button>
</div>
</div>
I am learning HTML and CSS and I was trying to create menu button with drop down list of another menu items showing on hover. It is working fine, but there is one thing, which is not correct in my opinion. And that is fact, that this drop down menu shows up for half second after every page reload/refresh. Can somebody pls help and check, what is wrong in code I was trying to use?
Thank you very much in advance. Below is my HTML and CSS code.
body{
background-color: tomato;
height: 100vh;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.logo{
float:left;
font-family: arial;
}
.logo h2{
color:#fff;s
}
.menu_button{
background-color: transparent;
color:#fff;
padding:15px;
font-size:15px;
cursor: pointer;
border: 1px solid #fff;
width: 100px;
}
.right_menu{
position:relative;
display: inline-block;
float: right;
}
.dropdown_menu{
visibility: hidden;
text-align: center;
position: absolute;
background-color: #f9f9f9;
width: 100px;
box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: .3s;
}
.dropdown_menu a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_menu a:hover{
background-color: #000;
color:#fff;
transition: .3s;
}
.right_menu:hover .dropdown_menu{
visibility: visible;
opacity: 1;
transition: .4s;
}
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Hello world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetStyle.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<h2>LOGO</h2>
</div>
<div class="right_menu">
<button class="menu_button">Menu</button>
<div class="dropdown_menu">
Home
About us
Contacts
</div>
</div>
</div>
</body>
</html>
What you're seeing on that flicker is the time between which the browser has downloaded and rendered the HTML, and it has downloaded interpreted and applied the CSS.
Depending on the speed of their computer, a user may or may not see the same artifact you're describing.
I'd like to figure out how to get control of gaps between my divs. I had set up the jello layout and started to work on my navigation bar, when gaps got all messy. Tried to backtrack everything and got left with just my divs in a default flow layout and gaps. Here is the html code:
body {
background-image: url("images/ozadjeCrno.jpg");
background-size: 100%;
background-repeat: repeat-y;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
}
#container{
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
#header{
width: 900px;
height: 100px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation{
width: 900px;
height: 30px;
background-color: rgba(207, 207, 207, 0.94);
}
#navigation ul li{
display: inline;
}
#logoLeft{
margin: 20px;
width: 140px;
height: 60px;
}
#logoRight{
margin: 20px;
width: 110px;
height: 60px;
float: right;
}
#sidebar{
background-color: rgba(207, 207, 207, 0.94);
width: 255px;
height: 100px;
}
#main {
background-color: rgba(207, 207, 207, 0.94);
height: 100px;
}
#footer{
background-color: rgba(207, 207, 207, 0.94);
}
.shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.roundedCorners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<html>
<head>
<title>Solska Impro Liga</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spletka.css">
</head>
<body>
<div id="container">
<div id="header" class="shadow roundedCorners">
<img id="logoRight" src="images/logo1.png" alt="logo1">
<img id="logoLeft" src="images/logo2.png" alt="logo1">
</div>
<div id="navigation" class="shadow roundedCorners">
<ul id="navButtonsList">
<li>DOMOV</li>
<li>ŠILARJI</li>
<li>O ŠILI</li>
<li>ARHIV</li>
<li>ENG</li>
</ul>
</div>
<div id="sidebar" class="shadow roundedCorners">
<h1>SIDEBAR</h1>
</div>
<div id="main" class="shadow roundedCorners">
<h1>MAIN</h1>
</div>
<div id="footer" class="shadow roundedCorners">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
I wanted to post a screenshot, but I can't since I need 10 reputation points :/
Thank you for your time,
best regards.
The reason you have gaps between divs is because of heading tags. Use overflow: hidden for your parent divs than heading margin won't go out of box and than add margin to your parent divs so you can control distance between them.
If you don't want to use overflow: hidden than you can change heading tag margin to padding. Than again you can control distance between parent divs with margin.
Certain child elements have a default margin, which is causing your issues:
<ul id="navButtonsList"> is adding (for most browsers) 1em or 100% margin-top and -bottom. Same with all your <h1>'s.
You could do a "reset" at the top of your CSS, like:
ul, h1 { margin: 0; }
I am trying to make a rectangular scalable div that has a transitional hover state. My code seems to work great in Chrome and Firefox, but IE10 simply refuses to entertain me. Below is my code and CSS example. Any help would be great.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
<div class="quote">
Interesting Quote
<p class="name">Quote Author</p>
</div>
</body>
CSS:
.quote {
font-size: 2em;
position: relative;
width: 20%;
padding: 5%;
float: left;
height: auto;
margin: .5%;
background-color: #99F;
color: #fff;
text-align: center;
}
.name {
font-size: .5em;
color: #000;
}
.quote:hover {
transition: background-color 0.5s ease-out;
background-color: #000;
}
.quote:hover .name {
transition: color 0.5s;
color: #FFF;
}
Got an issue here regarding making other div-elements hidden when and other div has been visible.
As you see in my code below, when f.ex. star trek have been visible, I want pacific rim and world war z to disappear using z-index.
My HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img alt="pacificrim image" src="../bilder/pacificRim.jpg">
<p>Blahblahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img alt="startrek image" src="../bilder/starTrek.jpg">
<p>blahblahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img alt="worldwarz image" src="../bilder/worldWarZ.jpg">
<p>blahblahblah</p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<img alt="pacificrim poster" src="../bilder/pacificRim.jpg">
</div>
<div id="startrekPoster">
<img alt="startrek poster" src="../bilder/starTrek.jpg">
</div>
<div id="worldwarzPoster">
<img alt="worldwarz poster" src="../bilder/worldWarZ.jpg">
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
The CSS code
#charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
}
#startrekContent, #worldwarzContent{
z-index: -1;
height: 0;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target{
height: 100%;
z-index: 10;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
As you see I need Pacific Rim to be the standard movie that show up when people vist the website, and the other should be visible when I target them. Then the movie I target should be visible. Per now, Pacific Rim is ALWAYS visible and in the background of the other movie.
So if i f.ex. choose to target the star trek movie, and then so the world war z movie. I see the Pacific Rim movie behind when the transition is working.
I am not allowed to use javascript, so is there a way I can get this working?
Thanks!
jsfiddle.net/f8ns4 - JSFiddle to show what i mean!
Give your individual movie divs a background color so you cant see whats underneath it.
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
background-color: rgb(230, 231, 232);
}
Demo: http://jsfiddle.net/f8ns4/1/