Im trying to align the ul lis under an input box and send the span element to the right of the input box
I read other threads and how to send the span to the left with justify-content: space-between; but that doesn't want to work too. Also tried to add margin to the list to push the text around but it doesn't feel right not to mention that I still cant figure out how to stick the delete span to the right. Here is my jsfiddle https://jsfiddle.net/h0w6yp1x/
.list { justify-content: space-between;}
.list li { justify-content: space-between;}
Define a wrapper div between li tags. And make it flexbox, then justify content of this wrapper div.
Like this:
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
Working code is below:
const DOM = {
input: document.querySelector('.user-input'),
list: document.querySelector('.list'),
btnAdd: document.querySelector('.btn-add'),
btnDelete: document.querySelector('.btn-remove')
}
let addItem = function() {
if (DOM.input.value === '') {
return;
} else {
const html = `<li> <div class="li-wrapper">${DOM.input.value} <span class="btn-remove">delete</span></div> </li>`;
DOM.list.insertAdjacentHTML('beforeend', html);
DOM.input.value = '';
}
};
let removeItem = function(element) {
element.parentNode.parentNode.removeChild(element.parentNode);
}
DOM.btnAdd.addEventListener('click', function() {
addItem();
});
DOM.list.addEventListener('click', function(e) {
let element = e.target;
if (e.target && e.target.matches("span.btn-remove")) {
removeItem(element);
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
height: 100%;
background: #d53369;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom right, #cbad6d, #d53369);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom right, #cbad6d, #d53369);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 100px auto;
width: 360px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}
.container h1 {
text-align: center;
}
.user-inerface {
display: flex;
justify-content: center;
align-items: center;
}
.user-input {
border: none;
padding: 5px;
}
.btn-add {
border: none;
padding: 5px;
}
.list {
border: 2px solid black;
width: 100%;
text-decoration: none;
list-style: none;
display: flex;
flex-direction: column;
line-height: 20px;
color: #9400D3;
}
.li-wrapper {
display: flex;
justify-content: space-between;
}
.list li:nth-child(2n+2) {
opacity: 0.8;
}
.list li:hover {
opacity: 0.7;
}
<!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 href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Todos</h1>
<div class="user-interface">
<input type="text" class="user-input" placeholder="New todo">
<button class="btn-add">Add</button>
</div>
<ul class="list">
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
If you set the .list li selector to have display: flex then that appears to cause the items in the list box to show the text on one side and the delete on the other.
Related
I've been asked to create a web page which has a fixed header (just a standard header bar, about 80px high, which stays in place when the page scrolls). At the top of the page is a hero image, and when it's visible, the header should have a gradient background, (black at the top, transparent at the bottom).
Once the user has scrolled on down past the hero image, the header background should change to black.
I've seen it done, so I know it's possible, but I'm just not sure how it works and I haven't been able to figure it out. Can anyone point me in the right direction?
The HTML is:
<div id="body">
<div id="header">
... header contents (basically a logo and some navigation) ...
</div>
<div id="pageContent">
<div id="heroImage">
<img src="/path/to/image" />
</div>
<div id="about">
... About ...
</div>
... more sections
</div>
and currently the header CSS is:
#header {
background: linear-gradient(to bottom, rgba(0,0,0,255) 0%, rgba(0,0,0,255) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
position: fixed;
width: '100%';
z-index: 1000;
}
You would have to do this kind of stuff in JavaScript, since you can't really do this with css only.
In this snippet you can see how you can change the styling of the Header after scroling. You would need to check the Position of your Hero and if the Window is scrolled past this point, you can change the styling with css-classes.
Here is a similar question, for more information.
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<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>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
In this exercise, I have been given the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selected text</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<h1>Pseudo-elements</h1>
<p class="my_paragraph">The Almighty CSS allows you to not only work with
elements declared in your HTML code but to also customize those parts of
the page you can not address using simple selectors. This might be the
customization of the first line of the paragraph, the first letter of the
paragraph, or even the part of the text user has just selected.</p>
<p>Here is the list of the most-used pseudo-elements:</p>
<ul class="my_list">
<li>::first-line</li>
<li>::first-letter</li>
<li>::placeholder</li>
<li>::marker</li>
<li>::before</li>
<li>::after</li>
<li>::selection</li>
</ul>
</div>
</div>
</body>
</html>
The task is to 'Make the text inside .my_paragraph have white color and black background when it is selected.'
Here is the CSS code that is given:
/* Write your code here */
.my_paragraph::first-line {
background: linear-gradient(90deg, #9d3ce9, #5fbf85);
color: white;
}
.my_list li::marker {
color: #9d3ce9;
}
.container {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
height: 80%;
justify-content: center;
text-align: center;
width: 60%;
}
.my_list {
text-align: left;
}
So I added this bit to the CSS section:
.my_paragraph::selection {
color: white;
background-color: black;
}
What am I missing? Why is this wrong?
Thanks in advance
Add this for selection
.my_paragraph::selection {
color: white;
background-color: black;
}
.my_paragraph::-moz-selection { color: white;
background-color: black;}
You aren't adding your style to your html file!
Add this to your html header and replace style.css by your css file name:
<link rel="stylesheet" href="style.css">
Ok, correct code has been found:
.my_paragraph::selection {
color: white;
background: black;
}
I'm trying to do a static HTML & CSS webpage using flexbox but my conten doesn't fit into the window in Chrome browser. I can scroll horizontally, so I have more space horizontally than the browser window size.
This is an screenshot showing the problem. The margins are the same in the two sides of the wrapper, but the content is not fitted to 100% width of the browser window, so I can scroll horizontally, which is not what I want.
I've tried the same code in Safari and works perfectly. Is this an issue with flexbox in Chrome or what am I missing? Thanks.
This is my HTML:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS Stylesheets-->
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/font-awesome.css">
<link rel="stylesheet" href="css/vendor/devicons.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li>ELEMENT 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<div class="main-wrapper">
<div class="search-bar">
<form>
<input type="text" placeholder="Search">
</form>
</div>
</div>
</main>
</body>
And this is my SCSS:
/* 2. HEADER */
nav {
width: 100%;
text-align: center;
background-color: $dark-grey;
& ul {
max-width: $width;
margin: auto;
display: flex;
}
& li {
flex: 1 1 0;
}
& a {
display: block;
color: $white-alpha;
padding: 30px 0px;
transition: color 0.3s ease;
}
& a:hover {
color: $white;
transition: color 0.3s ease;
}
& a.active {
color: $white;
}
}
/* 3. MAIN*/
main {
background-color: $light-grey;
padding: 30px 0px;
}
.main-wrapper {
max-width: $width;
margin: auto;
}
/* 3.1. SEARCH BAR */
.search-bar {
padding-bottom: 20px;
& input {
height: 45px;
width: 100%;
border-bottom: 1px solid $medium-grey;
border-radius: 2px;
text-indent: 20px;
}
}
As far as I can tell, your margins and box-model are likely the problem + you are using the & improperly.
You may also want to look into the default page margin and setting the box-model to border-box site wide.
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
For questions like these, make a CodePen or jsFiddle etc, with only the bare bones of what is needed to recreate the situation you are having trouble with. http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - even my example has more style than needed...
One more suggestion - if you are new to flex-box, it really helped me to write out the individual properties like flex-grow flex-shrink flex-basis instead of the short-hand + always explicitly set the flex-direction or any other defaults.
html { // sort out box-model
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { // reset body margin default
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
html {
background: lightblue;
}
header, main {
padding: 1rem;
}
header {
background: white;
}
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
#media (min-width: 500px) {
flex-direction: row;
}
}
li {
flex: 1 1 0;
}
a {
display: block;
padding: 1rem;
&:hover {
background: black;
color: white;
}
&.actiive {
color: red;
}
}
}
main {
background: gray;
}
.main-wrapper {
max-width: 960px;
margin: auto;
}
.search-bar {
//
input {
height: 45px;
width: 100%;
text-indent: 20px;
background: black;
color: white;
border: 1px solid black;
}
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Can i remove blank spaces between nav buttons, manteining them centered? I've tried removing inline-block in li a but i think something it's wrong, i think is the display: inline-block the problem but i'm not sure...
Can someone help me? Thanks in advance.
nav ul {
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d; }
nav ul li {
margin: 0px;
padding: 0px;
display: inline; }
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red; }
nav ul li a:hover {
background: #949fb4; }
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>The Project</li>
<li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
The reason why it happens is because, when using elements with inline-block they are treated the same way as words in a text. Then the line-breaks and tabs you have between the elements will count as spaces.
To fix it, simply set nav ul to display: table:
nav ul {
display: table;
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
nav ul li {
margin: 0px;
padding: 0px;
display: inline;
}
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red;
}
nav ul li a:hover {
background: #949fb4;
}
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>The Project</li>
<li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
You can also remove all the spaces, line-breaks and tabs, between your elements (which I wouldn't recomment), or use Flexbox with justify-content: center like this:
nav ul {
display: flex;
justify-content: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
You can read more about it her: CSS-Tricks: Fighting the Space Between Inline Block Elements
There's a weird little trick for dealing with this issue, simply remove the spaces in your <li> elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li><!--
--><li>The Project</li><!--
--><li>Forum</li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>
See JSFiddle
I got a little problem with my recent attempt to learn about HTML and CSS.
Here is the ting: I got myself a HTML page which shows ~100 divs representing a list on the left side. However I want the parent div to contain a scrollbar but its length to be limited by the viewport.
The problem is, when I open the page, the whole body is streched to fit the full list which is not, what I want. Below is a pic with some sample data to show you because my english is not the best. The elements for the "sidebar" get generated by JavaScript and are just divs with text inside (I don`t know, if paragraphs would be better)
Snapshot from browser window
As you can see, the scrollbar is on the right border and when I scroll the whole body is scrolled. I would rather like to have a scrollbar within the "list" and just scroll this without moving the viewport around.
Here is my CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
/*--------------------
* Header
*------------------*/
header {
display: flex;
align-items: center;
height: 60px;
background-color: #4d4d4d;
}
header h1{
flex: 1;
color: white;
font-size: 24px;
font-family: Tahoma;
}
header ul {
display: flex;
flex: 1;
list-style-type: none;
height: 100%;
margin: 0;
}
header li {
flex: 1;
color: white;
text-align: center;
font-family: Tahoma;
font-size: 20px;
padding-top: 30%;
}
header li:hover {
background-color: #333333;
}
header img {
background-color: none;
height: 20px;
width: 20px;
}
/*--------------------
* Main area
*------------------*/
main {
flex: 1;
display: flex;
margin: 1%;
}
/*--------------------
* Sidebar
*------------------*/
#sidebar {
display: flex;
flex: 1;
overflow: auto;
}
#sidebar div {
flex: 1;
text-align: center;
}
#sidebar .th{
text-transform: capitalize;
}
/*--------------------
* Details
*------------------*/
#details {
flex: 4;
margin-left: inherit;
}
And here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li id="btnPerson">Persons</li>
<li id="btnCompany">Companies</li>
<li id="btnSave">Save</li>
<li id="btnLoad">Load</li>
<li id="inpChoose">Choose file</li>
<li id="btnSearch"></li>
</ul>
</header>
<main>
<div id="sidebar"></div>
<div id="details"></div>
</main>
<script src="src/main.js"></script>
<script src="src/ui.js"></script>
<script src="src/init.js"></script>
</body>
</html>
Here is some code to reproduce my problem:
var sidebar = document.getElementById("sidebar");
var table = document.createElement("div");
table.className = "table";
sidebar.appendChild(table);
for (var i = 0; i < 50; i++) {
var e = document.createElement("div");
e.innerHTML = "blabla";
table.appendChild(e);
}
I hope some smart people can help me with this
Cheers
Mirodin
You should wrap your div id="details" inside another div work as a wrapper and use this css:
.wrapper{
overflow:scroll;
height:100px;}
Why not use table?