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>
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</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>
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>