I'm making a very basic website, but can't remove the extra top space over the body element. It looks like this in both Chrome and Firefox:
I've tried most relevant solutions I found on this forum: I reset my body and HTML margin and padding to 0. Also, I made sure there are no children elements with top margins messing with my code.
body, html {
margin: 0px;
padding: 0px;
}
.navbar {
background:#312c2a;
height: 30px;
text-align:center;
}
.navbar li {
display: inline-block;
margin-right:20px;
margin-left:20px;
}
.navbar a {
color: white;
font-size:20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
This is my HTML code. I really can't find any problem. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
Many browsers give unordered lists a default top and bottom margin. You should add:
ul {
margin: 0;
padding: 0;
}
Demo Snippet:
body,
html,
ul {
margin: 0;
padding: 0;
}
.navbar {
background: #312c2a;
height: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
margin-right: 20px;
margin-left: 20px;
}
.navbar a {
color: white;
font-size: 20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
try this :)
.navbar {
width: 100%;
height: 70px;
background: black;
margin-left: auto;
margin-right: auto;
position: fixed; /*fixed, relative, or absolute like you want*/
top: 0px;
z-index: 200;
}
ul {
margin: 0;
padding: 0;
}
and
.body{
margin: 0;
padding: 0;
background-color:white;
}
Related
So I'm working on a website and I wanted to try including bootstrap in it. I've used the navbar tags and some custom CSS but I can't remove the margin. So basically the navbar looks weird because of it.
Heres the code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hilo | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<body class="body-fr">
<nav class="navbar" role="navigation">
<div class="container-fluid nav-container-fr">
<ul class="nav-nav">
<li class="nav-item-fr">Home</li>
<li class="nav-item-fr">Streams</li>
<li class="nav-item-fr">Followed</li>
<li class="nav-item-fr nav-icon-fr"><i class="lnr lnr-user fs-40"></i></li>
<li class="nav-item-fr nav-cog-fr"><i class="lnr lnr-cog fs-40"></i></li>
</ul>
</div>
</nav>
</body>
</html>
Css:
* {
margin: 0;
padding: 0;
}
.body-fr {
background-color: #333;
}
nav {
margin: 0;
padding: 0;
width: 100%;
}
.navbar {
margin: 0px;
padding: 0px;
}
.nav-container-fr {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
background-color: #222;
}
.nav-nav {
justify-content: space-around;
list-style-type: none;
list-style: none;
display: inline;
margin: auto;
margin-bottom: 5px;
}
.nav-size {
font-size: 30px;
}
.nav-item-fr {
text-align: center;
display: inline-flex;
margin: 0 30px;
}
.nav-icon-fr {
margin-top: 5px;
margin-left: 470px;
margin-right: -40px;
}
.nav-cog-fr {
margin-right: -50px;
}
.fs-20 {
font-size: 20px;
}
.fs-40 {
font-size: 40px;
}
.fs-60 {
font-size: 60px;
}
.fs-80 {
font-size: 80px;
}
.fs-100 {
font-size: 100px;
}
.fs-120 {
font-size: 120px;
}
Can I please get some help?
And please ignore my messy code I'm still new t bootstrap and I don't really feel like fixing the CSS right now.
You could try setting:
margin: 0 !important;
Or you could get more specific with the selector.
If you are in Chrome for instance, and right click on the element in question, you should see that it has a more specific selector.
Just as an example:
html body nav {
margin: 20px;
}
Is more specific than:
nav {
margin: 0;
}
So a margin of 20px would be applied in this case.
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>
I'm creating my personal website but having trouble understanding why navigation bar size changes when I change from one HTML file to another HTML file. For example, when I click Photography_Color HTML, the navigation bar becomes bigger compared to the Main HTML. All the HTML files are using the same CSS, so I'm not sure what the problem is.
HTML:
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<!--SOCIAL MEDIA ICON STYLESHEET-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]Son | Art & Code </title>
<div class="top">
<div class = "center">
<h>J[a]son</h>
<p>Personal Blog</p>
</div>
<nav class = "top_child">
<div class = "logos">
</div>
<div class = "nav">
<ul>
<li>HOME</li>
<li>PHOTOGRAPHY
<ul class="photography_1">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>CODING</li>
<li>ABOUT</li>
</ul>
</div>
</nav>
</div>
</head>
CSS:
body {
background-color: black; /*rgb(241, 233, 233);*/
}
html, body {
height: 90%;
margin: 0;
padding: 0;
}
.top {
margin: auto;
padding: 1.0em;
overflow: hidden;
background-color: black;
top: 0;
display: block;
position: sticky;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
z-index: 100;
clear: both;
overflow: hidden;
}
.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.center {
text-align: center;
}
.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}
.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}
.nav {
float: right;
position: relative;
list-style: none;
display: block;
}
.nav li {
display: inline;
list-style: none;
position: relative;
}
.photography_1 {
display: none;
}
.photography_1 li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 20px;
left: 25px;
}
You need to move your div with the class of top, out of the tag and inside a tag.
The element is a container for metadata (data about data) and is placed between the tag and the tag.
The tag defines the document's body. It contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="top">
<!-- Put the rest of whats inside the top div here -->
</div>
</body>
</html>
I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
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