Границы, торчащие из верхней панели

Ниже приведен мой код. Мои вопросы ниже:Границы, торчащие из верхней панели

<html> 
<head> 
    <title>My BBC News Reader</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

    body { 
     margin:0; 
     font-family:arial, helvetica, sans-serif; 
    } 

    #topbar { 
     background-color:#7A0000; 
     width:100%; 
     height:40px; 
     color:white; 
    } 

    .fixedwidth { 
     width:1050px; 
     margin:0 auto; 
    } 

    #logodiv { 
     padding-top:5px; 
     float:left; 
     border-right:1px solid #990000; 
     padding-right:10px; 
    } 

    #signindiv { 
     font-weight:bold; 
     font-size:0.9em; 
     padding: 6px 80px 12px 20px; 
     float:left; 
     border-right:1px solid #990000; 
    } 

    #signindiv img { 
     position:relative; 
     top:3px; 
    } 

    #topmenudiv { 
     float:left; 
    } 

    #topmenudiv ul { 
     padding:0; 
     margin:0; 
    } 

    #topmenudiv li { 
     list-style:none; 
     font-weight:bold; 
     font-size:0.9em; 
     border-right:1px solid #990000; 
     height:100%; 
     padding:10px 20px 12px 20px; 
     float:left; 
    } 

    #searchdiv { 
     padding:5px 0 0 10px; 
     float:left; 

    } 

    #searchdiv input { 
     height:25px; 
     border:none; 
     padding-left:10px; 
     background-image:url("images/glass.png"); 
     background-repeat:no-repeat; 
     background-position:right center; 
    } 


    </style> 

</head> 
<body> 
    <div id="container"> 

     <div id="topbar"> 

      <div class="fixedwidth"> 

       <div id="logodiv"> 

        <img src="images/bbclogo.png"/> 

       </div> 

       <div id="signindiv"> 

        <p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p> 

       </div> 

       <div id="topmenudiv"> 

        <ul> 
         <li>News</li> 
         <li>Sport</li> 
         <li>Weather</li> 
         <li>iPlayer</li> 
         <li>TV</li> 
         <li>Radio</li> 
         <li>More...</li> 
        </ul> 

       </div> 

       <div id="searchdiv"> 

        <input type="text" placeholder="Search"/> 

     </div> 
    </div> 
</body> 
</html>

Просто чтобы показать, я загрузил код здесь - http://www.mazdoor.net/bbcnews.html. Я удалю, как только я исправлю проблему. 1. Вертикальные пограничные линии торчат. Я не могу понять, в чем проблема. 2. Логотип логотипа и текст не совпадают с логотипом BBC.

Пожалуйста, помогите мне. Я только начал писать HTML и CSS 4 дня назад.

Спасибо

источник

2014-12-11 Ahmed Althaf

Вы не сказали, как вы хотели, что посмотреть. –

удалить

#topmenudiv li{ 
    height: 100%; <!--- remove 
} 

#signindiv p{ 
    margin:0; <!--- remove default margin given by browser 
}

источник

2014-12-11 05:02:28

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

Попробуйте это:

#topmenudiv li { 
    list-style: none; 
    font-weight: bold; 
    font-size: 0.9em; 
    border-right: 1px solid #990000; 
    height: 100%; 
    padding: 0px 20px; 
    float: left; 
    line-height: 35px; 
}

Это приведет к удалению высоты на обивке и установить вертикальную высоту текста с line-height.

источник

2014-12-11 04:17:28

это правильный код

<html> 
<head> 
    <title>My BBC News Reader</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

    body { 
     margin:0; 
     font-family:arial, helvetica, sans-serif; 
    } 

    #topbar { 
     background-color:#7A0000; 
     width:100%; 
     height:auto; 
     color:white; 
    } 

    .fixedwidth { 
     width:1050px; 
     margin:0 auto; 
    } 

    #logodiv { 
     padding-top:15px; 
     float:left; 
     border-right:1px solid #990000; 
     padding-right:10px; 
     min-height: 53px; 
    } 

    #signindiv { 
     font-weight:bold; 
     font-size:0.9em; 
     padding: 6px 80px 12px 20px; 
     float:left; 
     border-right:1px solid #990000; 
    } 

    #signindiv img { 
     position:relative; 
     top:3px; 
    } 

    #topmenudiv { 
     float:left; 
    } 

    #topmenudiv ul { 
     padding:0; 
     margin:0; 
    } 

    #topmenudiv li { 
     list-style:none; 
     font-weight:bold; 
     font-size:0.9em; 
     border-right:1px solid #990000; 
     /*height:100%;*/ 
     padding:26px 20px; 
     float:left; 
    } 

    #searchdiv { 
     padding:5px 0 0 10px; 
     float:left; 

    } 

    #searchdiv input { 
     height:25px; 
     border:none; 
     padding-left:10px; 
     background-image:url("images/glass.png"); 
     background-repeat:no-repeat; 
     background-position:right center; 
    } 

    .clear{float:none !important;clear:both;} 
    ul li:last-of-type{padding:0px !important;border:none;height:0px !important;} 
    </style> 

</head> 
<body> 
    <div id="container"> 

     <div id="topbar"> 

      <div class="fixedwidth"> 

       <div id="logodiv"> 
        <img src="images/bbclogo.png"/> 
       </div> 

       <div id="signindiv"> 
        <p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p> 
       </div> 

       <div id="topmenudiv"> 
        <ul> 
         <li>News</li> 
         <li>Sport</li> 
         <li>Weather</li> 
         <li>iPlayer</li> 
         <li>TV</li> 
         <li>Radio</li> 
         <li>More...</li> 
         <li class='clear'></li> 
        </ul> 
       </div> 

       <div id="searchdiv"> 
        <input type="text" placeholder="Search"/> 
       </div> 

       <div class='clear'></div> 
      </div> 
    </div> 
</body> 
</html>

здесь все то, чего бы я сделал это трудно объяснить, я объяснил, что это briefly.study код ... и попытаться понять

1. <li class='clear'></li> добавить четкие поплавков на ул <div class='clear'></div> добавить в прозрачные поплавки моноширинный Див

изменение topbar высоты Div для авто, чтобы получить высоту topbar в соответствии с его внутренним содержанием.

#topmenudiv li padding изменяется padding: 26px 20px, тогда его высота будет равна высоте signindiv.

удаление высота #topmenudiv литий затем #topmenudiv li высота будет высота авто. (Если #topmenudiv li{height:auto;} элементов списка получить полный экран Heigh)

2. выровнять логотипы вертикально просто добавить верхнее значение обивки в logodiv.you должен использовать ваш глаз, чтобы проверить, совпадает ли он с логотипом вывески или нет.

источник

2014-12-11 04:36:34 Susantha7

Границы, торчащие из верхней панели

ответ

Смежные вопросы