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;
}
Related
After adding some hyperlinks to an Image, it has the underline but I couldn't find a way to remove it. First I tried text-decoration: none; but I noticed it only works for text, so the image looks like
this image
The "Claro" image has that underline that I cannot remove.
Here is the code:
* {
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<a href="https://tiendaclaro.pe" title="Tienda Claro">
<img src="https://placehold.jp/200x100.png" alt="Claro" height="50" id="logo" />
</a>
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">Aqui iran el equipo y sus caracteristicas</div>
</body>
</html>
How do I manage to erase that underline of the image and make the other "Inicio" and "Samsung" options to looks like normal text, instead of that purple or blue color?
What you're referring to as underline is not actually underline.
You've added this line in your CSS
* {
background-color: #eeeeee;
}
that means every HTML tag will have this background. so your image and parent <a> will also have this background color and since the image has a bottom margin this which makes a gap in parent <a> and this gap is filled with the defined background color.
so what you're seeing is a filled background color, not an underline or border.
if you set background-color:#colorname; within body element selector like.
body {
background-color:#colorname;
}
That means set background colour #colorname; of your body.
But When you will use this css property into universal selector like.
* {
background-color:#colorname;
}
that means set background color #colorname of all element of the web page.
I hope it is helpful for you.
* {}
body{
background-color: #eeeeee;
}
#parte1 {
background-color: #da291c;
}
#parte2 {
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3 {
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo {
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung {
background-color: #da291c;
}
#parte2-samsung {
background-color: white;
margin: 10px 480px 10px 0px;
}
a {
text-decoration: none;
}
Try adding the background-color: #eeeeee; property to the body tag instead of *
body{
background-color: #eeeeee;
}
#parte1{
background-color: #da291c;
}
#parte2{
background-color: white;
margin: 10px 480px 10px 0px;
}
#parte3{
background-color: blueviolet;
margin: 10px 480px 10px 0px;
}
#logo{
background-color: #da291c;
margin-top: 10px;
margin-bottom: 10px;
}
#parte1-samsung{
background-color: #da291c;
}
#parte2-samsung{
background-color: white;
margin: 10px 480px 10px 0px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Caracteristicas Claro</title>
</head>
<body>
<center>
<div id="parte1" class="container">
<img src="icons/LogoClaro.png" alt="Claro" height="50" id="logo">
</div>
</center>
<div id="parte2" class="container">
Inicio
Samsung
</div>
<div id="parte3">
Aqui iran el equipo y sus caracteristicas
</div>
</body>
</html>
I have seen this question many times but the answers never seem to work. I have a floating image next to my "h1" title and i can't remove the space between the items and the edge of the page.
I solved the problem for the left hand side by setting the body margin to 0 but the top still has this gap.
Descriptif image
#Logo
{
float: left;
border-right: solid;
border-bottom: solid;
}
#Title
{
font-size: 70px;
border-top: solid;
}
header
{
margin: 0;
}
body, html {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Site_Web_1.css">
<title></title>
</head>
<body>
<header>
<div id="Logo"><img src="images/Logo.png"></div>
<h1 id="Title">Evil Mouse Coding</h1>
</header>
</body>
</html>
Use margin-top: 0 in h1 css
#Title
{
font-size: 70px;
border-top: solid;
margin-top: 0;
}
<!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>
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>
I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>