イメージを配置する

Question

私はこのhtml CSSプログラミングの初心者です。私は履歴書を表示する簡単なサイトを開発しています。私は私の主なコンテンツの右側に画像を配置したい。私は最終的に私の名前をクリックすることができ、Jqueryを使用してスライドさせるためにそこに配置したいのですが、メインのコンテンツの右に約10ピクセルを置くことができないようです。ここに私のサイトがあります。

http://students.cs.byu.edu/~drbones/sean_resume/resume.html

そしてここでは、メインのコンテンツや画像

body 
    { 
     background-image:url('images/darkgreen.png'); 
     font-family: verdana; 
    } 
h1 
    { 
     text-align:center; 
    } 
.main 
    { 
     padding: 20px 20px 20px 20px; 
    } 
.page 
    { 
     margin-left:auto; 
     margin-right:auto; 
     width:800px; 
     border: solid black; 
     padding: 10px 10px 10px 10px; 
     background-color:#E8E8E8; 
     border-radius: 15px; 
     -moz-border-radius: 15px; 
     -moz-box-shadow: 0 0 30px 5px #999; 
     -webkit-box-shadow: 0 0 30px 5px #999; 
     overflow: hidden; 
    } 
.profile_image 
    { 
     float:right; 
     margin-top: 100px; 
    } 

PSのためのCSSだ - 履歴書の内容上の任意の有用なヒントをそこにすべてのあなたのCS雇用者のためにあまりにも役立つだろう;）

Answer 1

ようこそ、sean.daryl！あなたのpage div内のあなたのprofile_image divを置くことによって開始することができます

、このようにしてそう

<hr> 

<div class="profile_image"> 
    <img src="images/sean_daryl_crop.jpg"> 
</div> 

<!--EDUCATION--> 

のように、画像は丸みを帯びた箱の中に含まれています。 （これはあなたが望むものであると仮定。）

Answer 2

.profile_image { 
    float: right; 
    margin-right: 10px; 

使用放火犯のモジラ

Answer 3

これは、あなたが望んでいたように動作するはずです：

.main { 
    margin: 0 auto; 
    padding: 20px; 
    width: 1040px; 
    overflow: hidden; // Or use clearfix 
} 

.profile_image { 
    border: 2px solid black; 
    box-shadow: 0 0 30px 5px #999999; 
    float: right; 
    margin-left: 10px; 
    margin-top: 100px; 
    width: 200px; 
} 

.page { 
    background-color: #E8E8E8; 
    border: medium solid black; 
    border-radius: 15px 15px 15px 15px; 
    box-shadow: 0 0 30px 5px #999999; 
    float: right; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
    padding: 10px; 
    width: 800px; 
} 

Answer 4

これは.mainの幅を指定する作品.pageと.profile_imageを隣り合わせに配置します。

.main 
    { 
        padding: 20px 20px 20px 20px; 
     margin: 0 auto; 
        width:820px; /* CHANGE THIS just + your image size */ 
    } 
.page 
    { 
     width:800px; 
     float:left; /* this put the div at the start of the .main */ 
        border: solid black; 
        padding: 10px 10px 10px 10px; 
        background-color:#E8E8E8; 
        border-radius: 15px; 
        -moz-border-radius: 15px; 
        -moz-box-shadow: 0 0 30px 5px #999; 
        -webkit-box-shadow: 0 0 30px 5px #999; 
        overflow: hidden; 
    } 
.profile_image 
    { 
        float:right; /* this put the div at the right of the .page */ 
     width:200px /* CHANGE to the image width */ 
    }