Question

我有这个问题..请记住我不是CSS的专家我只是尽我所能为我的公司建立一个网站。问题是当我调整网站大小或在XAMPP上使用ipad查看时它全部重叠！我希望它停止移动和显示滚动条像普通网站不会重叠内容！然而，当它的全屏显示它在我的1920x1080显示器上很好。

我的CSS：

@charset "utf-8";
    /* CSS Document */

body
{
    height: 900px;
    padding: 0;
    margin: 0;
    background-image: url(Images/bkg.jpg);
}

.header
{
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0;
    background-image: url(Images/header.jpg);
    border-bottom: #CCC 2px solid;
    box-shadow: 0px 0px 25px #F00;
}

.logo
{
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -203px;
}

#dog
{
    position: absolute;
    right: 0px;
    width: 244;
    height: 500;
    top: 15%;
}

.buttonholder
{
    Width: 600px;
    height: 150px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -230px;
    color: #FFF;
    font-size: 18px;
}

#textholder
{
    position: absolute;
    left: 100px;
    top: 35%;
    font-size: 36px;
    color: #FFF;
    font-family: 'Tangerine', cursive;
    width: 650px;
    height: 300px;
}

#galleryholder
{
    width: 460px;
    height: 284px;
    position: fixed;
    left: 50%;
    margin-left: -230px;
    top: 50%;
    margin-top: -145px;
    border: #CCC 1px solid;
    -moz-box-shadow: 0 0 25px 8px #000;
    -webkit-box-shadow: 0 0 25px 8px#000;
    box-shadow: 0 0 25px 8px #000;
    overflow: auto;
}



    /* gallery */
#s3slider
{
    width: 500px;
 /* important to be same as image width */
    height: 300px;
 /* important to be same as image height */
    position: relative;
 /* important */
    overflow: hidden;
 /* important */
    margin-left: -40px;
    margin-top: -16px;
}

#s3sliderContent
{
    width: 500px;
 /* important to be same as image width or wider */
    position: absolute;
 /* important */
    top: 0;
 /* important */
    margin-left: 0;
 /* important */;
}

.s3sliderImage
{
    float: left;
 /* important */
    position: relative;
 /* important */
    display: none;
 /* important */;
}

.s3sliderImage span
{
    position: absolute;
 /* important */
    left: 0;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 474px;
    background-color: #000;
    filter: alpha(opacity=70);
 /* here you can set the opacity of box with text */
    -moz-opacity: 0.7;
 /* here you can set the opacity of box with text */
    -khtml-opacity: 0.7;
 /* here you can set the opacity of box with text */
    opacity: 0.7;
 /* here you can set the opacity of box with text */
    color: #fff;
    display: none;
 /* important */
    top: 0;
 /*
        if you put top: 0;  -> the box with text will be shown 
                                at the top of the image
        if you put bottom: 0;  -> the box with text will be shown 
                                at the bottom of the image
    */;
}

.clear
{
    clear: both;
}

我的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>
      <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
      <script src="jquery/jquery.js" type="text/javascript"></script>
      <script src="jquery/jquery.js" type="text/javascript"></script>
      <script src="js/s3Slider.js" type="text/javascript"></script>
      <link rel="stylesheet" type="text/css" href="css.css" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Benčić Tartufi</title>
   </head>
   <body>
      <div class="buttonholder">
         <p style="float:left; margin-right:15px;">Kontakt / Contact</p>
         <p style="float:left; margin-right:15px;">O nama / About Us</p>
         <p>Proizvodi / Products</p>
         <img src="Images/Separator.png" width="600px" height="77" style="margin-left:-70px; position:relative; bottom:30px;;" />
      </div>
      <div id="dog">
         <img src="Images/dog.png" />
      </div>
      <div class="header">
      </div>
      <div class="logo">
         <img src="Images/logo.png" />
      </div>
      <div id="textholder">
         <p>"Iz Motovunske šume na Vaš stol, <br />
            najbolji okus prirode, Tartuf."
         </p>
         <p>"From the Motovun woods to Your table,<br />
            best taste of nature, the Truffle."
         </p>
         <img src="Images/Separator.png" width="550px" height="77px" style="position:relative; bottom:30px; margin-left:-75px;" />
      </div>
      <div id="galleryholder">
         <!-- GALERIJA! DODAVAT SLIKE U IMG SRC SA SPANOM! -->
         <div id="s3slider">
            <ul id="s3sliderContent">
               <li class="s3sliderImage">
                  <img src="Slike tartufa/1.jpg">
                  <span>Hello Truffles</span>
               </li>
               <li class="s3sliderImage">
                  <img src="Slike tartufa/2.jpg">
                  <span>Hello Truffles</span>
               </li>
               <!--Kopiraj si za novu sliku!! -->
               <li class="s3sliderImage">
                  <img src="#">
                  <span>Hello Truffles</span>
               </li>
               <!--End-->
               <div class="clear s3sliderImage"></div>
            </ul>
         </div>
         <!--KRAJ GALERIJE!-->
         <!--gallery holder div close-->
      </div>
      <!--end!-->
      <script>
         $(document).ready(function() { 
         $('#s3slider').s3Slider({
             timeOut: 3600
         });
         });
      </script>
   </body>
</html>

Answer 1

对于我在这里看到的，当你使用％时，你在宽度和高度上混合％和px它将根据浏览器的宽度使设计流畅，所以删除所有％并用px替换它们。我也建议将代码包装在

中

<div class="wrap"> 
.wrap{
    marging: 0 auto;
    width: 960px;
}

我们很难帮助您使用此代码，因为我们无法查看您正在使用的图像。如果你把它上传到一个网站，那就容易多了。

CSS内容重叠

1 个答案: