Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在html中定位?_Html_Css_Positioning - Fatal编程技术网

在html中定位?

在html中定位?,html,css,positioning,Html,Css,Positioning,如何在我的站点上定位L形容器,使其看起来像 当涉及到网页设计或代码时,我几乎什么都不知道,我设法在这里借助一些帮助制作了容器,并且能够将2个图像放入其中,但当涉及到正确定位时,我感到完全迷失了方向 我的网站的html <!--==============================content================================--> <section id="content"> <div class="container_12"&

如何在我的站点上定位L形容器,使其看起来像

当涉及到网页设计或代码时,我几乎什么都不知道,我设法在这里借助一些帮助制作了容器,并且能够将2个图像放入其中,但当涉及到正确定位时,我感到完全迷失了方向

我的网站的html

<!--==============================content================================-->
<section id="content">
<div class="container_12">
    <div class="grid_9" style="width:900px;">
        <h2>Etvab luxury estates</h2>
        <div class="line-1">
        </div>
        <div style="float: left; width:410px;">
            <p>
                &nbsp;<br>
            </p>
            <p>
                Etvab luxury estates är en webportal för den kräsne bostadsköparen. Här har vi samlat ett representativt urval av de mest exklusiva bostäderna på Spaniens södra kust. Bostäder med unika lägen – havsnära eller örnnästen. Bostäder med förfinad design. Bostäder med vyer som är ”breathtaking”. Bostäder med luft och ytor som andas välbefinnande. Bostäder som har allti modern utrustning och senaste teknologi. Vi har medvetet lagt ribban högt, för att kittla fantasin, ge en svindlande resa i tid och rum och visa det bästa av spansk modern arkitektur. Vi har i första hand valt bostäder med lägen och kvalitet som är i absolut topskikt. Vi har inte tittat på status i områden då vi bedömer att det inte avgör bostadens värde och attraktion. Vår ambition är att förnya dessa sidor regelbundet, till nöje och nytta för den som söker inspiration till ett husköp med högsta kvalitet och läge. Men även för den som njuter av design och vackra miljöer - på avstånd.
            </div>
            <p>
                &nbsp;<br>
            </p>
            <style>
        .qs_input { height:40px; padding: 0px 0px 0px 8px; background: #f3f3f3; border: 1px solid #dfdfdf; border-bottom: 2px solid #d7d6d6; font-family: 'Helvetica Neue', sans-serif; font-size: 1.0 em;}
        .the_table {font-family: 'Helvetica Neue', sans-serif; font-size: 0.8em;}
        .fastighet { padding:5px;}
        .inne { padding:8px 0px 8px 8px;  height:15px;}
            </style>
            <div id='qsResale' class='qs_body' style='width:50%; float:right; margin-left: 15px; padding:0px; margin: 0px;'>
                <form name='qsFormResale' id='qsFormResale' method='post' action='search.php'>
                    <table class="the_table" style='width:98%; float:left;'>
                    <tr>
                        <td class='qs_label' style='width:98%;'>
                            <h7>Typ av fastighet</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select class='qs_input fastighet' name='Type' id='Type' style='width:90%;'>
                                <option class='qs_input' value='No Preference'></option>
                                <option class='qs_input' value='S'>Studio</option>
                                <option class='qs_input' value='A'>Lägenhet</option>
                                <option class='qs_input' value='T'>Radhus</option>
                                <option class='qs_input' value='V'>Villa</option>
                                <option class='qs_input' value='P'>Tomt</option>
                                <option class='qs_input' value='C'>Kommersiella</option>
                                <option class='qs_input' value='AS'>Lägenhet & Studio</option>
                                <option class='qs_input' value='AT'>Lägenhet & radhus</option>
                                <option class='qs_input' value='AV'>Lägenhet & villa</option>
                                <option class='qs_input' value='TV'>Radhus & villa</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label' style='vertical-align:top;'>
                            <h7>Kust</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select class='qs_input fastighet' name="Area" id="Area" onchange="cambia(this, document.qsFormResale.Location);" style='width:90%;'>
                                <option value='Costa de la Luz'>Costa de la Luz</option>
                                <option value='Costa del Sol'>Costa del Sol</option>
                                <option value='Costa del Sol East'>Costa del Sol East</option>
                                <option value='Granada (Costa Tropical)'>Granada (Costa Tropical)</option>
                                <option value='Almería (Costa Almería)'>Almería (Costa Almería)</option>
                                <option value='Murcia (Costa Calida)'>Murcia (Costa Calida)</option>
                                <option value='Alicante (Costa Blanca)'>Alicante (Costa Blanca)</option>
                                <option value='Costa Azahar'>Costa Azahar</option>
                                <option value='Costa Brava'>Costa Brava</option>
                                <option value='Costa Dorada'>Costa Dorada</option>
                                <option value='Ibiza'>Ibiza</option>
                                <option value='Cordoba'>Cordoba</option>
                                <option value='Tenerife'>Tenerife</option>
                                <option value='Mallorca'>Mallorca</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label' style='vertical-align:top;'>
                            <h7>Område</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select class='qs_input' size='5' style="height:150px; width:395px;" name='Location' id='Location' multiple='multiple' style='width:90%;'>
                                <option class='qs_input inne' value='No Preference'>Ingen Preferens</option>
                                <option class='qs_input inne' value='Ayamonte'>Ayamonte</option>
                                <option class='qs_input inne' value='Huelva'>Huelva</option>
                                <option class='qs_input inne' value='Sanlucar de Barrameda'>Sanlucar de Barrameda</option>
                                <option class='qs_input inne' value='Tarifa'>Tarifa</option>
                                <option class='qs_input inne' value='Jimena de la Frontera'>Jimena de la Frontera</option>
                                <option class='qs_input inne' value='San Pablo de Buceite'>San Pablo de Buceite</option>
                                <option class='qs_input inne' value='Jerez de la Frontera'>Jerez de la Frontera</option>
                                <option class='qs_input inne' value='Cadiz'>Cádiz</option>
                                <option class='qs_input inne' value='Olvera'>Olvera</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label'>
                            <h7>Sovrum</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select size='1' class='qs_input fastighet' name='Beds' id='Beds' style='width:90%;'>
                                <option class='qs_input' value='No Preference'>Ingen Preferens</option>
                                <option class='qs_input' value='1'>1 Bädd</option>
                                <option class='qs_input' value='1x'>1 Bädd eller fler</option>
                                <option class='qs_input' value='2'>2 Bäddar</option>
                                <option class='qs_input' value='2x'>2 Bäddar eller fler</option>
                                <option class='qs_input' value='3'>3 Bäddar</option>
                                <option class='qs_input' value='3x'>3 Bäddar eller fler</option>
                                <option class='qs_input' value='4'>4 Bäddar</option>
                                <option class='qs_input' value='4x'>4 Bäddar eller fler</option>
                                <option class='qs_input' value='5'>5 Bäddar</option>
                                <option class='qs_input' value='5x'>5 Bäddar eller fler</option>
                                <option class='qs_input' value='6'>6 Bäddar</option>
                                <option class='qs_input' value='6x'>6 Bäddar eller fler</option>
                                <option class='qs_input' value='7'>7 Bäddar</option>
                                <option class='qs_input' value='7x'>7 Bäddar eller fler</option>
                                <option class='qs_input' value='8'>8 Bäddar</option>
                                <option class='qs_input' value='8x'>8 Bäddar eller fler</option>
                                <option class='qs_input' value='9'>9 Bäddar</option>
                                <option class='qs_input' value='9x'>9 Bäddar eller fler</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label'>
                            <h7>Pris från</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>
                                <input type='text' class='qs_input' id='PriceMin' name='PriceMin' style='width:80%;' value='0' maxlength='8' onchange='return f_checkNumber(this,0,0);'>
                                &nbsp;<span class='qs_text'>&euro;</span>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label'>
                            <h7>Pris upp till</h7>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type='text' class='qs_input' id='PriceMax' name='PriceMax' style='width:80%;' value='0' maxlength='8' onchange='return f_checkNumber(this,0,0);'>&nbsp;<span class='qs_text'>&euro;</span>
                        </td>
                    </tr>
                    <tr>
                        <td class='qs_label'>
                            <h7>Referens nr</h7>
                        </td>
                    </tr>
                    <tr>
                        <td style='padding-right:5%;'>
                            <input type='text' class='qs_input' id='RefNum' name='RefNum' value='' maxlength='12'>
                        </td>
                    </tr>
                    <tr>
                        <td style='padding-top:10px;'>
                            <input type='submit' input type='button' class="button-5" value="Sök">
                        </td>
                    </tr>
                    </table>
                    <input type='hidden' name='P1' id='P1' value='ETvabResales'>
                    <input type='hidden' name='P2' id='P2' value='R'>
                    <input type='hidden' name='P3' id='P3' value='ALL'>
                    <input type='hidden' name='QS' id='QS' value='RESALE'>
                    <input type='hidden' name='Country' id='Country' value='Spain'>
                    <input type='hidden' name='RentalType' id='RentalType' value=''>
                    <input type='hidden' name='RentalDateFrom' id='RentalDateFrom' value='06-02-2013'>
                    <input type='hidden' name='RentalDateTo' id='RentalDateTo' value='06-02-2013'>
                    <input type='hidden' name='Language' id='Language' value='8'>
                    <input type='hidden' name='CustomArea' id='CustomArea' value=''>
                </form>
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
    </section>
    <div class="clear">
    </div>
    <!--==============================footer=================================-->
    <footer>
    <div class="container_12">
        <div class="grid_12">
            <div class="line-2">
            </div>
        </div>
        <div class="grid_2">
            <p>
                &nbsp;
            </p>
            <h5>Kontor Stockholm: </h5>
            <h5>Kontor Marbella:</h5>
            <h5>E-mail:</h5>
            <ul class="list1">
            </ul>
        </div>
        <div class="grid_2">
            <p>
                &nbsp;
            </p>
            <h5>+46 8 966 545</h5>
            <h5>+34 951087873</h5>
            <h5>Info@etvab.nu</h5>
            <ul class="list1">
            </ul>
        </div>
        <div class="grid_2">
            <h3 class="marg6"></h3>
            <ul class="list1">
            </ul>
        </div>
        <div class="grid_2">
            <p>
                &nbsp;
            </p>
            <h5>&nbsp;</h5>
            <p>
                &nbsp;
            </p>
            <ul class="list1">
            </ul>
        </div>
        <div class="grid_4">
            <p class="foot-text">
                Etvab luxury estates © 2012 <a href="index-6.html"></a>&nbsp;
                <!-- {%FOOTER_LINK} -->
            </p>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
    </footer>
</div>
</body>
</html>

div本质上是矩形的,不能是“L”形。因为您已经在使用绝对定位,所以只需定位图像并为表单留出空间即可。然后为表单设置z索引,并将其绝对放置在图像容器的顶部。

-1用于该问题,因为这是一个相当广泛的问题。有什么原因不能将所有图像保存到一个较大的合成图像中,并将较大的图像定位为背景吗?我该怎么做?正如我在帖子中所说,我对建立网站几乎一无所知。我雇了一个网页设计师来做我的网站,现在我找不到他,所以我试着自己来解决这个问题。打开一个图形程序,把所有的图片按照你想要的方式放出来,然后保存到JPEG格式。然后将
背景图像:url(imagename.jpg)
放入CSS中。它是脏的,但在你找到设计师之前它会起作用。嗯,在哪里改变表单的位置?本以为它是用css/样式完成的,但在那里找不到。
<div class="container-3">
  <div class="top"><img src="Images/bildlyx2.jpg" height="626" class="img1" />
  </div>
  <div class="bottom"></div>
  <img  src="Images/bildlyx1.jpg" width="202" height="210" class="img5" />
</div>
</div>
.img1{
    top: 1px;
    left: -1px;
    z-index: 10;
    position: absolute;
    width: 452px;
    height: 660px;
}

.img5{
    top: 439px;
    right: 42px;
    z-index: 20;
    position: absolute;
    width: 574px;
    height: 230px;
}

.container-3{    
  position:relative; 
}

.top{
    width: 459px;
    height: 800px;
    border-bottom: none;
    position: absolute;
    z-index: 4;
} 

.bottom{
  z-index:2;
  width: 1100px;
  height: 250px;
  position:absolute;
  top:600px;
  left:0;
}