Hey I've created a navbar and I've added an illusionary marker effect under it.
Basically what I want it to do is for when i hover over the image for an arrow to display under it.
Unfortunately I can't quite get it to work.
In the illustration below, I want to showcase. This is how the arrows are placed. Basically, I've set the second one on visibility: hidden; and for illustration purposes left the rest visible.
The one that has black background shows the one I'm hovering my cursor over (showcasing the selection works, there just must be something wrong with my css implementation). I've set the background as #000 (black) only for illustration purposes of the hover. As for the actual code, i just wish for the image to be visible.
So once again, what I want is for the arrows to stay hidden unless you hover over them. My code looks something like this
<div class = "arrows">
<img src="" class="1" alt =""><img src="" class="2" alt =""
<img..et cetera>
</div>
As for the actual CSS, I have some margin and padding set up which is not really of importance.
Basically the important part is:
.arrows img {
position: relative;
bottom: 20px;
}
and now for the specific arrows
img.1 {
visiblity:hidden;
margin, padding and few other properties
}
img.1:hover {
visibility: visible;
}
However, when I hover over the image, it just remains invisible. Any ideas how to solve this?
EDIT: Added code snippet/jsfiddle
* {
box-sizing: border-box;
/* Opera/IE 8+ */
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: Arial;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
/*
====================================================
NAVIGACNY PANEL
====================================================
*/
.navbar {
background-color: #3c1f0a;
width: 100%;
height: 40px;
}
.navbar ul {
z-index: -1;
text-align: center;
display: inline-block;
list-style: none;
margin-left: 175px;
padding: 0px;
}
.navbar li {
width: 80px;
display: inline-block;
font-family: Helvetica;
font-size: 13px;
padding: 0 5px;
}
.navbar a {
text-decoration: none;
color: #FFF;
}
.navbar li:hover {
background-color: #602401;
}
/*
=============================================================
KRATKY POPIS - Index
=============================================================
*/
.ITW {
width: 100%;
height: auto;
padding-bottom: 20px;
background: rgb(252, 255, 251);
background: linear-gradient(to bottom, rgba(252, 255, 251, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 250, 1) 1%, rgba(255, 253, 255, 1) 1%, rgba(252, 252, 252, 1) 20%, rgba(250, 250, 250, 1) 21%, rgba(248, 248, 248, 1) 31%, rgba(246, 246, 246, 1) 32%, rgba(247, 247, 247, 1) 35%, rgba(233, 233, 233, 1) 73%, rgba(234, 234, 234, 1) 75%, rgba(232, 232, 232, 1) 76%, rgba(227, 227, 227, 1) 100%);
}
.ITW img {
visibility: hidden;
position: relative;
padding: 30px 15px 10px 17px;
bottom: 20px;
}
.ITW img:hover {
position: relative;
visibility: visible;
}
img.move-image {
margin-left: 190px;
}
img.ma {
padding-left: 30px;
margin-left: 30px;
}
img .ma:hover {
visibility: visible;
}
img.mb {
padding-left: 20px;
padding-right: 30px;
margin-left: 20px;
}
img.mc {
padding-right: 30px;
margin-left: 15px;
}
img.md {
padding-right: 20px;
margin-left: 25px;
}
img.me {
margin-left: 30px;
}
img.mf {
margin-left: 30px;
padding-right: 15px;
}
.ITW h2 {
font-family: Helvetica;
font-size: 19px;
padding: 10px 0px 15px 0px;
color: #b15e23;
margin-left: 200px;
}
.ITW p {
font-family: Helvetica;
font-size: 12px;
color: #656565;
margin-left: 200px;
}
<body>
<div class="navbar">
<ul>
<li>Index
</li>
<li>O predmete
</li>
<li>Prednášky
</li>
<li>Výsledky
</li>
<li>Cvičenia
</li>
<li>Kontakt
</li>
<li>Related
</li>
</ul>
</div>
<div class="ITW">
<img src="icons/menu_bullet.gif" class="move-image" alt="moved-bullet">
<img src="icons/menu_bullet.gif" class="ma" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mb" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mc" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="md" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="me" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mf" alt="index-bullet">
</div>
Grabs wrench*, tingling sounds*
Background music with low volume rock {ace of spades};
Try and set the navbar with:
z-index:2;
position: relative;
Set the arrows with:
Z-index:1;
position: relative;
By setting a higher value of Z-index your creating a layer type logic: the higher the value the upper the layer will be set;
all objects affected with z-index must have position attribute;
To summarize, I've realized that if I set the visibility to hidden; you can't hover over the element since it's hidden from you.
The easiest solution instead of using the visibility: attribute, use the opacity: attribute is well and switch it between 0 and 1(hover).
Related
This is all my code (the code seems very messy because I just started learning about 2/3 weeks ago). I cant seem to style the anchor elements. I even tried putting a class on them and it also doesn't works. I'm kinda new to this thing.
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Merriweather:wght#700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#500&display=swap');
body {
height: 100%;
margin: 0;
padding: 0;
background: #bbb;
}
.ex-house {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.house-dh {
position: absolute;
top: -20%;
left: 2%;
padding: 0px;
margin: 0px;
color: rgb(255, 255, 255);
font-family: 'Bree serif';
font-size: 125px;
text-align: center;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.about-gnco1 {
position: absolute;
color: rgb(255, 255, 255);
font-family: 'Inter';
font-size: 35px;
text-align: left;
margin: 0px;
padding: 0px;
left: 2%;
top: 20%;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
/* this is my code for the style element i think i did it right but when i run it. the a href element dosent change */
.front-button {
font-family: 'Bebas Neue';
font-size: 20px;
color: white;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
}
.front-button a {
margin: 0 20px;
}
<body>
<div class="front">
<img class="ex-house" src="https://via.placeholder.com/80" alt="dreamhouse">
<div class="house-dh">
<p>grandnew.co</p>
</div>
<div class="about-gnco">
<p class="about-gnco1">Is here to help you<br> build your own<br> Dream House.</p>
</div>
</div>
</div>
<div class="front-button">
CUSTOMIZE
DESIGNS
PLANS
ABOUT US
</div>
</body>
if you mean underline of link for that you can use the method text-decoration for examplea{text-decoration:none} this code will remove any decorations of a tag so if you wanna use this function for all a tags you will write a{text-decoration:none} so if you wanna set decoration of specific tag you can give a class on the tag before you can change something example
HTML
go to stackoverflow
<a class="a-tag" href="https://stackoverflow.com">go to stackoverflow</a>
CSS
a{ //for all <a> tags
text-decoration:none
}
.a-tag{ // only for tag who have the a-tag class
text-decoration:none
color:black;
}
This works for me. The style of the text in the '.front-button a', not in '.front-button'
.front-button a {
margin: 0 20px;
font-family: 'Bebas Neue';
font-size: 20px;
color: red;
text-shadow: 2px 2px 3px rgba(241, 238, 53, 0.5);
}
link style
More about link styles:
https://www.w3schools.com/css/css_link.asp
How do I change link style in CSS?
Block Quote Example
I'm trying to make my blockquote look like the image attached. I have the top and bottom gradients down, but I'm stuck on the left and right borders and I'm not sure how to round the quotations more. Also, I was wondering how to make a line to the right that connects to the picture. Thanks for the help!
Here's what I have so far
/*-------Testimonial Section Styles---------*/
section#testimonial-section {
height: 300px;
margin-top: 100px;
width: 100%;
}
/*------Block Quote Sttyles-------*/
.testimonial-paragraph-wrapper {
width: 100%;
padding: 20px;
margin: 10px auto;
text-align: center;
}
.testimonial-border {
display: inline;
margin-left: 117px;
float: left;
}
blockquote {
width: 100%;
padding: 36px 50px;
position: relative;
background: transparent;
margin-bottom: 0px;
/* gradient shining border */
background-image: linear-gradient(to left, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%), linear-gradient(to left, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%);
background-size: 90% 5px;
background-position: 100% 0%, -510% 100%;
background-repeat: no-repeat;
border-left: 5px solid rgba(108, 178, 61, 1);
border-right: 5px solid rgba(108, 178, 61, 1);
}
cite {
font-style: normal;
text-align: right;
float: right;
padding-right: 100px;
padding-top: 20px;
}
blockquote::before,
article blockquote::after {
top: 0;
bottom: 0;
width: 25px;
content: '';
position: absolute;
background: #61a036;
-webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px rgba(0, 0, 0, 0.25);
}
blockquote::before {
right: 100%;
}
blockquote::after {
left: 100%;
}
blockquote p {
font-size: 20px;
line-height: 1.5em;
margin-bottom: 28px;
color: #61a036;
padding-left: 40px;
padding-right: 40px;
}
blockquote p::before {
top: 0;
left: -33px;
color: #61a036;
content: '“';
font-size: 10em;
position: absolute;
text-shadow: -3px 0 #000;
padding-top: 0px;
}
blockquote p::after {
right: 16px;
color: #61a036;
content: '”';
bottom: -32px;
font-size: 10em;
position: absolute;
text-shadow: 3px 0 #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="testimonial-section">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<div class="testimonial-wrapper">
<div id="testimonial-border" class="testimonial-paragraph-wrapper">
<blockquote>
<p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal®
account!</p>
<cite>- John Hughes of Grants Pass, OR</cite>
</blockquote>
</div>
</div>
</div>
<div class="col-md-4 pull-right">
<div class="testimonial-img-wrapper">
<img class=" testimonial-img" src="http://res.cloudinary.com/alexscloud1234/image/upload/c_scale,w_200/v1516656363/ryan-fields-328391_lxjslk.png">
</div>
</div>
</div>
</div>
</section>
The connecting line can easily be done with flexbox, just use a pseudo element on your container and adjust the position with order.
(I took the bootstrap out of the equation, to simplify things... adapt as needed)
/*-------Testimonial Section Styles---------*/
#testimonial-section{
margin:20px;
display:flex;
align-items:center;
position:relative;
}
#testimonial-section:before{
content:"";
height:4px;
flex:1 1 10%;
background:#61a036;
}
.testimonial-img{
flex:1 1 20%;
border:4px solid #61a036;
border-radius:50%; padding:10px;
display:inline-block;
height:100%;
}
#testimonial-section blockquote{
margin:0;
border:4px solid #61a036;
flex:1 1 70%;
position:relative;
color: #61a036;
font-size:1.5em;
font-family:sans-serif;
order:-1;
}
#testimonial-section blockquote:before, #testimonial-section blockquote:after{
text-align:center;
background:white;
position:absolute;
font-size:8rem;
width:4rem; height:5rem;
}
#testimonial-section blockquote:before{
content:"“";
top:-2rem;
left:-2rem;
}
#testimonial-section blockquote:after{
content:"”";
bottom:-2rem;
right:-2rem;
}
.blockquote-text{
padding:1em;
}
cite{
font-size:1rem;
position:relative;
top:0.5rem;
background:white;
float:right;
}
<section id="testimonial-section">
<blockquote>
<p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal® account!</p>
<cite>- John Hughes of Grants Pass, OR</cite>
</blockquote>
<img class="testimonial-img" src="http://res.cloudinary.com/alexscloud1234/image/upload/c_scale,w_200/v1516656363/ryan-fields-328391_lxjslk.png">
</section>
The rest should be just positioning.
When I hover over the div there is a white line on the outside of the div.
I've tried with text-decoration: none;
Any idea how to remove this?
This is the html
<a href="/" style="color:white">
<div class="headerOption">
<p>
Home
</p>
</div>
</a>
SCSS
.headerOption {
border-radius: 5px;
width: 6vw;
height: 2.8vw;
font-size: 0.97vw;
font-weight: 500;
#include normal;
font-family: "Rubik-Medium", sans-serif;
cursor: pointer;
p {
position: relative;
top: 30%;
}
&:active {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
a:hover {
text-decoration: none;
}
You've actually got your CSS in the wrong order I think.
You're setting:
.headerOption a{whatever: somevalue;}
On:
<a>
<div class="headerOption"></div>
</a>
It's looking to style an anchor tag inside the div, but there isn't one.
I am creating an iframe with a header, two list items side by side, and a button.
However, I cannot get said list items to go side by side, neither can I get them to always fill the width of the screen and have equal width.
Here's my code:
/** GLOBAL **/
.iframe-style {
height: 480px;
border: solid;
border-width: 1px;
}
.iframe_header {
color: black;
display: block;
font-family: "Roboto" sans-serif;
border-width: 1px;
}
.iframe_header h1 {
padding-top: 10px;
padding-left: 40px;
font-weight: normal;
}
.iframe-style .separator {
height: 1px;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 1);
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.09);
}
/** NEWS (n) */
/ .n ul {
padding: 0px px 0px 0px;
margin: 0;
white-space: nowrap;
}
.n li {
display: inline-block;
}
.n_content {
height: 300px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 50%;
}
.n_content h2,
p {
font-family: "Roboto" sans-serif;
}
.path {
display: inline-block;
}
/** BUTTONS **/
.n_button {
outline: none;
position: relative;
bottom: -50px;
left: 40px;
}
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
<link href="iframe.css" rel="stylesheet" type="text/css">
</head>
<body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
<div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
<span class="iframe_header"><h1>Welcome back!</h1></span>
<div class="separator"></div>
<ul class="n">
<li>
<span class="n_content"><h2>News</h2><p>
Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
</span>
</li>
<li>
<span class="n_content"><h2>Header 2</h2>
<p>Test</p> </span>
</li>
</ul>
<button class="n_button">START COMMENTING</button>
</div>
</body>
So what am I doing wrong?
Try using float left.
/** GLOBAL **/
.iframe-style {
height: 480px;
border: solid;
border-width: 1px;
}
.iframe_header {
color: black;
display: block;
font-family: "Roboto" sans-serif;
border-width: 1px;
}
.iframe_header h1 {
padding-top: 10px;
padding-left: 40px;
font-weight: normal;
}
.iframe-style .separator {
height: 1px;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 1);
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.09);
}
/** NEWS (n) *//
.n ul {
padding: 0px px 0px 0px;
margin: 0;
white-space: nowrap;
}
.n li {
float : left;
width: 50%;
}
.n_content {
height: 300px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 50%;
}
.n_content h2,p {
font-family: "Roboto" sans-serif;
}
.path {
display: inline-block;
}
/** BUTTONS **/
.n_button {
outline: none;
position: relative;
bottom: -50px;
left: 40px;
}
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
<link href="iframe.css" rel="stylesheet" type="text/css">
</head>
<body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
<div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
<span class="iframe_header"><h1>Welcome back!</h1></span>
<div class="separator"></div>
<ul class="n">
<li>
<span class="n_content"><h2>News</h2><p>
Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
</span>
</li>
<li>
<span class="n_content"><h2>Header 2</h2>
<p>Test</p> </span>
</li>
</ul>
<button class="n_button">START COMMENTING</button>
</div>
</body>
I've got a basic layout that is a div with a thumbnail, floated left, then a div with some text in it (title, description, links) that floats lefts as well. They're meant to be side-by-side but as soon as the browser is too narrow, it pushes the 2nd div below the first, rather than just decreasing its width.
I can't believe I'm stumped on this as it seems really simple. I'd really appreciate some help!
html
<div class="stunting-video odd">
<div class="thumbnail">
<img src="https://i.ytimg.com/vi/LixKwLQiSGU/mqdefault.jpg" data-video-id="LixKwLQiSGU" class="show-video" alt="stunting video">
</div>
<div class="info">
<p class="title">GTA V - Stunt practise 03</p>
<p class="description">A play-through of a race created to practise a motorbike stunt in GTA V where you can jump from the docks to near the airport. Race is available here...<br>
<br>
<span class="highlight">PS3:</span> http://rsg.ms/0330f82<br>
<span class="highlight">Xbox360:</span> http://rsg.ms/4464ca5<br>
<br>
Special credits to Cheddar for the 360 version.</p>
</div>
</div>
css
body {
background-color: rgb(20, 20, 20);
color: rgb(238, 238, 221);
font-family: sans-serif;
font-size: 16px;
font-weight: 300;
margin: 20px;
}
a {
color: rgb(111, 178, 244);
}
.stunting-video {
background-color: rgba(255, 255, 255, 0.125);
border-radius: 30px;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3) inset, -5px -5px 10px rgba(0, 0, 0, 0.9) inset;
clear: both;
margin: 10px 0;
overflow: auto;
padding: 5px 15px 15px;
}
.stunting-video .thumbnail {
border: 0;
cursor: pointer;
float: left;
margin: 10px 20px 0 0;
padding: 0;
}
.stunting-video .thumbnail img {
border-radius: 15px 0 0 15px;
}
.stunting-video .info {
float: left;
}
.stunting-video .title {
color: rgb(245, 215, 122);
font-size: 150%;
font-weight: bold;
}
.stunting-video p {
margin: 5px 0;
}
js fiddle example of the above
http://jsfiddle.net/yp7f0nz1/
All that is required is to not float the info div and (based on other comments) add adequate padding=left so that the text does not wrap around the thumbnail.
.stunting-video .info {
padding-left: 350px;;
}
Jsfiddle Demo
EDIT
I was reminded that a table would do this automatically and. of course, we have display:table / table-cell open to us.
Removing the floats and using
.stunting-video {
display: table;
}
and
.stunting-video .thumbnail {
display: table-cell;
vertical-align: top;
}
.stunting-video .info {
display: table-cell;
vertical-align: top;
}
JSfiddle Demo 2