Создайте вертикальную навигационную панель с заголовком и формой справа, как показано на рисунке - PullRequest
Новая
       46

Создайте вертикальную навигационную панель с заголовком и формой справа, как показано на рисунке

1 голос
/ 13 апреля 2020

Я хочу, чтобы страница была оформлена так: enter image description here

Но я не могу избавиться от верхнего левого блока.

Вот мой код:

html: 

</head>
<body>
  <header>
     <h1>Contacts</h1>
  </header>

  <nav>
      <a href="">Contacts</a>
      <a href="">Call Log</a>
     </nav>

<main>
  <p>Enter text below and click Search button to find a contact</p>
  <form name="searchform">
  <label for="name">Name: </label>
  <input id="name" type="text" name="name" value="">
<br>
<label for="name">Company: </label>
<input id="company" type="text" name="company" value="">
<br>
<label for="ddi">Telephone: </label>
<input id="ddi" type="tel" name="ddi" value="">
<br>

<button name="search" type="button" onclick="process()">Search</button>

</form>

</main>

</body>
</html>

css: 

/* 
blue header and nav bar, yellow background
 */
body{
    font-size: 125%;
    ackground: #ffff00;
}

nav{
    box-sizing:border-box;
    color:#06425C;
    background-color: #409FFF;
    display: inline-block;
    width: 20%;
    min-width: 125px;
    margin-right:15px;
    height:100vh;
    overflow: auto;
}

nav a{
    display:block;
    line-height: 45px;
    height:45px;
    color: #FFFFFF;
    background-color:#486B02;
    text-decoration: none;
    background-color:#486B02;
    padding-left: 50px;
    margin:10px 0 10px 5px;
    font-family: sans-serif, Arial, "Times New Roman";
}

header{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    display: inline-block;
    background: #409FFF;
    text-align: center;
    float: right;
    width: 80%;
}

h1{
    margin: 0;
    padding: 0;
/*   box-sizing:border-box; */
    display: inline;
    color: #ffffff;
    font-family: sans-serif, Arial, "Times New Roman";
}

main{
    display: inline-block;
    width:70%;
    height:100vh;
    overflow: auto;
}

input,
textarea {
    border-radius: 5px;
}

Я пытался целую вечность, но не могу понять, как это сделать это.

Как мне достичь того, что мне нужно?

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

Попробуйте использовать CSS сетку для разметки, подобной этой. Сетка CSS позволяет очень легко создавать подобные макеты. Вот базовый макет c для вас, используя сетку CSS. 

body {

  display:grid;
  grid-template-areas:
  "h h"
   "c f";
}

nav {
     grid-area: c;
    box-sizing: border-box;
    background-color: #409fff;
    /* display: inline-block; */
    /* width: 20%; */
    min-width: 125px;
    /* margin-right: 15px; */
    height: 100vh;

}

nav a {
     display: block;
    line-height: 45px;
    height: 45px;
    color: #ffffff;
    /* background-color: #486b02; */
    /* text-decoration: none; */
    /* background-color: #486b02; */
    /* padding-left: 50px; */
    margin: 10px 0 10px 5px;
}

header {
  grid-area: h;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* display: inline-block; */
    background: #409fff;
    text-align: center;
    float: right;
}

h1 {
  margin: 0;
  padding: 0;
  /*   box-sizing:border-box; */
  display: inline;
  color: #ffffff;
  font-family: sans-serif, Arial, "Times New Roman";
}

main {
  grid-area:f;
  background-color: yellow;
}

input,
textarea {
  border-radius: 5px;
}
1 голос
/ 13 апреля 2020

Если под «избавиться от верхнего левого блока» вы имеете в виду убрать там синее пространство, у вас это уже есть. Если вы хотите получить синее пространство, измените ширину заголовка на 100%.

...