Apply center position to the gallery but not to the pictures

StackOverflow https://stackoverflow.com/questions/18576121

Question

My website is composed of a fixed sidebar and a wrap which contains a gallery. The gallery is successfully centered within the wrap, but my problem is that the text-align:center property is also applied to the pictures

I haven't enough reputation points to post a second picture, but basically I would like the fifth picture to be under the first one.

HTML :

<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Jean Iturralde</title>
    <meta name="description" content="Portfolio de Jean Iturralde"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.backstretch("img/wooden.png");
        });
    </script>

</head>

<body>

<div id="sidebar">
    <header>
        <h1><a href="#">Jean Iturralde</a></h1>
            <ul>
                <li><a class="active" href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>
     </header>

    <div id="circle_pic">
        <div id="circle_pic_hover"><p>Jean<br />62 ans<br />Peintre<br /></p></div>
    </div>

    <section>
        <div class="sidebar_title"><img src="img/quotes.png" class="icon" /><h2>Bienvenue,</h2></div>
        <p class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae magna quam, commodo vulputate nulla. Mauris fringilla mi sapien, in semper turpis. Aliquam consequat magna nec magna egestas vitae aliquet turpis lacinia. Praesent commodo commodo scelerisque. Maecenas dui urna, egestas vel commodo quis, adipisci.</p>
    </section>

    <footer>
       <p>
        Jean Iturralde<br />
        Tous droits réservés<br />
        </p>
    </footer>

</div>

<div id="wrap">

<div id="content">
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_1.jpg">
            <div class="meta">
                <h2>Tableau 1<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_2.jpg">
            <div class="meta">
                <h2>Tableau 2<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_3.jpg">
            <div class="meta">
                <h2>Tableau 2<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_4.jpg">
            <div class="meta">
                <h2>Tableau 4<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_5.jpg">
            <div class="meta">
                <h2>Tableau 4<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
</div>

</div>

</body>

</html>

CSS : 

@font-face {
    font-family: 'museo_sans500';
    src: url('fonts/museo_sans_500-webfont.eot');
    src: url('fonts/museo_sans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museo_sans_500-webfont.woff') format('woff'),
         url('fonts/museo_sans_500-webfont.ttf') format('truetype'),
         url('fonts/museo_sans_500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    margin:0;
}

a{
    text-decoration:none;
}

#sidebar{
    position:fixed;
    left:0;
    height:100%;
    min-height:720px;
    background-color:white;
    padding:15px 30px 0 30px;
    width:260px;
    text-align:center;
}

header h1{
    margin:0 0 10px 0;
}

header h1 a{
    color:#303030;
    font-family: 'Lobster', cursive;
    font-size:40px;
    font-weight:normal;
    margin:0;
}

header ul{
    list-style:none;
    margin: 0 0 0 -25px;
}

header li a{
    float:left;
    font-family:'museo_sans500';
    font-size:15px;
    color:#afafaf;
    transition: all 500ms;
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    -ms-transition: all 500ms;
    border-top:solid 7px #ababab;
    padding:8px 8px 0 8px;
}

header li a:hover{
    color:black;
    border-top:solid 7px #303030;
}

header li a.active{
    color:black;
    border-top:solid 7px #303030;
}

#circle_pic{
    width:174px; height:174px;
    -webkit-border-radius: 87px; -moz-border-radius: 87px;
    background:url(img/profilepic.png) no-repeat;
    margin:70px 0 20px 0;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

#circle_pic_hover{
    background-color:rgba(0,0,0,0.5);
    width:auto; height:175px;
    margin-top:175px;
    overflow:hidden;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

#circle_pic_hover p{
    font-family: 'Open Sans', sans-serif;
    color:white;
    font-weight:400;
    font-size:16px;
    line-height:27px;
    margin-top:45px;

}


#circle_pic:hover #circle_pic_hover{
    margin-top:0;
}

section{
    margin-bottom:40px;
}

