I'm sure its something simple but I've googled way too many different solutions to know where i went wrong now.
I plan to make this a full site in good time but i am still fresh. Any help is appreciated. Here's the header and nav followed by css I've been tinkering with
/*General Styles*/
body{
padding: 0;
margin: 0;
background-color: #007bff;
}
header nav #left{
background: #0f6674;
color: #f2f2f2;
padding-top: 50px;
min-height: 70px;
border-bottom: #c82333;
}
header nav {
color: #f2f2f2;
text-decoration: none;
font-size: 14px;
}
header ul{
padding: 0;
margin: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
/*Positions Container*/
.container{
position:relative;
width: 80%;
margin: auto;
overflow: hidden;
}
:
<!doctype HTML>
<html>
<head>
<title> Artistic Audio & Visual D.C. </title>
<meta name="description" content="Distributed Home Systems"/>
<meta name = "author" content ="Elishua S. Brown"/>
<meta name="authorURL" content="http://www.artavdc.com/index.html"/>
<!--Mobile Specific-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Internet Explorer-->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
<!--Bootstrap-->
<link href="bootstrap.css" rel="stylesheet"/>
<!-- Reset page styles & Add Custom Styles-->
<link href="Styles.css" rel="stylesheet" />
<link href="Reset.css" rel="stylesheet" />
<script src="Homepage.js"> </script>
<title> Artistic Audio/Visual | Welcome! </title>
</head>
<body>
<header>
<!--Navigation Bar-->
<!--Add Logo to SRC-->
<img src= "src/img/Artav-logo-w.jpg" id="logo" alt="" />
<div id= NavBarImg"></div>
<nav>
<ul id="left">
<h1>You Imagine It, We Create It</h1>
<li>Artistic Home</li>
<li>Audio Installation</li>
</ul>
<ul id="right">
<li><input type="search" id="navSearch" placeholder="Search"></li>
<h2>Subscribe to Recieve Special Offers & Updates</h2>
<form>
<input type="text" placeholder="Company Name.."/>
<input type="email" placeholder="Email.."/>
<button type="submit">Subscribe</button>
</form>
<!--Add link to Appointment Request Form-->
<li>Request Appointment</li>
</ul>
</nav> <!--End Nav-->
To my knowledge, I've closed and used all tags properly. It must be something fairly simple, I'm not really sure.
You should use ./Reset.css when you want to include files that are in the same directory.
If your files are in another directory you should use ./css/Reset.css.
Also be aware that your files should be named with uppercase if you want it to work.
Based on your paths that you have left in comments you should include them like this:
./src/CSS/Styles.css
Related
I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-
On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?
const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")
numberClicked.forEach(function(oneNumbreClicked) {
oneNumbreClicked.addEventListener('click', function() {
console.log(oneNumbreClicked.innerText)
})
})
submitBtn.addEventListener('click', function() {
document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
background-color: hsl(216, 12%, 8%);
}
.container {
color: white;
width: 35%;
background-color: hsl(213, 19%, 18%);
border-radius: 10px;
box-shadow: 0 10px hsl(216, 12%, 8%);
margin: 3em auto;
padding: 2em;
}
.thank-you-container {
text-align: center;
}
.star {
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
padding: 10px;
}
.numbers {
margin: 0 auto;
}
.number {
display: inline-block;
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
text-align: center;
padding: 10px;
width: 40px;
font-size: 1em;
margin: 0 0.423em;
opacity: 0.5;
border: none;
color: inherit;
}
.submit-btn {
background-color: hsl(25, 97%, 53%);
color: white;
padding: .8em 2em;
width: 100%;
border-radius: 1.5em;
border: none;
margin-top: 1.5em;
font-weight: 400;
font-size: 1.1em;
}
.number:hover {
opacity: 1;
background-color: hsl(217, 12%, 63%);
}
.submit-btn:hover {
opacity: 0.5;
}
.submit-btn:focus,
.number:focus {
opacity: 1;
background-color: white;
color: hsl(25, 97%, 53%);
}
.final-rating {
background-color: hsl(229.4, 14.3%, 23.3%);
color: hsl(25, 97%, 53%);
border-radius: 1.5em;
padding: 0.4em;
margin: 1.3em auto;
width: 12.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.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=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component | Rating Page</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<!-- Rating state start -->
<section class="container">
<img class="star" src="images/icon-star.svg" alt="">
<h2>How did we do?</h2>
<p>
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div class="numbers" id="numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
</div>
<a href="thank.html" target="_self">
<button class="submit-btn" id="submit-btn">Submit</button>
</a>
</section>
<!-- Rating state end -->
<div class="attribution">
Challenge by Frontend Mentor. Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.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=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component |Thank You Page</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="container thank-you-container">
<img src="images/illustration-thank-you.svg" alt="">
<p class= "final-rating" id="final-rating"></p>
<h2>Thank you!</h2>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
-->
So first it would be better if you could write the whole error, so we have more info of what is causing it.
Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <button>Submit</button>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)
Solution:
You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.
Dummy demo solution:
const container = document.getElementById("container")
const containerTwo = document.getElementById("thank-you-container")
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";
// your additional logic here
})
.thank-you-container {
display: none}
<div class="container" id="container">
<h1>Container one</h1>
</div>
<div class="thank-you-container" id="thank-you-container">
<h1>Container two</h1>
</div>
<button id="myBtn">Submit</button>
Sorry for the basic question I have this problem when im trying to display my background image using background-image:url() on the css but unfortunately it doesnt work and when i use the content:url(); it works.
And also background-image also works with a url image location from the internet. I have tried everything and research a lot but still no luck. Sorry for the newbie question.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<header>
<div class="logo">
</div>
<nav>
<ul class="nav-ul">
<li> <a href="#">Homes</li>
<li> <a href="#">About</li>
<li><a href="#">Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Login</button>
</header>
It works now. I added property background-size: contain;
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
background-size: contain;
}
You were missing the <body> tag.
(Its a good job you're not a mortician.)
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('https://dummyimage.com/80x80/000/fff');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<body>
<header>
<div class="logo"></div>
<nav>
<ul class="nav-ul">
<li> Homes</li>
<li> About</li>
<li>Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"><button>Login</button></a>
</header>
</body>
</html>
I just copy your code and place in a file structure like this
And it works.
Absolute path like this also worked well:
background-image: url('C:/Users/User/Documents/test/images/logo.png');
Internal CSS works, but external doesn't. I've tried the external with the code !important, but it just didn't made any sense.
I want to add a gallery to my site. But I have a problem. As I've seen in the browser some margin overwrites the ext. CSS. But here's the thing, I have no margins in the HTML code. The only thing I can imagine is that the Bootstrap is doing something with high priority.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
position: static;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="gallery">
<a target="_blank" href="gtrr35.jpg">
<img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
</a>
<div class="desc">Nissan GT-R R35 Nismo</div>
</div>
Where is your custom css stylesheet linked?
It should be the last of all the other tags (fromm top-left to bottom -right), otherwise it gets overwritten due the cascading aspect of CSS...
I'm using an API call to get the image info. The image I get back and want to display to the dom comes in the form of a <figure> json data. The API json data has set widths, which I notice I can change in CSS when I set a specific width to it. But what if I want it to grow or shrink with the container? I should be able to setting the max-width to 100%, but the images all go outside the container in mobile size. Also, they dont get larger when I increase the size of the screen, they stay at the same size.
JSON Data returned:
<figure data-align="right" data-img-src="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827" data-size="small" data-ratio="1.3333333333333" data-width="375" data-embed-type="image" style="width: 375px"><a class="fluid-height" style="padding-bottom:133.3%" href="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827"><img alt=" Original Arcade Cabinet" src="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" srcset="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg 375w" sizes="(max-width: 480px) 100vw, 480px" data-width="480"></a><figcaption> Original Arcade Cabinet</figcaption></figure>
My CSS:
figure {
font-size: 20px;
margin-left: auto;
margin-right: auto;
font-style: italic;
padding: 10px;
text-align: center;
}
figure img{
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 10px;
}
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Classic Arcade Game Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Raleway|Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<a name="top"></a>
<div class="title">
<img src=images/jacob.jpg class="jacobLogo" alt="cartoon Jacob head">
<h1> Classic Arcade Game Info</h1>
</div>
<div class="headInfo">
<p>Search for you favorite Arcade Game below to recieve information about the game and videos!</p>
</div>
<form>
<div class="searchSection">
<input class="searchBox" type="text" placeholder="e.g. Donkey Kong" required>
</div>
<div class="buttonSection">
<input class="submitButton" type="submit" value="Search">
</div>
</form>
</header>
<main class="main">
<div class="arrow hidden">
<img class="arrowImage" src="images/boxArrow.jpg"><a href="#top">
</div>
<div class="loading">
<section class="loadingMessage"></section>
</div>
<div class="errors">
<section class="errorMessage"></section>
</div>
<div class="infoContainer hidden">
<section class="infoResults hidden info"></section>
</div>
<div class="tubeContainer hidden">
<section class="tubeResults hidden tube">
<input class="youTubeLogo" type="image" src="images/youtube.png" alt="YouTube Logo">
<section class="tubeList"></section>
</section>
</div>
</main>
<footer class="footer">
<p>Another fun site created by Jacob Ashley</p>
</footer>
<script src="script.js" async defer></script>
</body>
</html>
The HTML provided doesn't really correlate with the image you shared. I'm sure this is because a call happens from your script.js and one of these divs is replaced with the json figure tag.
However, the figure code you provided that's returned from the api has width declared in a style tag to override this in your front end you'll need to use !important.
div {
padding: 40px;
border: 1px solid #ccc;
margin: 40px;
}
figure {
font-size: 20px;
margin-left: auto;
margin-right: auto;
font-style: italic;
text-align: center;
width: 100% !important;
}
figure img{
margin-left: auto;
margin-right: auto;
height: auto;
max-width: 100%;
}
Here's a Fiddle approximating what I assume your layout is like with the returned image.
I am trying to add trix editor in a form. It appears but the toolbar is disabled its not working. After some research i found that was in the header of my layout file so i moved it in the end of the body and removed "defer" and now trix editor is disappeared.
layout file
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</body>
</html>
field where i want trix editor
<div class="form-group">
<label for="content">Content</label>
<input id="content" type="hidden" name="content">
<trix-editor input="content"></trix-editor>
</div>
trix js and css
#section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
#endsection
#section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
#endsection
--> composer require te7a-houdini/laravel-trix
--> php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
--> php artisan migrate
In your page use like
<html>
<head>
#trixassets
</head>
<body>
<form method="POST" action="route('article.store')">
#csrf
#trix(\App\Article::class, 'content')
<input type="submit">
</form>
</body>
</html>
Here i made demo trix editor and it's working fine in laravel 5.8.14 v
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<trix-editor input="content"></trix-editor>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
</body>
</html>
Did you forget to add jquery ?
The link of js of trix code that you have mentioned in your section('scripts'), instead of including in 'scripts' section. Directly paste the link in your main HEAD section of html, may be its in layouts.app.
or you can also do the same as you have done but just change some code as like:
In your html, head section, add yield as like #YIELD('CSCRIPTS') just below other mentioned SCRIPT tag, make sure you use new name in yield.
In html, head section, you will also see other SCRIPT tag, there remove DEFER if it is there.
And finally, go to the blade where your SECTION belong and change it to #SECTION('CSCRIPTS').
Works well.
But also you will see the other script tag, there and remove DEFER keyword.
Other keep as it, works perfectly