Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    14

    Problemi disposizione div nella pagina

    Salve a tutti , mi sono appena iscritto per chiedere aiuto su come realizzare correttamente una pagina; e fare in modo che venga visualizzata come voglio almeno dai principali browser.
    Vi dico subito che non sono mai andato d'accordo coi <div> e che il tag <table> mi ha accompagnato fin troppo spesso .
    Senza perdermi in ulteriori parole questo è quello che vorrei ottenere: html ( e css )

    Viene visualizzata correttamente con Chrome, Firefox ( 3 e 4 ) e Safari 5. Mentre con Internet Explorer 9 ( ma credo anche 7 ed 8 ) ed Opera 11 viene visualizzata diversamente... ( div in alto a destra "staccati" ed in posizione errata su IE )

    Sapete dirmi dove sbaglio ?

    Grazie in anticipo

    PS: nella visualizzazione del sorgente, prima della chiusura del body, viene aggiunto del codice JavaScript dall'host.

  2. #2
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349

    Re: Problemi disposizione div nella pagina

    Originariamente inviato da fenderum
    Sapete dirmi dove sbaglio ?
    innanzitutto, nel fatto che mandi i browser in quirks-mode. Applica una doctype preferibilmente strict, verifica che il codice sia validato e ottimizza per ff & co. (se fai il codice a regola d'arte, anche opera dovrebbe seguire gli altri browser standard-compliant).
    Alla fine passa a testare su ie, se ci sono delle differenze nella visualizzazione puoi usare i commenti condizionali.


  3. #3
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Rivedendo il tuo codice:
    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>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	
    <title>IT</title>		
    <link rel="stylesheet" href="it.css" type="text/css" />
    </head>
    	
    <body>
    	
    <div id="main">
    	<div class="c">
    		<div id="sinistro">
    			<p style="margin-left: 40px;">ABABABAAABAABAA</p>
    		</div>
    		<div id="destro">
    			<div id="m1" >spazio1</div> 
    			<div id="m2" >spazio2</div>
    			<div id="m3" >spazio3</div> 
    			<div id="m4" >spazio4</div>
    		</div>
    		<div style="clear:both;">[img]Winter-800x400.jpg[/img]</div>		
    						
    		<div>spazio</div>
    				
    		<div class="p">
    			<div class="p1">gnégné</div>
    			<div class="p1">gnégné</div>				
    		</div>	
    		<div style="clear:both;">spazio</div>
    	</div>
    </div>
    	
    </body>
    </html>
    css:

    codice:
    * {
    	margin: 0;
    	padding: 0;	
    }
    body {
    	text-align: center;
    	margin-top: 100px;
    	font-family:  Arial;
    	color: #ffffff;
    }
    
    #main {
    	width: 800px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    .c {
    	background-color: black;
    }
    
    #sinistro {
    	float: left;
    	width: 550px;
    	font-size: 44px;
    	padding-top: 20px;
    }
    
    #destro {
    	float: right;
    	width: 250px;
    	font-size: 30px;
    	text-align: right;
    }
    
    .p {
    	font-weight: bold;
    	/*background-color: #ffffff;*/
    }
    
    .p1 {
    	float: left;
    	width: 50%;
    	text-align: center;
    	background-color: #ffffff;
    	font-size: 20px;
    	color: #000000;
    }
    
    
    #m1 {
    	font-size: 28px;
    	height: 20px;
            line-height: 20px;
            margin-right: 40px;
    }
    
    #m2 {
    	font-size: 36px;
    	height: 24px;
            line-height: 24px;
            margin-right: 40px;
    }
    
    #m3 {
    	font-size: 44px;
    	height: 28px;
            line-height: 28px;
            margin-right: 40px;
    }
    
    #m4 {
    	font-size: 52px;
    	height: 50px;
            line-height: 50px;
            margin-right: 40px;
    }
    Aggiunto doctype, vedendo che l'immagine aveva una chiusura ho usato xhtml. Nel css semplificato alcune cose e poiché hai un box di dimensioni fisse ho indicato la larghezza anche per i box flottanti e aggiunto un line-height per avere anche con explorer l'effetto del testo quasi sovrapposto, ho tolto il margine dai div col float e l'ho l'inserito negli elementi interni (margini, padding e bordi su un elemento si sommano infatti alla larghezza assegnata all'elemento stesso e per evitare calcoli vari l'ho attribuito agli elementi interni senza specificazione di width). Ho modificato poi qualche altra piccola cosa che apparirà dal confronto dei codici

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    14

    Re: Re: Problemi disposizione div nella pagina

    Originariamente inviato da Myaku
    innanzitutto, nel fatto che mandi i browser in quirks-mode. Applica una doctype preferibilmente strict, verifica che il codice sia validato e ottimizza per ff & co. (se fai il codice a regola d'arte, anche opera dovrebbe seguire gli altri browser standard-compliant).
    Alla fine passa a testare su ie, se ci sono delle differenze nella visualizzazione puoi usare i commenti condizionali.

    Originariamente inviato da Prill
    Aggiunto doctype, vedendo che l'immagine aveva una chiusura ho usato xhtml. Nel css semplificato alcune cose e poiché hai un box di dimensioni fisse ho indicato la larghezza anche per i box flottanti e aggiunto un line-height per avere anche con explorer l'effetto del testo quasi sovrapposto, ho tolto il margine dai div col float e l'ho l'inserito negli elementi interni (margini, padding e bordi su un elemento si sommano infatti alla larghezza assegnata all'elemento stesso e per evitare calcoli vari l'ho attribuito agli elementi interni senza specificazione di width). Ho modificato poi qualche altra piccola cosa che apparirà dal confronto dei codici
    Grazie mille ad entrambi solo aggiungendo il DOCTYPE funziona alla perfezione. ( "Ovviamente!" direste voi )
    Avevo perso l'abitudine di metterlo perché in passato mi dava sempre problemi quando lo aggiungevo... ( poi erano siti a livello "scolastico" quindi sinceramente non mi importava moltissimo :P ) ; ora difficilmente me ne scorderò.
    Appena ho più tempo guarderò per bene il codice scritto da Prill e cercherò di tirarne fuori il meglio, grazie per i suggerimenti .

    Grazie ancora.

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    14
    Scusate il doppio post, ma avrei bisogno di un altro aiutino .
    Volevo mettere altri <div> anche sotto in stile "scala" sul lato sinistro; come quelli in alto a destra, ma al contrario.
    Questo pezzo di codice dovrebbe far capire meglio:
    codice:
    #f1 
    {
    margin-left:  30  px;
    font-size: 26px ;
    } 
    #f2
    {
    margin-left:  40  px;
    font-size: 22px ;
    }
    #f3
    {
    margin-left:  50  px;
    font-size: 18px ;
    }
    Nonostante scriva questo codice non noto cambiamenti nella visualizzazione... Come devo fare ?
    I link sono sempre: html e css .

    Grazie in anticipo

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    14
    Originariamente inviato da fenderum
    Scusate il doppio post, ma avrei bisogno di un altro aiutino .
    Volevo mettere altri <div> anche sotto in stile "scala" sul lato sinistro; come quelli in alto a destra, ma al contrario.

    Nonostante scriva questo codice non noto cambiamenti nella visualizzazione... Come devo fare ?
    I link sono sempre: html e css .

    Grazie in anticipo
    Problema risolto... avevo messo uno spazio tra il valore e l'unità "px" ...

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 © 2024 vBulletin Solutions, Inc. All rights reserved.