0

これらの css ブロックに関する新しい質問に戻ってきました...

私が取り組んでいるこのウェブサイトのデザインがあり、これらの画像を一種のテキスト ブロックとして使用しています... (ここに例を示します...) http://brentatech.net/WebDesign/index.html (ズームしてみてくださいアウト）

あと、ズームアウトするとブロックが動き回る…どうしようかな。下の画像のままでいいですか？

また、オンラインで見ると、上部の青いストリップがレイアウト全体に広がっていないことに気付きました（ローカルではありますか？）

HTML/CSSが必要な場合

HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>BrentATech- Freelance Graphics Artist</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" href="reset.css"  />

<link rel="stylesheet" type='text/css' href="fonts.css" />


</head>

<body>
<div id="site-container">
<!-- We Will start with the Container Div -->
<div class="container">

    <div id="header"><!-- Header -->

        <div id="nav"><!-- Nav -->

            <ul>

            <li class="active">
                <a href="#">Home</a>
            </li>

            <li>
                <a href="portfolio.html">Portfolio</a>
            </li>

            <li>
                <a href="blog.html">Blog</a>
            </li>

            <li>
                <a href="contact.html">Contact</a>
            </li>

        </div>

        <div id="logo"><!-- Logo -->
            <a href="#"><img src="images/logo.png" /></a>
        </div>


    </div>

    <div id="mainproject"> <!-- Main Slider (Images) -->

        <div id="mainimage">
            <a href="concept.png"><img src="images/slider/image1.png" alt="noimage"  /></a>
         </div>

         <div id="topleftimage">
            <a href="concept.png"><img src="images/slider/image_car.png" alt="noimage" /></a>
         </div>

         <div id="bottomleftimage">
            <a href="concept.png"><img src="images/slider/image_fire.png" alt="noimage"  /></a>
         </div>

         <div id="toprightimage">
            <a href="concept.png"><img src="images/slider/image_bike.png" alt="noimage" /></a>
         </div>

         <div id="bottomrightimage">
            <a href="concept.png"><img src="images/slider/image_plane.png" alt="noimage" /></a>
         </div>


    </div>
    <br />

    <div id="mostrecent"> <!-- My Most recent finished designs-->

        <div id="leftimage">
        <img src="images/left_logo.png" alt="noimage" class="over"  />
            <a href="#"><img src="images/leftimage.png" alt="notext" class="under" />
         </a>
        </div>

        <div id="middleimage">
        <img src="images/middle_logo.png" alt="noimage" class="over1"  />
            <a href="#"> <img src="images/middleimage.png" alt="notext" class="under" />
            </a>
           </div>

        <div id="rightimage">
            <img src="images/right_logo.png" alt="noimage" class="over2"  />
            <a href="#"><img src="images/rightimage.png" alt="notext"  />
            </a>

          </div>
        <div id="textarea">


                <img src="images/lefttext.png" alt="noimage" />
                <h2><span class="lefttop">Rubiks Simple<br /></h2>
                </span>
                <h4><span class="leftbottom">Web Design</span></h4>
             </div>

        <div id="textarea1">
                <img src="images/textarea1.png" alt="noimage" />
                <h2><span class="topright">Relax<br /></h2>
                </span>
                <h4><span class="topbottom">Concept</span></h4>
             </div>

        <div id="textarea2">

                <img src="images/textarea2.png" alt="noimage" />
                <h2><span class="topmiddle">We are Triton<br /></h2>
                </span>
                <h4><span class="bottommiddle">Logo Design</span></h4>
             </div>

    </div>

    <div id="footer">

    </div>   

    </div>

</div>
</h4>

</div>

</body>
</html>


