Разделитель строк идет не после div, а в самом верху | CSS

Question

Я сделал div для заголовка и другой, чтобы поставить после него разделитель строк. Но разделитель строк идет не после, а перед заголовком. Я тоже пробовал менять позу. (ширина разделителя строк составляет 10 пикселей и зеленого цвета для отладки. См. изображение ниже).

Вывод разделитель строк

header.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
<head>
    <link type="text/css" rel="stylesheet" href="./css/main.css"/>
</head>
<body>
<f:view>
    <div id="header">
        <div id="header-logo">FootGoal</div>
        <div id="header-nav">Account</div>
        <div id="header-bottom-line"></div>
    </div>
</f:view>
</body>
</html>

< Сильный > main.css

body{
    margin-top: 0px;
    margin-left: 18%;
    margin-right: 18%;
/*  overflow-y: scroll; */
/*  overflow-x: auto; */
}

#header{
    position: inherit; 
    display: block; 
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;    
}

#header-logo{
    position: fixed;
    display: block;
    float: left;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 45px;
    color: white;
    background-color: rgb(111,111,111);
}

#header-nav{ 
    position: relative;
    float: right; 
    padding-top: 12px; 
    padding-bottom: 2px; 
    padding-left: 12px; 
    padding-right: 12px; 
    font-size: 35px;
    height: 30px;
    color: blue;
}

#header-bottom-line{
    position: static;
    height: 10px;
    width: 100%;
    background-color: green;

}

html css

1

Sachin 6 Мар 2015 в 14:17

Answer 1

Вам просто нужно добавить overflow:auto в #header-bottom-line css.

Примере:

body {
  margin-top: 0px;
  margin-left: 18%;
  margin-right: 18%;
  /*  overflow-y: scroll; */
  /*  overflow-x: auto; */
}
#header {
  position: inherit;
  display: block;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}
#header-logo {
  position: fixed;
  display: block;
  float: left;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 45px;
  color: white;
  background-color: rgb(111, 111, 111);
}
#header-nav {
  position: relative;
  float: right;
  padding-top: 12px;
  padding-bottom: 2px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 35px;
  height: 30px;
  color: blue;
}
#header-bottom-line {
  position: static;
  height: 10px;
  width: 100%;
  background-color: green;
  overflow: auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">

<head>
  <link type="text/css" rel="stylesheet" href="./css/main.css" />
</head>

<body>
  <f:view>
    <div id="header">
      <div id="header-logo">FootGoal</div>
      <div id="header-nav">Account</div>
      <div id="header-bottom-line"></div>
    </div>
  </f:view>
</body>

</html>

1

Stewartside 6 Мар 2015 в 11:20

Answer 2

Просто нужно добавить в #header-bottom-line clear:both

ДЕМО

0

user2232273 6 Мар 2015 в 11:22

Answer 3

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

http://codepen.io/anon/pen/ZYMbej

CSS:

body{
  margin: 0 18% 0;
}

#header{
  padding: 0 12px;
}

.header-inner {
  overflow: auto;
}

#header-logo{
  float: left;
  padding: 0 12px;
  font-size: 45px;
  color: #fff;
  background-color: rgb(111,111,111);
}

#header-nav{ 
  float: right; 
  padding: 12px;
  font-size: 35px;
  height: 30px;
  color: blue;
}

#header-bottom-line{
    height: 10px;
    background-color: green;
}

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="./css/main.css"/>
</head>
<body>
    <div id="header">
      <div class="header-inner">
        <div id="header-logo">FootGoal</div>
        <div id="header-nav">Account</div>
      </div>
      <div id="header-bottom-line"></div>
    </div>
</body>
</html>

1

Billy Moat 6 Мар 2015 в 11:26

Разделитель строк идет не после div, а в самом верху | CSS

3 ответа

Похожие вопросы

Новые вопросы

html