Question

我回来了一个关于这些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%;

}`

Answer 1

#textarea #textarea1 #textarea2

您的三个ID将其设置为position:absolute left:0; bottom:0;并将position:relative; zoom:1提供给其父级。

这些块发生了什么

1 个答案: