-3
Я пытаюсь сделать 4 отдельных кнопки в макете в макете с четырьмя квадратами. (см. прикрепленное изображение и притворяйтесь, что ящики имеют одинаковый размер и равноудаленный от eachother). Моя проблема в том, что я хочу, чтобы ящики были в центре страницы независимо от размера окна браузера, за исключением того, что я не хочу, размер страницы слишком мал. Я рисую пробелы в том, как это сделать, но, похоже, это сложно.HTML/CSS 4 Ссылки/кнопки
body{
\t font-family: Arial, Helvetica, Sans-Serif;
\t font-size:1em;
\t padding:0;
\t margin:0;
}
#content{
\t position:relative;
}
/* Banner Styling */
#banner {
\t display:inline-block;
}
#banner a{
\t text-decoration:none;
\t color:black;
}
#banner h1{
\t float:left;
\t padding-left:1em;
\t padding-right:auto;
}
#banner #logo{
\t position:absolute;
\t top:0px;
\t right:0px;
}
/* Navigation Styling */
Nav {
\t margin-top:2em;
}
Nav ul{
\t margin:0;
\t padding:0;
\t overflow:hidden;
\t list-style-type:none;
\t background-color: #1666af;
\t padding-left:2em;
\t min-width:1532px;
}
Nav ul li{
\t float:left;
\t text-align:center;
\t
}
Nav li a{
\t border: 1px solid #1666af;
\t padding:.3em 2em .3em 2em;
\t display: block;
\t background-color: #1666af;
\t color:White;
\t text-decoration:none;
}
Nav .current{
\t background-color:green;
\t border:1px solid green;
}
Nav li a:hover{
\t border: 1px solid #278efc;
\t background-color:#278efc;
}
/* BUTTONS */
#buttons{
\t position:relative;
\t left:50%;
}
#buttons a{
\t width:330px;
\t height:210px;
\t display:inline-block;
\t text-align:center;
\t color:white;
\t text-decoration:none;
\t border-radius:6px;
\t margin-top:50px;
\t box-sizing:border-box;
\t padding-top:89px;
}
/* CDW Button */
#button1{
\t border:1px solid black;
\t background-color:green;
\t transition: background-color 1.0s;
}
#button1:hover{
\t background-color:yellow;
}
/* ADR button */
#button2{
\t border:1px solid black;
\t background-color:blue;
\t transition: background-color 1.0s;
}
#button2:hover{
\t background-color:red;
}
/* GoGatway Button */
#button3{
\t border:1px solid black;
\t background-color:red;
\t transition: background-color 1.0s;
\t height:60px!important;
\t padding-top:20px!important;
}
#button3:hover{
\t background-color:teal;
}
/* AAS button */
#button4{
\t border:1px solid black;
\t background-color:orange;
\t transition: background-color 1.0s;
\t height:60px!important;
\t padding-top:20px!important;
}
#button4:hover{
\t background-color:brown;
}<!DOCTYPE html>
<html>
\t <head>
\t <link href="css/styles.css" rel="stylesheet" type="text/css" />
\t \t <title>Website</title>
\t </head>
\t <body>
\t <div id="content">
\t \t <div id="banner">
\t \t <h1><a href="default.htm">Website</a></h1>
\t \t \t <img id="logo" src="images/imagehere" alt="imagehere" />
\t \t </div>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a class="current" href="default.htm"> Home</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t \t <li><a href="Placeholder.htm">Placeholder</a></li>
\t \t \t </ul>
\t \t </nav>
\t \t
\t \t <div id=buttons>
\t \t \t <a href="button1.htm" id="button1">Placeholder</a>
\t \t \t <a href="button2.htm" id="button2">Placeholder</a>
\t \t \t <a href="button3.htm" id="button3">Placeholder</a>
\t \t \t <a href="button4.htm" id="button4">Placeholder</a>
\t \t </div>
\t \t
\t </div>
\t
\t </body>
</html>
Fix ваш вопрос, пожалуйста. Вы не можете ссылаться на JSFiddle без кода. Не пытайтесь обманывать, чтобы обойти это, есть причина, по которой он не позволял вам делать это нормально. Перед публикацией ознакомьтесь с инструкциями по вопросам. – Blubberguy22
Извините, что я действительно не понял, что сайт подсказывает мне делать. Кто-то был достаточно любезен, чтобы редактировать его для меня, я даже не мог понять, где ссылка для редактирования была без ctrl-f lol – HaydenHanson