So once upon a time in practicing HTML,CSS and JS I built a pretty website. It was a fully functional one with multiple web pages and used express for backend. I lost its files and left web prog for a while. Now I cannot figure out how to do that again. I went to source from where I learned it but in vain. If I Go-Live the HTML page I created with CSS, It displays corrrectly i.e with the css. However if I use express, it just shows the Html. Yes Plain, old Htmlsss. Hatesss and textsss, No sstylingss.
Here is the javascript
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The website should look like when it is displayed along with css in snippet.
Seriously can't figure out what is and where is it going wrong.
:root {
--black-col: #15191f;
--light-col: #e3ecf3;
}
* {
margin: 0px;
padding: 0px;
}
.cen {
text-align: center;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: var(--light-col);
}
div {
margin: 20px 15px;
}
.border-red {
border: 3.5px solid #ffb700d3;
border-radius: 12px;
box-shadow: 7px 7px 3px 1px green;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px blue;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px red;
/* box-shadow: x y blur-radius spread-readius color; */
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.line-height {
line-height: 8vh;
}
/* NAVIGATION BAR */
.grinav {
display: grid;
grid-template-columns: 1fr 1fr;
}
#timeclock {
justify-content: end;
margin: 0px 0px 0px 0px;
color: var(--black-col);
}
#times {
border: 2px solid var(--light-col);
background-color: var(--light-col);
margin: 0px 2vw 0px 0px;
padding: 5px 20px 5px 20px;
font-weight: bold;
border-radius: 200px;
}
.glowbar {
display: block;
background-color: #ff7700;
box-sizing: border-box;
width: 0%;
margin: 0px 0px 0px 0px;
position: fixed;
height: 4px;
animation-name: fill2;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
#keyframes fill1 {
from {
width: 0%;
background-color: gold;
}
to {
width: 100%;
background-color: #db9b00;
}
}
#keyframes fill2 {
0% {
width: 0%;
background-color: rgb(255, 217, 0);
}
90% {
/* width: 70%; */
background-color: #ff7700;
}
100% {
width: 100%;
background-color: #ff7700;
}
}
nav, .grinav {
position: sticky;
top: 0px;
left: 0px;
width: 100%;
box-sizing: border-box;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background-color: var(--black-col);
z-index: 2;
}
nav a {
text-decoration: none;
background-color: var(--black-col);
color: var(--light-col);
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
/* ff7700 */
transition-property: background-color;
/* transition-property: color; */
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
background-color: var(--light-col);
}
#li1 {
margin-left: 4vw;
}
#a1 {
margin: 0px 1.5vw;
}
#a2 {
margin: 0px 1.5vw;
}
#a3 {
margin: 0px 1.5vw;
}
#a4 {
margin: 0px 1.5vw;
}
nav ul li {
list-style: none;
}
#logo {
width: 3vw;
border: 2px;
border-radius: 100px;
margin: 5px 0px 0px 15px;
}
/* NAVIGATION BAR ENDS */
/* MAIN HEADING */
.heading {
height: 90vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.ap {
grid-column-start: 2;
grid-column-end: 2;
margin: 100px 0px 0px 100px;
}
/* If there is a horizontal scroll bar, you can disable it by the following code:{
box-sizing: border-box;
width: 100%;
instead of width: 100vw;
This should solve the problem} */
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
/* background-color: var(--black-col); */
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.AiO {
font-family: 'Bahnschrift', 'Arial', 'Calibri', 'Times New Roman', Times, serif;
font-size: 2.5vw;
margin: 40px 0px;
color: orange;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
/* text-align: left; */
top: 100px;
margin: 277px 0px 0px 150px;
}
.breaker {
display: none;
}
/* #media only screen and (max-width:2600px) {
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
background-color: var(--black-col);
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
} */
.smbot {
text-align: center;
display: inline;
color: var(--light-col);
}
/* MAIN HEADING ENDS */
/* LISTS SECTION */
div ul {
margin: 0px 25px;
}
ol li {
margin: 0px 40px;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
margin: 4px 0px;
width: 100;
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
/* LISTS SECTION ENDS */
/* FORMS STARTED */
input {
display: block;
}
option {
background-color: var(--black-col);
color: var(--light-col);
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: var(--black-col);
color: var(--light-col);
height: 30px;
border: 2px solid var(--black-col);
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
border-radius: 100px;
}
.checkbox {
height: 25px;
width: 25px;
}
/* FORMS ENDED */
h4, h5 {
text-shadow: 2px 2px 2px var(--black-col);
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
animation-name: harry1;
/* animation-name: harry2; */
animation-duration: 4s;
animation-iteration-count: 1;
/* z-index: -1; */
transition: all 1s ease-in-out;
}
.box:hover {
transform: rotate(3600000000deg);
}
#keyframes harry1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
#keyframes harry2 {
0% {
top: 0px;
left: 0px;
}
25% {
top: 250px;
left: 0px;
}
75% {
top: 250px;
left: 250px;
}
100% {
top: 0px;
left: 250px;
}
}
<!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>HTML</title>
<link rel="stylesheet" href="HTML.css">
<!-- <script src="../JS/index.js"></script> -->
</head>
<body class="">
<div class="grinav">
<nav class="flex row al-cen">
<img id="logo" src="../static/Pb_O_Wsm.png" alt="Img not found">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/HTML.html" target="_blank">Html</a></li>
<li id="li2"><a id="a2" href="../HTML/CSS.html" target="_blank">CSS</a></li>
<li id="li3"><a id="a3" href="../HTML/Javasc.html" target="_blank">JavaScript</a></li>
</ul>
</nav>
<li id="timeclock" class="flex row al-cen "><span id="times"></span></li>
</div>
<div class="glowbar">
</div>
<div class="heading flex flex-column ju-cen ">
<h1 class="AiO ">All in ONE Website<br>
</h1>
<p class="ap">This <strong>Website</strong> aims to <br class="breaker">
<i>include</i> all that<br class="breaker">
has been <em>learnt</em> and<br class="breaker">
keep a record of it <br class="breaker">
for future usage.
</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6 class="cen">OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6 class="cen">OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6 class="cen">OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6 class="cen">OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6 class="cen">OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h4>This is a Table</h4>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="cen">FORMS</h1>
<h5 class="cen">Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4 class="cen">We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in
detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?
</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
<script>
function updateTime() {
timern = new Date()
times.innerHTML = `${timern.getHours()}:${timern.getMinutes()}:${timern.getSeconds()}`;
console.log(times.innerHTML)
}
setInterval(updateTime, 500);
</script>
</html>
I learned this all from the link provided by #Kennard but it was difficult.
I'll try to explain it here in a beginner friendly way to assist other newbies like me coming to this post.
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The JavaScript is perfectly fine by itself... except with a small problem, which scaled up ofc. The express could not found the stylesheet(CSS file) I linked in Html. It does not follows the link we gave in html. Rather it says
You want to serve a file along with HTML... Fine I'll do it.
But to avoid the mess, you have to do some thing more. Tell me the location where File is stored.
And this is the public thing mentined above
For the sake of simplicity I would recommend beginners to follow this guide to create a structure which is organized.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
This is the structure we get by executing following commands:
npx express-generator
express --view=pug myapp (myapp is name of folder you wanna generate.)
Remember the "app.js" stores all of this Javascript.
Now we will tell express to look in following directory;
app.use('/public', express.static(path.join(__dirname, 'public')))
It simply means that in the directory I am standing right now, there is a folder named public. Go there and fetch files from there.
Now keep all the files e.g images to serve CSS and Html over here.
If you generate files using the method on this link, it has already got folders seperated for this.
Remember The answer to all question lies in Documentation... Once and for all
Upvote if Helpful.
//Thankyou Kennard. Would not have been possible without your help.
Express static serve the css
const path = require('path')
app.use(express.static(path.join(__dirname, 'path_to_public_directory')))
//Put all your static files in a public folder and then you do this
app.use('/public', express.static(path.join(__dirname, 'public')))
Related
const navbar = document.querySelector('.navbar');
let scrolled = false;
window.onscroll = function() {
if(window.scrollY > 100) {
navbar.classList.remove('top');
if(!scrolled) {
navbar.style.transform = 'translateY(-70px)';
}
setTimeout(() => {
navbar.style.transform = 'translateY(0px)';
scrolled = true;
}, 200);
} else {
navbar.classList.add('top');
scrolled = false;
}
}
const hamMenu = document.querySelector('#ham-menu');
const listItems = document.querySelectorAll('.item-list li');
loadEventListeners();
function loadEventListeners() {
hamMenu.addEventListener('click', extendMenu);
}
function extendMenu(e) {
hamMenu.style.transform = 'scale(1.5)';
setTimeout(() => hamMenu.style.transform = 'scale(1)', 300);
if(hamMenu.classList.contains('closed')) {
listItems.forEach(item => {
item.style.transform = 'translateX(0vw)'
});
hamMenu.classList.remove('closed');
} else {
listItems.forEach(item => {
item.style.transform = 'translateX(100vw)'
});
hamMenu.classList.add('closed');
}
}
const message = document.querySelector('#message');
const heightLimit = 200;
message.oninput = function() {
message.style.height = ""; /* Reset the height*/
message.style.height = message.scrollHeight + 'px';
}
/* UTILITIES */
/* Buttons */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.btn:hover {
transition: all 0.15s ease-in-out;
transform: scale(1.05);
opacity: 0.85;
}
.btn:active {
transform: scale(1.1);
}
/* Text */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
/* Background */
.bg-primary {
background: var(--primary);
color: #fff;
}
.bg-secondary {
background: var(--secondary);
color: #fff;
}
.bg-light {
background: var(--light);
color: #333;
}
.bg-dark {
background: var(--dark);
color: #fff;
}
.bg-white {
background: #fff;
color: #333;
}
.bg-outline {
background: transparent;
color: #fff;
border: 1px #fff solid;
}
/* Flex Icons */
.flex-icons {
display: flex;
justify-content: space-around;
padding: 3rem;
width: 100%;
}
.flex-icons .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex: 1;
padding: 1rem 2rem;
}
.flex-icons img {
width: 20rem;
border-radius: 50%;
margin-bottom: 3rem;
}
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-row.flex-reverse {
flex-direction: row-reverse;
}
.flex-row .column {
flex-basis: 100%;
flex: 1;
}
.flex-row img{
object-fit: cover;
width: 100%;
height: 100%;
}
.flex-row .column .column-1,
.flex-row .column .column-2 {
height: 100%;
}
.flex-row .column .column-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 2.5rem;
}
.flex-row .column .column-2 h4 {
font-weight: bold;
}
.flex-row .column .column-2 h2 {
font-size: 4rem;
margin: 1rem 0 2rem;
font-weight: 300;
}
.flex-row .column .column-2 p {
margin-bottom: 3rem;
}
/* Flex Grid */
.flex-grid {
padding: 2rem 2rem 4rem;
}
.flex-grid .row {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-grid .row .column {
flex-basis: 100%;
padding: 0 0.3rem;
}
.flex-grid .row .column img {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
}
.flex-grid .row .column img:hover {
opacity: 0.9;
transform: scale(1.02);
}
.flex-grid .grid-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 1rem;
}
.flex-grid .grid-content h2 {
font-size: 4rem;
font-weight: 300;
margin: 2rem 0 3rem;
}
/* MAIN STYLE */
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
/* Colors */
--primary: #28a745;
--secondary: #0284d0;
--light: #f4f4f4;
--dark: #333;
}
html {
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
font-size: 1.6rem;
color: #333;
background: #fff;
}
h1, h2, h3 {
font-weight: 400;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
/* Hero */
.hero {
background: url(../img/showcase.jpg) no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero.blog-page {
height: 30vh;
background: url(../img/blog/blog-home.jpg) no-repeat center center/cover;
}
.hero.blog-page .content h1 {
font-size: 4rem;
}
.hero.blog-page .content h1 span {
font-weight: bold;
font-style: italic;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.hero * {
z-index: 1;
}
.hero .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}
.hero .content h1 {
font-size: 6.5rem;
font-weight: 300;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
.hero .content p {
font-size: 2.2rem;
font-weight: 300;
margin: 1.5rem 0 3rem;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
/* navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
opacity: 0.8;
color: #f4f4f4;
position: fixed;
top: 0;
width: 100%;
height: 7rem;
padding: 0 3rem;
transition: all 0.4s ease-in;
}
.navbar.top {
background: transparent;
}
.navbar a {
color: #fff;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar ul li a {
padding: 1rem 2rem;
margin: 0 0.5rem;
}
.navbar ul li a:hover {
border-bottom: 2px var(--primary) solid;
}
.navbar .logo {
transition: all 0.2s ease-in-out;
}
.navbar .logo:hover {
transform: scale(1.05);
}
.navbar .logo span {
font-weight: bold;
font-style: italic;
}
.navbar #ham-menu {
cursor: pointer;
}
/* Flex Icons */
.flex-icons .box i {
background: var(--primary);
color: #fff;
padding: 1.5rem;
border-radius: 50%;
margin-bottom: 2rem;
}
.flex-icons .box h3 {
margin-bottom: 2rem;
font-weight: bold;
font-size: 2rem;
}
/* Team */
#team .flex-icons .box h4 {
margin-bottom: 1rem;
}
#team .team-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 5rem 3rem;
}
#team .team-content h4 {
font-size: 1.8rem;
}
#team .team-content h2 {
font-size: 4.5rem;
font-weight: 300;
margin: 2rem 0;
}
/* Contact Form */
#contact .contact-form {
padding: 2rem;
width: 100%;
}
#contact .contact-form .form-control label {
display: block;
}
#contact .contact-form .form-control input,
#contact .contact-form textarea {
width: 100%;
height: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
border: 1px #ddd solid;
border-radius: 0.5rem;
font-family: 'Roboto', sans-serif;
}
#contact .contact-form textarea {
height: 15rem;
resize: vertical;
overflow: hidden;
}
#contact .contact-form .form-control input:focus,
#contact .contact-form textarea:focus {
outline: none;
border: 1px var(--primary) solid;
}
#contact .contact-form .form-control input::placeholder,
#contact .contact-form textarea::placeholder {
font-family: 'Roboto', sans-serif;
opacity: 1;
}
#contact .contact-form button {
display: inline-block;
}
#contact .column-2 h2 {
padding-left: 2rem;
}
/* Footer */
.footer {
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer a {
color: #fff;
margin: 0 1.5rem;
}
.footer a:hover {
color: var(--primary);
}
.footer a i {
transition: 0.2 all ease-in-out;
}
.footer a i:hover {
transform: scale(1.1);
}
.footer a i:active {
transform: scale(1.15);
}
.footer p {
margin-top: 2rem;
}
.footer p span {
font-style: italic;
font-weight: bold;
}
/* Post Page */
.post .post-1 {
padding: 3rem;
}
.post img {
width: 50rem;
border-radius: 1rem;
display: block;
margin: 3rem auto;
}
.post .post-1 h2 {
font-size: 4rem;
font-weight: 300;
padding-top: 0.5rem;
}
.post .post-1 p {
margin-bottom: 2rem;
}
/* Extra */
.item-list li {
/* display: none; */
transition: all 0.5s ease;
transform: translateX(100vw);
}
.item-list .fa-bars {
transition: all 0.3s ease;
font-size: 2rem;
}
<!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" />
<script
src="https://kit.fontawesome.com/5c96e2fbe8.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/style.css" />
<title>EdgeLedger</title>
</head>
<body id="home">
<header class="hero">
<div class="navbar top">
<h1 class="logo">
<a href="index.html">
<span class="text-primary"
><i class="fas fa-book-open"></i> Edge</span
>Ledger
</a>
</h1>
<nav>
<ul class="item-list">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
<i id="ham-menu" class="fa-solid fa-bars closed"></i>
</ul>
</nav>
</div>
<div class="content">
<h1>The Sky Is The Limit</h1>
<p>Join us on our mission to change the world</p>
<a href="#about" class="btn bg-primary">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</header>
<main id="about">
<!-- About: Services -->
<section class="services" id="services">
<div class="flex-icons">
<div class="box">
<i class="fa-solid fa-coins fa-2x"></i>
<h3>Financial Advice</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-chart-column fa-2x"></i>
<h3>Stock Analysis</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-handshake-angle fa-2x"></i>
<h3>Collaborations</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
</div>
</section>
<!-- About: Solutions -->
<section id="solutions">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/meeting-2.jpg" alt="image" />
</div>
</div>
<div class="column bg-primary">
<div class="column-2">
<h4>What you're looking for</h4>
<h2>Our reputation speaks for us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="#solutions" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Cases -->
<section id="cases">
<div class="flex-grid">
<div class="grid-content">
<h4>This is what we do</h4>
<h2>Business Cases</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
voluptatum.
</p>
</div>
<div class="row">
<div class="column">
<img src="img/cases/cases1.jpg" alt="" />
<img src="img/cases/cases2.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases3.jpg" alt="" />
<img src="img/cases/cases4.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases5.jpg" alt="" />
<img src="img/cases/cases6.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases7.jpg" alt="" />
<img src="img/cases/cases8.jpg" alt="" />
</div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog">
<div class="flex-row flex-reverse">
<div class="column">
<div class="column-1">
<img src="img/blog/blog-home.jpg" alt="image" />
</div>
</div>
<div class="column bg-secondary">
<div class="column-2">
<h4>Blog | May 23 2022</h4>
<h2>Our recent restructuring plan</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="blog.html" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team">
<div class="team-content">
<h4>Who we are</h4>
<h2>Our Professional Team</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
expedita?
</p>
</div>
<div class="flex-icons">
<div class="box">
<img src="img/team/Chief Executive Officer.jpg" alt="" />
<h4>Jane Smith</h4>
<p>Chief Executive Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Operating Officer.jpg" alt="" />
<h4>John Doe</h4>
<p>Chief Operating Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Marketing Officer.jpg" alt="" />
<h4>Sara Rogers</h4>
<p>Chief Marketing Officer</p>
</div>
</div>
</section>
<section id="contact">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/contact.jpg" alt="image" />
</div>
</div>
<div class="column bg-light">
<div class="column-2">
<h2>Contact Us</h2>
<form class="contact-form">
<div class="form-control">
<label for="name"></label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
/>
</div>
<div class="form-control">
<label for="email"></label>
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
/>
</div>
<div class="form-control">
<label for="phone"></label>
<input
type="text"
name="phone"
id="phone"
placeholder="Contact Number"
/>
</div>
<textarea
name="message"
id="message"
placeholder="Message"
></textarea>
<button type="submit" class="btn bg-primary">Send</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="footer bg-dark">
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
</div>
<p>
All Rights Reserved © 2022,
<span class="text-primary">Edge</span>Ledger
</p>
</footer>
<!-- Scripts -->
<script src="src/app.js"></script>
</body>
</html>
I'm relatively new to HTML/CSS and JavaScript and could really use some help on this one, as I've tried my best but to no avail. I will include the relevant code at the end. Thank you so much for your help in advance!
I'm experiencing some very weird behaviour with trying to animate a navbar menu. Basically, this is a part of a larger project in one of the courses that I'm taking, and I decided to redo the entire project and add more features here and there and experiment.
In the navbar (within the ul) I've decided to add a Font Awesome icon for a menu, then translate the list-items out of the view-port. When clicked, the icon triggers a function in the JavaScript file that translates the list-items into their place on the navbar, then translates them out of the view-port when pressed again. This is of course accompanied by a transition, and works/looks really well for a discount navbar menu.
One thing to explain before I ask my question is that there's another JavaScript function that turns the navbar's background from fully transparent to 80% opacity when scrolling further than 70px from the top, and turns it back to fully transparent when reaching the top again. Screenshot-1 (at the top) - Screenshot-2 (scrolled).
The problem is, when the navbar's background is at 80% opacity, a weird behaviour occurs where the navbar's background loses it's opacity and only the list-items retain the 80% opacity. This is an example. It gets even worse when I hover over it like in this screenshot. When clicking the menu icon again to retract them out, something even weirder like this sometimes happens, while the background on the navbar regains its correct opacity.
After trying a few things like removing the hover effect, not including the icon in the ul,..etc, I noticed that if I just set the opacity of the navbar to the default value 1, this weird behaviour stops, but I want to know why is this happening, as I don't want to simply give up on the slight transparency on the navbar.
I'm sure there's something I'm missing or not aware of, and I would love to learn this now to avoid a similar issue in the future. Is the opacity the issue, or is there something else causing this?
The relevant code is below. I may leave out some unnecessary CSS code in my CSS utility file that I'm certain doesn't have an effect on this. Here's a screenshot of how the header makes sense of the full header tag and its elements.
The property opacity affects on the whole elements not only background. You can use only background-color property to achieve what you want.
You can change the background color like this where c is the alpha(opacity) value. You can also use rgba(51,51,51,0.8) which is equivalent of #333c.
.navbar {
background-color: #333c;
}
.navbar.top {
background-color: transparent;
}
You can either just change the background color from javascript
navbar.style.backgroundColor = '#333c' // when scrolled
navbar.style.backgroundColor = 'transparent' // when scrolled
I have made an image slider using javascript with the Glider library like below .
As you can see in my image however the third image is not aligned like the first 2 and has different height . My first two images in my image folder have the same width of 1920 . The third image has a width of 1200 .Even if I set the image width and height the result is the same . I've been banging my head for quite some time and have not found a solution for this .
My code for a single element inside my container, CSS and Glide libraries:
.card__header img{
max-width:100%;
}
.new__card {
background-color: var(--primaryColor);
width: 95%;
margin: 0 auto;
}
.new__card:not(:last-child) {
margin-right: 1rem;
}
.card__footer {
padding: 3rem 1.4rem;
}
.card__footer h3 {
font-size: 2.5rem;
font-weight: 600;
color: var(--black);
margin-bottom: 1rem;
}
.card__footer span {
display: inline-block;
margin-bottom: 1rem;
color: var(--black2);
}
.card__footer p {
font-size: 1.5rem;
color: var(--black2);
margin-bottom: 1.6rem;
line-height: 2.7rem;
}
.card__footer a button,
.card__footer a button {
display: inline-block;
padding: 1.4rem 4rem;
border: 1px solid var(--black);
color: var(--black);
cursor: pointer;
transition: 0.3s;
}
.card__footer a button:focus {
outline: none;
}
.card__footer a button:hover {
border: 1px solid var(--black);
color: var(--white);
background-color: var(--black);
}
<div class="news__container">
<div class="glide" id="glide_5">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="new__card">
<div class="card__header">
<img src="../images/news5.jpg" alt="">
</div>
<div class="card__footer">
<h3>Styling White Shirts After A Cool Day</h3>
<!-- <span>By Admin</span> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo praesentium, numquam non
provident rem sed minus natus unde vel modi!</p>
<button>Read More</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.min.css
">
<!-- Glide Carousel Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js"></script>
Do this :
.card__header img{
height : 40px; /* height that you want */
width : 100%;
object-fit : cover;
}
I've been following a tutorial. I was unable to figure out why none of my JQuery functions work. I scrolled down and nothing happens. All of my files are properly linked and referenced. I tried to change the javascript so scrolling 50px will change the opacity but it still did not work. Please help!
Thanks for your time.
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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
<title>EdgeLedger Financial | Accounting & Investment</title>
</head>
<body>
<nav id="navbar">
<h1 class="logo">
<span class="text-primary">
<i class="fas fa-book-open"></i> Edge
</span>Ledger
</h1>
<ul>
<li class="a" href="#"><a>Home</a></li>
<li class="a" href="#"><a>What</a></li>
<li class="a" href="#"><a>Who</a></li>
<li class="a" href="#"><a>Contact</a></li>
</ul>
</nav>
<!-- Showcase-->
<header id="showcase">
<div class="showcase-content">
<h1 class="l-heading">
The Sky Is The Limit
</h1>
<p class="lead">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, quidem nostrum blanditiis eaque voluptatum dignissimos?
</p>
Read More
</div>
</header>
<!-- Section: What We Do-->
<section id="what" class="bg-light py-1">
<div class="container">
<h2 class="m-heading text-center"><span class="text-primary">What</span> We Do</h2>
<div class="items">
<div class="item">
<i class="fas fa-university fa-2x"></i>
<div>
<h3>Investment Banking</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto ex eius sed? Eius, accusamus nobis!</p>
</div>
</div>
<div class="item">
<i class="fas fa-book-reader fa-2x"></i>
<div>
<h3>Portfolio Management</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto ex eius sed? Eius, accusamus nobis!</p>
</div>
</div>
<div class="item">
<i class="fas fa-pencil-alt fa-2x"></i>
<div>
<h3>Tax & Custodial</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto ex eius sed? Eius, accusamus nobis!</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Who We are-->
<section id="who">
<div class="who-img"></div>
<div class="who-text bg-dark p-2">
<h2 class="m-heading"><span class="text-primary">Who</span> We Are </h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium sapiente fugiat ab minus, sunt amet itaque id cupiditate inventore tempora.</p>
<h3>Our Team</h3>
<ul class="list">
<li>Mark Smith: CEO</li>
<li>Shannon Johnson: CFO</li>
<li>John Corbit: Lead Accountant</li>
<li>Janet Williams: Investment Manager</li>
<li>Kara Jackson: Senior Accountant</li>
</ul>
</div>
</section>
<!-- Section: Clients-->
<section id="clients" class="py-1">
<div class="container">
<h2 class="m-heading text-center">
<span class="text-primary">Our</span>
Clients
</h2>
</div>
<div class="items py1">
<div><img src="./img/logos/logo1.png" alt="Client"></div>
<div><img src="./img/logos/logo2.png" alt="Client"></div>
<div><img src="./img/logos/logo3.png" alt="Client"></div>
<div><img src="./img/logos/logo4.png" alt="Client"></div>
<div><img src="./img/logos/logo5.png" alt="Client"></div>
</div>
</section>
<!-- Section: Contact-->
<section id="contact">
<div class="contact-form bg-primary p-2">
<h2 class="m-heading">Contact Us</h2>
<p>Please use the form below to contact us</p>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="name">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="name">Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="name" id="name" width="100%" placeholder="Enter Message"></textarea>
</div>
<input type="submit" value="Send" class="btn btn-dark">
</form>
</div>
<div class="map">
</div>
</section>
<!-- Footer -->
<footer id="main-footer">
<div class="container">
<p>Copyright © 2020 EdgeLedger All Rights Reserved</p>
</div>
</footer>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<!-- Local JS File -->
<script src="js/main.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWwjIowcgGZxjQzSS1VlE_PtwSPrN0XJs&callback=initMap"
async defer></script>
</body>
</html>
styles.css
#import url('https://fonts.googleapis.com/css?family=Robot');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roberty', sans-serif;
line-height: 1.4;
}
p {
margin: 0.75rem 0;
}
/*Utility Classes */
.container {
max-width: 1100px;
margin: auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-primary {
color: #93cb52;
}
.bg-light {
background: #f4f4f4;
color: #333;
}
.bg-dark {
background: #333;
color: #fff;
}
.bg-primary {
background: #93cb52;
color: #fff;
}
.l-heading {
font-size: 4rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.lead {
font-size: 1.3rem;
margin-bottom: 2rem;
}
.py-1 { padding: 1.5rem 0; }
.py-2 { padding: 2rem 0; }
.py-3 { padding: 3rem 0; }
.p-1 { padding: 1.5rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.btn {
display: inline-block;
color: #fff;
background: #93cb52;
text-decoration: none;
padding: 0.5rem 2rem;
border: none;
border-radius: 5px;
}
.btn-dark {
background: #333;
color: #fff;
}
.btn:hover {
background: #7ab436;
}
.list {
margin: 0.5rem 0;
list-style: none;
}
.list li {
padding: 0.5rem 0;
border-bottom: #444 dotted 1px;
}
/*Navbar */
#navbar {
display: flex;
position: sticky;
top: 0;
background: #333;
color: #fff;
justify-content: space-between;
z-index: 1;
padding: 1rem;
}
#navbar ul {
display: flex;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
#navbar ul li a:hover {
background: #93cb52;
border-radius: 5px;
}
/* Showcase */
#showcase {
background: #333 url('../img/showcase.jpg') no-repeat center center/cover;
height: 100vh;
color: #fff;
}
#showcase .showcase-content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 2rem;
/* Overlay */
position: absolute;
top: 65px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
}
/* Section: What We Do*/
#what .items {
display: flex;
padding:1rem;
}
#what items .item {
flex: 1;
text-align: center;
padding: 1rem;
}
#what .items .item i {
background: #93cb52;
padding: 1rem;
border-radius: 50%;
margin-bottom: 1rem;
}
/* Section: Who We Are*/
#who {
display: flex;
}
#who div {
flex: 1;
}
#who .who-img {
background: url('../img/people.jpg') no-repeat center center/cover;
}
/* Section Clients */
#clients .items {
display: flex;
}
#clients .items img {
display: block;
margin: auto;
width: 60%;
}
/* Section: Contact */
#contact {
display: flex;
}
#contact .map, #contact .contact-form {
flex: 1;
}
#contact .contact-form .form-group {
margin: 0.75rem;
}
#contact .contact-form label {
display: block;
}
#contact .contact-form input,
#contact .contact-form textarea {
width: 100%;
padding: 0.5;
}
main.js
var map;
function initMap() {
const loc = { lat: 42.361145, lng: -71.057083 };
const map = new google.maps.Map(document.querySelector('.map'), {
zoom: 14,
center: loc
});
const marker = new google.maps. Marker({position: loc, map: map});
}
// Sticky menu background
window.addEventListener ('scroll', function() {
if (window.scrollY > 150) {
document.querySelector('#navbar')style.opacity = 0.2;
} else {
document.querySelector('#navbar').style.opacity = 1;
}
});
// Smooth Scrolling
$('#navbar a, .btn').on('click', function(event) {
if (this.hash !== '') {
event.preventDefault();
const hash = this.hash;
$('html, body').animate(
{
scrollTop: $(hash).offset().top - 100
},
800
);
}
});
There is a dot missing in this line:
document.querySelector('#navbar')style.opacity = 0.2;
(before "style")
I have a div as a fixed sized container. In there is a table, built using div's.
See here at JSFiddle
#font-face {
font-family: "Roboto";
src: url('Roboto-Medium.woff2') format('woff2'), url('Roboto-Medium.woff') format('woff');
font-weight: 500
}
#absoluteTable {
font-family: Roboto;
font-size: 32px;
font-weight: 400;
font-style: normal;
text-decoration: none;
text-transform: none;
color: #000;
background-color: f0f0f0;
line-height: 38px;
letter-spacing: normal;
text-shadow: none;
position: absolute;
top: 100px;
left: 274px;
width: 685px;
height: 500px;
border: 1px solid #ffAD21;
}
#absoluteTable2 {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 500px;
border: 5px solid #ff0000;
}
#absoluteTable p {}
#para1 {
background-color: #b8c8d2;
border: 1px solid #00ff00;
text-align: center;
color: red;
height: =20px;
font-size: 14px;
}
div.priceTable {
table-layout: fixed;
width: 685px;
text-align: left;
border-collapse: collapse;
}
.divTable.priceTable .divTableCellDescr,
.divTable.priceTable .divTableCellName,
.divTable.priceTable .divTableCellPrice {
/*border: 1px solid #AAAAAA;*/
/*display: table-cell;*/
}
.divTable.priceTable .divTableBody .divTableCellName {
font-size: 16px;
padding: 8px 8px 2px 2px;
color: #f00;
text-overflow: ellipsis;
}
.divTable.priceTable .divTableBody .divTableCellDescr {
font-size: 12px;
padding: 1px 9px 2px 35px;
color: #333;
}
.divTable.priceTable .divTableBody .divTableCellPrice {
font-size: 18px;
padding: 1px 2px 1px 15px;
vertical-align: bottom;
color: #333;
width: 55px;
display: table-cell;
}
.divTable {
display: table;
}
.divTableRow {
display: table-row;
/* overflow: auto; */
}
.divTableBody {
display: table-row-group;
}
<div class="divTable priceTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCellName">cell1_1</div>
<div class="divTableCellDescr">cell2_1</div>
<div class="divTableCellPrice">cell3_1</div>
</div>
<div class="divTableRow">
<div class="divTableCellName">cell1_2</div>
<div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. </div>
<div class="divTableCellPrice">€234</div>
</div>
<div class="divTableRow">
<div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim,</div>
<div class="divTableCellDescr"><strong>cell2_3</strong></div>
<div class="divTableCellPrice">€0.13</div>
</div>
<div class="divTableRow">
<div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim vitae.</div>
<div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur ad</div>
<div class="divTableCellPrice">cell3_4</div>
</div>
</div>
</div>
I do have the following issue's:
Solved
1. If the text from CelX_1 ( column 1 ) is too long, I don't see the ellipses, the remainder of the text moves over to a new line. It should be shortened with the "..." and just one line height Solved
Solved
2. The second table field/column may be as 3-4 lines high as it's needed, but the lines should be closer together. Too much padding? If I make them zero it still looks terrible. How can I fix that, so the lines are closer to each other? Solved
In my CSS code, I have the font-face there but I can't get it to work with the different table cell's.
Also, the resulting layout is what I need, but is this the right way? The code will be compacted and with
$( init );
function init() {
$('#absoluteTable p').replaceWith( "My Code ....
BTW, is there a way where I don't need to remove the spaces from the replacement code when using replace with?
Here is a sample to show what goes wrong
I got two main divs in my page: the first one contains an accordion menu and the second one, the main text of the page. When I resize the browser window, both divs overlap each other, like in this picture:
How can I make that stop? I searched a lot to find an answer, but nothing worked. I tried to add overflow: auto;, float: left, I played with the margin... Without success.
Here is my code:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
body#help {
font-size: 3vmin;
/*Background*/
background: #444444; /* For browsers that [are shit enough to] do not support gradients */
background: -webkit-linear-gradient(#1a8cff, #4da6ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1a8cff, #4da6ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1a8cff, #4da6ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1a8cff, #4da6ff); /* Standard syntax */
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.panel {
background-color: #666666;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width:250px;
}
#helpMenuDiv {
display: inline-block;
position: fixed;
top:0px;
bottom: auto;
right: auto;
left: 0px;
width: 270px;
height: 840px;
order: solid 2px black;
overflow: auto;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 250px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active:after {
content: "\2212";
}
#helpPageDiv {
width: 800px;
max-width: 800px;
border: solid 2px black;
margin: auto;
}
<!DOCTYPE html>
<html id="helpHtml">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body id="help">
<!---Introduction--->
<div id="helpPageDiv">
<p>Content of the first div (main text)</p>
</div>
<!---Accordion--->
<div id="helpMenuDiv">
<button class="accordion">Section 1</button>
<div class="panel">
<p class="panelText">Content of the accordion</p>
</div>
<!---More accordions--->
<script src="scripts/accordion.js"></script>
</body>
</html>
Thanks in advance for your answers!
I have two suggestions.
You can give your helpPageDiv a left margin equal to the width of helpMenuDiv using Jquery that changed with window resize.
Try giving width to both helpMenuDiv and helpPageDiv and make them float left. Also you can put your menu above the content div in small screens.
Here's I created a simple example that might be useful to you.
>>> JSFiddle.
Try resizing the result window too.
$('.menu .menu-item h3').click(function() {
$(this).siblings('p').slideToggle();
});
.holder:after{
content: '';
display: block;
clear: both;
}
.menu {
width: 20%;
float: left;
background: #64c1be;
}
.content {
width: 80%;
height: 200px;
float: left;
background: #73c379;
}
.content .inner{
color: #4d4d4d;
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.menu .menu-item {
background: #ddd;
margin: 10px 0;
}
.menu .menu-item h3 {
background: #ccc;
margin: 0;
cursor: pointer;
}
.menu .menu-item p {
margin: 0;
padding: 5px 3px;
display: none;
}
#media (max-width: 550px){
.menu, .content{
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="menu">
Accordian menu
<div class="menu-item">
<h3>
+ Section 1
</h3>
<p>
Menu content
</p>
</div>
<div class="menu-item">
<h3>
+ Section 2
</h3>
<p>
Text Text
</p>
</div>
<div class="menu-item">
<h3>
+ Section 3
</h3>
<p>
faucibus orci
</p>
</div>
<div class="menu-item">
<h3>
+ Section 4
</h3>
<p>
ullamcorper
</p>
</div>
</div>
<div class="content">
Content goes here
<div class="inner">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
</div>
</div>
</div>