margin-right immagine che non si allinea

**killumix** · 28-01-2015, 12:40

Salve

Non riesco a far stare in posizione di 3px dal margine destro, l'immagine presente nel mio sito : http://havingroove.altervista.org/art.html - suddividendo il contenitore #centrale in 2 div , uno per la gallery e l'altro div #dex per quella singola immagine. Ho dato un margin-left di 3 px specificando il percorso #dex centrale img {} ma non riesco a capire.

**Fandango Visual** · 29-01-2015, 10:47

Ciao! Ho analizzato la pagina di cui parli ma non riesco a capire: tu dici di aver diviso il contenitore #centrale in due div, ma guardando l'html a me sembra che tu l'abbia diviso in molti più div! Tutti i div .colonna sono elementi figli del #centrale. Prova a dividere veramente tutto in due div figli di #centrale tipo #six e #dex (che hai già creato)

**killumix** · 29-01-2015, 12:27

In pratica il div di sinistra viene richiamato per classe in quanto è una gallery proveniente da una risorsa gratuita quindi per evitare di manomettere il css ho preferito lasciarlo in class="colonna" mentre al div con id #dex gli ho ripetuto la class="right" richiamabile dal css e flotta tranquillamente a destra, il problema è l'immagine con gli schermi tv che non riesco a posizionarla a : giusto 3 px dal margine destro.

**Fandango Visual** · 29-01-2015, 12:53

Ok il problema però è che la gallery è composta da 10 div tutti con classe .colonna e non da uno, quando dici "il div di sinistra" quindi ti riferisci a un div che in realtà non esiste...fai così: fai un backup del codice che hai su ora, dopodiché prova a caricare questo che ti scrivo qui sotto e dimmi se (più o meno) era quello che intendevi

codice:

<!DOCTYPE HTML>
<html>


<head>




<title>simply page</title>






 
<style type="text/css">






html, body, div, p, span, h1, img, ul, li{
   margin:0;
   padding:0;
   border:0;
   font-size:100%;
   font:inherit;
   line-height:normal;
  


}


img{border:none; vertical-align:bottom;}


body{background:url(http://havingroove.altervista.org/images/stripebckground.gif)}


.left{float:left;}
.right{float:right;}
.clear{clear:both;}


#logo{position:relative;width:800px; margin:20px auto 10px auto;}


#logo div#social{position:absolute; right:0; bottom:15px;}


#social img{width:50px;height:50px}


#wrap{width:800px; margin:0 auto; background:#B2B2B2; border:2px solid #FF6600;}


ul#menu{list-style:none; padding-left:1px; height:56px;}


ul#menu li{float:left; margin:1px; width:131px; height:56px;}


ul#menu li a{display:block;width:131px;padding:22px 0;background:#718488;color:#FFFFFF;text-decoration:none; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;}
ul#menu li a:hover{padding:22px 0;background:#FFFFFF;color:#000000;text-decoration:none; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;}


/*            IMMAGINE CON CAPTION    */


#centrale{


    
    width:800px;


    margin:0 auto;
    overflow:hidden;
    
}


#left {
    float: left;
    width: 50%;
}


.clear{


clear:both;
}


.colonna {
    float: left;
    width: 33%;
    position: relative;
    
    
    
}




.colonna a img{
width:100%;
max-width:100%;    
}


#dex {
width:397px;


}


#centrale dex  img{


margin-right:3px;


}




.caption {
    display: inline-block;
    position: relative;
    margin: 10px 3px 3px 2px;
}


.caption img {
    display: block;
    width:100%;
    max-width:100%;
}


.caption1 {
    overflow: hidden;
    background: #000;
}


.caption1 img {
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}


.caption1:hover img {
    opacity: 0.5;
}


.caption1::after,
.caption1::before {
    
    position: absolute;
    width: 100%;
    height: 50%;
    color: #000;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
    -moz-transition: -moz-transform 0.3s ease-in-out; 
    transition: transform 0.3s ease-in-out; 
}


.caption1::after {


    content: attr(data-title);
    top: 0;
    background: #ccc;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 150;
    padding: 10px;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    text-align:left;
    
}


.caption1::before {
    
    width:95%;
    content: attr(data-description);
    top: 50%;
    background: #666;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding:21px 10px 0 10px;
    text-align:left;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    color:#fff;
}


.caption1:hover::after,
.caption1:hover::before {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
}










#main{margin-top:1px;background:url(http://havingroove.altervista.org/images/backmain.jpg) repeat-y;}
#sx{position:relative;width:377px; padding:10px;}
#sx p{padding:10px; color:#000000; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
#sx span{position:absolute; margin-left:271px; margin-top:10px; background:#849E5F; color:#FFFFFF; padding:5px 10px; font-family:Arial;font-size:14px;font-weight:bold; border-radius:3px;}
#main dx img{ width:395px}
#dx{width:397px; margin-left:1px;}
#dx p{padding:10px; color:#000000; text-align:justify; font-family:Arial, Helvetica, sans-serif;font-size:14px;}


#footer{width:780px; height:20px; background:#718488; margin:5px auto; padding:10px; border:2px solid #FF6600; text-align:center;}




</style>
  
</head>


