Dissolvenza, centratura, logo in un menù

**mattex94** · 01-05-2013, 15:39

Salve ragazzi, vi sto scrivendo perchè ho i seguenti problemi:

SITO: http://www.provasito20.altervista.org
Menù che sto cercando di ricreare: http://livedemo00.template-help.com/...2/index-4.html

1.Prima di tutto appena entro nel sito da chrome, appare un'animazione del menù che potete notare anche voi (http://www.provasito20.altervista.org). Non so come perchè si comporta così.

2.Un altro problema è quello dell'inserimento di un immagine all'interno del menu, come vedete nel menù c'è affiancata l'immagine logo, vorrei che questa fosse all'interno e non come ho fatto io che l'ho inserita esternamente e quindi non viene centrata insieme al menù. Ovviamente vorrei che lo sfondo dell'immagine sia dato dalle impostazioni del menù in modo che poi io inserisco il logo con lo sfondo trasparente. (non so quanto possiate aver capito

).

3.Inoltre non riesco a centrare il tutto, problema che non riesco a uscirne (ho provato anche con una tabella ma sembra che non funzioni niente)

4.Per finire non riesco a trovare da nessuna parte un modo per far si che nel menù (quando ci passo il puntatore) non ci sia nessun effetto di dissolvenza ma solamente un hover di colore e quando invece lo sposto il colore si dissolve.

Chi potrai mai aiutarmi in quest'impresa? grazie dell'attenzione

**Nobody33** · 01-05-2013, 16:09

http://www.provasito20.altervista.org

Link che non mi funziona (empty response con tutti i browser)

Non vedendo il codice, posso fare solo ipotesi e darti qualche consiglio vago:

Per il punto 2: è bene mantenere separato il logo dal meno. Due cose che non c'entrano l'uno con l'altro. Magari metti tutt'è due nello stesso contenitore, maa ognuno dovrebbe stare per gli affari suoi, in un contenitore separato.

Punto 3: le tabelle sono molto rognose da gestire, meglio lasciar stare.

Per centrare un contenitore, usa : margin:0 auto;
Se vuoi posizionare il tutto, ci sono margin, position, ecc..

punto 4: non so, non ho visto la tua pagina

**mattex94** · 01-05-2013, 16:13

grazie per l'accorgimento,con capisco perchè non te lo faccia aprire, cmq il codice è questo

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>


<body bgcolor="#CCCCCC"> 
<font face="Verdana, Geneva, sans-serif">
<section>
<div class="logo">[img]img/logo.jpg[/img]</div>
<div class="spazio"></div> 
<div class="bottone">HOME</div>
 <div class="bottone">CHI SIAMO</div> 
<div class="bottone">COLLEZIONI</div>
<div class="bottone">CONTATTI</div>
</section>
</font>
</body>
</html>

CSS

codice:

@charset "utf-8";
/* CSS Document */
.bottone {
background-color: #ff9f00;;
-webkit-transition-property: background-color #FFF; /*Safari e Chrome */
  -webkit-transition-duration: 1s;

}

.bottone {
background: #FFF;

}


body{ 	
margin: auto; 
} 

section{ 	
margin: auto; 	
width: 80%; 

} 
.bottone { 	
float: left; /*Mostra in linea*/ 	
list-style-type: none; 	
width: 120px; 	
padding-top: 50px; 	
padding-bottom: 50px; 	
background-color: #FBFBFB; 

 	

	text-align: center; 
	
}  
.bottone:hover{ 	
background:#C0C0C0; 
} 
 a { 	
text-decoration: none; 	
color: black; 
} 

.spazio {
float: left;
width: 100px; 	
padding-top: 50px; 	
padding-bottom: 50px;
background-color: #FBFBFB; 
	text-align: center; 
}

.logo {
float: left; /*Mostra in linea*/ 	
list-style-type: none; 	
float: inherit; 	
background-color: #FBFBFB; 
	text-align: center; 
}

**Nobody33** · 01-05-2013, 16:45

Per l'effetto hover (con ff e chrome):

codice:

<html><head>
<style>
.box{
    height:60px;
    width:60px;
    background: white;
    -webkit-transition: background 1s;
   -moz-transition: background 1s;
}

.box:hover{
    background: red;
    -webkit-transition: background 1s;
  -moz-transition:background 1s;
}
</style>
</head>
<body>
<div class="box">HOVER QUI</div>
</body>
</html>

Del resto, dovresti incominciare ad essere ordinato quando scrivi

Hai 3 volte la classe .bottone con 3 colori diversi. Scegli una e vai per quella.

Manca un contenitore che contiene sia il contenitore del logo che quello del menu.

Il contenitore del logo lo posizioni con float: left; e quello del menu con float: right; o qualcosa del genere.

Il contenitore che contiene <div> del logo+ menu lo metti a sua volta in un <div> che contiene tutta la pagina. Quest'ultimo lo centri con margin: 0 px auto;

In pratica, devi farti prima il layout.

**mattex94** · 01-05-2013, 17:08

Grazie ancora, facendo come hai detto tu (o come ho capito io), il menù mi esce il questo modo:

