0

У меня есть эдакая шапка, которую я хочу разделить на три равных части двумя полосами (либо же просто разделить на три части). Должно быть что-то вроде меню в шапке с коротким текстом, при наведении на который должна немного изменять цвет вся область. Заранее извиняюсь, если вопрос не совсем понятен.

http://codepen.io/anon/pen/qOpXmK - сам код.

#header{
  background-color: #D93240;
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
  position: absolute;
  border-width: medium;
  border-radius: 0px 0px 15px 15px;
}

#footer{
  background-color: #0F5959;
  width: 100%;
  height: 10%;
  bottom: 0;
  left: 0;
  position: absolute;
  border-width: medium;
  border-radius: 15px 15px 0px 0px;
}

body{
  background-color: #BFD4D9;
}
<div id="header"></div>
<div id="menu"></div>
<div id="footer"></div>

ЗЫ. 3 части должны идти одна за другой горизонтально.

1 ответ 1

1

Нужно добавить в шапку три дива:

<div class="column-left">Left</div>
<div class="column-center">Center</div>
<div class="column-right">Right</div>

И указать для них следующие значения:

.column-left{ float: left; width: 33%; text-align: center}
.column-right{ float: right; width: 33%; text-align: center}
.column-center{ display: inline-block; width: 33%; text-align: center}

text-align: center - опциональный, для красоты :)

Пример: http://codepen.io/anon/pen/qOpXxM

#header {
  background-color: #D93240;
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
  position: absolute;
  border-width: medium;
  border-radius: 0px 0px 15px 15px;
}
#footer {
  background-color: #0F5959;
  width: 100%;
  height: 10%;
  bottom: 0;
  left: 0;
  position: absolute;
  border-width: medium;
  border-radius: 15px 15px 0px 0px;
}
body {
  background-color: #BFD4D9;
}
.column-left {
  float: left;
  width: 33%;
  text-align: center
}
.column-right {
  float: right;
  width: 33%;
  text-align: center
}
.column-center {
  display: inline-block;
  width: 33%;
  text-align: center
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Vladyslav Dublevskyi</title>
</head>

<body>
  <div id="header">
    <div class="column-left">Left</div>
    <div class="column-center">Center</div>
    <div class="column-right">Right</div>

  </div>
  <div id="menu">

  </div>
  <div id="footer">

  </div>
</body>

</html>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.