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;
}
Related
Hello respected devs here,
I am completely new to web-developing and trying to build my website.
Here the problem with the CSS code is that the middle navbar items (.nav_links li) doesn't stay at one line as it pushes the Trends item in navbar to start at a newline as seen in the attached image in the post(Please see the attached image). I want all items to stay at one line with the same spacing between the items.
Maybe the fix is simple, I'd really appreciate your help, thanks
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
<title>N Dress Boutique. Now Shop Everything at your Finger Tips</title>
</head>
<body>
<header>
<h4 class="logo">N</h4>
<nav class='nav1'>
<ul class='nav_links'>
<a><li href="#home">Home</li></a>
<a><li href="#dresses">Dresses</li></a>
<a><li href="#trends">Trends</li></a>
</ul>
</nav>
<button class="button">Contact</button>
</header>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color:#b7b7b7;
}
body {
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background-color: #332323;
}
.logo {
cursor: pointer;
color: white;
font-size:large;
}
.nav_links li {
display: inline-block;
width: 40%;
padding-left: 3%;
padding-right: 10%;
cursor: pointer;
border-left: 1px solid white;
}
.button {
background-color: #302b2b;
padding: 5px 10%;
color:white;
}
You only give each item a width of 40%. If you want them all to stay on the same line, you should change it to 33% or 30%.
The most easy way to solve this is using a table instead. It makes your items always fit in the same row. Note that the table must be small enough otherwise it is going to overflow from the screen.
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.
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?
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks
The HTML/CSS below works in recent browsers, but not in CF9's cfdocument. Anyone with ideas?
I would like to use the inline-block property in cfdocument, if I can. Or perhaps there is an alternative to render similar results?
WHAT DO I KNOW?
I am aware that CF's cfdocument supports a limited set of CSS properties (CSS1/CSS2). The CF documentation says it supports the "display" CSS property. However, it doesn't identify what values are supported. I have included the Expected Output and some Example Code.
EXPECTED OUTPUT (See image below)
EXAMPLE CODE
<cfdocument format="PDF" pagetype="letter">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo: Display Property (block, inline, inline-block)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="margin: 0; padding: 0">
<style>
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { display: block; width: 6em; text-align: center; }
div#two p { display: inline; width: 6em; text-align: center; }
div#three p { display: inline-block; width: 6em; text-align: center; }
</style>
<div class="container">
<div id="one">
<strong>TEST 1: block</strong> This text is within block-level level element (DIV).
<p>Here's a block-level paragraph (P).</p>
Here's some additional text still inside a block-level elment.
</div>
<div id="two">
<strong>TEST 2: inline</strong> This text is within block-level level element (DIV).
<p>Here's an inline paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
<div id="three">
<strong>TEST 3: inline-block</strong> This text is within block-level level element (DIV).
<p>Here's an inline-block paragraph (P).</p>
Here's some additional text still inside a block-level element.
</div>
</div>
</body>
</html>
</cfdocument>
You may try float instead display : follow link
.container { margin-left: 2em; width: 35em; border: none; }
div { margin: 1em 0; border: solid 1px red; }
p { margin: 1em 0; border: dotted 2px blue; }
div#one p { float: right; width: 6em; text-align: center; }
div#two p { float: right; width: 6em; text-align: center; }
div#three p { float:right; width: 6em; text-align: center; }
.clear {clear:both; border:0px}