RISOLTO Menu orizzontale

Stato
Discussione chiusa ad ulteriori risposte.

toni1705

Nuovo Utente
98
9
Vorrei creare il menu orizzontale nel riquadro giallo solo che il testo non viene formattato orizzontalmente ma verticalmente..
HTML:
<html>
<head>
<title>Corrente è kitammuort</title>
<link rel="stylesheet" href="testo.css">
</head>
<body>
<div id="logo">
<ul id="menu">
<li><a href="#chisono">Chi sono</a></li>
<div style="clear: both"></div>
<li><a href="#amore">Amore</a></li>
</ul>
</div>

<div id="contenitore">
<div id="area1"><p>Box 1</p></div>
<div id="area2"><p>Box 2 </p></div>
<div id="area3"><p>Box 3</p></div>
<div id="area4"><p>Box 4</p></div>


</div>
<div style="clear: both"></div>
<p> Il mio nome è </p>
</body>
</html>
CSS:
#contenitore{
    width:auto;
    height:600px;
    background-color:#F5F5F5;
    
}

#area1{
margin:5px;
padding:120px;
background-color:#e3f4fc;
width:150px;
float:left;


}
#area2 {
    margin:5px;
    padding:120px;
    background-color:#deeff7;
    width:150px;
    float:left;
    
}
 #area3{
     margin:5px;
    padding:120px;
    background-color:#def6f7;
    width:150px;
    float:left;
 }
 
 #area4{
     margin:5px;
    padding:120px;
    background-color:#e3f4fc;
    width:150px;
    float:left;

 }
 #logo{
    
     padding:35px;
     height:auto;
     background-color:yellow;
 }
  #menu li{
display: inline;
float:right;


}
 

Mursey

Super Moderatore
Staff Forum
Utente Èlite
8,185
5,616
Ho rivisto alcune cose e fatto pulizia di codice inutile:
HTML:
<html>
    <head>
        <title>Corrente è kitammuort</title>
        <link rel="stylesheet" href="testo.css">
    </head>
    <body>
        <div id="logo">
            <ul id="menu">
                <li><a href="#chisono">Chi sono</a></li>
                <li><a href="#amore">Amore</a></li>
            </ul>
        </div>
        <div id="contenitore">
            <div id="area1" class="area"><p>Box 1</p></div>
            <div id="area2" class="area"><p>Box 2</p></div>
            <div id="area3" class="area"><p>Box 3</p></div>
            <div id="area4" class="area"><p>Box 4</p></div>
        </div>
        <p> Il mio nome è </p>
    </body>
</html>
CSS:
#contenitore{
    height:600px;
    background-color:#F5F5F5;
}

.area{
    margin:5px;
    padding:120px;
    width:150px;
    float:left;
}

#area1{
    background-color:#e3f4fc;
}

#area2 {
    background-color:#deeff7;
}

#area3{
    background-color:#def6f7;
}

#area4{
    background-color:#e3f4fc;
}

#logo{
    padding:35px;
    background-color:yellow;
}

#menu{
    text-align:right;
}

#menu li{
    display: inline;
}

Suggerimenti:
Abituati ad usare le classi se molti stili sono comuni a più elementi
Indenta il codice
 

toni1705

Nuovo Utente
98
9
Ho rivisto alcune cose e fatto pulizia di codice inutile:
HTML:
<html>
    <head>
        <title>Corrente è kitammuort</title>
        <link rel="stylesheet" href="testo.css">
    </head>
    <body>
        <div id="logo">
            <ul id="menu">
                <li><a href="#chisono">Chi sono</a></li>
                <li><a href="#amore">Amore</a></li>
            </ul>
        </div>
        <div id="contenitore">
            <div id="area1" class="area"><p>Box 1</p></div>
            <div id="area2" class="area"><p>Box 2</p></div>
            <div id="area3" class="area"><p>Box 3</p></div>
            <div id="area4" class="area"><p>Box 4</p></div>
        </div>
        <p> Il mio nome è </p>
    </body>
</html>
CSS:
#contenitore{
    height:600px;
    background-color:#F5F5F5;
}

.area{
    margin:5px;
    padding:120px;
    width:150px;
    float:left;
}

#area1{
    background-color:#e3f4fc;
}

#area2 {
    background-color:#deeff7;
}

#area3{
    background-color:#def6f7;
}

#area4{
    background-color:#e3f4fc;
}

#logo{
    padding:35px;
    background-color:yellow;
}

#menu{
    text-align:right;
}

#menu li{
    display: inline;
}

Suggerimenti:
Abituati ad usare le classi se molti stili sono comuni a più elementi
Indenta il codice
ok quindi scusami, il menu orizzontale viene creato attraverso il text-align?
perchè col float non funziona allora?
 

Mursey

Super Moderatore
Staff Forum
Utente Èlite
8,185
5,616
ok quindi scusami, il menu orizzontale viene creato attraverso il text-align?
perchè col float non funziona allora?
Non c'è una regola fissa, dipende dalla struttura della pagina e da come gli elementi vengono visualizzati con l'opzione display.
Nel tuo caso il float allineava si a destra ma avrebbe messo gi elementi in basso, quindi per avere una semplice resa del testo è sufficiente la proprietà text-align.

Prendi in considerazione anche l'uso di position: relative per posizionare gli elementi in relazione al loro parent, in quel caso la display verrebbe bypassata ma devi specificare top/bottm e left/right.
 
Ultima modifica:

toni1705

Nuovo Utente
98
9
Non c'è una regola fissa, dipende dalla struttura della pagina e da come gli elementi vengono visualizzati con l'opzione display.
Nel tuo caso il float allineava si a destra ma avrebbe messo gi elementi in basso, quindi per avere una semplice resa del testo è sufficiente la proprietà text-align.

Prendi in considerazione anche l'uso di position: relative per posizionare gli elementi in relazione al loro parent, in quel caso la display verrebbe bypassata ma devi specificare top/bottm e left/right.
ah capito grazie mille!
ultima cosa stavo applicando un javascript su una foto. Questa è la foto originale.questo accade dopo il java script. alla foto viene applicata lo zoom e lo javascript non va a sovrascrivere l'immagine(ovviamente utilizzo z-index e opacity;) cosa posso fare?
 

Allegati

  • javascript.png
    javascript.png
    1.3 MB · Visualizzazioni: 181
  • Immagine2.png
    Immagine2.png
    1.9 MB · Visualizzazioni: 154
Ultima modifica da un moderatore:

toni1705

Nuovo Utente
98
9
mettere uno sfondo trasparente sull'immagine;
stavo provando anche con z-index; solo che non viene caricato :(
 

Allegati

  • finale.png
    finale.png
    2.4 MB · Visualizzazioni: 173
Ultima modifica da un moderatore:

Mursey

Super Moderatore
Staff Forum
Utente Èlite
8,185
5,616
Le immagini sotto spoiler o anteprima.

Che javascript hai scritto o stai usando ?
 

Mursey

Super Moderatore
Staff Forum
Utente Èlite
8,185
5,616
Nessuno,sa come farlo?
La domanda è diversa da quella iniziale, inoltre stai usando un codice sviluppato da terzi che nessuno conosce.
Chiudo percheè il problema è stato risolto, per questo nuovo OT apri una nuova discussione però spiegando cosa fa il javascript che hai usato.
Se non sai cosa fa prima studialo e fai una domanda precisa, qui non si copia il lavoro altrui.
 
Stato
Discussione chiusa ad ulteriori risposte.

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!