CSS`/* CSS Main Style Sheet */
@media screen and (min-width: 480px) {
/* Set the body elements */
body {
    background-color: #1c1f26;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #bababa;
    background-image: url(images/bg.png);
    background-repeat: repeat-x, repeat-y;
    margin: 0; padding: 0;
}

/* ----------------------------------------- */


/* Container Div */
#site-container {

    margin: auto;
}

/* ----------------------- */

/* Header & Nav Bar */
#header {
    background-color: #2c303b;
    /*background-image: url(image/header.png);*/
    background-repeat: repeat-x;
    height: 135px;
}

#logo {
    float: left;
    margin-top: 55px;
    margin-left: 250px;
}

#nav {
    float: right;
    margin-top: 55px;
    margin-right: 250px;
}

#nav ul {
    list-style: none;
    margin: 0;
}

#nav li {
    display: inline-block;
    margin: 0;
    padding-right: 40px;
}


#nav a {
        display: block;
        line-height: 0px;
        letter-spacing: 1px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 300;
        color: #838383;
}

#nav .active a
    {
        background: #01A9DC;
        color: #FFF;
    }

#nav a:hover
    {
        background-color: #3C9;
        text-decoration: none;
        color: #FFF;
    }

/* ---------------------------------- */

#mainproject {
    height: 260px;
    margin-left: auto;
    margin-right: auto;
}

#mainimage {
    float: left;
    margin-top: 25px;
    margin-left: 300px;
}

#topleftimage {
    float: left;
    margin-top: 25px;
    margin-left: 5px;
}

#bottomleftimage {
    float: left;
    margin-top: 157px;
    margin-left: -328px;
}

#toprightimage {
    float: left;
    margin-top: 25px;
    margin-left: 4px;
}

#bottomrightimage {
    float: left;
    margin-top: 157px;
    margin-left: -330px;
}
/*----------------------*/

/* Middle Buy Button */
#mostrecent {
    height: 250px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
}

#leftimage {
    float: left;
    margin-top: 45px;
    margin-left: 300px;
}

#middleimage {
    float: left;
    margin-top: 45px;
    margin-left: 50px;
}

#rightimage {
    float: left;
    margin-top: 45px;
    margin-left: 50px;
}

/* Text Areas - Implement CMS...*/

#textarea {
    float: left;
    margin-top: -75px;
    margin-left: 300px;

}

#textarea1 {
    float: left;
    margin-top: -75px;
    margin-left: 375px;
}

#textarea2 { /* Middle */
    float: left;
    margin-top: -80px;
    margin-left: 625px;
}

.under {
    z-index: 1
}

.over {
    position: absolute;
    top: 530px;
    left: 410px;
    z-index: 2;
}

.over1 {
    position: absolute;
    top: 525px;
    left: 723px;
    z-index: 2;
}


.over2 {
    position: absolute;
    top: 525px;
    left: 1053px;
    z-index: 2;
}

h2 {
    position: absolute;
    top: 670px;
    left: 645px;
    width: 100%;
}

h4 {
    position: absolute;
    top: 690px;
    left: 645px;
    width: 100%;
}


.topright {
    color: #53565c;
    font: bold 18px/18px Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    position: absolute;
    width: 100%

}


.topbottom {
    color: #53565c;
    font: bold 12px/18px Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    position: absolute;
}

.lefttop {
    color: #53565c;
    font: bold 18px/18px Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    position: absolute;
    top: 0px;
    left: -330px;
    width: 100%

}


.leftbottom {
    color: #53565c;
    font: bold 12px/18px Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    position: absolute;
    top: 0px;
    left: -330px;
    width: 100%;

}

.topmiddle {
        color: #53565c;
    font: bold 18px/18px Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    position: absolute;
    top: 0px;
    left: 320px;
    width: 100%;

}


.bottommiddle {
    font: bold 12px/18px Arial, Helvetica, sans-serif;
    color: #53565c;

    letter-spacing: 0.5px;
    position: absolute;
    top: 0px;
    left: 320px;
    width: 100%;

}`
4

1 に答える 1

0 
#textarea #textarea1 #textarea2

3 つの ID を設定して、親 div にposition:absolute left:0; bottom:0;渡します。position:relative; zoom:1

于 2013-08-15T09:43:48.280 に答える