.sidebar_title{
    text-align:left;
}

.icon{
    margin-bottom:-2px;
    margin-right:10px;
    display:inline;
    height:30px;
}

#sidebar h2{
    display:inline;
    margin:0;
    font-size:29px;
    color:#d9d9d9;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
}

.main_text{
    font-family:'museo_sans500';
    color:#252525;
    margin-top:0;
    font-size:13px;
    text-align:justify;
    line-height:25px;
}

footer {
    width:260px;
    position:absolute;
    left:50%;
    bottom:5px;
    margin-left:-130px;
}

footer p{
    text-align:center;
    font-family:'museo_sans500';
    color:#959595;
    font-size:11px;
    margin-bottom:25px;
}

footer a{
    color:#353535;
}

#wrap{
    position:absolute;
    left:320px;
    top:30px;
    right:0;
}

#content{
    text-align:center;
    color:white;
}

/*******/

.box {
    position:relative;
    display:inline-block;
    width:24%;
    padding-bottom:31%;
}

.boxcontent {
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    overflow:hidden;
}

.boxcontent img{
    width:100%;
}

.boxcontent .meta{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom:-52px;
    background: #000;
    background: rgba(0, 0, 0, 0.7);
    color: #FFF;
    padding: 10px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    font-family:'museo_sans500';
}

.meta h2,h3{
    color:#b0b0b0;
    margin:0;
}

.meta h2{
    font-weight:bold;
    font-size:15px;
    margin-bottom:3px;
}

.meta h3{
    font-weight:normal;
    font-size:11px;
    font-style:italic;
}

.boxcontent:hover .meta{
    margin-bottom:0;
}

@media only screen and (max-width : 650px) {
   /* Smartphone view: 1 tile */

   .box {
      width: 76%;
      padding-bottom: 100%;
   }

   #sidebar{
    position:static;
    margin-top:0;
    width:100%;
    min-height:0;
    height:120px;
   }

   header{
    width:280px;
    margin:0 auto;
   }


   nav ul{
    margin:0 0 0 -15px;
   }

   #circle_pic, section, footer{
    display:none;
   }

   #wrap{
    position:static;
    margin-top:30px;
   }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 76%;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 1390px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 38%;
      padding-bottom: 50%;
   }
}

Thanks for your help.

Was it helpful?

Solution

I would change the way you are positioning #sidebar and #wrap to start with.

I would change the styles on #sidebar to be:

#sidebar {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    left: 0;
    min-height: 720px;
    padding: 15px 30px 0;
    position: fixed;
    text-align: center;
    width: 16%;
}

All I have done on this is removed the hard-coded width: 260px to make the design a little bit easier to work with and removed the redundant left: 0. If I was to continue refining the design I would change other declarations slightly but that is beyond the scope of the question.

Next, I would change the style of #wrap to be:

#wrap {
    float: right;
    margin-right: 1%;
    width: 78%;
}

And finally change the style of .box to be:

.box {
    display: inline-block;
    float: left;
    padding-bottom: 31%;
    position: relative;
    width: 25%;
}

Obviously you can play with the margins and widths to get the design looking exactly as you want but this should get you into a rough position.

OTHER TIPS

Try changing text:align: center to text-align:left for #content, unless this introduces a problem I cannot see (?)

Rather than aligning the images with a text-align, you can use float:left; instead. However, based one your current CSS/HTML, this moves the images too far to the left. What you can do instead, if change the way the entire list is being centered.

So:

#content {
    padding:0 12%;
    /* remove the text-align declaration */
}

.box {
    float:left;
    width:50%;
}

This would be a more flexible layout. Play with the values to get the sizes you want (the padding value, for example... this can be a % or em or px value here, because the .box is % based.)

Try using the last-child pseudo-class:

.box:last-child {
    float: left;
    left: 121px;
}

You could create a table in the place of using the divs in order to force the images into the layout you want. Then no need to worry about the text-align: center; in your content block.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top