Div Границы, влияющие на заполнение - PullRequest
Новая
       16

Div Границы, влияющие на заполнение

1 голос
/ 01 марта 2010

Я работаю над ссылками в самом верху - при нажатии на ссылку я меняю класс, чтобы было видно, на какой странице вы находитесь. Я почти уверен, что это боковая и верхняя границы, которые вызывают это - чтобы увидеть это, нажмите на ссылку «контакт» и ссылки между ними сдвинутся на несколько пикселей в сторону. Также выбранный текст ссылки на 1 или 2 пикселя ниже другого. Есть предложения?

Это не очень заметно, но сейчас я разбираюсь в деталях. 

html,body{margin:0}

body {
    font-family: "Lucida Grande", Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 140%;
    color: #333333;
    background-color: #eee;
    }

div.content {
    font-size: 80%;
    background-color: #FFFFFF;
    margin-left:200px;
    padding:15px;
    }

div.top-margin{
    height: 15px ;
    background-color:#000;
    }

div.top{
    /*border-bottom: 1px solid #000;*/ 
    width:100%;
    position: relative;
    }

div.left{
    float:left;
    width:200px;
    height:770px;
    border-right: 1px solid #000;
    font-size: 80%;
    padding-top:20px;
    }

div.body{
    height: 770px;
    background-color: #FFFFFF;
    /*margin: 5px 5px 5px 5px;*/
    padding: 6px;
    font-size: 90%;
    }

div.logo{
    height:125px;
    width:250px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    }

div.main{
    width: 1100px ;
    margin-left: auto ;
    margin-right: auto ;
    }

div.nav-links{
    float:right;
    position: absolute;
    bottom: 0;
  /*  margin-left:250px;*/
    margin-bottom: 0px;
    width:100%;
    }

div.header-link{
    display:inline;
    margin:0 30px 0 0;
    }

 .logo-link{
    border-style: none;
    }

div#nav-links ul li {
    float:left;
    overflow:hidden;
    position:relative;
    padding-left:15px;
    /*border-bottom: dotted 1px black;*/

    }


ul#nav li.about-active {
    /*width:110px;*/
    padding-right:19px;
    /*border-bottom: solid 1px black;*/
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }


ul#nav li.process-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.projects-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.contact-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.about {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.process {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.projects {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.contact {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

    ul#nav li.filler-left { 
    border-bottom: solid 1px black;
    padding-left:311px;
    margin-left:210px;
    /*width:305px;*/

    }

    ul#nav li.filler {  
    padding-right:20px;
    border-bottom: solid 1px black;
    width:10%;
    }



ul#nav a {
    text-decoration: none;
    }

ul#nav a:hover {    
    text-decoration: none;
    color:blue;
    }

div.footer{
    float:right;
    font-size: 70%;
    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta name="generator" content="" />
    <title>
      NCB
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link type="text/css" rel="stylesheet" href="http://joe-riggs.com/chip/style.css" />

  </head>
  <body> 
    <div class="top-margin"></div>
    <div class="main">
      <div class="top">
        <div class="logo">
        <a href="http://joe-riggs.com/chip"><img class="logo-link" src="http://joe-riggs.com/chip/images/logo.jpg" alt="logo" height="125px" width="250px" /></a>

        </div>
        <div class="nav-links" id="nav-links">
          <ul id="nav">

            <li class="filler-left"><a href="#">&nbsp;</a>
            </li>
            <li class="about-active"><a href="http://joe-riggs.com/chip/">About</a>
            </li>
            <li class="process"><a href="http://joe-riggs.com/chip/process">Process</a>

            </li>
            <li class="projects"><a href="http://joe-riggs.com/chip/projects">Projects</a>
            </li>
            <li class="contact"><a href="http://joe-riggs.com/chip/contact">Contact</a>
            </li>
            <li class="filler"><a href="#">&nbsp;</a>
            </li>
          </ul>

        </div>
      </div>

      <div class="left">
        <ul>
            <li>Links</li>
        </ul>
      </div>
      <div class="content">

      <img src="images/architect.png" alt="me" style="float:left; padding-right:10px;" />
       So this is the main page - the first page people will see when they come
       to your page.  Maybe we could put a nifty pic of you doing something
       architect looking.  Also a general overview would be nice.  This text
       can go over top of a faded background picture too.
       <br />
      <br />
        Donec velit nibh, pellentesque in fringilla a, blandit id nibh. Class
        aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Nam posuere mattis velit eget rhoncus. Maecenas
        bibendum tristique dolor, nec varius nulla porta eget. Aenean turpis
        ligula, ornare in consectetur vitae, aliquet id nulla. Vivamus bibendum
        sapien id neque lacinia vel viverra ante luctus. Sed lacinia velit id
        diam vulputate sollicitudin. Integer viverra libero vel enim dapibus
        rutrum. Praesent vel ipsum tortor. Pellentesque porttitor ante sed
        felis pretium nec rhoncus eros lacinia. Nam a massa nec sapien eleifend
        condimentum. Fusce ut augue id libero condimentum facilisis.<br />
        <br />
        Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
        odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
        rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
        erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
        odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
        in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
        euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
        id mauris consequat vel luctus quam vulputate. Duis in neque libero.
        Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
        in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
        euismod lacus id pulvinar.<br />
        <br />

        Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
        odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
        rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
        erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
        odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
        in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
        euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
        id mauris consequat vel luctus quam vulputate. Duis in neque libero.
        Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
        in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
        euismod lacus id pulvinar.
      </div>
    <div class="footer">
    <br />
    copyright &copy; 2010
    </div>
    </div><!--main-->
  </body>
</html>

Ответы [ 3 ]

2 голосов
/ 01 марта 2010

Полагаю, если вы добавите:

border-top: solid 1px #FFF; граница справа: сплошная 1px #FFF; рамка слева: сплошная 1px #FFF;

к вашему классу 'div # nav-links ul li', это может решить проблему. Проблема возникает из-за того, что вы добавляете границу в 1 пиксель к выбранной лити, которая переместит другие вкладки на 1 пиксель. Если у них уже есть граница в 1 пиксель, все, что вы делаете, это меняете цвет.

0 голосов
/ 01 марта 2010

Вы правы; это из-за границ. Для компенсации необходимо отрегулировать отступы / поля или ширину / высоту выбранной вкладки.

0 голосов
/ 01 марта 2010

Похоже, что проблема связана с границами (верхняя часть, если выбрана, и нижняя, если она не выбрана). Границы фактически влияют на высоту / ширину элементов на странице.

Я бы порекомендовал сохранить сплошную границу размером 1 пиксель со всех сторон, но просто измените цвет, чтобы сделать их «видимыми» или нет. Таким образом, их расположение не меняется в зависимости от выбора.

Вы можете увидеть, как использовать разные цвета на разных сторонах границы, с помощью W3Schools CSS Border Colors

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...