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>
Related
I'm trying to make the center blue div expand until it touches an edge of a screen. I would like it to expand the font size of all subtexts and the size of the discord iframe embed so that it is relatively the same size on any device. I'm not sure if this is even possible without javascript.
you can see the site at https://duelcraft.games/
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
from your last comment,
I know the solution.
add this to your HTML <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this makes the website responsive for mobile versions.
this code is automatically generated in most of the IDEs (like vscode)
but in your case, there isn't so just add it
also for not having the margin on top and bottom,
use margin: 0 to the <body> selector
adding a small space in every part (top, left, right) is by adding this code:
the trick there is box-sizing: border-box;
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test {
width: 100%;
}
}
in this photo I added a padding of 1rem (~16px),
if you want less padding, just change the value
I used a #media because we want that: the code we will use works only on mobile, so on the desktop will be centered, and on mobile there is padding.
for making the discord iframe responsive use width:100% so it will use the maximum space it can have from the parent div.
.test, iframe {
width: 100%;
}
I wrote a comma here to avoid repeating the code multiple times.
for making the <h1> responsive we will use the vw unit in CSS.
h1 {
font-size: 12vw;
}
vw is the width_screen/100
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email support#duelcraft.games for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
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;
}
This question already has answers here:
Setting a width and height on an A tag
(6 answers)
Closed 2 years ago.
I have a very simple HTML file with some styles given to it, but for some reason I can't change the width of the links inside of the div, I tried it with width, max-width, min width and with some different containers such as an unordered list, but no matter what, they stay the same size.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a:visited,
a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover {
color: #30cc00;
background-color: #003333;
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
the a tag is an inline element. change it to inline-block and set width. However, if you are just trying to get more space between the links you might want to consider using flexbox.
body {
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
}
#navbar {
margin: 0px;
padding: 0px;
height: 10%;
text-align: center;
}
a{
display:inline-block;
width:100px;
}
a:visited, a:link {
color: #ffffff;
border: 2px solid black;
text-decoration: none;
}
a:hover{
color: #30cc00;
background-color: #003333;
}
<!DOCTYPE html>
<html lang="de" dir="ltr" style="background-color: #002050; color: #ffffff;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stihi</title>
<link rel="stylesheet" href="index.css">
<script defer src="index.js"></script>
</head>
<body>
<div id="navbar">
Home
Gedichte
Bücher
Aktuelles
Kontakt
</div>
</body>
</html>
You just need to add in your element Home
display: block;
or
display: inline-block;
source: Setting a width and height on an A tag
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>
I set a link on a <div> but all the elements of the <div>become also links.
Any clue how I could remove the formatting from the children?
The bottom <div> is on rollover mode.
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom: 20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
<a href="#Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
<div class="hotel-preview">
...
</div>
</a>
I'm assuming you want to remove the underlines for the hyperlinks, you can just add text-decoration: none; to your tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom:20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
.href-wrapper {
text-decoration: none;
}
</style>
</head>
<body>
<a class="href-wrapper" href="/">
<div class="hotel-preview">
<h1>Matterhorn</h1>
<p>Lieu: Brig</p>
<h4>Contact</h4>
<p>+41279220001</p>
<p>info#matterhorn.ch</p>
</div>
</a>
</body>
</html>
Give text-decoration: none to <a>, like:
a {
text-decoration: none;
}
Have a look at the snippet below:
div.hotel-preview {
border-style: solid;
padding: 0px 10px 10px 10px;
margin-bottom: 20px;
}
div.hotel-preview:hover {
background-color: aliceblue;
}
a {
text-decoration: none;
}
<a href="#Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
<div class="hotel-preview">
...
</div>
</a>
Hope this helps!