This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a box which contain a simple header and footer.
The problem is that appears a scrollbar at the bottom which I don't wont.
I know that is very stupid as question but I don't figure out how to fix it.
.box{
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
By default the browsers give custom margin to body. Just set
body{
margin:0;
}
body{
margin:0;
}
.box{
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
Applymargin:0 for the body
body {
margin: 0;
}
.box {
width: 100%;
height: 100%;
}
.header {
background: tomato;
position: absolute;
top: 0;
width: 100%;
height: 5%;
padding: 10px 0px
}
.footer {
background: lightgreen;
position: absolute;
bottom: 0;
width: 100%;
height: 5%;
padding: 10px 0px
}
<!DOCTYPE html>
<html>
<title>Test</title>
<head>
<link rel="stylesheet" href="Style/StyleSheet.css">
<script type="text/javascript" src="Script/Script.js"></script>
<title>Test</title>
</head>
<body>
<div class="box">
<header class="header">Header</header>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
Related
I am trying to build a personal site, and just started with some HTML and CSS. The problem is when I resize the browser window, the mountain image chain position and the clouds shift their position, any ideas on how to fix this? Also I am new to stack so sorry if the way I am asking question is incorrect.enter image description here
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img src="img/mountain.png" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
You should use max-width:100% for your image.
body {
margin: 0;
text-align: center;
}
.bottom-img {
max-width:100%; /* you should use */
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img class="bottom-img" src="https://siber.boun.edu.tr/sites/cyber.boun.edu.tr/files/sample6.jpg" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I want do center my image horizontally and vertically but I just can center horizontally, at the same time I want this responsive,can anyone help me ? enter code here
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
border: 1px solid black;
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
Have you tried using flex boxes?
EDIT: As per comment, no i didn't know about using "align-items", works well, I've edited the snippet accordingly! :)
.video{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
height:250px;
background-color: peru;
}
.moldura{
}
.moldura img{
height:50px;
border:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
There you are:
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
border: 1px solid black;
/* Here is the important code*/
position: relative;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
Added line-height css property.
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin:0 auto;
line-height:500px;
height:100%;
}
.moldura img{
width: 50px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
I'm trying to position two images and running into difficulties. I want the 'Welcome!' speech bubble to be just to the left of the logo.
Can someone help me with this?
Here is my code:
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
}
#welcome {
margin: auto;
width: 10%;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
</body>
</html>
An easy fix would be to switch the ordering of the HTML so that the welcome bubble div is before the logo div. All you will have to do then is float each div to the left.
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
float:left;
}
#welcome {
margin: auto;
width: 10%;
float:left;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
</body>
</html>
hoping someone can explain why there is a gap between the "nav" and "header" divs? I think its something to do with the text but can't find the right solution for the CSS. Any help is much appreciate :)
html, body{
margin: 0;
padding: 0;
height:100%;
}
body {
background-color: black;
font-size: 0.8em;
}
audio {
width: 300px;
}
.header {
width: 100%;
height: 10%;
font-size: 0.9em;
font-family: sans-serif;
text-align: center;
color: white;
background-color: brown;
padding: 0;
margin: 0;
}
.nav {
width: 100%;
height: 7%;
padding: 0;
margin: 0;
background-color: grey;
}
#main {
width: 100%;
height: 100%;
}
.lyrics {
max-width: 80%;
margin: 0 auto;
height: auto;
padding: 20px 50px 20px 50px;
color: white;
}
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
Test
</title>
<body>
<div id="main">
<div class="nav">
</div><!-- nav -->
<div class="header">
<h1>Web Page</h1>
</div><!--header-->
<div class="lyrics">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div> <!-- lyrics -->
</div> <!-- main div -->
</body>
</html>
I believe you are talking about the black space above the "Web Page" title? In which case you just need to remove the top margin of the h1 like I did below:
html, body{
margin: 0;
padding: 0;
height:100%;
}
body {
background-color: black;
font-size: 0.8em;
}
audio {
width: 300px;
}
.header {
width: 100%;
height: 10%;
font-size: 0.9em;
font-family: sans-serif;
text-align: center;
color: white;
background-color: brown;
padding: 0;
margin: 0;
}
.nav {
width: 100%;
height: 7%;
padding: 0;
margin: 0;
background-color: grey;
}
#main {
width: 100%;
height: 100%;
}
.lyrics {
max-width: 80%;
margin: 0 auto;
height: auto;
padding: 20px 50px 20px 50px;
color: white;
}
h1 { margin-top: 0; }
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
Test
</title>
<body>
<div id="main">
<div class="nav">
</div><!-- nav -->
<div class="header">
<h1>Web Page</h1>
</div><!--header-->
<div class="lyrics">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div> <!-- lyrics -->
</div> <!-- main div -->
</body>
</html>
remove the top margin of the h1