Hello guys im implementing a chat, the issue is that every time that i reload the page the scroll is always on the top of the chat and i want on the bottom, i tried with jquery but doesnt work.
This is my html:
<body>
<div class="chatbox">
<div class="chatlogs">
<div class="chat friend">
<div class="user-photo"></div>
<p class="chat-message">What's up, Brother ..!!</p>
</div>
<div class="chat friend">
<div class="user-photo"></div>
<p class="chat-message">What's up, Brother ..!!</p>
</div>
<div class="chat self">
<div class="user-photo"></div>
<p class="chat-message">What's up ..!!</p>
</div>
<div class="chat self">
<div class="user-photo"></div>
<p class="chat-message">A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.</p>
</div>
<div class="chat friend">
<div class="user-photo"></div>
<p class="chat-message">No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.
Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.
</p>
</div>
</div>
<div class="chat-form">
<textarea></textarea>
<button>Send</button>
</div>
</div>
And this is my css:
* {
margin: 0;
padding: 0;
font-family: tahoma, sans-serif;
box-sizing: border-box;
}
body {
background: #1ddced;
}
.chatbox {
width: 500px;
min-width: 390px;
height: 600px;
background: #fff;
padding: 25px;
margin: 20px auto;
box-shadow: 0 3px #ccc;
}
.chatlogs {
padding: 10px;
width: 100%;
height: 450px;
overflow-x: hidden;
overflow-y: scroll;
}
.chatlogs::-webkit-scrollbar {
width: 10px;
}
.chatlogs::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0,0,0,.1);
}
.chat {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-bottom: 10px;
}
.chat .user-photo {
width: 60px;
height: 60px;
background: #ccc;
border-radius: 50%;
}
.chat .chat-message {
width: 80%;
padding: 15px;
margin: 5px 10px 0;
border-radius: 10px;
color: #fff;
font-size: 20px;
}
.friend .chat-message {
background: #1adda4;
}
.self .chat-message {
background: #1ddced;
order: -1;
}
.chat-form {
margin-top: 20px;
display: flex;
align-items: flex-start;
}
.chat-form textarea {
background: #fbfbfb;
width: 75%;
height: 50px;
border: 2px solid #eee;
border-radius: 3px;
resize: none;
padding: 10px;
font-size: 18px;
color: #333;
}
.chat-form textarea:focus {
background: #fff;
}
.chat-form button {
background: #1ddced;
padding: 5px 15px;
font-size: 30px;
color: #fff;
border: none;
margin: 0 10px;
border-radius: 3px;
box-shadow: 0 3px 0 #0eb2c1;
cursor: pointer;
-webkit-transaction: background .2s ease;
-moz-transaction: backgroud .2s ease;
-o-transaction: backgroud .2s ease;
}
.chat-form button:hover {
background: #13c8d9;
}
One more question, can i block horizontal scroll not only hide.
I hope you guys can help, thanks.
You're primarily looking for the javascript native scrollIntoView function. Though in lieu of anything else you'll still need jQuery for finding your element to scroll to.
$(document).ready(function () {
$('.chat.friend').last()[0].scrollIntoView();
})
Cool options such as smooth scrolling and compatibility at https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
As for blocking horizontal slide, I'm not quite sure what you mean. You've already got it wrapping words appropriately. If you're looking to prevent very long words or URLs from going off the edge, then look into https://www.w3schools.com/cssref/css3_pr_word-break.asp, e.g.,
word-break: break-all;
If you're meaning images, then you'll need to see the max-width property for images
img {
max-width: 100%;
}
Try putting MaintainScrollPositionOnPostback="true" in your page declaration. Setting this to true will keep the user at the same place on the screen after a postback occurs.
You can read more about it here.
Related
It's the first time I make a responsive website, but my media query didn't work as I imagined, the responsiveness didn't work and it got a weird zoom on cell screens. I left it responsive and everything seems to be fine. However, when I open it on cell phones, it comes with an initial zoom that it shouldn't have, but doing the pinching movement to zoom out is as it should, which is responsive on the device. The responsiveness is apparently not bad, but it has this zoom, which I don't know where it comes from. Can anyone tell me what I did wrong, and what could be improved?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
:root{
/* font-size: 62.5%; */
--color-primary: #1f2241;
--color-secondary: #38b6ff;
--color-font: #ffffffe6;
--color-shadow: #AB433F;
}
body{
height: 100%;
/* background-color: var(--color-primary); */
background-color: rgb(217, 85, 80);
font-size: 1.6rem;
font-family: 'open sans', sans-serif;
}
span,
i,
h1{
color: var(--color-font);
}
h1{
font-family: 'Alegreya Sans', Open Sans;
margin-top: 20px;
font-size: 3.2rem;
}
i {
font-size: 3.2rem;
}
section{
display: flex;
align-items: center;
height: 100%;
}
.container{
width: min(42.5rem);
margin-inline: auto;
padding-inline: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container h1{
margin-bottom: 50px;
}
.painel {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
width: 550px;
/* margin-block: 5rem; */
padding: 1rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 7px 15px 6px var(--color-shadow);
box-shadow: 0px 7px 15px 6px var(--color-shadow);
}
.painel span{
opacity: .8;
transition: 1s ease-in;
font-weight: bolder;
}
.painel span.active{
opacity: 1;
color: var(--color-secondary);
}
.timer {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 550px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0px 7px 15px 6px var(--color-shadow);
box-shadow: 0px 7px 15px 6px var(--color-shadow);
font-weight: bolder;
font-size: 60px;
}
.time{
position: relative;
display: flex;
flex-direction: row;
font-size: 60px;
}
.time span{
font-size: 5.6rem;
}
.time span:nth-of-type(2) {
position: relative;
top: -.5rem;
margin-inline: 1rem;
}
.controls {
margin-top: 3rem;
display: flex;
justify-content: space-between;
}
.controls button{
border: none;
background-color: transparent;
cursor: pointer;
}
.controls #stop{
display: none;
margin-right: 15px;
text-decoration: none;
}
.controls #reset{
display: none;
margin-left: 15px;
text-decoration: none;
}
.controls i{
font-size: 25px;
background-color: #48bf91;
background-size: 40px 40px;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
display: flex;
text-align: center;
}
.controls i:hover{
background-color: #369772;
}
.controls i:active{
background-color: #216e51;
color: rgb(112, 112, 112);
}
.social i{
font-size: 30px;
border: none;
background-color: transparent;
cursor: pointer;
margin: 10px;
}
.social{
margin-top: 8rem;
display: flex;
justify-content: space-between;
}
.content{
background-color: white;
display: flex;
}
.content h1, h2{
color: black;
text-align: center;
/* margin-top: 100px;
margin-bottom: 0; */
}
.content p{
text-align: justify;
margin: 0px 80px;
padding: 40px;
font-size: 20px;
}
.content article{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.content #text1::after{
content: '';
display: flex;
width: 500px;
height: 0.3rem;
background-color: #38b6ff;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 50px;
position: relative;
justify-content: center;
align-items: center;
border-radius: 10px;
}
footer{
/* background-color: #058effd8; */
background-color: #1f2241;
color: white;
text-align: center;
font-size: 20px;
}
/*RESPONSIVIDADE*/
#media (max-width: 614px){
section{
width: 590px;
}
.content{
width: 606px;
}
.content #text1::after{
width: 300px;
}
.social{
margin-top: 12.8rem;
}
footer{
width: 606px;
}
}
#media (max-width: 550px){
.social{
margin-top: 17.5rem;
}
}
#media (max-width: 500px){
.social{
margin-top: 23.4rem;
}
}
#media (max-width: 450px){
.social{
margin-top: 30.3rem;
}
}
#media (max-width: 400px){
.container{
width: min(42.5rem);
margin-inline: auto;
padding-inline: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container h1{
margin-bottom: 140px;
margin-top: 190px;
}
.painel {
width: 550px;
padding: 1rem;
}
.timer {
height: 400px;
width: 550px;
font-size: 60px;
}
.time{
position: relative;
display: flex;
flex-direction: row;
font-size: 200px;
}
.time span{
font-size: 8rem;
}
.time span:nth-of-type(2) {
position: relative;
top: -.5rem;
margin-inline: 1rem;
}
.social{
margin-top: 39.7rem;
}
.controls i{
font-size: 45px;
background-size: 100px 100px;
}
}
#media (max-width: 337px){
.social{
margin-top: 12.5rem;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<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">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght#400;700&family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b41e2a9200.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="icons8-whole-apple-16.png" type="image/x-icon">
<title id="titulo">Pomodoro Timer</title>
</head>
<body>
<section>
<div class="container">
<h1>Pomodoro Timer</h1>
<div class="painel">
<span id="work">Work</span>
<span id="break">Break</span>
</div>
<div class="timer">
<div class="box">
<div class="time">
<span id="minutes"></span>
<span>:</span>
<span id="seconds"></span>
</div>
</div>
</div>
<div class="controls">
<button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>
<a id="stop" href="#" onclick="stop()"><i class="fa-solid fa-stop"></i></a>
<a id="reset" href="#" onclick="reset()"><i class="fa-solid fa-arrow-rotate-left"></i></a>
</div>
<div class="social">
<i class="fab fa-instagram"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
</div>
</section>
<section class="content">
<article>
<div id="text1">
<h1>O que é pomodoro?</h1>
<p>A técnica de pomodoro é uma forma de gerenciamento de tempo, de forma a utilizar melhor o seu tempo e se concentrar melhor no que está fazendo de forma que não se sobrecarregue mentalmente. O sistema incentiva a pessoa a focar de maneira intensa e integral em apenas uma tarefa ao longo de exatos 25 minutos. A técnica foi desenvolvida por Francesco Cirillo no final dos anos 1980. A técnica recebeu esse nome pois Francesco utilizava um cronômetro em forma de tomate, que é Pomodoro em italiano. </p>
</div>
<div>
<h2>Como funciona?</h2>
<p>O sistema pomodoro consiste em 25 minutos de concentração em uma tarefa, seguida de 5 minutos de descanso. Os ciclos de 25 minutos são chamados de Pomodoros, e para organizar melhor a realização da sua tarefa é bom calcular quantos pomodoros serão necessários para a tarefa. Também é aconselhável que a cada 4 ciclos, fazer uma pausa mais longa de 15 a 30 minutos. Esses intervalos entres os pomodoros são fundamentais para “oxigenar o seu cérebro” e aumentar a agilidade mental. O site é tem um design minimalista totalmente voltado para a menor distração possivel, aproveite as funcionalidades e bom trabalho/estudo. 😉 </p>
</div>
</article>
</section>
<footer>
<p>Desenvolvido por ©CarlosCurcino</p>
</footer>
<script src="app.js"></script>
</body>
</html>
How can I make the timeline from this website https://www.dealema.pt/biografia/ ONLY using HTML and CSS (NO librarys)? And NO javascript or anything, just pure HTML and CSS.
I did the first image + text responsive, but I'm having hard time adding the rest... The "timeline-02" invades "timeline-01".
I want to make this as simple as possible and still look as identical as the timeline from the website. Doens't need to be perfect, just good enough.
My HTML code:
.timeline {
width: 100%;
margin-left: 115px;
margin-bottom: 115px;
}
.timeline:before {
content: ' ';
width: 1px;
height: 100%;
background: #181818;
position: absolute;
left: 50%;
}
.timeline-01 img {
float: left;
position: relative;
margin-left: 15%;
}
.timeline-01-text {
float: right;
margin-right: 5%;
font-family: Helvetica, Arial, sans-serif;
}
.timeline-01-text p {
color: #7e7e7e;
font-size: 15px;
line-height: 1.5;
}
.timeline-01 span {
position: absolute;
left: 50%;
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -28px;
text-align: center;
font-size: 15px;
font-weight: 600;
color: #FFF;
background-color: #181818;
border-radius: 60px;
}
#media only screen and (max-width: 750px) {
.timeline:before {
left: 10%;
}
.timeline-01 span {
left: 10%;
}
.timeline-01 img {
display: none;
}
}
#media only screen and (min-width: 750px) {
.timeline-01-text {
float: right;
margin-left: 50%;
margin-right: 115px;
position: absolute;
font-family: Helvetica, Arial, sans-serif;
}
}
<section class="timeline">
<div class="timeline-01">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span class="timeline-01-year">2006</span>
<div class="timeline-01-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
<div class="timeline-02">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span>2016</span>
<div class="timeline-02-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
</section>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
currently taking a course about HTML and CSS. As an assignment we've been told to replicate some parts from an online news paper.
The above picture is what I'm trying to reach. I imagine it being three div boxes. A parent one, and two child divs (right and left).
This is what it looks with what I've done:
Obvious as it is, the two child div boxes wont align in height. I can't seem to figure this out, sadly.. So I hope one here can help me!
.overskrift {
text-align: center;
font-size: 50px;
}
.div2 {
display: block;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
display: inline-block;
border: 1px solid black;
width: 30%;
}
.div2-right {
display: inline-block;
border: 1px solid black;
width: 20%;
}
.debat {
color: DodgerBlue;
font-weight: bold;
}
.arkiv {
color: white;
}
.arkiv span {
background-color: DodgerBlue;
}
.div-2-1-img {
height: 75%;
width: 75%;
}
.div-2-2-img {
height: 50%;
width: 50%;
}
<div>
<p>dette er div1 (første artikel)</p>
</div>
<div class="div2">
<div class="div2-left">
<img class="div-2-1-img" src="http://placehold.it/150">
<p class="debat">DEBAT</p>
<h2>Hvor er tilsynet?</h2>
<div style="display: inline-block; text-align: left; margin-left: 25%">
<p>Historien om udledning af spildevand vidner om norsk dobbeltmoral og dansk blåøjethed.</p>
</div>
<p>MIKALA SØRENSEN</p>
</div>
<div class="div2-right">
<p class="arkiv"> <span>FRA ARKIVET</span></p>
<img class="div-2-1-img" src="http://placehold.it/150">
<h2>Som smurt i olie</h2>
<div style="display: inline-block; text-align: left; margin-left: 10%">
<p>Et dansk firma har i årtier importeret hele <br> tankskibe fulde af forurenet spildevand fra <br> den norske olieindustri. De fortynder det <br> med grundvand, renser det og leder det ud <br> i Agersø Sund. Lokale klager over <br> forurening og
døde fisk. De føler, at ingen <br> lytter.</p>
</div>
<p>MAGNUS BODING HANSEN</p>
</div>
</div>
I really hope someone is able to help me out here. I am really stuck.. Thanks in advance! And may you have a great day!
Take a look at flexbox. By setting display: flex on the parent you can then add align-items: flex-start to tell the flex parent to make the child divs align to the start, or top. align-items: flex-start is actually the default, and not needed, but wanted to add for some additional context.
.div2 {
align-items: flex-start;
display: flex; // This is the important line
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
border: 1px solid black;
width: 30%;
}
.div2-right {
border: 1px solid black;
width: 20%;
}
Change the vertical-align property of your two divs from the default of baseline to top.
.overskrift {
text-align: center;
font-size: 50px;
}
.div2 {
display: block;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
display: inline-block;
border: 1px solid black;
width: 30%;
}
.div2-right {
display: inline-block;
border: 1px solid black;
width: 20%;
}
.debat {
color: DodgerBlue;
font-weight: bold;
}
.arkiv {
color: white;
}
.arkiv span {
background-color: DodgerBlue;
}
.div-2-1-img {
height: 75%;
width: 75%;
}
.div-2-2-img {
height: 50%;
width: 50%;
}
.div2-left,
.div2-right {
vertical-align: top;
}
<div>
<p>dette er div1 (første artikel)</p>
</div>
<div class="div2">
<div class="div2-left">
<img class="div-2-1-img" src="http://placehold.it/150">
<p class="debat">DEBAT</p>
<h2>Hvor er tilsynet?</h2>
<div style="display: inline-block; text-align: left; margin-left: 25%">
<p>Historien om udledning af spildevand vidner om norsk dobbeltmoral og dansk blåøjethed.</p>
</div>
<p>MIKALA SØRENSEN</p>
</div>
<div class="div2-right">
<p class="arkiv"> <span>FRA ARKIVET</span></p>
<img class="div-2-1-img" src="http://placehold.it/150">
<h2>Som smurt i olie</h2>
<div style="display: inline-block; text-align: left; margin-left: 10%">
<p>Et dansk firma har i årtier importeret hele <br> tankskibe fulde af forurenet spildevand fra <br> den norske olieindustri. De fortynder det <br> med grundvand, renser det og leder det ud <br> i Agersø Sund. Lokale klager over <br> forurening og
døde fisk. De føler, at ingen <br> lytter.</p>
</div>
<p>MAGNUS BODING HANSEN</p>
</div>
</div>
that's my first site with html and css. I'm doing a personal website and i have problems:
1) right positioning of words in the header
2) footer positioning
the code is:
<head>
<meta cherset='UTF-8'/>
<title>HOME</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='header'>
<ul class='header__menu animate'>
<li class="header__menu__item">HOME</li>
<li class="header__menu__item">HOBBY E PASSIONI</li>
<li class="header__menu__item">CURRICULUM</li>
<li class="header__menu__item">CONTATTI</li>
</ul>
</header>
<br><br><br><br><br>
<h1>Gabriele Minosa</h1>
<br><br><br>
<div class='img'>
<img src="1111.png">
</div>
<figcaption> text...
</figcaption>
<br><br>
<footer class='footer'>
<p>© 2020 Gabriele Minosa. TUTTI I DIRITTI RISERVATI</p>
</footer>
</div>
</body>
</html>
CSS**********
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: auto;
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #000000; /*colore scritte*/
background: #eee; /*COLORE ESTERNO PAGINA WEB*/
}
a:link,
a:visited {
color: #5D6063; /*COLORE SCRITTE INTESTAZIONE*/
text-decoration: none;
}
a:hover {
background: #fff;
padding: 10px;
}
.header {
position: fixed;
width: 100%;
display: flex;
padding: 30px;
background: #d6d6d2;
}
.header__menu__item {
display: inline-block;
}
h1 {
color:#949da6;
font-size:40;
text-align: center;
}
figcaption, footer {
text-align: center;
}
.img {
text-align: center;
}
.footer {
background: #333;
padding: 20px;
color: #fff;
}
if anyone could tell me, apart from those two questions, what other changes I can make and what other mistakes I made I would be grateful..that's my first time...
In order to align the menu to the right inside a flex container, you can change the justification of the flex items by using justify-content: flex-end; - this positions the elements horizontally at the end of the container.
.header {
position: fixed;
width: 100%;
display: flex;
justify-content: flex-end;
padding: 30px;
background: #d6d6d2;
}
In regards to your second question regarding footer positioning, what are you attempting to achieve?
In the below code snippet, which I believe achieves your desired results, there's a couple of changes I've made;
I wrapped your page content (the stuff in between the header and footer) in a <main> tag. This tag is given a min-height value of 80vh - or 80% of the height of the viewport. This will make sure that your footer is towards the bottom of the page. If you have a page with less content you may want to change this to 90 or even 100.
The display property for header__menu <ul> has been set to flex. Justify content is used here but this time setting the value to space-between.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: auto;
font-size: 18px;
font-family: sans-serif;
color: #000000; /*colore scritte*/
background: #eee; /*COLORE ESTERNO PAGINA WEB*/
}
main{
min-height: 90vh;
}
a:link,
a:visited {
color: #5D6063; /*COLORE SCRITTE INTESTAZIONE*/
text-decoration: none;
}
a:hover {
background: #fff;
padding: 10px;
}
.header {
position: fixed;
width: 100%;
display: flex;
padding: 30px;
background: #d6d6d2;
}
.header__menu {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.header__menu__item {
display: inline-block;
}
h1 {
color:#949da6;
font-size:40;
text-align: center;
}
figcaption, footer {
text-align: center;
}
.img {
text-align: center;
}
.footer {
background: #333;
padding: 20px;
color: #fff;
}
<header class='header'>
<ul class='header__menu animate'>
<li class="header__menu__item">HOME</li>
<li class="header__menu__item">HOBBY E PASSIONI</li>
<li class="header__menu__item">CURRICULUM</li>
<li class="header__menu__item">CONTATTI</li>
</ul>
</header>
<main>
<br><br><br><br><br>
<h1>Gabriele Minosa</h1>
<br><br><br>
<div class='img'>
<img src="1111.png">
</div>
<figcaption> Gabriele Minosa (Taranto, 12 Gennaio 1991) è un perito informatico con la passione per l’informatica fin da bambino.<br>
Dopo aver imparato,da autodidatta, a gestire l'hardware ed il software dei pc, allarga la sua curiosità al mondo dell'innovazione <br>
e della programmazione web. Non essendo particolarmente stimolato dal contenuto troppo generalizzato del percorso universitario, <br>
dopo alcune esperienze lavorative e svariati concorsi, è attualmente uno studente di Front End Development di start2impact, una <br>
startup di Roma che propone percorsi innovativi sulla programmazione e sulle nuove tecnologie e rende potenzialmente più immediato <br>
e diretto l'inserimento nel mondo del lavoro.
</figcaption>
</main>
<br><br>
<footer class='footer'>
<p>© 2020 Gabriele Minosa. TUTTI I DIRITTI RISERVATI</p>
</footer>
here is part of the CSS code, i cant seem to figure it out.
#About{
height:500px;
background: url("murano.jpg") no-repeat center;
}
I want to decrease the opacity of the imported background image
Add Opacity with your css
#About{
opacity :0.4;
height:500px;
background: url("murano.jpg") no-repeat center;
}
the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity
there is no css rule to provide opacity to background images.
when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4
<div id="about">
<div class="absolute">
</div>
</div>
#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
background:rgba(0,0,0,0.5);
}
Use background-color: rgba(255, 255, 0, 0.3);
The 0.3 being the the alpha(opacity channel).
OR
Add an extra div to hold the background, and change the opacity there.
opacity: 0.4; filter:alpha(opacity=40);
Example :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
.head {
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td,
th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left {
float: left;
margin-right: 14px;
}
img.right {
float: right;
margin-left: 14px;
}
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {
color: #fff;
text-align: center;
}
#power a {
color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li>Inicio
</li>
<li>Sobre a banda
</li>
<li>Membros
</li>
<li>Bilhetes
</li>
<li>Galeria
</li>
<li>Área Pessoal
</li>
</ul>
<h1></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
<p class="readmore">Ver
</p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
<p>
- Best International Band (Melhor Banda Internacional)
<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center>
<img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
</center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.
here is a link to a good article on this.