0

ホームページの特定のデザインを雑誌の表紙に表示されているものと一致させたいクライアントがいます。カバーの基本的な階段のデザインは決して変更されませんが、画像が変更されることがあります。1枚の大きな画像を使わずにこのフォーマットをカバーする方法を考案することはできませんでした。

これがフィドルです：http：//jsfiddle.net/z6ghY/

注：このフィドルの外観は、クライアントがどのように表示されるかを示しています。私の問題は、時々変更しなければならない1つの大きな画像を使用することです。これらの3つの画像を分離すると、はるかに簡単になります。

誰かが私がこれを達成できる最善の方法を知っていますか？画像はHTMLまたはCSSを介して配置できますが、どちらの方法でも問題ありませんが、SEOのメリットのためにHTMLで画像を表示すると便利です。

フィドルがここに画像を表示しない場合は、ここにあります。http://i.imgur.com/6s2i9L7.png

HTML：

<h2>Innovative Engineering Solutions in Material Handling</h2>

<div class="home-container">
<div class="home-content"><p>Experience the impact that Lauyans &amp; Company can make on your business success.  Through innovative engineering solutions in material handling, Lauyans will take responsibility for the planning, execution and acceptance of your project.</p>

<!--h2>Lauyans... why choose anyone else?</h2-->


<h2 style="margin: 80px 0 0 30px;">Lauyans...<br />  why choose<br />  anyone else?</h2>


</div><!-- END HOME CONTENT -->

</div><!-- END HOME CONTAINER -->

<div class="home-container2">
<div class="home-planning">
<h3>Planning</h3>
</div>
<div class="home-execution">
<h3>Execution</h3>
</div>
<div class="home-acceptance">
<h3>Acceptance</h3>
</div>
</div>

CSS：

.home-container { width: 690px; height: 459px; background: url('/wp-content/uploads/2013/01/home-image.png') 50% 100% no-repeat; }
.home-container2 { width: 690px; }
.home-content { width: 430px; height: 429px; padding: 15px; }
.home-content p { padding: 0; margin: 0; }
.home-content h2 { padding-top: 10px; margin: 0; }
.home-container2 h3 { padding-top: 0px; margin: 0; text-align: center; }
.home-planning { width: 230px; float: left; }
.home-execution { width: 230px; float: left; }
.home-acceptance { width: 230px; float: left; }
4

2 に答える 2

1

私はあなたが目指している「ユニークな」レイアウトを考慮して絶対的なポジショニングルートを取ります：

http://jsfiddle.net/z6ghY/1/

私はすべてを作り直しました（どこかから取得しなければならなかった画像を含む）：

HTML

<div class="home_con">

    <h2 class="pge_title">Innovative Kitten Solutions</h2>

    <div class="home_step">
        <h2 class="step-title">Lauyans...<br />  why choose<br />  anyone else?</h2>

        <p>
            Experience the impact that Kittens can make on your business success through
            purring.
        </p>   

        <img class="img1" src="http://www.vivapets.com/img/album/52/19052_white_persian_kittens_for_adoption_thb.jpg" />

        <img class="img2" src="http://www.saudivets.com/images/Vpic20.jpg" />   

        <img class="img3" src="http://fc04.deviantart.net/fs70/f/2011/167/2/8/kitten_tracks_banner_100x300_by_xxjessie_kittehxx-d3j2h51.png" />

    </div>

    <div class="img_text">
        <div class="img_text_ele">Planning</div>
        <div class="img_text_ele">Execution</div>
        <div class="img_text_ele">Acceptance</div>
    </div> 

</div>

CSS

.home_con h2.pge_title { font-weight:bold; font-size:1.125em; }

.home_step { width:300px; height:300px; position:relative; }
.home_step h2.step-title { position:absolute; top:110px; left:10px; }
.home_step p { width:200px; position:absolute; top:10px; left:10px; }
.home_step img { position:absolute; bottom:0px; }
.home_step .img1 { left;0px; }
.home_step .img2 { left:100px; }
.home_step .img3 { left:200px; }

.home_con .img_text { width:300px; overflow:hidden; }
.home_con .img_text_ele { width:100px; float:left; text-align:center; }
于 2013-02-07T17:10:06.667 に答える
0

この方法では、画像を少し切り刻む必要がありますが、それがクールであれば機能します。

http://jsfiddle.net/5qfLj/1/

HTML：

<div class="container">
    <div class="row">
        <div class="span2">1</div>
        <div class="span1" style="background:#ccc;">2</div>
    </div>
    <div class="row">
        <div class="span1">3</div>
        <div class="span1"  style="background:#666;">4</div>
        <div class="span1"  style="background:#ccc;"></div>
    </div>
    <div class="row">
        <div class="span1" style="background:#999;">5</div>
        <div class="span1" style="background:#666;">6</div>
        <div class="span1" style="background:#ccc;">7</div>
    </div>
</div>

CSS：

.container {
    width:600px;
}

.row {
    overflow: hidden;
}

.span1 {
    float:left;
    width:200px;
    height:200px;
}

.span2 {
    width:400px;
    height:200px;
    float:left;
}
于 2013-02-07T17:23:24.067 に答える