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.
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?
I have the following style
.c-breadcrumb-item {
display: inline-block;
font-size: 1.3em;
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba($base-color, 0.5);
&:not(:nth-last-child(2)) {
.c-breadcrumb-link {
color: rgba($base-color, 0.5);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:active {
color: $base-color;
text-decoration: underline;
}
}
&:after {
content: '>';
padding: 0 4px;
}
}
&:nth-last-child(2) {
animation: fadeIn 0.4s;
.c-breadcrumb-link {
color: $sky-blue;
}
}
}
the initial state is as expected without the second after element from last
<div class="c-breadcrumb" data-test="c-breadcrumb">
<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
**<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">Region number 2</a></span>**
<span class="c-padding-simulate"></span>
</div>
but the issue is when I remove one breadcrumb item,the after element still visible with box-sizing: border-box
<div class="c-breadcrumb" data-test="c-breadcrumb">
**<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>**
<span class="c-padding-simulate"></span>
</div>
please help me to solve it
I have a div tag with background-color: #FFFFFF and opacity: 0.08. Inside it is a span tag with the colour white. What can I do to make the white text stand out in the grey background in the parent div? It seems that i cannot increase parent's opacity
Or you should be able to get this effect by using rgba() notation:
div{
background-color: rgba(255, 255, 255, 0.08);
}
span {
color: #fff;
}
Just make it a fairly dark grey:
#background {
background-color: #222222;
text-align: center;
vertical-align: middle;
}
#text {
color: #FFFFFF;
background-color: #444444;
}
body {
font-family: sans-serif;
}
<div id="background" style="height: 100vh; width: 100vw;">
<span id="text">Ngay Nhap Vien</span>
</div>
You could use text-shadow as well along with RGBA Fiddle
HTML:
<div>
<span>text</span>
</div>
CSS:
div {
background-color: rgba(255, 255, 255, 0.08);
}
span {
color: #FFF;
text-shadow: 0px 1px 10px black;
font-size: 30px;
}
so I've created a snippet of layout that I'd like to re-use in various places in my code. JSFiddle with what it looks like normally with the following dom structure: https://jsfiddle.net/64x9udcr/
<a class="stamp">
<div class="stamp-left"><span>0023f23f2</span></div>
<div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span></div>
</a>
Basicly an identifier on the left, with a description on the right, not too complicated. It's also inline, so it can be included in a line of text like an identifier.
Ex:
What I'm having trouble with is getting it to wrap if necessary. The following is an image of what I'd like to happen when wrapping is needed. A would be preferred, but if not possible, then B.
Any pointers as to what combination of CSS I should be using?
Used flex method with few little changes in your code.
https://jsfiddle.net/64x9udcr/2/
.label,
.stamp {
border-radius: 0.25em;
color: rgb(255, 255, 255);
display: inline;
font-size: 75%;
font-weight: bold;
line-height: 1;
padding: 0.2em 0.6em 0.3em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.stamp {
border: 1px solid rgb(218, 218, 218);
color: inherit;
display: inline-block;
font-size: inherit;
font-weight: inherit;
margin-bottom: 0.1em;
padding: 0;
}
.stamp .stamp-left,
.stamp .stamp-right {
display: inline-block;
padding: 0.2em 0.6em;
}
.stamp .stamp-left {
background: rgb(218, 218, 218) none repeat scroll 0 0;
font-family: "courier";
}
.select2-results__option--highlighted .stamp .stamp-left {
color: rgb(51, 122, 183);
}
a.stamp:hover {
border-color: rgb(35, 82, 124);
}
a.stamp:hover .stamp-left {
background-color: rgb(35, 82, 124);
color: rgb(255, 255, 255);
}
a.stamp:hover .stamp-right {
color: rgb(35, 82, 124);
}
.container {
display: flex;
width: 100%;
}
.stamp {
max-width: 100%;
overflow: hidden;
min-width: 200px;
}
<div class='container'>
<a class="stamp">
<div class="stamp-left"><span>0023f23f2</span>
</div>
<div class="stamp-right"><span>The quick brown fox jumped over the lazy dog</span>
</div>
</a>
</div>
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).