Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it L'avatar di bob18
    Registrato dal
    Jun 2004
    Messaggi
    1,035

    Div padroni di sè, che non stanno dove vorrei che stessero

    salve ragazzi,
    a parte il titolo scherzoso, il post è serissimo in quanto non riesco a trovare una soluzione per il mio problema

    vengo al dunque... ho un problema con la posizione di alcuni div. Il codice mi sembra corretto, solo che quando vado a visualizzare una anteprima della pagina compare l'errore che vedete nell'allegato (screenshot sia con IE che con FF).

    Le ho provate tutte ma non riesco a venirne a capo.

    Vorrei che i due div bianchi venissero posizionati uno in alto a destra (e ci sta correttamente), l'altro esattamente in alto a sinistra. Come vedete quest'ultimo mi crea qualche problema.
    Il codice CSS è il seguente:
    codice:
    BODY {
    	margin-top: 15;
    	padding: 0;
    	text-align: center;
    	background-color: #999999;
    	font-family: tahoma, verdana;
    }
    div#top {
    	width: 700px;
    	height: 105px;
    	left: 0;
    	top: 0;
    	text-align: left;
    	margin: 0 auto;
    	color: #FFFFFF;
    	font-size: 15px;
    	background-color: #990000;
    }
    div#blabla {
    	position: relative;
    	width: 70px;
    	height: 10px;
    	left: 0;
    	top: 0;
    	background-color: #FFFFFF;
    }
    div#blabla2 {
    	position: relative;
    	width: 70px;
    	height: 10px;
    	left: 630px;
    	top: 0px;
    	background-color: #FFFFFF;
    }
    Quello html:
    codice:
    <div id="top">
      <div id="blabla2"></div>
      <div id="blabla"></div>
      div top
    </div>

    Non so più cosa fare , sapreste dirmi cosa succede?




    Grazie mille!!!
    Immagini allegate Immagini allegate

  2. #2
    Prova a dare position:relative al div '#top' e position:absolute ai due figli.

  3. #3
    prova con
    codice:
    div#blabla {
    	float:left;
    	width: 70px;
    	height: 10px;
    	background-color: #FFFFFF;
    }
    div#blabla2 {
    	float:right;
    	width: 70px;
    	height: 10px;
    	background-color: #FFFFFF;
    }

  4. #4
    Utente di HTML.it L'avatar di bob18
    Registrato dal
    Jun 2004
    Messaggi
    1,035
    grazie ragazzi, il risultato è perfetto utilizzando entrambe le soluzioni.

    altra domanda: come mai, pur avendola impostata a 10px, Firefox visualizza l'altezza dei div "blabla" molto più piccola?
    (guardate pure l'immagine allegata al primo post)

    è un bug di Firefox?


    grazie


  5. #5

  6. #6
    Utente di HTML.it L'avatar di bob18
    Registrato dal
    Jun 2004
    Messaggi
    1,035
    per ora si, conterranno però una immagine per il bordo arrotondato.
    so già che quando conterrano testo o immagini il problema sarà risolto però, siccome altre volte mi è capitato di avere questo problema con div vuoti, vorrei capire perchè succede.

    grazie!

    ciao!


  7. #7


    Se l'immagine è puramente grafica - non fa cioè parte del contenuto - allora va gestita tramite sfondi, quindi tramite CSS. Ricorda sempre che div sta per "division", ovvero macroarea: è un marcatore che permette di raggruppare logicamente i contenuti e dare maggior ordine alla struttura. Capirai bene come una macroarea vuota sia priva di significato.


  8. #8
    Utente di HTML.it L'avatar di bob18
    Registrato dal
    Jun 2004
    Messaggi
    1,035
    beh allora a che serve l'attributo height applicato ai div?

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Nelle specifiche dell'HTML c'e` una postilla che permette ai browser di non visualizzare un oggetto se questo e` vuoto. Viene proprio ignorato (e anche l'eventuale CSS applicato non viene utilizzato).

    Questo dovrebbe rendere inutile l'ultima domanda.


    Non chiedermi perche` c'e` quella postilla, ma immagino che se le pagine sono create dinamicamente lato server, il programmatore imposta la struttura della pagina in un template, poi un programma (automatico e stupido, come tutti) riempie i vari blocchi in base al database.

    Quindi puo` capitare di avere dei blocchi vuoti, che a questo punto sono inutili, e il browser li deve ignorare: ne guadagna l'occupazione dello spazio che la velocita` di rendering.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

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.