Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1

    Eliminare lo spazio bianco dopo un'immagine

    Un saluto a tutti, sono nuovo e molto poco pratico , ma parecchio interessato. Allora il mio problema è questo: sto creando un sito web e sopra la pagina ho un'immagine - che è di 961x200 px - che è il logo del sito ed è allineata a sinistra. A destra però rimane dello spazio di circa 50 px che non riesco a togliere ed è quello che voglio fare. Per il sito sto usando DW con HTML e CSS.
    Un grazie a voi tutti.

  2. #2
    posta il codice dell'header, sarà più semplice aiutarti

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2010
    Messaggi
    249
    cosa c'entra l'header? booo...

    l'immagine presuppongo che tu l'abbia messa come sfondo o in un div container che rappresenta la larghezza del sito, per prima cosa ti consiglio di allinearla al centro e non a destra, è più gradevole a vedersi... devi considerare che gli utenti guardano il tuo sito con monitor di grandezza e risoluzione differenti e vedere un sito piccolo con un monitor grande tutto a sinistra non è bello.
    poi, sempre per il fatto di monitor differenti ovviamente più o meno sfondo ci sarà sempre per forza, puoi impostarlo di un colore uguale all'immagine se questa ha uno sfondo uniforme... non so la tua immagine logo che sfondo abbia, puoi anche ritagliare un pezzetto di sfondo dell'immagine e metterlo come sfondo del body con il repeat x o y... poi devi vedere tu in base all'immagine la soluzione che rende più uniformità

    p.s. se posti l'url del sito ti possiamo consigliare come fare

  4. #4
    roberto, non c'è bisogno di fare tanto lo sbruffone, ero di fretta e mentre rispondevo mi pareva parlasse del logo, sai, un 961x200 come logo solitamente sta nell'header, errare è umano, se tu sei perfetto scusa se non mi sono tolto il cappello

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,783
    buoniii

    limitiamoci a risolvere quei 50px, sempre che marcofita posti la pagina o un po' di codice

  6. #6
    Ragazzi scusatemi se rispondo solo ora, ma ho avuto problemi col provider ed oggi torno online.
    Allora, il sito non è ancora online quindi anche se vi posto l'URL non servirà a molto. Vi passo dunque il codice sorgente (copio ed incollo tutto). Tenete presente che l'immagine di cui vi parlo si chiama impianto_fotovoltaico_directionenergia.jpg

    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=utf-8" />
    
    <title>///</title>
    
    <style type="text/css">
    
    <!--
    
    body {
    
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    
    	margin: 0;
    
    	padding: 0;
    
    	color: #000;
    
    	background-color: #FFFFFF;
    
    	width: 960px;
    
    	height: 250px;
    
    }
    
    
    
    
    
    	padding: 0;
    
    	margin: 0;
    
    }
    
    h1, h2, h3, h4, h5, h6, p {
    
    	margin-top: 0;	 
    
    	padding-right: 0px;
    
    	padding-left: 0px; 
    
    }
    
    a img { 
    
    	border: none;
    
    }
    
    
    
    
    
    a:link {
    
    	color: #42413C;
    
    	text-decoration: underline; 
    
    }
    
    a:visited {
    
    	color: #6E6C64;
    
    	text-decoration: underline;
    
    }
    
    a:hover, a:active, a:focus {
    
    	text-decoration: none;
    
    }
    
    
    
    
    
    .container {
    
    	width: 960px;
    
    	background: #FFFFFF;
    
    	margin: 0 auto;
    	font-family: "Comic Sans MS", cursive;
    
    	font-size: 70%;
    
    	text-align: center;
    
    	font-weight: bold;
    
    }
    
    
    
    
    
    .header {
    
    	background: #ADB96E;
    
    }
    
    
    
    
    
    .sidebar1 {
    
    	float: left;
    
    	width: 180px;
    
    	background: #EADCAE;
    
    	padding-bottom: 10px;
    
    }
    
    .content {
    
    
    
    	padding: 10px 0;
    
    	width: 600px;
    
    	float: left;
    
    }
    
    .sidebar2 {
    
    	float: left;
    
    	width: 180px;
    
    	background: #EADCAE;
    
    	padding: 10px 0;
    
    }
    
    
    
    
    
    .content ul, .content ol { 
    
    	padding: 0 15px 15px 40px; /
    
    }
    
    
    
    
    
    ul.nav {
    
    	list-style: none; 
    
    	margin-bottom: 15px; 
    
    }
    
    ul.nav li {
    
    	border-bottom: 1px solid #666; 
    
    }
    
    ul.nav a, ul.nav a:visited { 
    
    	padding: 5px 5px 5px 15px;
    
    	display: block; 
    
    	width: 160px;  
    
    	text-decoration: none;
    
    	background: #C6D580;
    
    }
    
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
    
    	background: #ADB96E;
    
    	color: #FFF;
    
    }
    
    
    
    
    
    .footer {
    
    	padding: 10px 0;
    
    	background: #CCC49F;
    
    	position: relative;
    	clear: both;
    	background-color: #666666;
    
    }
    
    
    
    
    
    .fltrt {  
    
    	float: right;
    
    	margin-left: 8px;
    
    }
    
    .fltlft { 
    
    	float: left;
    
    	margin-right: 8px;
    
    }
    
    .clearfloat { 
    
    	clear:both;
    
    	height:0;
    
    	font-size: 1px;
    
    	line-height: 0px;
    
    }
    
    #menù {
    
    	font-size: 12px;
    
    	font-style: normal;
    
    	background-repeat: no-repeat;
    
    }
    
    #menu {
    
    	font-size: 10px;
    
    	color: #000;
    
    	background-color: #FFF;
    
    	background-repeat: no-repeat;
    
    }
    
    #menu {
    
    }
    
    -->
    
    </style>
    
    <script type="text/javascript">
    
    function MM_swapImgRestore() { //v3.0
    
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    
    }
    
    function MM_preloadImages() { //v3.0
    
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    
    }
    
    
    
    function MM_findObj(n, d) { //v4.01
    
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    
    }
    
    
    
    function MM_swapImage() { //v3.0
    
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    
    }
    
    </script>
    
    </head>
    
    
    
    <body onload="MM_preloadImages('home.png','chi_siamo.png','fotovoltaico.png')">
    
    <div class="container">
    
      <div class="header">
    
        <div class="menu" id="menu">[img]impianto_fotovoltaico_directionenergia.jpg[/img]</div> 
    
        
    
        </div>
    
      </div>
    
    <table width="961" border="0">
    
      <tr>
    
        <td width="958">[img]home.png[/img][img]chi_siamo.png[/img][img]fotovoltaico.png[/img]</td>
    
      </tr>
    
    </table>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    
    
    </p>
    
    <table width="961" border="0">
    
      <tr>
    
        <td class="container">M.C. Energie Rinnovabili S.r.l.   Loc. Selva - Lustra (SA) - P. IVA 04943030652 - tel. 0815369889</td>
    
      </tr>
    
    </table>
    
    </body>
    
    </html>

  7. #7
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Elimina le parti evidenziate in rosso:

    codice:
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	background-color: #FFFFFF;
    	width: 960px;
    	height: 250px;
    }
    
    
    	padding: 0;
    	margin: 0;
    }
    
    ...
    
    .content ul, .content ol { 
    
    	padding: 0 15px 15px 40px; /
    
    }
    Assegna al container una larghezza di 961 pixel poiché l'header deve essere di questa larghezza (sarebbe bene poi che tu avessi un contenitore che racchiuda tutto, che potrebbe essere appunto il container, senza blocchi sfusi nella pagina)

  8. #8
    Ciao, ho fatto come mi hai detto eliminando le righe in rosso e selezionando 961 px come larghezza. Adesso l'immagine si trova al centro della pagina con una distanza uguale da entrambi i bordi, io però volevo metterla larga quanto tutta la pagina.
    Per quanto riguarda i blocchi ti posso dire che è stato DW a crearli perchè io non sono molto pratico conosco solo un pò di html.
    Grazie per l'aiuto.

  9. #9
    Allora per farvi capire un pò ho caricato quel poco di lavoro che ho fatto sul sito, così potete capire meglio. Ecco il sito:
    http://www.mcfotovoltaico.altervista.org/

  10. #10
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Il tuo container, come l'header, era largo 960px e conteneva un'immagine di 961px. Dunque tu vorresti invece un'intestazione, e un layout, in percentuale? In quel caso non dovrai impostare dimensioni fisse per i box (e dipendendo le dimensioni della finestra dalla risoluzione del monitor, da quella dipenderà anche la tua pagina). Un ridimensionamento percentuale dell'immagine comporterebbe problemi ed è sconsigliabile, potresti assegnare al div header un colore o anche un'immagine di sfondo che si avvicini a quello di impianto_fotovoltaico_directionenergia.jpg e che desse l'effetto di una continuità e quindi di un'unica immagine

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.