1. 首頁
  2. 問答
  3. HTML佈局定位及圖像邊界

HTML佈局定位及圖像邊界

2013-04-26 78 views
0

這是我需要建立MockupHTML佈局定位及圖像邊界

現在我有這個Site

正如你可以先看到的內容頂部的兩個圖像有一半的邊界。

然後帶有旁邊圖像的文本部分不在正確的位置。圖像的頂部邊框應與旁邊的文字排成一行。 我試過一些調整，但沒有任何幫助。

可以做些什麼來解決這兩個問題？

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 /> 
            [email protected] 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: 684px; 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><br /> 

         <p> Als Fachbetrieb mit langjähriger Erfahrung in Fliesenverlegung und Innenausbau bieten wir Ihnen hohe handwerkliche Qualität, wertvolle Materialien sowie faire Preise. </p><br /> 

         <p> Unsere Leistungen: </p> 
         <ul> 
         <li> Beratung & Verlegung von  Fliesen, Platten, Naturstein und Mosaik vom Fachmann </li> 
         <li> Individuelle und exclusive Bad- und Wohnraumgestaltung </li> 
         <li> Vermittlung von Handwerksmeisterbetrieben (Installlateur, Elektriker, Maurer, Maler, Schreiner, Bodenleger) </li> 
         <li> Trockenbau </li> 
         <li> Estrichverlegung </li> 
         <li> Innenausbau </li> 
         <li> Reparaturarbeiten </li> 
         <li> Entrümpelung </li> 
         <li> Zusammenstellen eines Teams zur Kompletten Renovierung & Bauaufsicht </li> 
         </ul> 
         </div> 

         <img src="img1.png" alt="img"  class="img1" /> 
         <p> Sie möchten Renovieren, Ihre Wohnräume neu und exclusiv gestalten? 

          Ob groß, oder klein spielt hier keine Rolle, selbst aus einem 5m² Bad kann man einen echten "Eyecatcher" machen! 

          Gerne erstellen wir Ihnen ein individuelles Angebot zu Ihrem Bauvorhaben, beraten Sie zu verschiedenen Möglichkeiten der Durchführung und Gestaltung, sowie neuen Produkten und Materialien in der Baubranche. 
          Erfahren Sie mehr über unser Leistungsspektrum auf den folgenden Seiten. </p> 

       </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: auto;  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;} 

ul, p { color: #373b3f; line-height: 18px; 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; } 
.img1 { float: left; margin: 0 20px 10px 0; padding: 0; border: #FFF 3px solid; } 


#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; border: 3px solid #FFF; } 
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left:  100px; border:#FFF 3px solid; } 

#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float: left; } 
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative;  margin-bottom: 0px; } 
#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: 310px; margin-top: 0px; float: right; } 
#rightcolumn .text5 { height: 300px; width: 700px; display: inline-block; position: relative; } 

#footer

來源

2013-04-26 Daniel Hernandez

回答

0

你.foto1和.foto2類迫使封裝了IMG的DIV的大小。只需將foto1 & foto2的高度風格取消即可。

除了上述...嘗試使用FireFug插件或Google Chrome的Web開發人員工具來診斷問題。我會系統地嘗試關閉CSS樣式，直到獲得您正在查找的結果。

對於兩幅圖像周圍的DIV，嘗試調整margin-bottom和padding-bottom樣式。

希望能幫到你。謝謝！

來源

2013-04-26 01:49:28

+0

謝謝@viscro。我試過了，但它給了我這個輸出http://dh-creative-webdesign.de/rw-fliesen2.html – 2013-04-26 02:02:53

+0

這不是你想要的嗎？看起來白色的邊框現在完全包裹了這兩幅圖像。 :) – 2013-04-26 02:06:09

+0

是的，但在圖像的底部仍然是一個空間，其餘的內容是不正確的位置，就像我在我的問題中所描述的。 – 2013-04-26 02:10:05

0

刪除圍繞圖像的<div>標籤，然後將div的樣式應用到圖像本身。離開寬度和高度，你會擁有一切你想要的東西。這裏有一段代碼給你提供這個想法，最後記得試着將樣式移動到一個<style>標籤或一個css文件中。

<div id="top"> 
    <img src="foto1.png" alt="Fliesen1" style="float: left; margin-top: 30px; border: 3px solid #FFF;"/> 
    <img src="foto2.png" alt="Fliesen2" style="float: left; margin-top: 30px; border: 3px solid #FFF; margin-left: 100px;" /> 
</div>

來源

2013-04-26 02:14:09 SimonDever

+0

謝謝。它給了我輸出http://dh-creative-webdesign.de/rw-fliesen.html。現在我很困惑所有元素是如何相互關聯的。你能幫我嗎？ – 2013-04-26 02:27:37

+0

這不是真的應該是一個教程。加入當地學校進行網絡開發或在線搜索一些HTML/CSS教程。你的問題回答令人滿意嗎？ – SimonDever 2013-04-26 02:42:16

0

我相信回答你問題的第二部分可以通過改變結束標記的位置文本5格和插入線來完成突破
在需要的地方。我相信文本5 div部分應該如下所示：

<div class="text5" title="text"> 

         <p> Wir sind Ihr fachlich  kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching. </p><br /> 

         <p> Als Fachbetrieb mit langjähriger Erfahrung in Fliesenverlegung und Innenausbau bieten wir Ihnen hohe handwerkliche Qualität, wertvolle Materialien sowie faire Preise. </p><br /> 

         <p> Unsere Leistungen: </p> 
         <ul> 
          <li> Beratung & Verlegung von  Fliesen, Platten, Naturstein und Mosaik vom Fachmann </li> 
          <li> Individuelle und exclusive Bad- und Wohnraumgestaltung </li> 
          <li> Vermittlung von Handwerksmeisterbetrieben (Installlateur, Elektriker, Maurer, Maler, Schreiner, Bodenleger) </li> 
          <li> Trockenbau </li> 
          <li> Estrichverlegung </li> 
          <li> Innenausbau </li> 
          <li> Reparaturarbeiten </li> 
          <li> Entrümpelung </li> 
          <li> Zusammenstellen eines Teams zur Kompletten Renovierung & Bauaufsicht </li> 
         </ul> 
        <!-- </div> this is where you inserted your ending tag in the HTML code you provided--> 

        <img src="img1.png" alt="img"  class="img1" /> 
        <p> Sie möchten Renovieren, Ihre Wohnräume neu und exclusiv gestalten?<br/><br/> 

         Ob groß, oder klein spielt hier keine Rolle, selbst aus einem 5m² Bad kann man einen echten "Eyecatcher" machen!<br/><br/><br/> 

         Gerne erstellen wir Ihnen ein individuelles Angebot zu Ihrem Bauvorhaben, beraten Sie zu verschiedenen Möglichkeiten der Durchführung und Gestaltung, sowie neuen Produkten und Materialien in der Baubranche. 
         Erfahren Sie mehr über unser Leistungsspektrum auf den folgenden Seiten. </p> 
        </div> <!-- This is where I believe you should end text 5 div -->

來源

2013-04-27 22:35:04

相關問題

 相關問題