CODEWITHSUNDEEP
htmlcssasp.net-mvc
Praneeth
Praneeth

Reputation: 2547

Center aligning list of images

alt text Can some CSS guru help me getting this layout.

What I have here is 

<div class="movieList">  
<div class="image" selected = true>  
 <img class="poster" src="image1" selected = true/>  
</div> 
 <div class="image">   
<img class="poster" src="image1"/>  
</div>  
<div class="image"> 
  <img class="poster" src="image2"/>
 </div> 
 .
 .

</div>

Thanks

Upvotes: 2

Views: 1230

Answers (3)

Eric Fortis
Eric Fortis

Reputation: 17350

See this http://www.jsfiddle.net/hKQcX/4/

$(function(){

    $('.movie').live('mouseover', function(){

    var $movie = $('.movie'); 
    $movie.css('z-index', 0);
    $movie.css('opacity', .50);
    $movie.css('width', '100px');
    $movie.css('height', '150px');
    $movie.css('margin-top', '0');

    var $this = $(this);
    $this.css('z-index', 100);
    $this.css('opacity', 1.00);
    $this.css('width', '120px');
    $this.css('height', '180px');
    $this.css('margin-top', '-15px');

    });

    var i=0;
    for (i;i<10;i++){
    if(i%2==0)
      $('#container').append('<div class=\"movie red \"></div>');
    else
      $('#container').append('<div class=\"movie green\"></div>')
     }
});

in your css

#container{
  margin-left: 50px;
  margin-top: 100px;
}

.movie{
  position: relative;
  float:left;
  width:100px;
  height: 150px;
  margin-left:-50px;
}

.red{
  background-color:red;
  opacity: .5;
}

.green{
  background-color:green;
  opacity: .5;
}

Upvotes: 1

Ben
Ben

Reputation: 57217

Start with:

.cover {
  float:left;
  margin-left:-50px;
}

and go from there.

Example: http://jsfiddle.net/steve/T2qHR/ (centered, pure CSS, enlarging effect)

Upvotes: 6

Art
Art

Reputation: 5924

If you want to display them than Steve has the right answer, if you want to align that container in the center then:

.cover {
    margin: 0 auto;
    width:600px;
}

Upvotes: 0

Related Questions