2

我需要建立这个站点模型

这是我现在拥有的网站

当您向下滚动到页面底部时,您会看到布局的高度不合适(底部仍然有一条黑线)。

我尝试了一些调整,但 Layout 的高度仍然是错误的。

可以做些什么来修复它?

这是我的代码:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>RW-Fliesen</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <a href="index.html" class="logo"     title="Logo"></a>
                <div class="contact-info" title="contact-    info"></div>
                <ul class="mn">
                    <li><a href=" " title="" class="mn1 "></a>        </li>
                    <li><a href=" " title="" class="mn2 "></a>    </li>
                    <li><a href=" " title="" class="mn3 "></a>    </li>
                    <li><a href=" " title="" class="mn4 "></a></li>
                    <li><a href=" " title="" class="mn5 "></a></li>
                    <li><a href=" " title="" class="mn6 "></a></li>
                </ul>
            </div>
            <div id="content">
                <div id="top">
                    <div class="foto1" title="Fliesen">     <img src="foto1.png" alt="Fliesen1"/> </div>
                    <div class="foto2" title="Fliesen">     <img src="foto2.png" alt="Fliesen2"/> </div>
                </div>
                <div id="leftcolumn">
                    <div class="text" title="text">
                        <p> RW-Fliesen <br />
                            Ludwig-Thoma-Str. 36 <br />
                            82008 Unterhaching 
                        </p>
                        <div class="text2"     title="text">
                            <p> Telefon: <br />
                                Fax: <br />
                                Mobil: <br     />
                                Email: <br />
                            </p>
                        </div>
                        <div class="text3"     title="text">
                            <p> 089 - 358 557     88 <br />
                                089 - 358 557 89 <br />
                                0179 - 673 77 41 <br />
                                info@rw-fliesen.com <br />
                            </p>
                        </div>
                        <div class="text4" title="text">
                            <p> Betriebsnummer: 7084943 <br />    <span class="text-blue"> Eingetragen in die Handwerksrolle bei <br /> der Handwerkskammer     für München <br /> und Oberbayern. </span>   </p>
                        </div>
                    </div>
                    <div class="face" title="face">
                        <iframe id="f580fdad4"     name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=&amp;locale=de_DE&amp;sdk=joey&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Dfe1e61258%26origin%3Dhttp%253A%252F%252Fwww.rw-fliesen.com%252Ff21318bbdc%26domain%3Dwww.rw-fliesen.com%26relation%3Dparent.parent&amp;height=290&amp;header=true&amp;show_faces=true&amp;stream=false&amp;width=262&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&amp;colorscheme=light"></iframe>
                    </div>
                </div>
                <div id="rightcolumn">
                    <div class="text5" title="text">
                        <p> Wir sind Ihr fachlich     kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching.  </p>
                    </div>
                </div>
                <div id="footer">
                </div>
            </div>
        </div>
    </body>
</html>

CSS:

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

body { background: #1c1b17 url(bg.jpg) repeat-x; margin: 0; padding: 0; height: 1000px;     font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}

p {     color: #17142B; line-height: 18px;  padding: 0; font-size: 13px; font-    weight: 600; }
h3 { color: #003d7a; font-size: 10px; font-weight: 600; margin-top: 0px; padding: 0px;     }    
h4 { color: #2f303f; font-size: 13px; font-weight: 600; margin-top: 20px; padding: 0px;     }       

.text-blue {     color: #003d7a; line-height: 16px; padding: 0; font-size: 10px;     font-weight: 600; }


#wrapper { width: 1000px; height: 800px; margin: 0 auto; }
#header { height: 400px; width: 1000px; display: block; position: relative; }
#header .logo { position: absolute; width: 374px; height: 221px; display: block; float:         left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px;     left: 10px; }
#header .contact-info { position: absolute; width: 293px; height: 133px; display:     block; float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat     transparent; top: 100px; left: 700px; }

ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:     0; list-style-type: none; }
ul.mn li { float: left; }
ul.mn li a { display: block; float: left; height: 73px; }
ul.mn li a.mn1 { width: 104px; background-image: url('mn1.png'); background-position: 0     0; }
ul.mn li a.mn2 { width: 212px; background-image: url('mn2.png'); }
ul.mn li a.mn3 { width: 142px; background-image: url('mn3.png'); }
ul.mn li a.mn4 { width: 128px; background-image: url('mn4.png'); }
ul.mn li a.mn5 { width: 117px; background-image: url('mn5.png'); }
ul.mn li a.mn6 { width: 147px; background-image: url('mn6.png'); }
ul.mn li a.active, ul.mn li a:hover { background-position: 0 73px; }

#content { height: 1000px; width: 1000px; display: block; position: relative; }

#top { height: 300px; width: 1000px; display: block; position: relative; margin-bottom:     100px; }
#top .foto1 { width: 452px; height: 139px; float: left; margin-top: 30px; }
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left:     100px; }

#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float:     left; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative;     margin-bottom: 90px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: inline-block; position:     relative; }
#leftcolumn .text3 { height: 10px; width: 200px; display: inline-block; position:     relative;  padding-left: 30px; }
#leftcolumn .text4 { height: 10px; width: 300px; display: inline-block; position: relative; margin-top: 80px; }
#leftcolumn .face { height: 100px; width: 300px; display: block; position: relative; margin-top: 290px; }

#rightcolumn { height: 800px; width: 700px; display: inline-block; position: absolute;     margin-left: 350px; margin-top: 0px; float: right; }
#rightcolumn  .text5 { height: 300px; width: 700px; display: inline-block; position:     relative; }

#footer
4

2 回答 2

3

您的页面中有一个带有 Facebook 信息的 iframe。此 iframe 延伸到页面底部并导致黑色背景可见。

您需要降低此 iframe 的高度。目前它是这样设置的(内联):

<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="..."></iframe>

如果将高度更改为最大 684 像素,则黑条消失:

<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 684px; width: 262px;" class="fb_ltr" src="..."></iframe>
于 2013-04-25T18:25:06.660 回答
0

我还注意到您的菜单栏没有在您的标题中排列,我还没有 10 个声誉点,所以我无法在我的浏览器 Chrome 版本:26.0.1410.63 中分享您的页面外观的图像文件。如果您想要该图像,请随时给我发电子邮件,我会发送给您。

假设您试图模仿您在初始帖子中引用的模型站点。我相信您应该对解决菜单栏的 css 代码部分进行以下调整。您提供的内容:

ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:0; list-style-type: none; }  

我的提议:

ul.mn { position: absolute; float: left; top: 316px; width: 850px; margin: 0 auto 0 10px; padding:0; list-style-type: none;}

请注意,我更改了宽度以反映由每个定义的按钮 div 的组合宽度决定的宽度,从 978px 到 850px,然后我建议不要将所有边距设置为 0,而是将顶部设置为 0,右侧自动、底部 0 和左侧 10 像素(因为根据我从您的模型中看到的菜单左侧与徽标的左侧对齐)。进行这些更改后,我可以让您的菜单栏很好地位于标题 div 的底部。

请至少告诉我你的进展情况。我一直在寻求分享想法并学习其他解决问题的方法。我相信它会让我们变得更加聪明。

祝你好运,史蒂夫

于 2013-04-25T20:59:35.493 回答