Buongiorno a tutti, sono nuovo nel forum e volevo cogliere l'occasione per porvi un saluto!
Sto scrivendo il codice di una pagina e ho i seguenti problemi:
position: sticky; ( div #column) non funzionante, ho provato a ricreare il tutto in modo fittizio in un altra pagina e la position funziona;
il menù a tendina rimane solo se il mouse è sulla parte sinistra dello schermo occupato dal padding dell'elemento 'li', tuttavia compare anche se punto il mouse sulla parte che dovrebbe essere occupata dal 'li' nascosto;
ringrazio in anticipo!
Non trovo il modo per allegare file di testo
CSS
body {
width: 100%;
margin: 0;
background-color: #D5D6D6;
font-family: 'Amiko', sans-serif;
scroll-behavior: smooth;
font-size: 16px;
}
h1, h2 {
font-family: 'Bismillah Script';
font-weight: normal;
font-style: normal;
color: #040d2e;
}
h1 {
font-size: 50px;
}
.container{
width: 930px;
margin: auto;
display: flex;
}
header{
height: 100px;
background-color: #040d2e;
z-index: 1;
}
nav{
width: 930px;
display: flex;
margin: auto;
margin-top: 0;
margin-bottom: 0;
}
nav img {
margin-top: 7px;
float: left;
}
.menu {
display: flex;
position: relative;
margin-right: 0;
margin-left: auto;
}
header .menu-item {
margin-top: 50px;
margin-right: 0;
}
.menu-item a{
color: white;
text-decoration: none;
margin-left: 60px;
font-size: 20px;
font-weight: 700;
display: inline-block;
white-space: nowrap;
margin-right: 0;
padding: inherit;
}
header .menu-item a:hover{
color: #F57F22;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
header .menu-item ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu-item ul li a {
padding-right: inherit;
}
.menu-item ul {
visibility: hidden;
}
header .menu-item:hover li a {
display: block;
position: relative;
z-index: 1;
background: #040d2e;
visibility: visible;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 5px;
padding-left: 2px;
border-radius: 1px;
}
/* home */
/* Immagine Principale */
.main-img{
display: inline-block;
margin-top: 15px;
overflow: hidden;
display: flex;
justify-content: center;
height: 550px;
}
.button {
position: absolute;
top: 550px;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
cursor: pointer;
border-radius: 5px;
}
.button a {
font-weight: 700;
background-color: none;
color: white;
font-size: 16px;
text-decoration: none;
border: solid 2px;
border-radius: 5px;
padding: 4px 16px 3px 16px;
}
.button a:hover {
background-color: #F57F22;
border: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* frase */
#description {
width: 460px;
color: #040d2e;
text-align: center;
display: flex;
justify-content: center;
margin: 30px auto;
font-size: 22px;
border: solid 2px #040d2e;
border-style: dashed;
}
/* sezionesotto immagine */
/* Cartina */
iframe {
height: 250px;
margin: 0 auto;
width: 960px;
display: flex;
}
/* Box a pagine */
.section {
width: 930px;
/* height: 330px; */
margin: auto;
display: flex;
/* flex-direction: row; */
justify-content: space-between;
margin-top: 30px;
}
.box{
height: auto;
width: 290px;
/* background-color: pink; */
text-align: center;
}
.p-img img {
width: 290px;
height: 290px;
border-radius: 290px;
}
.box h1 {
font-size: 50px;
color: #040d2e;
}
/* descrizione */
.paragraph {
width: 580px;
}
.paragraph h1{
/* display: block; */
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
/* vertical-align: middle; */
font-size: 70px;
}
#column {
width: 290px;
flex-direction: column;
margin-left: 30px;
/* display: flex; */
/* border-left: solid 3px #040d2e; */
border-collapse: collapse;
margin-top: 15px;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
z-index: 100;
}
#column img {
border-radius: 290px;
width: 145px;
position: relative;
left: 25%;
}
#column h2 {
font-size: 40px;
text-align:center;
margin: 0;
margin-bottom: 15px;
}
/* footer */
footer {
height: 80px;
width: 100%;
background-color: #F57F22;
display: block;
margin-top: 50px;
/* position: -webkit-sticky; /* Safari */
/* position: sticky; */
/* bottom: 0px; */ */
}
#footer_nav {
width: 930px;
display: flex;
margin: auto;
flex-direction: row;
justify-content: space-between;
}
footer ul img {
height: 38px;
transition: all 0.5s ease;
}
footer ul {
width: 310px;
}
footer ul img:hover {
height: 34px;
margin-right: 2px;
margin-left: 2px;
margin-top: 2px;
}
footer ul{
padding-left: 0px;
margin-left: 0;
margin-top: 0;
}
footer ul {
position:relative;
float: left;
display: flex;
margin-top: 0;
max-width: none;
}
.icon {
display: inline-block;
margin-top: 24px;
margin-right: 32px;
height: 32px;
}
/* PDF */
#pdf img{
height: 45px;
margin-top: 14px;
padding: 0;
display: flex;
transition: all 0.5s ease;
}
#pdf {
width: 310px;
justify-content: center;
/* position: absolute; */
/* left:47.5%; */
text-decoration: none;
display: flex;
}
#pdf p {
margin-top: 0;
color: white;
font-size: 12px;
text-align: center;
text-decoration: none;
font-weight: bold;
margin-bottom: 0;
}
#pdf a {
text-decoration: none;
}
#pdf img:hover {
height: 41px;
text-decoration: none;
margin-left: 2px;
margin-top: 17px;
}
/* logo unesco */
#unesco {
width: 310px;
}
#unesco img{
display: flex;
position: relative;
margin-right: 0;
margin-left: auto;
}
#unesco img {
height: 70px;
/* margin: auto; */
margin-top: 5px;
transition: all 0.5s ease;
}
#unesco img:hover {
height: 66px;
border-color: white;
margin-right: 3px;
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Marrakech e la sua Medina</title>
<meta name="keywords" content="marrakech, medina, morocco, marocco, arabian, berbero, arabo, araby,muslim,desert, sahara">
<meta name="description" content="La Medina di Marrakech, patrimonio dell'Unesco.">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="" rel="stylesheet">
</head>
<body>
<div class="#header">
<header>
<nav>
<a href="#"><img src="white-logo.png"></a>
<div class="menu">
<div class="menu-item">
<a href="index.html">Home</a>
</div>
<div class="menu-item">
<a href="index.html">Il Patrimonio</a>
<ul> <!-- Lista annidata: voci del sotto-menu -->
<li><a href="#">Descrizione</a></li>
<li><a href="#" style="padding-right:40px;">Il Paese</a></li>
<li><a href="#">La Scheda</a></li>
</ul>
</div>
<div class="menu-item">
<a href="index.html">Gallery</a>
</div>
<div class="menu-item">
<a href="#">Altro</a>
</div>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="paragraph">
<h1>Descrizione</h1>
<p>Si ritiene che Marrakesh sia stata fondata all'inizio della dinastia almoravide, fra il 1062 e il 1070, da Yusuf ibn Tashfin, un importante capo militare che - dopo aver conquistato il Marocco - occupò la Spagna islamica deponendo gli emiri locali, dopo aver sconfitto i cristiani nella battaglia di al-Zallaqa. Agli Almoravidi seguì la dinastia almohade e, nel 1184, salì al trono Ya?qub al-Man?ur, il terzo discendente della dinastia, che arricchì la città di opere importanti, facendo erigere la nuova Qasba e l'imponente moschea della Koutoubia. La sua corte fu frequentata da poeti e filosofi fra i quali Ibn Rushd (più noto come Averroè).I regni almoravide e almohade durarono circa 2 secoli e attorno al 1220 la città fu saccheggiata, distrutta e quindi ricostruita, finché nel 1269 non fu conquistata dal sultano merinide Abu Yusuf Ya'qub ibn 'Abd al-Haqq, che sconfisse l'ultimo califfo almohade Abu l-'Ala al-Wathiq bi-llah Idris. I Merinidi spostarono la capitale a Fès, Marrakech incominciò a soffrire di un relativo declino che durò fino alla metà del XVI secolo, quando la città passò alla dinastia Sa'dide i quali ne fecero la loro capitale, ridandole impulso. Risale a questo periodo la costruzione del palazzo El Badi per opera del sultano Ahmad al-Mansur, come pure i mausolei detti tombe Sa'diane. A questo periodo seguì la dinastia alawide, il sultano Mulay Isma?il riuscì a prevalere sui Sadiani e a radere al suolo la città, con l'eccezione delle tombe Sadiane, quindi scelse Meknès come capitale. Da quel periodo ai giorni nostri non vi furono grossi avvenimenti nella storia della città e Marrakesh rimase una città imperiale, importante come base meridionale per controllare le tribù berbere. Tra il XVII e il XIX secolo la città perse molta della sua importanza commerciale che riacquistò alla fine dell'XIX secolo e che durò fin oltre l'arrivo dei Francesi. A partire dall'indipendenza da questi, Marrakesh si è ingrandita notevolmente anche a causa della consistente migrazione di Marocchini provenienti dall'Atlante. </p>
</div>
<div id="column">
<h2>Home</h2>
<img src="img/lamp_x290.jpg" alt="la lampa">
<h2>Gallery</h2>
<img src="img/spices_x290.jpg" alt="Spezie">
<h2>Altro</h2>
<img src="img/door_x290.jpg" alt="Porta">
</div>
</div>
<footer>
<div id="footer_nav">
<ul>
<div class="icon">
<a href="#"> <img src="icon/fb_icon.png" alt="facebook"></a>
</div>
<div class="icon">
<a href="#"> <img src="icon/ig_icon.png" alt="instagram"></a>
</div>
<div class="icon">
<a href="#"> <img src="icon/tw_icon.png" alt="twitter"></a>
</div>
<div class="icon">
<a href="#"> <img src="icon/yt_icon.png" alt="youtube"></a>
</div>
</ul>
<div id="pdf">
<a href="#"> <img src="icon/pdf_icon.png" alt="Sceda tecnica"> <p>Info</p> </a>
</div>
<div id="unesco">
<a href="#"><img src="img/unesco_white.png" alt="unesco"></a>
</div>
</div>
</footer>
</body>
</html>