-3
Ich versuche, 4 separate Schaltflächen in einem Layout in einem viereckigen Layout zu erstellen. (Siehe angehängtes Bild und tue so, als ob die Boxen die gleiche Größe und den gleichen Abstand voneinander haben.) Mein Problem ist, dass ich möchte, dass die Boxen in der Mitte der Seite sind, egal wie groß das Browserfenster ist. Größe, wenn die Seite zu klein wird. Ich zeichne Blanks, wie das geht, aber es scheint nicht zu schwer.HTML/CSS 4 Links/Schaltflächen
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>
Ihre Frage Fix, bitte. Sie können keine Verknüpfung zu einem JSFiddle ohne Code herstellen. Versuche nicht zu schummeln, um es zu umgehen, es gibt einen Grund, warum es dich daran gehindert hat, es normal zu machen. Bitte lesen Sie die Fragen Richtlinien vor dem Posten. – Blubberguy22
Tut mir leid, ich habe nicht wirklich verstanden, was die Seite mich auffordert. Jemand war so freundlich, es für mich zu bearbeiten, ich konnte nicht einmal herausfinden, wo der Link zum Bearbeiten ohne ctrl-f lol war – HaydenHanson