RISOLTO Menu orizzontale

Stato
Discussione chiusa ad ulteriori risposte.

toni1705

Nuovo Utente
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

Moderatore
Staff Forum
2,409
1,071
Hardware Utente
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
 
  • Mi piace
Reactions: toni1705 e gronag

toni1705

Nuovo Utente
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

Moderatore
Staff Forum
2,409
1,071
Hardware Utente
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
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

Ultima modifica da un moderatore:

Mursey

Moderatore
Staff Forum
2,409
1,071
Hardware Utente
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