I need to check colour of the X in ionicon but can't change the x itself. I can either change the background-color or actual color of the circle.
Is there a way to change ONLY the x?
body {
background-color: lightgreen;
}
.ion-ios-close-circle.a {
color: white;
font-size: 50px;
}
.ion-ios-close-circle.b {
background-color: white;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/ionicons#4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div>
<i class="a ion-ios-close-circle"></i>
<i class="b ion-ios-close-circle"></i>
</div>
</body>
</html>
So eventually I need to achieve this
You could use a border radius with the background-colour and absolute poitioning to centre the icon:
body {
background-color: lightgreen;
}
.ion-ios-close-circle {
font-size: 50px;
border-radius: 50%;
overflow: hidden;
width: 35px;
height: 35px;
display:inline-block;
position: relative;
}
.ion-ios-close-circle:before {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.a {
background-color: white;
}
.b {
background-color: orange;
}
/* ie11 only move icon down 1px */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
_:-ms-fullscreen, :root .ion-ios-close-circle:before {
margin-top:1px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/ionicons#4.4.8/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<div>
<i class="a ion-ios-close-circle"></i>
<i class="b ion-ios-close-circle"></i>
</div>
</body>
</html>
Seems like the SVG of ionicons isnt rounded, you can try with FontAwesome
body {
background-color: lightgreen;
}
.fas.fa-times-circle.c {
background-color: white;
color: blue;
font-size:50px;
border-radius:50%;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<i class="c fas fa-times-circle"></i>
</div>
</body>
</html>
Related
body {
margin: 0;
}
.banner {
display: block;
margin: 0 auto;
}
.icon {
width: 50px;
height: 50px;
float: left;
}
.title {
font-size: 20px;
}
.desc {
padding-top: 7px;
}
.images {
padding-left: 580px;
}
.images img {
padding-right: 10px;
}
.images img:hover {
cursor: pointer;
}
.header_inner {
border: 1px solid black;
}
<!doctype html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.jpg">
</head>
<body>
<div class="header">
<div class="header_inner">
<img class="banner" src="https://cdn.pixabay.com/photo/2021/09/12/07/58/banner-6617550__340.png">
<div class="images">
<img class="icon" src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80">
<p class="desc"><span class="title">Test</span><br>Test</p>
</div>
</div>
</div>
</body>
</html>
How to change border size to the border size of an image and the footer part of an image, because the border size is not the current size of the image, and I do not know how to fix it. How can I do that?
you mean something like this?
you can just apply border for your image.
if you want to put something between border and image you can give a padding to image
or position relative and absolute to something you want to put inside them.
i hope i got your problem right.
.img {
border: 5px solid black
}
<!doctype html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icon.jpg">
</head>
<body>
<img class="img" src="https://www.gravatar.com/avatar/453426250a239cbb367afe61dca91a68?s=48&d=identicon&r=PG&f=1" />
</body>
</html>
Instead of
.header_inner {
border: 1px solid black;
}
do
.banner {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
So basically there is a padding on the top and bottom I want to remove. I tried with line heights but it didn't work. How do I do that?
display:inline-block first then you can play with line-height
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
<span class="close">×</span>
This works without extra padding when selected:
.close {
font-size: 50px;
background-color: red;
float: left;
line-height: 30px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
.close::selection{
background: none;
color: yellow;
}
<span class="close">×</span>
What you are looking for is ::selection property of CSS. You can write custom CSS within this and your selected element will behave the same.
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
EDIT#2: Fixed it i have added to my code position: absolute; top 130px; display:block; thanks for all respondes ... code on codepen was fixed too .. :D
EDIT: So i fixed the content-holder problem now i have a new one i cant move him inside my main .... i have been trying vertical align and it doesnt work Codepen: http://codepen.io/anon/pen/VvKdrL
My new code :
header>a
{
font-size: 38px;
font-weight: 500;
border-bottom: 1px solid #888;
text-align: left;
color: #555;
font-family: "Monserat";
}
header
{
border-bottom:1px solid #888;
}
main
{
height: 530px;
display: block;
margin-top: -40px;
}
ul
{
list-style-type: none;
}
li a
{
font-size: 22px;
font-family: Helvetica;
margin: 4px;
font-weight: 500;
font-family: "Roboto";
line-height: 34px;
color: #222;
}
a
{
text-decoration: none;
}
li::before
{
content: "➢";
}
.center
{
width: 960px;
margin: 0 auto;
}
.content-holder
{
position: absolute;
width: 250px;
height: 200px;
top: 130px;
background: #eee;
display: block;
z-index: 2;
}
.background
{
z-index: 1;
background-repeat: no-repeat;
}
.footer
{
border-top: 1px solid #888;
height: 20px;
content:
}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="center">
Name
</header>
<main class="center sizemain">
<div class="background"></div>
<div class="content-holder">
<ul>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
<li>
List
</li>
</ul>
</div>
</main>
<footer class="footer">
</footer>
</body>
</html>
Thanks for respondes
You need to comment out both the margin-top and the margin. Margin applies 50px to every side.
.content-holder {
width: 250px;
height: 190px;
background: #eee;
/* margin: 30px; */
/* margin-top: 50px; */
vertical-align: 50px;
z-index: 2;
}
See: http://www.w3schools.com/css/css_margin.asp