<body>


      <div id="logo"> <!-- contenitore logo-->
      
           <img src="http://havingroove.altervista.org/images/bshampo.gif">
           
            <div id="social"> <!-- inzio contenitore puls social-->
            
                 <a href="#"><img src="http://havingroove.altervista.org/images/social1.gif"></a>
                 <a href="#"><img src="http://havingroove.altervista.org/images/social2.gif"></a>
                 <a href="#"><img src="http://havingroove.altervista.org/images/social3.gif"></a>
                 <a href="#"><img src="http://havingroove.altervista.org/images/social4.gif"></a>
                 <a href="#"><img src="http://havingroove.altervista.org/images/social5.gif"></a>
                 
            </div> <!--fine pulse social-->
            
      </div> <!--fine cont logo-->
      
      <div id="wrap"> <!--inizio contenitore-->
      
            <ul id="menu">
                         <li><a href="index.html">HOME</a></li>
                         <li><a href="#">ARTIST</a></li>
                         <li><a href="#">NTW</a></li>
                         <li><a href="#">WORK</a></li>
                         <li><a href="#">MEDIA</a></li>
                         <li><a href="#">CONTACT</a></li>
            </ul>
            
        <div id="centrale"> <!--inizio contenitore foto-->


<div id="left">


    <div class="colonna">
        <a class="caption caption1" href="#" data-title="" data-description="design by FUNORAMA "><img src="http://havingroove.altervista.org/images/art1.jpg"></a>
    </div>
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by MONSTERS"><img src="http://havingroove.altervista.org/images/art2.jpg"></a>
    </div>
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by The Fableists"><img src="http://havingroove.altervista.org/images/art3.jpg"></a>
    </div> <br class="clear"> <!--break riga immagini-->
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by CR Italia"><img src="http://havingroove.altervista.org/images/art4.jpg"></a>
    </div>
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by DJinn "><img src="http://havingroove.altervista.org/images/art5.jpg"></a>
    </div>
     <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by Knack"><img src="http://havingroove.altervista.org/images/art6.jpg">
    </a>
     </div><br class="clear">
     <div class="colonna"> <!--break seconda riga immagini-->
    <a class="caption caption1" href="#" data-title="" data-description="design by Knack"><img src="http://havingroove.altervista.org/images/art7.jpg">
    </a>
     </div>
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by Knack"><img src="http://havingroove.altervista.org/images/art8.jpg">
    </a>
     </div>
    <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design Shark"><img src="http://havingroove.altervista.org/images/art9.jpg">
    </a>
     </div><br class="clear">
        <div class="colonna">
    <a class="caption caption1" href="#" data-title="" data-description="design by Knack"><img src="http://havingroove.altervista.org/images/art10.jpg">
    </a>
     </div>


 </div><!--fine div left-->
    
    <div id="dex" class="right">


    <img src="http://havingroove.altervista.org/images/bgart.gif">
    </div>




 
</div> <!--fine contenitore foto art-->
            
            <div id="main"> <!--inizio main due colonne-->
            
                  <div id="sx" class="left">
                  <h1>My Site</h1>
                  <p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato                     il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e                     li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio                     alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione                     dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da                     software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
                  
                     <span>CONTINUA</span>
                  
                  </div>
                  
                  <div id="dx" class="right">
                     <img src="http://havingroove.altervista.org/images/hip.jpg">
                     
                     <p>Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili Letraset</p>
                     
                  
                  </div>
                    
                      <div class="clear"></div>
                    
            </div> <!--fine main due colonne-->
              
              
              
      </div> <!--fine contenitore-->
      
      <div id="footer"> <!--footer di pagina-->
      
           <p>Copyright blackshampo - 2015</p>
      
      </div> <!-- fine footer di pagina-->
      
      


 </body>


</html>

In pratica ho preso la tua pagina e ho creato un div chiamato #left che contiene la tua gallery e se ne sta a sinistra poi ho ridimensionato la gallery in modo che le immagini finissero a metà pagina (in larghezza).

**killumix** · 30-01-2015, 12:49

Ciao Grazie per l'interessamento , in effetti la suddivisione che hai creato è molto precisa. Ora per quanto riguarda l'immagine a destra degli schermi tv in bianco e nero:" nel mio progetto deve stare allineata in basso a 1 px sil riquadro arancione a 3px dal margine destro del bordo, in quanto man mano che aggiungo le miniature di gallery mi si allunga la pagina ma l'immagine del div #dex resta sempre li

**Fandango Visual** · 30-01-2015, 14:51

Prova a dare questo stile nel css e fammi sapere se ho capito bene quello che vorresti

codice:

#centrale{
   
    width:800px;
    position: relative;
    margin:0 auto;
    overflow:hidden;
    
}
#dex {
width:397px;
  position: absolute;
  height: 100%;
  right: 0;
}


#centrale #dex img{
position: absolute;
right: 3px;
bottom: 1px;
}

**killumix** · 30-01-2015, 20:13

Va alla Grande! Ho uplodato la pagina,sei stato di grande aiuto grazie mille.

**Fandango Visual** · 31-01-2015, 22:38

Figurati, felice di esserti stato utile!

Discussione: margin-right immagine che non si allinea

Strumenti discussione

Ricerca discussione

Visualizza

margin-right immagine che non si allinea

Permessi di invio