I tried to run my html file but it doesn't know where the css file is .I have two files index.html and style.css both on my desktop.Here how my index.html file looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<section class="header">
// lots of info here
</section>
and my css has all the things needed.
but the html doesn't get connected to the css file
here is how a part of my style.css look like :
.user {
& {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
i {
font-size: $large;
&:hover {
color: $white;
cursor: pointer;
}
}
&__notifications {}
&__inbox {}
...
Wrap your <section> as well as other html elements after your <head> tag within <body> tags.
Recompile the scss code to css.
If the files are in the same directory, you should be using style.css as your href (without any leading slashes or dots). And don't forget to close your <body> and <html> tags at the end.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="header">
//lots of info here
</section>
</body>
</html>
Also, it looks like your CSS is actually written in a preprocessing language (possibly SCSS). You should remove all of the variables ($...) and flatten all of the nested selectors (&).
.user {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.user i {
font-size: 10em; /* or whatever $large was */
}
.user i:hover {
color: #fff; /* or whatever $white was */
cursor: pointer;
}
.user__notifications {}
.user__inbox {}
Related
I am trying to find a javascript code for a word searcher in a text (through a form and a search button). Ι have found one which can search many words at the same time, but they need to be in a row. If the words are mixed it doesn't work. What kind of updates should we make?
Please advise
My regards
my code
`
<!DOCTYPE html>
<html lang="en">
<title>Word finder</title>
<head>
<meta charset="UTF-8" />
<title>Text Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
outline: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
.content {
width: 80%;
margin: 50px auto;
}
h1 {
text-align: center;
}
.form {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
width: 100%;
max-width: 320px;
height: 50vh;
}
input#keyword {
font-size: 18px;
padding: 10px 20px;
outline: 0;
border: 1px solid #0f62fe;
width: auto;
}
span.highlight {
color: black; background-color:yellow;
text-shadow: 0 1px 1px red;
}
</style>
</head>
<body>
<div class="content">
<p>English texts for beginners to practice reading and comprehension online and for free. Practicing your comprehension
of written English will both improve your vocabulary and understanding of grammar and word order. The texts below are designed
to help you develop while giving you an instant evaluation of your progress.</p>
</div>
<h1>Find the word in paragraph</h1>
<div class="form">
<input type="text" id="keyword" class="form_control" placeholder="Search...">
</div>
<script>
function textFind(keyword) {
if(keyword) {
var content = $("p").text();
var searchText = new RegExp(keyword, "ig");
var matches = content.match(searchText);
if(matches) {
$("p").html(content.replace(searchText, function(match){
return "<span class='highlight'>"+match+"</span>";
}));
}else {
$('.highlight').removeClass('highlight');
}
}else{
$('.highlight').removeClass('highlight');
}
}
$(document).ready(function(){
$('#keyword').on('keyup', function(){
textFind($(this).val());
})
});
</script>
</body>
</html>
`
To search many words mixed
As I don't exactly know what methods you would like to use. I can't fully answer.
But take a look at this js method: https://www.w3schools.com/jsref/jsref_includes.asp
I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box,
Just like this:
I tried to create it but something is wrong
Here's the code:
div {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>
Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.
block {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<h1>
<block>S</block> Fox.
</h1>
</body>
</html>
the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.
Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side.
To put them side by side you could create an additional parent div, of flexible type (called father).
We also need 2 texts. In this example I will use simple spans.
We also create a style.css file where we will store the style of our containers
So we can write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold
Create style.css and try all togheter. Run this!!!
#sonTwo,#sonOne {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sonTwo,#sonOne span {
font-size: 50px;
}
#father {
display: flex;
flex-direction: row;
}
#sonOne {
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
#sonTwo {
padding: 5px;
}
.fox {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them
I'm learning the CSS grid and trying to position the items inside the grid?
can get and see data from javascript:
const profileImg = document.createElement('img');
var profilePhotoUrl = post.user.get("photo").url();
profileImg.src = profilePhotoUrl;
profileImg.className = "profile";
const username = document.createElement('username');
username.className = "user";
username.innerText = post.name;
const content = document.querySelector('.content');
content.append(profileImg, username);
putting a full CSS here:
body, html {
margin: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: grid;
margin: 0;
grid-template-columns: 20% auto;
grid-template-rows: 60px auto 100px;
grid-template-areas:
"header header"
"sidebar content"
"sidebar footer";
}
header {
position: sticky;
grid-area: header;
background-color: rgb(0, 0, 0);
}
aside {
grid-area: sidebar;
background-color: lightsteelblue;
}
.content {
display: inline-flex;
align-items: center;
}
footer {
grid-area: footer;
background-color: rgb(121, 121, 121);
padding: 10px;
}
.user {
grid-area: user;
font-size: 10pt;
}
.profile {
grid-area: profile;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<aside>
<ul>
<li>home</li>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</aside>
<header>
<h1>Diky</h1>
</header>
<div class="content">
</div>
<footer>
<p>this is my footer</p>
</footer>
<script src="app.js"></script>
</body>
</html>
And it looks like this. How can I position them vertically?
How can I position elements that are created from javascript?
(profile username) <--like this
(profile username)
(profile username)
Firstly, I'd recommend not to use flexbox with grid, for the same purpose, as it ruins your understanding of grid.
Here's the code:
<!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>
<style>
/* Main grid container styling */
.grid-container{
display: grid;
/* This is used for the position into 3 columns */
grid-template-columns: 1fr 1fr 1fr;
/* For the margin between the three items */
grid-gap: 1rem;
/* For centering of items */
justify-content: center;
align-items: center;
}
/* For styling of grid items */
.grid-container-items{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-container-items"></div>
<div class="grid-container-items"></div>
<div class="grid-container-items"></div>
</div>
</body>
</html>
JS will not change the nav-hidden display property from none to flex. I tried with !important, that seems to work in some cases, but I would like to know why this does not work, so that I can understand this better.
When I press the button there is a new class assigned to the element, but the property stays as none.
What I was trying to do: have nav-hidden only appear when I click on button over the whole screen when the screen is smaller than 700px, and have nav-line in line with the logo inside when screen is wider than 700px.
function myFunction() {
var fullnavigation = document.getElementById("nav-hidden");
fullnavigation.classList.toggle("open-nav");
}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
}
header{
background-color: #009933;
width:100%;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.logo img{
display: block;
height: 4em;
}
#media screen and (max-width:700px){
.nav-line{
display: none;
}
.open-nav{
display: flex;
}
.nav-hidden{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #009933;
flex-direction: column;
}
.nav-button{
display: block;
color: #ffffff;
background-color: transparent;
padding: 0px;
border: 0px;
cursor: pointer;
font-size: 4em;
z-index: 9999;
}
}
<!DOCTYPE html>
<html lang="sl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="slike\favicon\favicon.png" type="image/gif" size="128x128">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js\index.js"></script>
<link rel="stylesheet" href="css\index.css">
</head>
<body>
<header>
<div class="logo"><img src="" alt="logo"></div>
<button id="nav-button" onclick="myFunction()">☰</button>
<nav id="nav-line" class="nav-line">
<div class="nav-text">DOMOV</div>
<div class="nav-text">O NAS</div>
<div class="nav-text">KONTAKT</div>
<div class="nav-text">POVPRAŠEVANJE</div>
</nav>
</header>
<nav id="nav-hidden" class="nav-hidden">
<div class="nav-text">DOMOV</div>
<div class="nav-text">O NAS</div>
<div class="nav-text">KONTAKT</div>
<div class="nav-text">POVPRAŠEVANJE</div>
</nav>
</body>
</html>
As CSS reads your code successively, .open-nav class has been intercepted by the next one .nav-hidden. Problem is not in your JS code and if you look to this JSFiddle it works and js switches your class well. Just put .open-nav after .nav-hidden
#media screen and (max-width:700px){
.nav-line{
display: none;
}
.nav-hidden{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #009933;
flex-direction: column;
}
.open-nav{
display: flex;
}
}
.classList.toggle('className') : When only one argument is present: Toggle the class value; i.e., if the class exists then remove it and return false, if not, then add it and return true.
So your JS will add the "open-nav" class but won't remove the "hidden-nav". I think the error might come from that.
Tell me if you need more help after that.
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>