2016-10-27 42 views
3

で私のバックグラウンドを移動カント私は、スタックオーバーフローの新しいよ、私はここで多くを学ぶ:)は、CSS

だから私はシンプルなフロントページを作成しようとしているだろうけど、突然、私は私の背景を移動することはできません希望をすることができますもうパディングで試してみましたが、解決できません。たぶんそれは私がちょうどコードで始まったからです、笑!だから、私がしたいことは次のようなものです:私はコンテナ>background-color: rgba(98, 97, 99, 0.25);を中央にもっと移動して、両側にも配置したいと思っています。何らかの理由でコードがここに正しく表示されませんが、私の場合はそれが表示されます。私がブートストラップを使っているからかもしれない。コンテナの幅を設定し、左右の余白

body html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-color: rgba(98, 97, 99, 0.25); 
 
    padding-top: 4%; 
 

 
} 
 

 

 
.wrap{ 
 
    width: 1090px; 
 

 
} 
 
video { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    z-index: -100; 
 
} 
 

 
.wowImg { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.venom { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.overwatch { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-right: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.sum41 { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-bottom: solid black 9px; 
 
    border-right: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.middle { 
 
    height: 510px; 
 
    width: 550px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.whileSheSleeps { 
 
    height: auto; 
 
    width: 540px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
} 
 

 
.monster { 
 
    height: 284px; 
 
    width: 250px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
} 
 

 
.css_awesome { 
 
    height: 284px; 
 
    width: 285px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <title>homepage</title> 
 
    <link href="index.css" rel="stylesheet"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
    <div class="row col-md-12 wrap"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
       <div class="wrap"> 
 

 

 
        <div class="row col-md-3 upperLeft"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="wowImg"img"> 
 
           <img class="venom" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="col-md-6 Middle"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="middle" src "img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-3 upperRight"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="overwatch" src="img"> 
 
           <img class="sum41" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-6 bottomLeft"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="whileSheSleeps" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-3 bottomMid"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="monster" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="row col-md-3 bottomRight"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="css_awesome" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

+0

多くのおかげでみんなの両方を追加することができます! – akenixx

答えて

0

:自動;

.container { 
    background-color: rgba(98, 97, 99, 0.25); 
    padding-top: 4%; 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 

} 
0

コンテナフロートを追加します。CSSで左またはあなたがあなたの助けのための明確な

body html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-color: rgba(98, 97, 99, 0.25); 
 
    padding-top: 4%; 
 
    float:left; 
 
} 
 

 

 
.wrap{ 
 
    width: 1090px; 
 

 
} 
 
video { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    z-index: -100; 
 
} 
 

 
.wowImg { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.venom { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.overwatch { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-right: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.sum41 { 
 
    height: 255px; 
 
    width: 255px; 
 
    border-bottom: solid black 9px; 
 
    border-right: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.middle { 
 
    height: 510px; 
 
    width: 550px; 
 
    border-top: solid black 9px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    float: left; 
 
} 
 

 
.whileSheSleeps { 
 
    height: auto; 
 
    width: 540px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
} 
 

 
.monster { 
 
    height: 284px; 
 
    width: 250px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
} 
 

 
.css_awesome { 
 
    height: 284px; 
 
    width: 285px; 
 
    border-bottom: solid black 9px; 
 
    border-left: solid black 9px; 
 
    border-right: solid black 9px; 
 
    float: left; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <title>homepage</title> 
 
    <link href="index.css" rel="stylesheet"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
    <div class="row col-md-12 wrap"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
       <div class="wrap"> 
 

 

 
        <div class="row col-md-3 upperLeft"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="wowImg"img"> 
 
           <img class="venom" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="col-md-6 Middle"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="middle" src "img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-3 upperRight"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="overwatch" src="img"> 
 
           <img class="sum41" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-6 bottomLeft"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="whileSheSleeps" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="row col-md-3 bottomMid"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="monster" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="row col-md-3 bottomRight"> 
 
         <div class="row"> 
 
          <div class="col-md-12"> 
 
           <img class="css_awesome" src="img"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

+1

偉大な私のために働いて –

1
.container { 
    background-color: rgba(98, 97, 99, 0.25); 
    padding-top: 4%; 
    width: 960px; 
    margin: 0 auto; 
} 
+0

私の画面が960ピクセル幅をサポートしていない場合はどうなりますか? – Mike

+0

'%'の 'em'のような相対単位を使用するか、またはメディアクエリを使用して複数の画面サイズの幅やこれを調整することができます。 –