0

要素を画像の下部に配置するために絶対配置を使用しました。Mac では見栄えがしますが、両方のコンピューターで同じブラウザーを使用している場合でも、PC では配置が高すぎます。HTML要素を絶対的に配置する場合、パーセンテージ、ピクセル、em、またはインチを使用するのが最適ですか? 私は Web プログラミングに比較的慣れていないので、一般的なアドバイスを歓迎します。ありがとう！

HTML:

<div class = "article">

    <div class="title" onclick = "$('.aboutMe').fadeIn(500)">
            <p class = "slide"> ABOUT ME </p>
    </div> 

    <header>
        <h1> RAMON MIGUEL "RMI" FLORES </h1>
        <h2> Welcome to my personal website! </h2>
    </header>

    <img src = "tahoe2.jpg" alt = "Dorm Trip to Tahoe" title "Lake Tahoe" id = "tahoe">

    <div class = "subImages">
        <img src = "profile.jpeg" alt = "Profile Picture" id = "profile" onclick = "$('.aboutMe').fadeIn(500)"> 

        <div class="title" id = "socialTitle" onclick = "$('.socialMedia').fadeIn(500)">
            <p class = "slide"> SOCIAL MEDIA </p>
        </div> 
        <img src = "basketball.jpeg" alt = "Me Dunking" id = "basketball" onclick = "$('.socialMedia').fadeIn(500)">

        <div class="title" id = "contactTitle" onclick = "$('.contactMe').fadeIn(500)">
            <p class = "slide"> CONTACT ME </p>
        </div> 
        <img src = "contact.jpeg" alt = "Contact Me" id = "contact" onclick = "$('.contactMe').fadeIn(500)">
    </div>

    <footer>
        <p> &copy Ramon Flores 2012 </p>
    </footer>

</div>

CSS:

    body {
        background-color: #EDEDF3;
    }

    .article {
        border: 1px solid rgba(255, 204, 204, 0.25);
        background-color: #FFF;
        width: 80%;
        margin: 20px auto;
        padding: 0 20px;
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 25px;
        -moz-border-radius: 25px;
    }

    h1 {
        font-size: 65px;
        font-family: 'Quicksand', sans-serif;
        font-weight: 100;
        text-align: center;
        color: #333;
        text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
        letter-spacing: 0;
        margin-bottom: 0;
    }

    h2 {
        font-size: 20px;
        font-family: 'Raleway', 'Quicksand', sans-serif;
        font-weight: lighter;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        text-align: center;
        color: black;
        letter-spacing: 0;
    }

    #tahoe {
        width: 98.7%;
    }

    .article img {
        border: 5px solid #EDEDF3;
    }

    #profile, #basketball, #contact {
        width: 32%;
        height: 4.7in;
        border-radius: 25px;
        -moz-border-radius: 15px;
    }

    .subImages {
        display: inline;
    }

    footer {
        font-size: 15px;
        color: #B28F8F;
        text-align: center;
        font-family: 'Raleway', sans-serif;
    }

    footer p:hover { 
        color: black; 
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;   
    }

    .title {
        background-color: #66CCFF;
        width: 26%; 
        color: white;
        font-family: 'Quicksand', sans-serif;
        text-align: center;
        font-size: 30px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        -moz-border-bottom-right-radius: 20px;
        -moz-border-bottom-left-radius: 20px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 1127px;
    }

    #socialTitle { left: 36.9%; }

    #contactTitle { left: 63.3%; }

コードが多い場合は申し訳ありません。私はかなり新しいので、問題がどこにあるのかわからないので、たくさん投稿しました。「.subImages」クラスの3つの画像のそれぞれの下部に「.title」要素を配置したいと思います。これは、Mac のすべてのブラウザで正常に機能しますが、PC のすべてのブラウザで「.title」要素が高すぎます。手伝ってくれてどうもありがとう！

4

1 に答える 1

0

ピクセルを使用するかインチを使用するかは問題ではありません。要素を一番下に配置したい場合は、bottom: 0;を使用します。

画像がコンテナ div 内にあるこのフィドルを参照してください。タイトルは、コンテナーの下部で画像の上に配置されます。色と半透明を使用したので、タイトルが実際に「画像」の上に配置されていることがわかります。

http://jsfiddle.net/GolezTrol/wp3Fd/

于 2012-09-11T20:46:24.010 に答える