Почему в макете моей страницы есть лишние пробелы?(CSS / начинающий) - PullRequest
Новая
       1

Почему в макете моей страницы есть лишние пробелы?(CSS / начинающий)

1 голос
/ 09 июля 2010

Я пытаюсь создать страницу с заголовком, подзаголовком, leftnav, rightnav, main и footer.Но когда я создаю заголовок и подзаголовок, появляется дополнительное пространство, которое разделяет их.как мне от этого избавиться?

`/*the main parts of the script*/
body{
    background-color: #0080C0;
    font-family: Arial, Helvetica, Sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 15px;
}

#wrapper{
    width: 1000px;
    margin: 20px auto;
    background-color: white;
}

#header{
    background-color: aqua;
    padding-top: 2px;
    font-size: 15px;
    padding: 5px;    
}

#subheader{
    margin: 0px;
    background-color: fuchsia;
    height: auto;
}

#leftnav{
    float:left;
    width:200px;
    height:auto;
    background-color: green;
}

#rightnav{
    float:left;
    width: 200px;
    height: auto;
    background-color: red;
}

#main{
    float:left;
    width: 600px;
    height: auto;
    background-color: yellow;
    min-height: 500px;
}

#footer{
    clear:both;
    padding:15px;
    font-size: 12px;
    background-color: gray;
    text-align: center;
}`                                                                                                

//the HTML. very simple.                       
 <body>
<div id="wrapper">
    <div id="header">
    <?php $this->load->view("header"); ?>
    </div>

    <div id="subheader">
    <?php $this->load->view("subheader"); ?>
    </div>

    <span id="leftnav">
    <?php $this->load->view("leftnav"); ?>    
    </span>

    <span id="main">
    <?php $this->load->view($main); ?>    
    </span>

    <span id="rightnav">
    <?php $this->load->view("rightnav"); ?>
    </span>

    <div id="footer">
    <?php $this->load->view("footer"); ?>
    </div>

</div>
</body>  http://www.freeimagehosting.net/uploads/54aaee204f.jpg

Ответы [ 4 ]

1 голос
/ 09 июля 2010 
#header{
    background-color: aqua;
    padding-top: 2px;
    font-size: 15px;
    padding: 5px;    
}

У вас есть # нижний отступ на вашем #header, так что это может выглядеть как 5px между вашим #header и #subheader, который следует за ним.Хотя он должен иметь аква-цвет фона, поскольку он строго является частью заголовка #.

1 голос
/ 10 июля 2010

Когда я использую этот код HTML, есть пробел 

  <body>
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
<div id="wrapper">
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

Но когда я помещаю заголовки в оболочку, пробела нет 

<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="subheader">
    sub
  </div>
  <div id="main">
    lorem ipsum dolor sit amet
  </div>
  <div id="rightnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="leftnav">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
  <div id="footer">
    <ul>
      <li>ene</li>
      <li>due</li>
      <li>rabe</li>
    </ul>
  </div>
</div>

Возможно, это поможет

1 голос
/ 09 июля 2010

Я запустил ваш код, и не похоже, что есть дополнительное место.Вот несколько вещей, которые стоит попробовать:

  • Убедитесь, что вы используете правильный DOCTYPE
  • Убедитесь, что используемый вами PHP не выводит лишние пробелы
  • Используйте современный браузер (IE7 +, FF3.6, Chrome 5 и т. Д.)., скопируйте и вставьте).

    Надеюсь, это поможет!

0 голосов
/ 15 июля 2010

Если у вас есть элементы блока (h1, h2 ... ul и т. Д.) В вашем подзаголовке, вы должны сбросить их поля по умолчанию, чтобы избежать этого «пробела».Например: 

<style>
    #subheader ul { margin:0px; padding:0px;}
</style>
...