0

私のウェブサイトは、固定サイドバーとギャラリーを含むラップで構成されています。ギャラリーはラップ内で正常に中央に配置されていますが、私の問題は、 text-align:center プロパティが写真にも適用されることです

2枚目を投稿するには評判ポイントが足りませんが、基本的に5枚目は1枚目の下に載せたいと思います。

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%;
   }
}

ご協力いただきありがとうございます。

4

5 に答える 5

0

画像を必要なレイアウトに強制するために、div を使用する代わりにテーブルを作成できます。次に、 text-align: center; について心配する必要はありません。あなたのコンテンツブロックで。

于 2013-09-02T15:09:34.643 に答える