0
는 지금이 SiteHTML 레이아웃 위치 및 이미지 국경
있습니다.
그러면 이미지 옆에있는 텍스트 섹션이 올바른 위치에 없습니다. 그리고 이미지의 상단 테두리는 텍스트 옆에 한 줄로 표시되어야합니다. 몇 가지 조정을 시도했지만 도움이되지 않았습니다.
두 가지 문제를 해결하기 위해 수행 할 수있는 작업은 무엇입니까?
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=&locale=de_DE&sdk=joey&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&height=290&header=true&show_faces=true&stream=false&width=262&href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&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
감사합니다. @viscro. 나는 그것을 시도했다. 그러나 그것은 나에게이 출력을 줬다 http://dh-creative-webdesign.de/rw-fliesen2.html –
당신이 원했던 것이 아닌가? 흰색 테두리가 완전히 두 이미지를 래핑하는 것처럼 보입니다. :) –
네,하지만 이미지 하단에는 공간이 남아 있고 나머지는 내 질문에 설명 된 것처럼 올바른 위치에 있지 않습니다. –