Перекрывающиеся div дает много ненужного места - PullRequest
Новая
       7

Перекрывающиеся div дает много ненужного места

2 голосов
/ 12 января 2012

У меня есть ситуация, когда у меня есть два элемента, которые приведены ниже в этом посте.

Я хочу, чтобы мое FrontPageMenu перекрывалось, поэтому оно перекрывает мою карту, поэтому оно работает как меню.Вы можете видеть, что это работает по адресу: http://mcoroklo.dk/.

Чтобы сделать эту работу, я использовал position: относительный;верх: -550px;, НО, это дает 550px пустого пространства под моим изображением ;-)

В основном я хочу удалить этот пробел, пока все работает.

Одним из решений может быть позиция: относительная;топ: 550px;на остальной части контента, но я даже не хочу комментировать, как это глупо; -)

Надеюсь, вы, ребята, можете над этим посмеяться и сказать: «Поместите это свойство!».

Полная карта - вид карты изображений с использованием CSS : 

    <dl id="fullMap">
    <dd>

        <a id="bamselandMap" href="Bamseland.aspx" title="Bamser"></a>        
    </dd>    
    <dd>
        <a id="andedammenMap" href="Badeaender.aspx" title="Badeænder"></a>
    </dd>
<dd>
        <a id="boblerMap" href="Saebebobler.aspx" title="Sæbebobler"></a>
    </dd>

</dl>

Меню FrontPage div.В HTML это выглядит так: : 

<div class="FrontPageMenu">


<h3 style="color:white;">Legetøj</h3>

<hr />
    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_0" title="Besøg Badeænder universet ved at klikke her" href="legetoej/badeaender" style="color:White;">Badeænder</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_0" title="Besøg Designer badeænder universet ved at klikke her" href="legetoej/badeaender/designer-badeaender" style="color:DarkGray;">Designer badeænder</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_1" title="Besøg Store badeænder universet ved at klikke her" href="legetoej/badeaender/store-badeaender" style="color:DarkGray;">Store badeænder</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_1" title="Besøg Bamser universet ved at klikke her" href="legetoej/bamser" style="color:White;">Bamser</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_0" title="Besøg Mikroovns bamser universet ved at klikke her" href="legetoej/bamser/mikroovns-bamser" style="color:DarkGray;">Mikroovns bamser</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_1" title="Besøg Musik bamser universet ved at klikke her" href="legetoej/bamser/musik-bamser" style="color:DarkGray;">Musik bamser</a></span>





    <br /><br /><br />



    <span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_2" title="Besøg Sæbeboble udstyr universet ved at klikke her" href="legetoej/saebeboble-udstyr" style="color:White;">Sæbeboble udstyr</a></span>

    <br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_0" title="Besøg Sæbeboble pinde universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-pinde" style="color:DarkGray;">Sæbeboble pinde</a></span>



            <br /><br />



            - <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_1" title="Besøg Sæbeboble vand universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-vand" style="color:DarkGray;">Sæbeboble vand</a></span>

Меню FrontPage Класс CSS: 

.FrontPageMenu
{ 
    position:relative;
    top:-550px;
    background-color:Gray;
    padding:10px;
    width:200px;
    background:url('http://www.mulius.com/Media/Site/FrontPageMenuBackground.png') repeat scroll 0 0 transparent;
    min-height:400px;

}

Ответы [ 3 ]

3 голосов
/ 12 января 2012

Создайте элемент, содержащий карту, position: relative; и создайте карту position: absolute;.Затем вместо top: -550px используйте left: 20px; top: 20px;.В демонстрационной версии CSS я использовал !important для переопределения вашей базовой таблицы стилей.Вам не понадобится это в ваших классах.Относительное расположение позиции содержащего элемента делает абсолютное позиционирование дочернего элемента связанным с этим (не со страницей).

Использование отрицательных позиций и полей для исправления различий трудно понять и отладить, когда вы (или кто-то еще) смотритена ваш код позже.Использование поплавков может привести к проблемам с макетом в другом месте страницы и не так интуитивно понятно.На самом деле вы говорите: «Я хочу, чтобы это меню находилось в верхнем левом углу моей карты».Поскольку карта и меню являются родными, это абсолютное позиционирование.

Демо: http://jsfiddle.net/ThinkingStiff/M6Jc9/

.NoColumnContent {
    position: relative;    
}

.FrontPageMenu {
    position: absolute !important;
    top: 20px !important;
    left: 20px;
}
0 голосов
/ 12 января 2012

Добавьте margin-bottom: -500px; к классу FrontPageMenu.

Вы должны знать, что, когда элемент имеет position: relative, он все равно будет занимать пространство, которое он обычно занимал бы, если бы его не перемещали.В этом случае вы можете решить эту проблему, используя отрицательную маржу.

0 голосов
/ 12 января 2012

Я бы порекомендовал попробовать использовать div с плавающей точкой, полями и отступами, а не использовать относительные позиции.Но я чувствую твою боль ....

...