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
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>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
White space at top of page
(12 answers)
Closed last year.
I'm currently making a test site, but constantly keep getting a white border on the top and right of the screen: Example. I've tried to use: position: fixed but that didn't work. Here is my code:
.Main-Header {
font-size: 60px;
font-family: Garamond, Serif;
color: #818181;
background-color: #111;
margin: 0px 0px 0px 120px;
padding-left: 20px;
padding-top: 0px;
border-top: 0px;
}
.sidenav {
height: 100%;
width: 130px;
position: fixed;
top: 0px;
left: 0px;
background-color: #111;
padding-top: 25px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 28px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 130px;
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.pic1 {
padding-left: 30px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test 1</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="Main-Header"><em>Test Site</em></h1>
<div class="sidenav">
<div class="pic1"><a class="active" href="test.html"><i class="fa fa-home"></i></a></div>
About
Services
Clients
Contact
</div>
<div class="main">
<br>
<p>index</p>
</div>
</body>
</html>
Add the following CSS rule :
body {
margin: 0;
}
See this answer for more details.
Add the basic CSS reset By adding -
* {
margin: 0px;
padding: 0px;
}
By default CSS adds a margin and padding of 16px by adding the above CSS it will remove the margins and paddings of 16px
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
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>