Форматирование моего сайта не заканчивается, даже когда я объявляю об этом - PullRequest
Новая
       0

Форматирование моего сайта не заканчивается, даже когда я объявляю об этом

0 голосов
/ 22 марта 2020

Нижний колонтитул должен быть внизу, но он неправильно форматирует. Вот код CSS. Я пытаюсь отформатировать его с помощью навигационной панели, затем главного, а затем нижнего колонтитула. Но я пытаюсь изменить отступы / поля для того, будет ли это .container или .footer, и это никак не повлияет на это. Я относительно новичок в создании сайтов с нуля, любые советы полезны. 


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title> ~ Portfolio</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
</head>

<body>
  <header>
    <div class="container">
      <img src="">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      <footer class="footer">
        <font color="white" face="Roboto">Johnny Handcock</font>
      </footer>
      </header>
</body>
</html>



nav {
word-spacing: 15px;
float: right;
padding-right: 20px;
 /* normal, hidden state */
}
a {
  text-decoration:none;
 color: #ffff;
 font-size: 20px;
 font-family: 'Roboto', sans-serif;
 font-weight: 600;
}
a:hover {
   /* when parent is hovered */
   color:black;
   opacity: 0.6;
   outline-style: solid;
   outline-color: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
   border-radius: 10px;
}

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom:1;
    *display:inline;

    /* this fix is needed for IE7- */
}
body {
  /* Previous Config   background: rgb(48,6,102);
  background: linear-gradient(117deg, rgba(48,6,102,1) 0%, rgba(110,5,162,0.9612045501794468) 56%, rgba(109,32,210,1) 77%);*/
  background: rgb(128,0,255);
  background: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
  /* Top, Right, Bottom, Left
  margin: 400px 300px 200px 800px */
}
.footer {
  background-color: #111111;
    color: #eeeeee;
    border-top: 1px solid red;
    height: 60px;  /* footer height */
    padding-top: 20px;
    display: block;
    margin-top: 20px; /* space between content and footer */
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

Ответы [ 2 ]

0 голосов
/ 22 марта 2020 

nav {
word-spacing: 15px;
float: right;
padding-right: 20px;
 /* normal, hidden state */
}
a {
  text-decoration:none;
 color: #ffff;
 font-size: 20px;
 font-family: 'Roboto', sans-serif;
 font-weight: 600;
}
a:hover {
   /* when parent is hovered */
   color:black;
   opacity: 0.6;
   outline-style: solid;
   outline-color: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
   border-radius: 10px;
}

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom:1;
    *display:inline;

    /* this fix is needed for IE7- */
}
body {
  /* Previous Config   background: rgb(48,6,102);
  background: linear-gradient(117deg, rgba(48,6,102,1) 0%, rgba(110,5,162,0.9612045501794468) 56%, rgba(109,32,210,1) 77%);*/
  background: rgb(128,0,255);
  background: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
  /* Top, Right, Bottom, Left
  margin: 400px 300px 200px 800px */
  margin:0;
}
.footer {
  background-color: #111111;
    color: #eeeeee;
    border-top: 1px solid red;
    height: 60px;  /* footer height */
    padding-top: 20px;
    padding-left:20px;
    display: block;
    margin-top: 20px; /* space between content and footer */
    box-sizing: border-box;
    
    width: 100vw;
    
    position:absolute;
    bottom:0;
   
}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title> ~ Portfolio</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
</head>

<body>
  <header>
    <div class="container">
      <img src="">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      <footer class="footer">
        <font color="white" face="Roboto">Johnny Handcock</font>
      </footer>
      
      </header>
      
</body>
</html>
0 голосов
/ 22 марта 2020

У вас есть нижний колонтитул внутри заголовка, который кажется неправильным, но я не уверен, является ли это ошибкой или нет. Вы имеете дело с проблемой «липкого нижнего колонтитула» (вы можете найти ее в Google для ее решения). Одним из простых решений является использование flexbox. Будет работать следующий код: 

body{
   margin: 0;
}

html,body,header{
    height:100%;
}

header {
    display: flex;
    flex-direction: column;
}

footer{
    margin-top:auto;
}

Вы в основном делаете div, содержащий нижний колонтитул display:flex и flex-direction:column, а затем задаете для нижнего колонтитула значение margin-top: auto для pu sh. Вы также хотите, чтобы html, body и flex-контейнер имели высоту 100%: 

nav {
  word-spacing: 15px;
  float: right;
  padding-right: 20px;
  /* normal, hidden state */
}

a {
  text-decoration: none;
  color: #ffff;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
}

a:hover {
  /* when parent is hovered */
  color: black;
  opacity: 0.6;
  outline-style: solid;
  outline-color: radial-gradient(circle, rgba(128, 0, 255, 1) 0%, rgba(128, 0, 255, 0.9612045501794468) 67%, rgba(102, 34, 193, 1) 84%);
  border-radius: 10px;
}

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

body {
  /* Previous Config   background: rgb(48,6,102);
  background: linear-gradient(117deg, rgba(48,6,102,1) 0%, rgba(110,5,162,0.9612045501794468) 56%, rgba(109,32,210,1) 77%);*/
  background: rgb(128, 0, 255);
  background: radial-gradient(circle, rgba(128, 0, 255, 1) 0%, rgba(128, 0, 255, 0.9612045501794468) 67%, rgba(102, 34, 193, 1) 84%);
  /* Top, Right, Bottom, Left
  margin: 400px 300px 200px 800px */
}

.footer {
  background-color: #111111;
  color: #eeeeee;
  border-top: 1px solid red;
  height: 60px;
  /* footer height */
  padding-top: 20px;
  display: block;
  /* space between content and footer */
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

body{
   margin: 0;
}

html,body,header{
    height:100%;
}

header {
    display: flex;
    flex-direction: column;
}

footer{
    margin-top:auto;
}
<header>
  <div class="container">
    <img src="">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Experience</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <footer class="footer">
    <font color="white" face="Roboto">Johnny Handcock</font>
  </footer>
</header>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...