cssでイメージを整列するには？

ホームページの左側に画像を配置したいと思います。私はhtmlでそれを行う方法を知っていますが、私はCSSクラスでそれを作成したいと思います。私はそれを修正するために何をする必要があるかわかりません。私は絵が欲しいところですcssでイメージを整列するには？

#picture{background-image:Nobullying.jpg; 
    width:40px; height:40px; 
    }

：

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="body.css"/> 
    </head> 
    <body> 
    <h1>Bully-Free Zone</h1> 
    <h2>"Online harassment has an off-line impact"</h2> 
    <!--Menu-->I 
    <div id="nav"> 
    <a href="mainpage.htm" class="nav-link">HOME</a> 
    <a href="page1.htm" class="nav-link">ASSISTANCE</a> 
    <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
    <a href="page3.htm" class="nav-link">REPORT</a> 
    </div> 
    <div id="picture"></div> 
    <!--Copyright--> 
    <div id="center"> 
    <td> Copyright © 2012 Bully-FreeZone.com</td> 
    </div> 

    </body> 
    </html>

CSSクラス：私はしたい画像がNobullying.jpg HTMLと呼ばれています。（レッドボックス） http://imgur.com/Ef2Au

出典

2012-04-17 Backtrack

#picture { 
background-image:url('no-bullying.jpg'); 
height:100px; 
width:50px; 
position: absolute; 
bottom:10px; 
left:10px; 
}

出典

2012-04-17 15:01:02

を使用することができ、私は私のHTMLを持っているだろうか – Backtrack

は、なぜあなたは '' タグやCSS '背景image'の両方を使用していますか？冗長性だけでなく、画像がパディングや配置のために整列しないとバグが発生する可能性があります。また、@Backtrackは、HTMLではなく、CSSでイメージをやりたがっていると言いました。 – Moses

#picture{ 
    background-image:url(Nobullying.jpg); 
    width:40px; height:40px; 
    float:left; 
    }

私はクラスを、ここでIDを使用していません。画像はID = "画像"で識別する必要があります。

CSSでは、floatを使用するとややこしいことがあります。すでにhtmlでこれを行うことができれば、単にhtmlを使用してください。それ以外の場合は、いくつか余分なことを学ばなければなりません。

答えは

出典

2012-04-17 15:02:45

を更新しているので、のようなあなたのCSSを調整します。

#picture{ 
    background-image:url('/path/to/Nobullying.jpg'); 
    width:40px; height:40px; 
    position: absolute; /* this removes it from document flow */ 
    left: 5px; /* this places image 5px away from the leftmost area of the container */ 
       /* you can choose from left/right and top/bottom for positioning */ 
       /* play around with those and you should get a hang of how it works */ 
}

は覚えている：あなたはCSSの背景画像を使用する場合、パスは、CSSファイル（ないHTMLの観点からですcssが含まれているファイル）。

ディレクトリ構造が

root 
--> css -> styles.css 
--> images -> Nobullying.jpg 
--> index.html

のようなものだったのであればその後、あなたのパスがurl('../images/Nobullying.jpg')や `URL（ '/画像/ Nobullying.jpg'）である可能性があります。

出典

2012-04-17 15:03:33 Moses

両方を使用すると機能しないので、下と上の両方を使用できますか？ちょうど上にあります – Backtrack

@Backtrackいいえ、下と上を組み合わせることはできません。左と右を組み合わせることもできません。しかし、あなたはleft + bottomまたはright + topを行うことができます。ここでは、CSSの配置の原則を理解するのに良い記事です：http://www.alistapart.com/articles/css-positioning-101/ – Moses

また、fixedポジショニングを使用すると、スクロールしなくてもその位置に保持できます。

#picture{ 
    background: url(Nobullying.jpg) no-repeat; 
    width:40px; 
    height:40px; 

    position: fixed; 
    bottom:10px; 
    left:10px;

}

も背景画像のURL（）と無反復を使用します。

出典

2012-04-17 15:04:50 Greg

downvoteとは何ですか？ – Greg

'background' [略語]（http://www.dustindiaz.com/css-shorthand/）を使わない限り、' no-repeat'を 'background-repeat'ルールと別に使う必要があります。 –

更新された回答。次回はあなたのコメントを追加します。 – Greg

background-imageルールに構文エラーがあります。それに加えて、あなたはまたposition:absolute要素を配置する

#picture{ 
    background-image: url(Nobullying.jpg); 
    width:40px; 
    height:40px; 
    position:absolute; 
    left:10px; 
    bottom:10px; 
}

出典

2012-04-17 15:08:44

cssでイメージを整列するには？

答えて

関連する問題