Нежелательное пространство между div - HTML, CSS - PullRequest
Новая
       0

Нежелательное пространство между div - HTML, CSS

1 голос
/ 17 января 2011

Я перебрал форумы и старый добрый гугл и нашел много ответов, но, похоже, не работает на моей странице. В любом случае, вот вопрос,

У меня есть 2 div, которые расположены рядом, и я хочу избавиться от пробела

www.blisshair.com.au / test.html: (http://www.blisshair.com.au/test.html)

Хочу чтобы черный из "ссылки 1" присоединился к основному контенту в центре,

Любая помощь будет принята с благодарностью,

Спасибо.

РЕДАКТИРОВАТЬ: Попробовал открытие в Internet Explorer 8, и, кажется, сверху точно, как я хочу, кроме 2 нижних делителей не выстраиваются, Возможно ли это сделать с помощью тегов UL и SPAN? Я стремлюсь к вкладке, например, когда вы нажимаете на ссылку 2, фон вокруг ссылки 2 становится черным, а черный цвет «перетекает» на главную страницу контента, извините, если это не имеет смысла, рано утром здесь: D

Еще раз спасибо

Ответы [ 3 ]

3 голосов
/ 17 января 2011

Для начала: не используйте таблицы несемантическим образом и не используйте встроенные стили, когда этого можно избежать.

У вас есть список ссылок, поэтому поместите ваши ссылки в список: 

<ul>
  <li><a href="...">Link 1</a></li>
  <li><a href="...">Link 2</a></li>
  <li><a href="...">Link 3</a></li>
  ...
</ul>

Проблема, с которой вы столкнулись, заключается в том, что вы помещаете класс, который создает цвет фона (menu1), в первый элемент таблицы.

Вместо родительского элемента вы должны указать класс или идентификатор: 

<ul id="nav">...

А затем задайте для целого цвета фона цвет фона (вам также нужно помнить, чтобы избавиться от отступов по умолчанию и полей на панели навигации): 

#nav
{
  background-color: #000000;
  margin: 0;
  padding: 0;
}
1 голос
/ 17 января 2011

Зундс!

Это решение? Конечно, кажется, так!

Быстро и грязно:

  • Переместить меню влево иукажите ширину 100px;
  • Используйте левое поле для содержимого, не перемещайте его;
  • Используйте цвет фона для контейнера как меню, так и содержимого;
  • Поймите, сколько неприятностей у вас будет, если это уже было проблемой;
  • Продолжайте, то есть НЕ ДАВАЙТЕ , никто не родился, зная это!:)

Чем сложнее, тем больше вы узнаете.Ожидайте много обучения.:)

HTML: 

<h1 id="header"><a href="#"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></a></h1>
<div id="textContainer">
    <ul id="menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
    <div id="content">
        <h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
        <p>
            this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
        </p>
        <p> etc ... </p>
    </div>
</div>

И CSS: 

body {
    background-color: #666;
}

#header {
    text-align: center;
    margin-bottom: 20px;
}

#header a img {
    border: dashed 1px gray;
}

#textContainer, #header * {
    background-color: black;
    color: white;
}

#menu {
    float: left;
    width: 100px;
}
#content {
    margin-left: 100px;
}

Проблемы

  • "Верх заголовка не будет выравниватьсяс верхней части меню!
    • Да, потому что смежные границы разрушаются, и применяется большее.
    • Используйте правило CSS, например, content>h2:first-child { margin-top: 0px; }, чтобы быстро его взломать, но обязательно понимают, что такое 1040 *Это сэкономит вам мозги и время в будущем.
1 голос
/ 17 января 2011

Вы можете выполнить сброс css следующим образом: http://meyerweb.com/eric/tools/css/reset/

По умолчанию браузеры по умолчанию имеют поля или отступы между элементами div или элементами, которые имеют свой собственный «блок» (h1, h2и некоторые другие).

Вам нужно будет установить нулевые уровни полей и отступов, как стартер.

...