#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 140px;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.Video-Greeting {
position: relative;
width: 75%;
margin: 0 auto;
}
.Video-Greeting video {
width: 100%;
}
.Video-Greeting button {
position: absolute;
top: 30%;
left: 40%;
margin: 0 auto;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font-size: 4em;
}
<!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="Home.css" />
<title>Welcome</title>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="Video-Greeting">
<video autoplay loop muted src="image\Pexels Videos 2706078.mp4"></video>
<button>Welcome</button>
</div>
</body>
</html>
I am trying to keep my Welcome Button to be stuck on my video and to be able to scale and rescale with video as my browser get smaller or bigger, but it keeps drifting away in one direction when I resize my browser. How can I solve this? I want to make the Welcome Button Be stuck to the middle of the video and for it rescale but at the same time stuck to the video center when making the browser smaller and bigger.
Add the following to .Video-Greeting
display: flex;
justify-content: center;
align-items: center;
This will make all of it's contents <button> and <video> center perfectly vertically and horizontally.
Next, the button
z-index:1
This allows the <button> to be out of the "flow" and not interfere with the <video> and vice versa. It's like it's on a layer above everything else on the 3rd dimension.
Also, remove top and left properties from <button> as well.
#import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap");
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font: 500 3.5vmin/1.2 "Luxurious Script", cursive;
}
body {
background-color: #e97272;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
background-color: rgb(83, 83, 83, 0.2);
width: 100%;
height: 10vh;
}
.nav-brand {
margin-left: 40px;
margin-top: 20px;
height: 100px;
display: inline-block;
}
.nav-brand img {
width: 100%;
height: 100%;
}
.nav-items {
display: inline-block;
margin-left: calc(100% - 900px);
font-size: 2.5rem;
vertical-align: bottom;
text-shadow: 2px 2px #514d4d;
color: rgb(236, 200, 0);
}
.items {
margin: 20px 50px;
display: inline-block;
}
.items a {
text-decoration: none;
color: inherit;
}
.greeting {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 75%;
margin: 0 auto;
}
.greeting video {
width: 100%;
}
.greeting button {
position: absolute;
z-index: 1;
color: rgb(236, 200, 0);
text-shadow: 3px 3px #514d4d;
font: inherit;
font-size: 4rem;
}
footer {
height: 10vh;
}
<!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="Home.css" />
<title>Welcome</title>
<style>
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<img src="image\Logo.png" alt="" />
</div>
<ol class="nav-items">
<li class="items">Home</li>
<li class="items">Place Order</li>
<li class="items">About</li>
</ol>
</nav>
<div class="greeting">
<video autoplay loop muted src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4"></video>
<button>Welcome</button>
</div>
<footer></footer>
</body>
</html>
Related
I was told to add a fixed nav bar to the code I had made previously.
Here is the CSS for the code. I reviewed it a lot but can't seem to find the issue with it.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
/* overflow: hidden;*/
background-color: #c4a1a2;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
text-align: center;
color: #ffffff;
font-size: 5vw;
}
h2{
text-align: center;
color: #ffffff;
font-size: 3vw;
}
.table{
width: 100%;
/* height: 00px;*/
}
.table img{
width: 49.5%;
}
.table td{
width: 49.5%;
}
#wrapper
{
width: 99%;
/* max-width: 1500px;*/
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
/* box-shadow: 3px 3px 3px #666666;*/
}
.navbar {
/*
overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
Here's the actual code. I think it's an issue with the container class but I'm not sure. When I commented out the Wrapper ID it was like the nav bar didn't even exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kayak Spot</title>
<link rel="icon" type="image/x-icon" href="images\RVC-Circles-Logo.jpg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.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=Roboto+Mono:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
<div id="wrapper">
<div class="container">
<img src="Images/woman-kayaking.jpg" alt="Kayaking" style="width:100%;">
<div class="centered">
<h1>Kayaking, The pastime to calm your nerves.</h1>
</div>
</div>
<div class="table container">
<tr>
<td><img src="Images/sport%20(1).jpg">
<div class="centered">
<h2>Be it for sport or for leisure, Kayaking is one activity you can't miss.</h2>
</div>
</td>
<td><img src="Images/sport%20(2).jpg"></td>
</tr>
</div>
</div>
</body>
</html>
If you want to have a fixed bar at the top of the page, use this piece of code for the navbar class in your css. With this piece of code, your navbar class will be placed at the top of the page.
.navbar {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.navbar a {
display: flex;
justify-content: center;
align-items: center;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Better than using a flex display.
If the navbar falls on the rest of the elements, just give the body or #wrapper margin
#wrapper {
width: 99%;
margin-top: 50px;
}
or
body {
margin-top: 50px;
}
I'm trying to insert 2 buttons inside 2 divs.
All divs in my CSS have a display grid as assigned.
My question is why do the divs with class button-left and button-right expand to take all the space available, even if I did not tell them to have a width of 100% or width of 100vw?
To all other div I did specify to be 100vw but not this last one, so why do they keep expanding.
If I put display: block inside of them it works, but I don't understand why do I have to specify that in the first place?
Here is my code:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
display: grid;
border: dotted 1px #ff0;
}
body {
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
background-image: url(/../../media/index0.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size: cover;
}
.div-container {
border: solid 2px red;
height: 100vh;
width: 100vw;
}
.div-top-row {
border: solid 2px pink;
height: 65vh;
width: 100vw;
}
.div-bottom-row {
border: dotted 3px green;
height: 30vh;
width: 100vw;
grid-auto-flow: column;
}
.copyrights {
height: 5vh;
width: 100vw;
justify-items: center;
align-items: center;
font-size: 11px;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
}
.btn-gradient {
border: none;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
padding: 0.875rem 1rem;
text-decoration: none;
transition: all 0.15s;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
}
.btn-blank-blue {
background: 0 0;
border: 1px solid #1e92e6;
color: #1e92e6;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}
<!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" />
<link rel="stylesheet" href="/../../css/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
<title>Home</title>
</head>
<body>
<div class="div-container">
<div class="div-top-row"></div>
<div class="div-bottom-row">
<div class="div-button-left">
<button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
</div>
<div class="div-button-right">
<button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
</div>
</div>
<div class="copyrights">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
</body>
</html>
There seems to be an issue with Specificity.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
You essentially answered your own question. display: block; works because that is the default display for div's. You have div { display: grid;} which changes the default display: block; on all of your div's.
display: grid; will try to use all available space. Hence, why your buttons are stretched. I would either put the grid on only applicable div's. Or, you could use the :not pseudo-class like so:
div:not(.div-button-right, .div-button-left) {
display: grid;
border: dotted 1px #ff0;
}
This will exclude the div's defined in the :not pseudo-class of those styles.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
border: dotted 1px #ff0;
}
body {
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
background-image: url(/../../media/index0.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size: cover;
}
.div-container {
display: grid;
border: solid 2px red;
height: 100vh;
width: 100vw;
}
.div-top-row {
border: solid 2px pink;
height: 65vh;
width: 100vw;
}
.div-bottom-row {
display: grid;
border: dotted 3px green;
height: 30vh;
width: 100vw;
grid-auto-flow: column;
}
.copyrights {
display: grid;
height: 5vh;
width: 100vw;
justify-items: center;
align-items: center;
font-size: 11px;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
}
.btn-gradient {
border: none;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
padding: 0.875rem 1rem;
text-decoration: none;
transition: all 0.15s;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
}
.btn-blank-blue {
background: 0 0;
border: 1px solid #1e92e6;
color: #1e92e6;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}
<!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" />
<link rel="stylesheet" href="/../../css/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
<title>Home</title>
</head>
<body>
<div class="div-container">
<div class="div-top-row"></div>
<div class="div-bottom-row">
<div class="div-button-left">
<button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
</div>
<div class="div-button-right">
<button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
</div>
</div>
<div class="copyrights">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
</body>
</html>
I am trying to create a website. In which there is an animated search bar which I got from youtube. I am trying to use flexbox for my navbar and everything works except for the position of my search bar. The picture of my nav bar until now.
and this the code for my html and css some of it is cut out.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
<title>HTML Elements Reference</title>
<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="shortcut icon" href="favicon.ico">
<style>
body{
font-family: Helvetica, sans-serif;
background: black;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
transform: translate(0%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: black;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
</style>
</head>
<body>
<nav class="container">
<div class="search-box">
<input class= "search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
</body>
</html>
Can you help me out with the CSS and HTML and try not to use margin property for the search bar.
I would like the search bar to be fully centered in my flexbox.
As mdn says:
The translate() CSS function repositions an element in the horizontal
and/or vertical directions. Its result is a data
type.
So it is necessary just remove property transform: translate(0%, -50%); to place correctly your searchbar:
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
An example:
body{
font-family: Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
}
.search-box{
display:inline-block;
background: lightseagreen;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box > .search-btn {
background: lightgreen;
}
.search-btn{
color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<nav class="container">
<div class="search-box">
<input class="search-txt" type="test" name="" placeholder="Search...">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</nav>
UPDATE:
When you use double percentage values transform: translate(0%, -50%); in translate function, then the second value is for the height of the reference box:
This value describes two or
values representing both the abscissa (x-coordinate) and
the ordinate (y-coordinate) of the translating vector. A percentage as
first value refers to the width, as second part to the height of the
reference box defined by the transform-box property.
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
I'm trying to stack three square-shapes on top of each other, with a h1 placed horizontally next to them, different variations of the display selector, doesn't seem to work, and when it's set up "correct" the h1 "eats" the square shapes.
Html
<div class="squares">
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
</div>
<h1> korius</h1>
Css
h1 {
color: #2d3436;
font-size: 72px;
display: inline;
}
.squares {
display: inline;
}
.squares > div {
display: block;
height: 10px;
width: 10px;
}
#square1 {
background-color: #e67e22;
}
#square2 {
background-color: #2980b9;
}
#square3 {
background-color: #27ae60;
}
Js-fiddle: All the code
Image of wanted result
Minor changes can help you.. So the parent container of the squares should be displayed inline-block so that it can be placed side by side to the text 'korius'. And all the div under squares needs to be displayed block so that they are showing vertically.
.squares {
display: inline-block;
}
.squares > div {
display: block;
margin-top: 10px;
height: 10px;
width: 10px;
}
Check snippet below:
html, body {
width: 100%;
height: 100%;
background: #ecf0f1;
font-family: 'Work Sans', sans-serif;
margin: 0;
}
h1 {
color: #2d3436;
font-size: 72px;
display: inline;
}
.squares {
display: inline-block;
}
.squares > div {
display: block;
margin-top: 10px;
height: 10px;
width: 10px;
}
#square1 {
background-color: #e67e22;
}
#square2 {
background-color: #2980b9;
}
#square3 {
background-color: #27ae60;
}
<!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">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>korius</title>
</head>
<body>
<div class="squares">
<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
</div>
<h1> korius</h1>
</body>
</html>
You can also test it here.