Autore Topic: consigli su nuovo template (Letto 36856 volte)

giovi · « **Risposta #40 il:** 04 Set 2012, 18:56:43 »

Ora puoi iniziare ad impostare i vari sfondi, ad esempio aggiungi lo sfondo della pagina con i css:

body{background:#ccc;}poi aggiungi il float ai div centrali:

#content, #right-column{float:left;}e da li continui creando l'intero template html.

Se mi dici quello che intendi fare passo passo posso dirti come si fa.

Non scoraggiarti comunque, stai creando il primo template a quanto ho capito, ed è normale avere qualche dubbio: su internet c'è tanta documentazione comunque, secondo puoi farcela tranquillamente Altrimenti come ha suggerito il moderatore puoi prendere un template già esistente ed adattarlo alle tue esigenze magari cambiando sfondi, ecc...[/code]

giovi · « **Risposta #41 il:** 04 Set 2012, 18:59:16 »

ma lui a. non sta cercando di avere il tuo stesso effetto; b.ha creato lo stesso identico numero di div principali proprio come stiamo facendo adesso: contali, sono 1 wrapper (il tuo contenitore), 1 header, le colonne ed il footer. Cosa ci manca che noi non abbiamo? Il logo lo posizioni in un secondo momento assieme al menu ed alle altre posizioni che poi corrisponderanno alle posizioni modulo... devi andare per passi altrimenti non ti ci raccapezzi più

daniele95 · « **Risposta #42 il:** 04 Set 2012, 19:02:15 »

allora mesà che ricomincio da capo partendo dalla struttura che hai scritto tu...

partendo da li devo posizionare il logo e la barra del menù... lasciando dei posti per poter inserire sopra il seguici su facebook e twitter... e il link al forum... alla fine della barra invece da progetto dovrebbe esserci il g+1 nascosto sotto la barra ma non so se sia realizzabile... per ora lasciamo stare il menù... altrimenti non ne esco più...

grazie mille veramente del tempo che stai perdendo per aiutarmi!!!

PS: nel frattempo carico un'anteprima della grafica all'indirizzo robodaniele.net/img/anteprima.jpg

giovi · « **Risposta #43 il:** 04 Set 2012, 19:20:40 »

puoi fare ancora di meglio: puoi impostare questa immagine come sfondo del sito così puoi disegnarci su con il codice mentre sotto hai una mappa di ciò che devi fare, come se la pagina fosse fatta di carta velina, non so se mi spiego... magari da' all'immagine una saturazione prossima al 20% in modo che faccia solo da sfondo e non risalti così tanto, poi la imposti così:

Codice: [Seleziona]

body{background:url(img/anteprima.jpg) center top no-repeat;}

giusebos · « **Risposta #44 il:** 04 Set 2012, 19:27:02 »

non è che mi potete dire come contattare la modella?

........non è per me, me lo ha chiesto un mio amico.

daniele95 · « **Risposta #45 il:** 04 Set 2012, 19:35:04 »

Citazione da: giusebos - 04 Set 2012, 19:27:02

non è che mi potete dire come contattare la modella?

........non è per me, me lo ha chiesto un mio amico.

quoto alla grande :PP

tornando a noi l'ho fatto ma non funziona

ho provato anche a dare l'altezza all'header per vedere se dipendeva da quello ma niente

solito indirizzo per vedere...

giovi · « **Risposta #46 il:** 04 Set 2012, 19:57:05 »

Ahaha, giusebos è un grande
Torniamo a no, hai notato che come percorso hai scritto imgages? Volevi scrivere qualcos'altro per caso?

Copia ed incolla il codice che ti ho postato, non andare per altre strade!

daniele95 · « **Risposta #47 il:** 04 Set 2012, 20:14:54 »

ok fatto

a fine lavoro ti erigo una statua... ovviamente tutta d'oro massiccio

ora?

giovi · « **Risposta #48 il:** 04 Set 2012, 20:20:16 »

Ora andiamo avanti prima con la definizione del layout dei div già inseriti e poi con con la progettazione delle future posizioni modulo di joomla.
Intanto c'è un errore nei div da correggere: non hai chiuso il tag <div> del <div id="content">! Se non lo fai ora il sito risulterà tutto sballato
Dunque aggiungi al css la direttiva del float che ti ho postato più su ed in seguito inserisci un div "logo", n div "menu" ed un div "top" all'interno del div header, in previsione delle posizioni modulo che ci inserirai.

daniele95 · « **Risposta #49 il:** 04 Set 2012, 20:29:40 »

di top ne basta uno nonostante sia uno per fb e twitter e uno per andare al forum? e per google plus non predispongo nulla?

intanto ho messo sul solito indirizzo le nuove cose

giovi · « **Risposta #50 il:** 04 Set 2012, 20:42:57 »

Per brevità ti ripropongo un codice funzionante (lo sto testando in locale):

Codice: [Seleziona]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style>
		* {padding: 0; margin: 0;}
		body{background:#CACACA url(http://www.robodaniele.net/images/sfondo.jpg) center top no-repeat;}
		#container{width: 800px; margin: 0 auto;}
		#content, #right-column{float:left;}		
		#content{padding-left:50px; width:450px; min-height:500px;}
		#right-column{padding-left:100px; widht:200px;  min-height:500px;}
		.clr{clear:both; float:none;}
		#header > div{float:left; line-height:160px; padding-left:40px;}
		header{height:160px; padding-left:200px;}
	</style>
</head>
<body>
<div id="container">
	<div id="header">
		<div id="logo">LOGO</div>
		<div id="mainmenu">MENU</div>
		<div id="top">BOTTONE DI GOOGLE</div>	
		<div class="clr"></div>
	</div>
	<div id="content">CONTENUTO</div>
	<div id="right-column">COLONNA LATERALE</div>
	<div class="clr"></div>
	<div id="footer">FOOTER</div>
</div>
	
</body>
</html>

Se lo sostituisci al tuo dovresti ottenere il mio stesso risultato. Se ti soddisfa andiamo avanti altrimenti possiamo apportare tutti gli accorgimenti che desideri

daniele95 · « **Risposta #51 il:** 04 Set 2012, 20:51:23 »

mmm sto modificando qualcosa soprattutto con le dimensioni... però ci sono cose che non capisco... tipo #headr > div... significa che deve essere maggiore? se si di cosa? e perchè header sotto è senza "#" ??

ultima domanda.. cosa signifca .clr {clear:both; float:left;} ??

giovi · « **Risposta #52 il:** 04 Set 2012, 21:04:23 »

#header > div fa si che le impostazioni abbiano effetto solo sui div che sono immediatamente sotto l'elemento con id header. In questo modo un div che si trova dentro un div che si trova dentro l'elemento header non subisce l'effetto della dichiarazione.
Nel secondo caso è stata una mia distrazione, il cancelletto ci va sempre

Il clear annulla l'effetto del float:left, è una cosa che capirai molto ma molto più avanti. Il float invece affianca due o più elementi partendo da sinistra

daniele95 · « **Risposta #53 il:** 04 Set 2012, 21:05:52 »

grazie mille per le delucidazioni...io ho scritto così

Codice: [Seleziona]

<style>

    
        * {padding: 0; margin: 0;}
        body{background:#CACACA url(http://www.robodaniele.net/images/sfondo.jpg) center top no-repeat;}
        #container{width: 930px; margin: 0 auto;}
        #content, #right-column{float:left;}        
        #content{padding-left:30px; width:500px; min-height:500px;}
        #right-column{padding-left:140px; widht:400px;  min-height:500px;}
        .clr{clear:both; float:none;}
        #header > div{float:left; line-height:160px; padding-left:40px;}
        #header{height:160px; padding-left:200px;}

        
    </style>

ma non ho capito come funziona il padding del content... se lo diminuisco si sposta a destra se lo aumento va verso sinistra... sono un caso disperato

giovi · « **Risposta #54 il:** 04 Set 2012, 21:10:45 »

strano perchè se diminuisci il padding il testo si deve spostare a sinistra, perchè diminuisce la "zavorra" che lo circonda.. sicuro di quello che dici? Dovrebbe essere vero il contrario. Ad ogni modo ora cerca di concentrarti sullo stile generale del sito, ai dettagli pensarai dopo. Procurati ad esempio le immagini che comporranno il sito: una barra di sfondo del menu con l'ombreggiatura in formato png (senza logo e senza le macchie), un'immagine con solo le macchie, una con solo il logo contornato dal quadrato bianco ed una per la "spaccatura" che vedo sotto il modulo login. Tutto deve essere rigorosamente in formato png e con sfondo trasparente. Ho visot che te la cavi con la grafica quindi dovresti essere in grado di procurati tutto ciò (anche perché io non lo saprei fare!)

daniele95 · « **Risposta #55 il:** 04 Set 2012, 21:12:28 »

su dreamweaver reagisce così... però vedo su internet che è tutto diverso da come è su dreamweaver.. con gli stessi valori il footer va dove dovrebbe andare.... invece su internet no... comunque tanto per vedere se inizio a capire provo a fare da solo i div logo, menu e top poi li correggiamo?

daniele95 · « **Risposta #56 il:** 05 Set 2012, 12:17:47 »

ok ora ci sono... ho fatto delle modifiche e penso di aver capito tutto o quasi... dimmi se va bene robodaniele.net

<style>

* {padding: 0; margin: 0;}
body{background:#CACACA url(images/sfondo.jpg) center top no-repeat;}
#container{width: 930px; margin: 0 auto;}
#content, #right-column{float:left;}
#content{padding-left:30px; width:500px; min-height:450px;}
#right-column{padding-left:140px; widht:400px; min-height:450px;}
.clr{clear:both; float:none;}
#header > div{float:left; line-height:160px; padding-left:40px;}
#header{height:160px; padding-left:265px;}
#footer {float:left; line-height:200px; padding-left:40px;}

</style>

daniele95 · « **Risposta #57 il:** 05 Set 2012, 12:40:31 »

ho letto ora che avevi modificato il tuo messaggio... oggi mi procurerò le immagini... anche se io con photoshop non sono molto pratico... siamo in due a fare questi lavori e questo mio amico si occupa quasi solo di photoshop... è una bestia ahahah io sono più bravo con i video e grafica 3d... i siti sono un hobby... chiamiamolo così :s appena ho le immagini ti faccio sapere

penso nel primo pomeriggio

daniele95 · « **Risposta #58 il:** 05 Set 2012, 23:35:24 »

come promesso ecco le immagini:

robodaniele.net/images/logo.png
robodaniele.net/images/menubar.png
robodaniele.net/images/menubar_shadow.png
robodaniele.net/images/header_background.png
robodaniele.net/images/macchie.png

il menu non sapevo se serviva con o senza ombra e il modulo login aspeto ad esportarlo per problemi tecnici

daniele95 · « **Risposta #59 il:** 06 Set 2012, 14:00:12 »

inizio a posizionare queste immagini dentro i div creati? grazie mille per l'aiuto