Html CSS内容重叠_Html_Css_Overlap_Fluid

Html CSS内容重叠

html css

Html CSS内容重叠,html,css,overlap,fluid,Html,Css,Overlap,Fluid,我有这个问题。。请记住，我不是CSS方面的专家，我只是尽我所能为我的公司建立了一个网站。问题是当我调整网站大小或在XAMPP上用ipad查看时，它的所有部分都重叠了！我希望它停止移动，并显示像正常的网站不会重叠的内容滚动条！但是，当它全屏显示时，它在我的1920x1080显示器上显示良好我的CSS： @charset "utf-8"; /* CSS Document */ body { height: 900px; padding: 0; margin:

我有这个问题。。请记住，我不是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>


本契奇·塔图菲
Kontakt/触点
O纳米/关于我们
Proizvodi/产品
“Iz Motovunskešume na Vašstol，

纳杰波尔吉·奥库斯·普里罗德，塔尔图夫。”

“从Motovun森林到您的餐桌，

最好的自然口味，松露。”



你好，松露


你好，松露


你好，松露


$（文档）.ready（函数（）{
$（'#s3slider'）.s3slider({
超时：3600
});
});

我在这里看到，当你使用%时，你在你的宽度和高度中混合了%和px，它将根据浏览器的宽度生成设计流体，因此移除所有%并用px替换它们。另外，我建议将代码包装成

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


.包裹{
保证金：0自动；
宽度：960px；
}

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

如果你需要你的网站在多种类型的设备和屏幕大小上工作，我建议你用谷歌搜索响应设计。嗨，谢谢你的快速回答。。问题是，如果我不使用%i，我就不能使用我的标题来显示全部大小？还有其他方法吗？以下是我无法上传到该网站的照片，因为我需要10个左右的声誉：