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>
Related
I do not understand why my HTML content is overflowing the viewport both vertically and horizontally. I can scroll in both directions, even though there is no extra content. I have tried changing the width and height on the div of the parents, but that does not fix the problem. Here is my code:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
text-align: center;
}
h1 {
padding-top: 200px;
font-family: 'Rubik Microbe', cursive;
font-weight: normal;
font-size: 200px;
}
p {
font-family: 'Megrim', cursive;
font-size: 50px;
}
<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>SITE</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
<!-- -->
</head>
<body>
<main>
<h1>SITE</h1>
<p>coming soon...</p>
</main>
<script src="index.js"></script>
</body>
Any ideas?
The main problem is padding-top: 200px; on the h1 element. It is not necessary to position elements by using high values of padding or margin, for example.
So, I took off the padding from h1 and added flexbox attributes to body and your layout works with the h1 and p elements now centered in the page.
display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;
height: 100vh; sets the height of the body to the viewport height.
Here, you can find a lot of links to flexbox, in particular the link to A Complete Guide to Flexbox should be of interest.
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
text-align: center;
display:flex;
flex-direction:column;
justify-content: center;
height: 100vh;
}
h1 {
font-family: 'Rubik Microbe', cursive;
font-weight: normal;
font-size: 200px;
}
p {
font-family: 'Megrim', cursive;
font-size: 50px;
}
<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>SITE</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Megrim&family=Rubik+Microbe&display=swap" rel="stylesheet">
<!-- -->
</head>
<body>
<main>
<h1>SITE</h1>
<p>coming soon...</p>
</main>
<script src="index.js"></script>
</body>
You can just try overflow: hidden in your body section styling.
body { overflow: hidden;}
I want the image with the class "userIcon" to center in height and also align it at the right side of the navbar. I tried many different things but I didn't find a result. With float: right is the image right, but not centered in height anymore.
body {
margin: 0;
}
.navbar {
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="../assets/icons/websiteIcon.svg" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="../assets/icons/userIcon.svg" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
This should work nicely for you. Use flex with align-items: center; to get them center vertically. Then use margin-left: auto; on userIcon to get it to the far right.
A non-margin solution would be to nest the LinkSaverIcon img and the h1 in a div, and set that div to either display: flex with align-items: center; or inline-block. Then nest the userIcon in its own div, and use justify-content: space-between; on navbar.
body {
margin: 0;
}
.navbar {
width: 100%;
background-color: rgb(59, 59, 235);
display: flex;
align-items: center;
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: .5em;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="https://picsum.photos/40/40" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="https://picsum.photos/40/40" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
body {
margin: 0;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: 0.5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img
class="linkSaverIcon"
src="https://picsum.photos/40/40"
alt="Link Saver Icon"
href="home.html"
/>
<h1 class="titleFont">Link Saver</h1>
<img
src="https://picsum.photos/40/40"
alt="userIcon"
class="userIcon"
/>
</nav>
</body>
</html>
How about this, add display:flex; align-items:center in .navbar and margin-left: auto on .userIcon, I use picsum to replace the empty asset.
.usericon{margin-right:auto;}
this Might do the trick,(Edit) Sorry Messed up first time.
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>
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>
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>