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.
Related
#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>
I am quite new to using flexboxes and grids and I can't quite get the hang of it, I'm trying to make a navbar with a width responsive search bar. (Kind of like the one Stack Overflow has on its navbar) but for some reason when I try and use width: 100% on the search bar its width does not change. I've tried looking at countless tutorials and posts and nothing seems to work. Anyhelp would be amazing
Snippet:
#import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Ubuntu Mono', sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
.navbar {
background-color: #F4F4F5;
height: 70px;
}
.navbar ul {
display: flex;
}
.navbar a {
padding: 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: 2px #333 solid;
}
.navbar .flex {
justify-content: space-between;
}
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 20px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#searchbar {
width: 100%;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="assets/css/style.css">
<title>Website</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<h2 class="logo">Website</h2>
<nav>
<ul>
<form>
<input id="searchbar" type="text" placeholder="Search.."></li>
</form>
<li>About</li>
<li>Login</li>
<button class="navbar-btn">Click me!</button>
</ul>
</nav>
</div>
</div>
</body>
</html>
Try this
.container nav {
flex: 1;
}
.container form {
width: 100%;
}
If you climb up the search bar parent elements you will see that the <nav> element is the one taking part of the flex. So for your search bar to take up 100% of the width you will need to give all of his parents (<ul> & <form>) width 100%.
So something like this:
nav {
width: 100%;
}
ul {
width: 100%;
}
form {
width: 100%;
}
#searchbar {
width: 100%;
}
To find these types of solution i would tackle it with any browser inspector such as google chromes (recommend getting there by right clicking the element itself than "Inspect"), so the inspector will jump directly to the element and climbing up and down the hierarchy and testing out the styling on the fly.
Example:
This is not the only solution. But this i feel will help you understand how to get to a solution in these kind of situations.
I am trying to create a removable div element that will consist of two other divs: the text div and the remove div.
I am setting display: inline-block on removable_item_container to adjust the width of the container to the div contents.
But how can I insert some white space (let's say 20% of the container width) between removable_item_text and removable_item_remove elements and keep the first element aligned to the left of the container div and the other one to the right?
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.removable_item_container {
display: inline-block;
border-style: solid;
border-width: 0.1px;
padding: 5px;
}
.removable_item_container:hover {
color: blue;
cursor: grab;
}
.removable_item_text {
float: left;
}
.removable_item_remove {
float: right;
}
.removable_item_remove:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="removable_item_container">
<div class="removable_item_text">Removable item</div>
<div class="removable_item_remove">x</div>
</div>
<script>
</script>
</body>
</html>
You can use margin-left:20px to add a fixed space width, and both elements will be shown on the same line.
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
.removable_item_container {
display: inline-block;
border-style: solid;
border-width: 0.1px;
padding: 5px;
}
.removable_item_container:hover {
color: blue;
cursor: grab;
}
.removable_item_text {
float: left;
}
.removable_item_remove {
float: right;
margin-left: 20px;
}
.removable_item_remove:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="removable_item_container">
<div class="removable_item_text">Removable item</div>
<div class="removable_item_remove">x</div>
</div>
<script>
</script>
</body>
</html>
If you are looking for a responsive way of doing this you could use flexbox.
https://yoksel.github.io/flex-cheatsheet/
Set display: flex and justify-content: space-between on .removable_item_container
Give .removable_item_text a flex-basis of lets say 70% (as example)
Give .removable_item_remove a flex-basisof lets say 10%
I also added text-align: right; to your right element.
You can then give your desired with to .removable_item_container (200px in my example)
This will make the remaining space be 20% of the total width of your element.
body {
font-family: 'Montserrat', sans-serif;
}
.removable_item_container {
display: flex;
width: 200px;
justify-content: space-between;
border-style: solid;
border-width: 0.1px;
padding: 5px;
}
.removable_item_container:hover {
color: blue;
cursor: grab;
}
.removable_item_text {
flex-basis: 70%;
float: left;
}
.removable_item_remove {
text-align: right;
flex-basis: 10%;
float: right;
}
.removable_item_remove:hover {
color: red;
cursor: pointer;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
</head>
<body>
<div class="removable_item_container">
<div class="removable_item_text">Removable item</div>
<div class="removable_item_remove">x</div>
</div>
<script>
</script>
</body>
</html>
I'm looking to align my logo with my header title and subtitle.
I've attempted to do this using display: inline-block. I didn't manage to,
and I also attempted with floats, but everything messed up.
I've then put a hr (line) under the header, but it's too thin, so I want to add thickness to it, but I can't manage to.
I've looked up this question but couldn't use answers to help me as most of them used tables.
How can do this?
http://codepen.io/anon/pen/BjmMdM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<main>
<header>
<img class="logo" src="hidden.jpg" alt="Logo">
<div id="title">
<h1>Lorem Epsum</h1>
<h3>Front Ninja</h3>
</div>
</header>
<hr id="line">
<section>
</section>
</main>
</body>
</html>
File style.css
html, body {
padding: 0;
margin: 20px;
height: 100%;
font-family: 'Quicksand', sans-serif;
}
header {
padding: 25px;
background-color: whitesmoke;
display: inline-block;
}
.logo {
height: 80px;
width: 80px;
margin-left: 300px;
border: #F8981C solid 5px;
border-radius: 99px;
}
#title {
text-transform: uppercase;
}
#line {
height: 100px;
background-color: blanchedalmond;
border: none;
}
So. I think the issue is that you needed vertical alignments. You have all of the html markup you need. I made a jsFiddle to help you out. Let me know if this is what you're looking for. There are a couple of ways to position the elements; I just added hard left margins to achieve the effect in your wireframe.
Fiddle: https://jsfiddle.net/legendarylionwebdesign/b570pyo9/
hr {
border: 0px;
height: 2px;
width: 100%;
background: black;
}
.logo {
display: inline-block;
height: 100px;
width: 100px;
vertical-align: middle;
margin-left: 100px;
}
#title {
width: 200px;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 200px;
}
For the title, you can just change it like this:
#title {
margin-right: 300px;
text-transform: uppercase;
z-index: 100;
position: absolute;
right: 0;
top: 20px;
}
And play with top or put width and so on example.
I made this bar (nav2) to be scrollable if it's not enough screen space, but it seems to be very weird (also because it's my first time I'm doing such thing as a horizontal scrollable bar), the ul is going somewhere in the top, and doesn't come down, I tried float: left, it works, but the ul is not centered in the middle (that's important!)
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: calc(100% / 3);
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: calc(100% / 3);
height: 40px;
background-color: red;
float: left;
overflow: scroll;
}
#nav3 {
width: calc(100% / 3);
height: 40px;
background-color: yellow;
float: left;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
height: 40px;
float: left;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
'float: left;' will align your divs (nav1, nav2, nav3) side-by-side inside 'navbar', unless you want them side by side.
'navbar' does not have a top margin. Therefore, it aligns itself all the way on top. If you want the navbar to go down a bit, you will need to create a class or div inside your .css file, and give it a top margin.
I have changed your 'nav2' css values as follows:
#nav2 ul {
width: calc(100% / 3);
height: 80px; /* changed 40px to 80px */
background-color: red;
float: left;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap; /* added nowrap */
}
If you double the number of your unordered list items, you will see what I mean.
Is this what you wanted to do?
$(document).ready(
function() {
$("#nav2").niceScroll();
}
);
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
#nav1 {
width: 33%;
height: 40px;
line-height: 40px;
background-color: black;
float: left;
}
#nav2 {
width: 34%;
height: 40px;
background-color: red;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav3 {
width: 33%;
height: 40px;
background-color: yellow;
float: right;
}
#nav2 ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
}
#nav2 ul li {
display: inline;
color: black;
text-decoration: none;
}
#nav2 ul a {
padding: 5px 17px;
text-decoration: none;
color: white;
}
#keyframes sin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
#yvelogo {
margin-left: 17px;
padding: 0;
height: 20px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
a #yvelogo {
border: 0;
}
#media (max-width:990px) {
#nav2 {
overflow-y: hidden;
overflow-x: scroll;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>yvemiro</title>
<meta name="author" content="hate">
<meta name="description" content="description for gogel">
<meta name="keywords" content="yve,miro,blog">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">
</script>
</head>
<body>
<div id="navbar">
<div id="nav1"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></div>
<div id="nav2">
<ul>
<li>Blog</li><li>Stuff</li><li>Me</li><li>Ask</li><li>Archive</li>
</ul>
</div>
<div id="nav3"></div>
</div>
</body>
</html>
This should fix it up a bit. If you NEED vertical centering, I can revise it once more.
Edit:
Added custom scrollbar plugin and jquery. More information about editing the scrollbar itself can be found at the plugin's official website Here