Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15

Discussione: header e nav

  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2008
    Messaggi
    17

    header e nav

    Salve a tutti...
    chiedo scusa in anticipo per le mie domande che magari a molti di voi suoenranno banali..
    da un po sto cercando di costruire una pagina web basandomi sui codici css....ho seguito alcuni tutorial qui del sito che tra l'altro sono fatti veramente bene,...
    ora avrei 2 domande da porvi:

    1. ho fatto il layout base, con un head e un nav. vorrei che ad ogni sezione l'img di fondo dell' Head cambiasse...per fare cio' ho creato diversi file style.css rinominandoli per ciascuna pagina e ciascuna ha come background una img diversa. è giusto fare cosi'? mi sembra una cosa un po nacchinosa e soprattutto a volte tarda a caricare le immagini, che tutto sommato non mi sembrano molto pesanti (Formato gif 778x200 px , dim che varia dai 43-105 KB ).

    2. Ho personalizzato la grafica della barra di navigazione inserendo nell'img stessa la foto di una busta e di una casetta (come ho visto fare in molti siti), ora pero' dovrei inserire il link a quete porzioni di immagini e non ho idea di come fare, cioè non so dove devo inserire il codice html.
    Magari esiste un tutorial che io nn ho trovato sul sito? sareste cosi' gentili da linkarmelo

    3. vorrei fare dei collegamenti a dei video che si aprano in una nuova finestra....ho dei video avi sul pc, naturalmente dovrei comprimerli perchè sono molto pesanti...sapreste dirmi in che formato e come devo fare per farli aprire in una nuova pagina che si vedano ad esempi ocon windowsmediaplayer o un altro player? è una cosa molto complicata??

    grazie mille...spero possiate essermi d'aiuto!!
    Silvy

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    più che domande inerenti ai soli css,
    mi sembrano più adatte al forum html,
    quindi sposto di là
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di baglio
    Registrato dal
    Oct 2008
    Messaggi
    20
    Ciao...
    Per quanto riguarda le immagini di back da cambiare all' header, secondo me dovresti dare diverse classi al id dell header in modo da tenere tutto in un foglio di stile...
    poi ad ogni classe specifichi un back diverso e poi applichi la classe all' id dell' header...
    Spero di esserti stato d aiuto!
    Ciao!

  4. #4
    Utente di HTML.it
    Registrato dal
    Jul 2008
    Messaggi
    17
    mm vediamo se ho capito...
    io per ora ho fatto cosi...
    nel css non ho specificato che bg usare...
    poi in ogni pagina da parte alla stringa
    <div id="header">
    ho inserito quesot:
    style="background: url(IMG/h_storia850.jpg) no-repeat top left;">

    naturalmente con un url diverso per ogni pagina....
    per ora semrba funzioanare, solo che in alcuni casi mi appare come stile proprio dlela pagina, si va ad inserire dopo le stringa:
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    <link href="classi.css" rel="stylesheet" type="text/css"/>
    <style type="text/css" media="all">

    una nuova :
    #header { background-image: url(IMG/h_storia850.jpg); }

    non capisco perchè...non succede in tutte le pagine..il casino è che ora non so se devo modificare il codice del file style.css o questo "interno" alla pagina...

    spero di essermi spiegata...

    Invece per rendere clikkabili alcune immagini sulla barra di navigazione, non sapete consigliarmi come fare? qualche post di riferimento sul sito? ieri ho cercato ma non ho trovato nulla :-(
    GRAZIE ANCORA PER LA RISPOSTA..
    SIlvia

  5. #5
    Utente di HTML.it L'avatar di baglio
    Registrato dal
    Oct 2008
    Messaggi
    20
    Fai cosi'...
    Nel tuo foglio di stile specifichi la formattazione dell' header ma non metti il background...

    Poi fai delle classi dove inserisci solo il background e la classe la associ all 'id...
    Ti faccio un esempio:

    #header{
    width:300px;
    height:200px;
    margin:0 auto;
    padding:0;
    }

    .home{
    background:url(img/imghome)..........
    }

    .pagina1{
    background:url(img/imgpagina1)..........
    }

    .pagina2{
    background:url(img/imgpagina2)..........
    }

    e cosi' via per tutte le pagine in cui ti serve un' immagine di bg diversa

    Poi nell html inserisci:

    Per la home page:
    <div id="header" class="home">

    Per la pagina 1:
    <div id="header" class="pagina1">

    Per la pagina 2:
    <div id="header" class="pagina2">

    e cosi' via per tutte le pagine alle quali vuoi associare un bg diverso tramite classe...

    Non mettere lo style ai div header non serve...fai tutto tramite il tuo foglio di stile...

    P.S. Non usare il link rel usa la funzione @import!

    Spero di averti fatto un po' di chiarezza...

    Ciao!

  6. #6
    Utente di HTML.it
    Registrato dal
    Jul 2008
    Messaggi
    17
    Hey, grazie per la risposta, in effetti il tuo metodo è piu 'giusto...ho fatto una prova su uno e funziona è che sono tante pagine e ci metto un po a cambairle tutte...

    già che ci sono approfitto delle tue conoscenze e ti chiedo altre 2 cose:

    - che significa "Non usare il link rel usa la funzione @import!" che differenza c'è?
    - sto cercando disperatamente di rendere clikkabile una parte della mia barra di navigazione, si tratta di questa:
    http://www.marcodoggiono.com/nuovo/IMG/nav850.gif

    vorrei far clikkare la casettina arancion in modo da tornare alla pagina iniziale.
    calcola che poi sulla barra le scritte verranno inserite come testo, quindi il testo riesco ad inserirlo direttamente clikkabile, ma l'img no..
    ho provato mille modi,: ho diviso la barra in 2 img una con la casa e poi il resto, ma non riesco poi ad allinearle l'una con l'altra etc etc...javascript:void(0);
    Sapresti aiutarmi??

    - ultima domanda..spesso per distanziare l'ultima parte di un div, ho creato, (come ho letto su alcune guide) un div di class clear ossia un rettangolo vuoto di altezza 12 px che inserisco vuoto: <div class=""clear></div>
    ora mi chiedo perchè qndo inserisco questo div, in internet explorer si vede molto distanziato, menre in firefox si vede quasi appiccicato....ho provato anche ad ingrandirlo ma non ne vengo a capo...spesso devo inserirne due per mediare l'effetto tra i due differenti browser...

    Spero di essermi spiegata...ti ringrazio per la tua pazienza e spero tu mi possa aiutare!
    Ciao ciao

    Silvy


  7. #7
    Utente di HTML.it L'avatar di baglio
    Registrato dal
    Oct 2008
    Messaggi
    20
    Ciao...
    Allora per quanto riguarda il metodo di importazione dei CSS non cè differenza, solo che con la funzione @import tagli fuori alcuni browser obsoleti.infatti alcuni browser come Netscape4 non riconoscono tale funzione.
    Ma comunque puoi usare benissimo il link il risultato non cambia...sono scelte.

    Io per la barra di navigazione farei cosi'...
    La vedi come una ul ok? dove la ul sara' il tuo contenitore e le li saranno i tuoi "pulsanti".

    A questo punto tu imposterai un bg per la ul (che sara' quell' immagine che hai linkato prima ma con il tasto della home rimosso)

    poi formatto il tuo li (lo formatti a secondo di cume vuoi che sia formattato il testo che userai come pulsante)

    poi fai un li specifico con una classe dove gli darai un bg (che sara' l immagine della casetta) e lo metterai per primo nell html.

    avrai quindi:

    ul{
    ( formattazioni varie )
    backgorund:url(IMG/nav850.gif)....
    }

    li{
    formattazione
    }

    li.home{
    formattazione
    background:url(casetta.gif) ....
    }

    Per la cosa del div non ho capito esattamente cosa devi fare...se me lo spieghi in altro modo magari riesco ad aiutarti!


  8. #8
    Utente di HTML.it
    Registrato dal
    Jul 2008
    Messaggi
    17
    ciao! grazie mille per la risposta...vediamo se ho capito...ti posto il mio codice della pgina...(quello che non capisco è che io ho comunque il contenitore nav, che nello stile css dice dimensioni posizione etc etc...ul e li dovrei inserirli all'interno di questo giusto? è che cosi' facendo mi vanno dove vogliono loro....)
    <div id="toppage" >
    <div id="header">
    <div id="nav" >
    <ul>
    <li class="li.home"> [*]Storia
    Lavorazione
    Prodotti
    Spaccio
    News
    Links
    Contatti
    E-Shop</div> [/list]
    </div>
    </div>
    ti posto anche lo stile delle classi e del div nav: (l'img nav807.gif è la barra di navigazione senza la parte della casetta, in pratica ho diviso in due parti la barra di navigazione---)
    li.home { background:url(home.gif); }
    li { font-size:12px; font-style: normal; color:#fff; font: Verdana; background-image: url(IMG/nav807.gif); text-align: left ; padding-right: 5px; }
    ul{ backgorund:url(IMG/nav850.gif) }
    scusami tanto ma mi sta facendo impazzire sta cosa..tra un po divido tutto in 6 img e faccio i link alle immagini!!!

    --> Dimenticavo...ora pero' tutti gli elenchi puntati hanno come sfondo la barra di navigazione....devo fare una classe diversa per ogni elenco??
    grazie ancora e scusa se ti disturbo...
    Silvy

  9. #9
    Utente di HTML.it L'avatar di baglio
    Registrato dal
    Oct 2008
    Messaggi
    20
    Dunque...
    Non voglio scoinvolgere la tua struttura ma ti dico secondo me cosa sarebbe meglio fare secondo me.

    Via il div nav.

    Alla ul dai la classe nav, in pratica la ul.nav diventa il tuo contenitore per la navigazione.
    A questa ul dai lo sfondo della barra di navigazione...

    poi ti formatti gli elementi lista (li) in modo da disporli in orizzontale (display inline) all interno della ul cosi' da andare a popolare il tuo menu' delle varie voci...

    Per la home, fai una nuova classe per l elemento lista e gli darai il background della casetta ok?

    In html il risultato sara' cosi':

    <div header>
    <ul class="nav">
    <li class="li.home">[*]Storia[*]Lavorazione[*]Prodotti[*]Spaccio[*]News[*]Links[*]Contatti [*]E-Shop</div> [/list]

  10. #10
    Utente di HTML.it
    Registrato dal
    Jul 2008
    Messaggi
    17
    ma il problema è che se tiro via il div nav, la barra di navigazione mi va a posizionarsi sopra all'header della pagina...(forse questo nn l'avevo detto all'inizio..pero' la pagina è composta da un header nel quale c'è un'img e sotto dalla barra di navigazione...)...

    con il metodo tuo non so perchè ma nn riesco proprio... per applicare le classi ai tag li
    devo fare:
    <li class="li.nav"> oppure <li class="nav"> ?
    le dimensioni di altezza e larghezza le devo specificare nelle formattazioni delle classi?

    grazie e scusa ancora...

    Silvy

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.