With this design, the divs have a margin on left and on the right that I need to remove but only on .custom-mobile-row not in the rest on the page like if I use
body{
margin: 0;
}
this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
</body>
</html>
and the css
.custom-mobile-row{
width: 100%;
}
.half-row{
width: 50%;
display: inline-block;
height: 500px;
background-size: cover;
background-position: center;
vertical-align: top;
}
#media (max-width: 768px) {
.half-row {
width: 100%;
}
}
#media (min-width: 768px) {
.custom-mobile-row{
white-space: nowrap;
}
}
#div1{
background-image: url("img1.jpg");
}
#div2{
background-image: url("img2.jpg");
}
body{
margin: 0;
}
body{
margin:0;
}
.fake-body{
margin:8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='fake-body'>
</div>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
<div class='fake-body'>
</div>
</body>
</html>
Related
to css . I have a button image inside the button image the txt should be in left side and another image should be in right side. the one i did is its all in the center. can some help me? thank you..
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
button {
/* padding-top: 100px; */
width: 100%;
border: none;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
height: 100%;
}
</style>
</head>
<body>
<button type="button">
<span>test</span>
<img
src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png"
width="60"
/>
</button>
</body>
</html>
Can access the code here:
https://codesandbox.io/s/flamboyant-bhaskara-7bueu?file=/index.html:0-805
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
button {
/* padding-top: 100px; */
width: 100%;
border: none;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
height: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
button span {
text-align: left;
position: absolute;
left: 20%;
color: white;
top: 29px;
}
button img{position: relative;
right: -28%;}
</style>
</head>
<body>
<button type="button">
<span>test</span>
<img
src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png"
width="60"
/>
</button>
</body>
</html>
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 1 year ago.
My question is why is that third div( class= "right") goes downward??
I tried using vertical-align:top; also but didn't work.
I want div.nav to be at mid and div.right to be at right with all three of them being at the same top postition
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Answering your question
You used display: block;. display: block will take a 100%. If you want the div to only take the width of the item itself then use display: inline-block;
Fixing your code
Use display: flex; with justify-content: space-between; and remove all the other stuff. You can also add other divs in the header but flex will position them perfectly
That means you can also remove the classes from the divs in the header
Optimized Code:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Example with more Divs in the header:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</header>
</body>
</html>
floatting elements will make a break before floatting if anything in the regular flow stands before it , that's why .right shows right under .nav.
You can set .nav after the floatting elements in the code, so it doesn't disturb the floatting elements.
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="right">right</div>
<div class="nav">Nav</div>
</header>
</body>
</html>
Nowdays, flex or grid is used for this
flex
body {
margin: 0px;
padding: 0px;
background-color: red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.top-header {
display: flex;
}
.nav {
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
grid
body {
margin: 0px;
padding: 0px;
background-color: red;
}
.top-header {
display: grid;
grid-template-columns: auto 20% auto;
justify-content: space-between
}
.left {}
.nav {}
.right {}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
width: 50%;
}
.nav{
display: inline-block;
}
.right{
display:inline-block;
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Try using display:inline-block; on all divs. Then you can set the location of the nav with width of the first div
I have animated png as the background image in div.
I need to play the whole animation, even after the mouse hover is finished. Now my animation is restarted/canceled, but not completed.
This is my WIP code.
body {
background-color: #9e7d3a;
}
.body {
padding-top: 5%;
}
.logo {
background-image: url("https://i.stack.imgur.com/Uv7z3.png");
height: 50px;
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
}
.logo:hover {
background-image: url("https://i.stack.imgur.com/kPFr9.png");
}
<!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" />
<link rel="stylesheet" href="logo.css" />
<title>Logo-test</title>
</head>
<body>
<div class="body">
<div class="logo"></div>
</div>
</body>
</html>
try using transition delay like this
body {
background-color: #9e7d3a;
}
.body {
padding-top: 5%;
}
.logo {
background-image: url("https://i.stack.imgur.com/Uv7z3.png");
height: 50px;
background-repeat: no-repeat;
background-size: 200px;
background-position: center;
transition-delay: 3s; /* change this based on animation duration */
}
.logo:hover {
background-image: url("https://i.stack.imgur.com/kPFr9.png");
transition-delay: 0s;
}
<!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" />
<link rel="stylesheet" href="logo.css" />
<title>Logo-test</title>
</head>
<body>
<div class="body">
<div class="logo"></div>
</div>
</body>
</html>
So i am trying to make website for a floorball team in our town.
I would like to have an image of a floorball goal and on it the links and stuff(I'll provide an image later on).
But i struggle with responsive desing.
I would like the ORKA header to be positioned like this:
The header should be fixed in place even if i resize the browser window.
Here is the code:
/* CSS Document */
body {
margin: 0px;
background-color: #D0D5D6;
}
#main {
margin: 0px;
background-image: url(http://ploca.9e.cz/branka.png);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
background-position: top;
}
h1 {
font-family: Montserrat;
width:100vw;
height: 100vh;
margin: 0 auto;
}
#Nadpis {
margin: 0px;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="Orka Cool" content="Orka Cool">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="Orka Cool">
<meta name="description" content="Orka Cool - Florbal Čelákovice">
<meta name="keywords" content="florbal, orka, cool, čelákovice">
<title>Orka Cool</title>
</head>
<body>
<div id="main">
<div id="Nadpis"><h1>ORKA</h1></div>
</div>
</body>
</html>
I hope i was clear and that you get the point.
Sorry for my bad english its not my native language.
Thank you in advance.
I think this is what you want if anything else feel free to ask
body {
margin: 0px;
background-color: #D0D5D6;
}
#main {
margin: 0px;
background-image: url(http://ploca.9e.cz/branka.png);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
background-position: top;
}
h1 {
font-family: Montserrat;
width:100vw;
height: 100vh;
margin: 0 auto;
}
#Nadpis h1 {
margin: 0px;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="Orka Cool" content="Orka Cool">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="Orka Cool">
<meta name="description" content="Orka Cool - Florbal Čelákovice">
<meta name="keywords" content="florbal, orka, cool, čelákovice">
<title>Orka Cool</title>
</head>
<body>
<div id="main">
<div id="Nadpis"><h1>ORKA</h1></div>
</div>
</body>
</html>
By Adding Position:relative; + top:; and right:; to make it center. This way whenever you resize the browser, all you need to do is add media queries in order to fix at certain break points. Other than that this should solve your problem. (i added the css properties to #Nadpis)
/* CSS Document */
body {
margin: 0px;
background-color: #D0D5D6;
}
#main {
margin: 0px;
background-image: url(http://ploca.9e.cz/branka.png);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
background-position: top;
}
h1 {
font-family: Montserrat;
width:100vw;
height: 100vh;
margin: 0 auto;
}
#Nadpis {
margin: 0px;
height: 100vh;
display: flex;
background-position: center;
min-height: 280px;
text-align: center;
position:relative;
top:18px;
right:5px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="Orka Cool" content="Orka Cool">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="Orka Cool">
<meta name="description" content="Orka Cool - Florbal Čelákovice">
<meta name="keywords" content="florbal, orka, cool, čelákovice">
<title>Orka Cool</title>
</head>
<body>
<div id="main">
<div id="Nadpis"><h1>ORKA</h1></div>
</div>
</body>
</html>
This is My code
<!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-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
//position: fixed;
}
.body {
float:left;
width:90%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px"/>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
This code works perfectly but I want the sidebar to be fixed at its position when user is scrolling the page here the output
I tried this CSS property
postion: fixed;
and this is the Output
I need help cant'figure out what to do and I have searched alot but can't find suitable solution
try to add margin-left: 10% to your .body class (and delete the floatfor it)
whats about this:
<!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-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body,
html,
.sidebar,
.body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.body {
float: left;
width: 89%;
height: 100%;
position: absolute;
left: 11%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
information found at https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position