0

これは、モックアップを作成するために必要なものです

今、私はこのサイトを持っています

最初にわかるように、コンテンツの上部にある 2 つの画像には半分の境界線しかありません。

次に、画像の横にあるテキストセクションが適切な場所にありません。また、画像の上枠は、テキストの横に 1 行で配置する必要があります。いくつかの調整を試みましたが、何も役に立ちませんでした。

両方の問題を解決するにはどうすればよいですか?

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: 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
4

3 に答える 3

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-26T02:14:09.340 に答える
0

質問の 2 番目の部分への回答は、テキスト 5 div の終了タグの位置を変更し、必要に応じて改行を挿入することで達成できると思います
。テキスト 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-27T22:35:04.310 に答える
0

あなたの .foto1 および .foto2 クラスは、img をラップする DIV のサイズを強制しています。foto1 と foto2 の高さのスタイルを削除するだけです。

前述のほかに... FireFox 用の FireBug プラグインまたは Google Chrome の Web 開発者ツールを使用して、問題を診断してみてください。探している結果が得られるまで、体系的に CSS スタイルをオフにしてみます。

2 つの画像の周囲の DIV については、margin-bottom と padding-bottom のスタイルを微調整してみてください。

お役に立てば幸いです。ありがとう！

于 2013-04-26T01:49:28.027 に答える