-4

つまり、バナー、ボタン、写真 (すべての ID)...

http://jerry.pancakeapps.com/hello.html

/*Basic reset*/
* {margin: 0; padding: 0;}

/* Started June 11, 2013 */

body {
    background: #B1E3E2;
    box-shadow: inset 0 0 100px 20px #80D0CF;
    text-align: center;
}

/* Put social networking icons beside name*/

table tr td {
    padding-right: 1px;
}

#social {
    position: absolute;
    right: 325px;
    top: 157px;
}

#social tr td {
    padding-right: 30px;
}

/* Added link styling June 13, 2013 */

a:link {
    text-decoration: none;
    font-family: Helvetica;
}

a:hover {
    color: white;
}

これらの写真はすべてめちゃくちゃです (IE、Firefox などで表示できます)。

#piano {
    position: absolute;
    right: 516px;
    top: 473px;
    border-radius: 50px;
}

#video {
    position: absolute;
    right: 300px;
    top: 800px;
}

#waterloo {
    position: absolute;
    right: 110px;
    top: 473px;
}

ボタンもレイアウト的にめちゃくちゃです...

#bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 59px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 17px;
    display: block;
}

#bluebutton1:hover {
    top: 300px;
}

#orangebutton {
    position: absolute;
    top: 327px;
    left: 877px;
    height: 47px;
    width: 120px;
    border: 5px dashed #FF6347;
    background-color: #FFA500;
    border-radius: 40px;
    padding-top: 23px;
    display: block;
}   

#orangebutton:hover {
    cursor: pointer;
    top: 300px;
}

#bluebutton2 {
    position: absolute;
    top: 327px;
    left: 1111px;
    height: 47px;
    width: 120px;
    border: 2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 23px;
    display: block;
}

#bluebutton2:hover {
    cursor: pointer;
    top: 300px;
}

そしてヘッダーもめちゃくちゃです。

h1 {
    display: inline-block;
    font-size: 40px;
    line-height: 80px;
    color: #8699A0;
    text-shadow: 0 0 1px #758890;
    margin: 120px 0;
    font-family: gothic;
    outline: none;
    padding: 30px 30px;
    position: relative;
    padding-right: 500px;
box-shadow: 
        0 0 30px 0 rgba(0, 0, 0, 0.1), 
        0 36px 0 -18px #B1E3E2;
}

h1:before {
    content: '';
    position: absolute;
    top: 18px;
    left: -24.5%;
    z-index: -1;
    width: 149.2%;
    height: 140px;
    border: 70px solid rgba(0, 0, 0, 0);
    border-left: 70px solid #B1E3E2;
    border-right: 70px solid #B1E3E2;
}

h1:after {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%; left: 0;
    z-index: -1;
    border-top: 18px solid #99acb2;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
}

h1, h1:before {
    background-image: 
        linear-gradient(
            transparent 8%, 
            rgba(0, 0, 0, 0.1) 8%, 
            rgba(0, 0, 0, 0.1) 14%, 
            transparent 14%, 
        transparent 86%, 
            rgba(0, 0, 0, 0.1) 86%, 
            rgba(0, 0, 0, 0.1) 92%, 
            transparent 92%
        ), 
        linear-gradient(
            rgba(255, 255, 255, 0.75), 
            rgba(255, 255, 255, 0) 
        ), 
            linear-gradient(
            45deg, 
            transparent 40%, 
            rgba(0, 0, 0, 0.1) 40%, 
            rgba(0, 0, 0, 0.1) 60%, 
            transparent 60%
        ), 
        linear-gradient(white, white); 
    background-size: 
        cover, /*borders*/
        cover, /*white gloss*/
        4px 4px, /*thin stripes*/
        cover; /*base white*/
}

h1, h1:before, h1:after {
    box-sizing: border-box;
    background-origin: border-box;
}

異なるブラウザと相互互換性があるようにレイアウトを指定する別の方法を教えてください。

4

2 に答える 2

2

これはすべてのブラウザで壊れています。あなたが達成したいことを見るのは難しすぎます。これを行うには

  • ページの各要素を表すために、紙の上にボックスを描きます。これはワイヤーフレームと呼ばれるプロセスです。建築家の計画のようなものです。また、マップがコードで迷子になるのを防ぐのに役立つようにも機能します。
  • 背景色付きのフローティング div を使用すると、紙に描いたボックス レイアウトを再現できます。
  • すべてのブラウザでテストする
  • ボックスが好きなグリッドにレイアウトされたら、それらを画像やリンクに置き換えます。

それ以外の場合は、いくつかの画像を追加します。すべてのブラウザでテストしてください。リンクを追加します。すべてのブラウザで再度テストします。次に、ビデオ フレームを追加します。アイデアは、小さなステップを踏んでコードを機能させ、次に進むことです。そうすれば、最後の数行のコードだけでエラーを探すことができます。

于 2013-08-27T03:50:08.080 に答える