Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Problema creazione cornice nel layout

    Salve a tutti.
    Avevo appena cominciato ad impaginare la mia prima home, quando ecco arrivare il primo intoppo.

    Desidero creare un layout semplice con una cornice monocromatica (guarda immagine).
    In partenza avevo pensato di creare un solo div principale ed impostare la cornice tramite "border", ma con mia grande sorpresa seppur impostassi lo stesso colore per i border di ogni lato, è come se variasse di gradiente da sinistra a destra.

    Abbandonata la prima strada, ho cercato di creare due div.Uno esterno con lo stesso colore di sfondo della cornice, ed annidarne un altro all'interno spaziandolo dal genitore assegnandogli "position:relative" ed usando gli attributi "top,right"etc...

    Questa via è quella che mi ha avvicinato più al risultato, se non fosse per il margine inferiore, che va inesorabilmente in overflow (guarda immagine). È come se l'attributo bottom, non venisse considerato e di conseguenza il margine inferiore con il div genitore non fosse visualizzabile.

    Probabilmente avrò usato termini inadeguati, ma vi prego di passarmeli, sono un neofita.
    Di seguito vi riporto il codice nello style CSS:



    #container{
    width:760px ;
    height:100%;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    background-color:#c0b226;

    }

    .container2{
    width:718px ;
    height:90%;;
    position:relative;
    top:23px;
    left:21px;
    bottom:22px;
    right:21px;
    background-color:#FFF;
    }

    (conrtainer div genitori, container2 div annidato).


    Vi chiedo un aiuto, e delle eventuali delucidazioni sulla strada da intraprendere. Magari la soluzione è molto più semplice di quella con due div, ma non ne sono a conoscenza.

    Grazie Mille.

    Michele







  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Hai dato dimensione agli oggetti body e html?

    Perche` il tuo height: 100% dato al #container non ha significato se l'oggetto che lo contiene (presumo sia il body) non ha dimensione. E se questo ha dimensione 100% la cosa e` ricorsiva verso html.

    E che senso ha il position:relative del container2? a me pare che con quelle condizioni debba avere posizionamento assoluto; nel qual caso il container deve avere anch'esso posizionamento (assoluto o relativo), altrimenti non puoi definire sia top che bottom.
    Ed evita di dare definizioni contradditorie: i browser poi risolvono le contraddizioni in modo diverso: se definisci sia top che bottom non puoi dare una altezza fissa: una delle tre deve sparire.


    Comunque usare i posizionamenti non e` una cosa semplice, e va fatto con cognizione di causa.
    Prova a vedere se questi articoli ti aiutano:
    I posizionamenti assoluti
    Capire i posizionamenti relativi
    Ma se hai difficolta` a capirli, devi approfondire nelle guide/tutorial (devi "perdere tempo" a studiare), altrimenti non ne vieni a capo.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    La prima soluzione è quella che devi usare senza complicarti troppo la vita visto che non hai molta esperienza.

    Utilizza un solo div e tramite CSS richiami la proprietà border:

    codice:
    border: 10px solid #c0b327
    In questo modo imposti tutti i lati con lo stesso colore senza dover richiamare il bordo di ogni lato, border-top, border-right... (se ho capito bene avevi fatto così??)
    Sta sicura che non può esserci nessun gradiente.


    vdesigns | facebook | twitter

  4. #4
    @Mich_ grazie per la risposta, ho risolto grazie ai tuoi suggerimenti.

    @vdesigns
    grazie per la dritta, in realtà avevo già risolto cercando un topic sul forum.
    Con due div ma senza la position:absolute. Semplicemente impostando il paddind-top nel div antentenato, text-align:center, ed impostando nel div figlio text-align:left ed i margin.

    Ma la tua soluzione mi sembra ancora più immediata e semplice. La proverò domani in studio.


    P.s.Sono maschio, ma l'errore è mio. Cambierò avatar prima possibile, crea equivoci.

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.