Inoltre la dissolvenza rimane sia quando ci passo il mouse e quando lo tolgo, non c'è un modo per far si che esca come qui: http://livedemo00.template-help.com/.../index-1.html# - in questo menu se tu ci passi il mouse non c'è nessuna dissolvenza, quando lo sposti si dissolve, chiedo troppo?)

CODICI MODIFICATI:
HTML:

codice:

 
<body bgcolor="#CCCCCC"> 
<font face="Verdana, Geneva, sans-serif">
<div id="box">
		<div class="logo">[img]img/logo.jpg[/img]</div>
		<div class="spazio"></div> 
		<div class="bottone">HOME</div>
 		<div class="bottone">CHI SIAMO</div> 
		<div class="bottone">COLLEZIONI</div>
		<div class="bottone">CONTATTI</div>
</div>
</font>
</body>

CSS:

codice:

@charset "utf-8";
/* CSS Document */

body{ 	
margin: auto; 
} 

.bottone { 	
float: right; /*Mostra in linea*/ 	
list-style-type: none; 	
width: 120px; 	
padding-top: 50px; 	
padding-bottom: 50px; 	
background-color: #FBFBFB; 
text-align: center;
 -webkit-transition: background 1s;
   -moz-transition: background 1s; 
}

.bottone:hover{ 	
background:#C0C0C0; 
-webkit-transition: background 1s;
  -moz-transition:background 1s;
} 

.logo {
float: left; /*Mostra in linea*/ 		 	
background-color: #FBFBFB;  
}

.spazio {
float: left;
width: 100px; 	
padding-top: 50px; 	
padding-bottom: 50px;
background-color: #FBFBFB; 
	text-align: center; 
}

.box {
	width: 70%;
	margin:auto;
}

	
a { 	
text-decoration: none; 	
color: black; 
}

**Nobody33** · 01-05-2013, 19:11

Nel .css il BOX è una class ("."), mentre nel .html è un id ("#").

Scusa la domanda, però: le basi li sai del html e del .css?

codice:

.box { width: 70%; margin:auto; }

Perché non fai UN contenuto principale per TUTTO il contenuto:

codice:

<style>
body{background:f00; font-family: arial, helvetica, sans-serif;} //nel html non mettere codice .css !
.wrapper{  width: 960px; margin: 0px auto;} //MANCA
#header{width:960px; height:300px;} //MANCA
#box{float:left; width: quello che vuoi; height: quello che vuoi} //MANCA
#menu{stile per menu}

ecc...
</style>

Per organizzare il contenuto di una pagina html ci sono i contenitori, ai quali devi dare lo stile quello che vuoi.
Dal tuo codice manca tutto questo.
Ma, non posso scriverti tutto il layout della pagina.

Suggerisco di farti prima sulla carta tutta la pagina (uno schizzo del layout che vuoi ottenere) e poi lo butti giù.
Cosi hai un filo.

EDIT:

Per capire con precisione com'è fatta la pagina alla quale punti con il link, vai sopra con il mouse con i tasto destro e poi---> ispeziona elemento (con chrome)

Mentre con firefox ti puoi installare FIREBUG (cerca su google) e segui lo stesso procediamento.

**mattex94** · 01-05-2013, 20:39

Grazie per il consiglio, sto rifacendo tutto da capo seguendo delle video guide! mi serve proprio studiarlo, perchè alla fine se me lo avreste fatto voi non ci avrei capito niente e poi al momento della presentazione come avrei fatto!??! cmq se avrò bisogno di aiuto vi scriverò.
un ultima cosa vorrei sapere, riguardo alla dissolvenza:
Perchè quando entro nel sito il menù si anima posizionandosi dove si deve posizionare?
Poi per la dissolvenza solo in uscita non c'è risoluzione?

Grazie a tutti

**Nobody33** · 01-05-2013, 21:14

Risposta alla tua domanda:

Il link da te indicato contiene un menu fatto con javascript.

perchè alla fine se me lo avreste fatto voi non ci avrei capito niente e poi al momento della presentazione come avrei fatto!??!

Non so di ché presentazione tu stia parlando, però --> saggia decisione di studiare le basi.

Magari parti da cose semplici, non deve essere chissà quanto codice.
Anche con un layout semplice puoi fare grandi cose.

Link per trovare layout (non template!) +/- pronti:

LAYOUT

**mattex94** · 01-05-2013, 21:19

Grazie, cmq dovrò consegnarlo verso fine giugno quindi voglio fare una cosa fatta per bene. il layout in mente c'è ed praticamente questo (non totalmente):
http://livedemo00.template-help.com/...2/index-2.html

Il menù lo voglio fare identico, la parte del contenuto la cambierò un po!

**Nobody33** · 01-05-2013, 21:28

Questo menu è abbastanza obsoleto (2008 credo)

In ogni caso trovi la demo QUI ed è scaricabile da QUI

Mi permetto di darti un consiglio personale (se disturba fa sapere e non li darò più):

Se devi fare un blog completo entro giugno opterei per una cosa + semplice.

Discussione: Dissolvenza, centratura, logo in un menù

Strumenti discussione

Ricerca discussione

Visualizza

Dissolvenza, centratura, logo in un menù

Permessi di invio