Making Square-Boxen in HTML und CSS

Question

Ich habe eine webpage erstellt (zur Zeit wird es nur im Desktop-Modus arbeiten) durch ein image zu sehen.

In diesem Moment bin ich in der Lage, fast 40-50% der Webseite zu erstellen, aber ich bin mir nicht sicher, wie 6 quadratische Felder (ZUSÄTZLICH SPORT, COLLEGIATE, INDIVIDUAL, PROFESSIONAL, ENTERTAINMENT, KOMMERZIELL) unter dem Hintergrundbild erstellt werden (wo der Typ steht). Ich habe alle meine CSS- und HTML-Codes in die Geige eingefügt. Ich habe versucht, Boxen zu erstellen, aber automatisch geht es über die Spitze eines Bildes (nicht sicher, warum).

Ich habe versucht, den folgenden Satz von Codes unter dem Nav-Abschnitt, aber leider hat es nicht funktioniert.

<div class="squares"> 
<p class="square1">ADDITIONAL SPORT</p> 
<p class="square2">COLLEGIATE</p> 
<p class="square3">INDIVIDUAL</p> 
<p class="square4">PROFESSIONAL</p> 
<p class="square5">Additional Sport</p> 
<p class="square6">Additional Sport</p> 
</div> 

Lassen Sie mich wissen, was ich falsch mache.

Answer 1

Versuchen Sie folgendes:

<div class="squaresRow"> 
    <div class="square">ADDITIONAL SPORT</div> 
    <div class="square">COLLEGIATE</div> 
    <div class="square">INDIVIDUAL</div> 
</div> 
<div class="squaresRow"> 
    <div class="square">PROFESSIONAL</div> 
    <div class="square">Additional Sport</div> 
    <div class="square">Additional Sport</div> 
</div> 


<style> 

.squaresRow { 
    width: 100%; 
} 

.square { 
    width: 33%; 
    display: inline-block; 
    text-align: center; 
} 

/* adds a margin between the two rows */ 
.squaresRow:first-child > .square { 
    margin-bottom: 2%; 
} 
</style> 

Answer 2

Wenn Sie ein CSS-Framework wie Bootstrap oder ein CSS-Tool wie Flex-Box verwenden, etwas zu tun, wie sehr leicht sein würde. Schau dir diese Tools an.

Aber nur mit Raw CSS und HTML. Versuchen.

zunächst eine Klasse Ihren Plätzen hinzuzufügen, so dass Sie alle Platz divs Ziel kann

.squares { 
 
    position: aboslute; 
 
    width: 300px; 
 
} 
 

 
.square { 
 
    text-align: center; 
 
    margin: 0px; 
 
    background-color: red; 
 
    width:100px; 
 
    height:100px; 
 
    float: left; 
 
}

<div class="squares"> 
 
<p class="square square1">ADDITIONAL SPORT</p> 
 
<p class="square square2">COLLEGIATE</p> 
 
<p class="square square3">INDIVIDUAL</p> 
 
<p class="square square4">PROFESSIONAL</p> 
 
<p class="square square5">Additional Sport</p> 
 
<p class="square square6">Additional Sport</p> 
 
</div>

Answer 3

Wenn man sich die Ergebnisse in „Ganze Seite“ aussehen anzeigen können Sie zwei Zeilen sehen von Quadraten. Hinweis: Sie können diese Revision auch unter here ansehen. (Der Code korrigiert auch einige kleinere HTML- und CSS-Fehler.) Ich habe einen roten Rahmen um die Quadrate hinzugefügt, nur um sie zu betonen, und sie kann sicherlich entfernt werden, wenn diese Seite fertiggestellt wird.

* { 
 
padding: 0; 
 
margin: 0; 
 
} 
 

 
.header { 
 
position: relative; 
 
} 
 

 
.header-background { 
 
    position:relative; 
 
width: 100%; 
 
} 
 

 
.header-title { 
 
position: absolute; 
 
\t top: 0px; 
 
\t left: 120px; 
 
} 
 

 
@font-face { 
 
font-family: AvantGarde; 
 
src: url(AvantGarde.woff); 
 
} 
 

 
h1 { 
 
text-align: center; 
 
font-size: 25px; 
 
font-family: "AvantGarde Demi"; 
 
letter-spacing: .24em; 
 
color: rgb(255, 255, 255); 
 
position: absolute; 
 
top: 18vh; 
 
\t left: 160px; 
 
\t width:100%; 
 
} 
 

 
p { 
 
font: 27px "Adelle PE"; 
 
padding-left: 200px; 
 
text-align: center; 
 
padding-right: 210px; 
 
line-height: 1.236; 
 
letter-spacing: .12em; 
 
-moz-transform: matrix(0.79000470431452, 0, 0, 0.79518533499854, 0, 0); 
 
-webkit-transform: matrix(0.79000470431452, 0, 0, 0.79518533499854, 0, 0); 
 
-ms-transform: matrix(0.79000470431452, 0, 0, 0.79518533499854, 0, 0); 
 
color: rgb(255, 255, 255); 
 
position: absolute; 
 
top:24vh; 
 
\t left:0; 
 
\t width:100%; 
 
} 
 

 
.nav { 
 
position: absolute; 
 
width: 155px; 
 
top: 0px; 
 
bottom: 0px; 
 
left: 0px; 
 
\t border-style: solid; 
 
border-right-color: #ff0000; 
 
background-color: #030303; 
 
opacity: 0.5; 
 
height: 1157px; 
 
} 
 

 

 
.navbar-logo { 
 
position: relative; 
 
width: 155px; 
 
} 
 

 
.navbar-tags { 
 
padding: 0; 
 
list-style-type: none; 
 
} 
 

 
.navbar-icons { 
 
display: inline; 
 
} 
 

 

 
.squares { 
 
position:absolute; 
 
left:32vw; 
 
bottom: 0vh; 
 
height:400px; 
 
width: 600px; 
 
border: 1px solid red; 
 
} 
 

 
.square { 
 
position: absolute; 
 
left:0; 
 
margin:0;padding:0; 
 
background-color: #ccc; 
 
    width: 200px; 
 
    height:200px; 
 
border: 1px solid black; 
 
    } 
 
.square1 { 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t } 
 
\t .square2 { 
 
\t posiiton:absolute; 
 
\t top:0; 
 
\t left: 200px; 
 
\t } 
 
\t .square3 { 
 
\t posiiton:absolute; 
 
\t top:0; 
 
\t left:400px; 
 
\t } 
 
.square4 { 
 
\t \t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
\t } 
 
\t .square5 { 
 
\t \t position:absolute; 
 
\t bottom:0; 
 
\t left: 200px; 
 
\t } 
 
\t .square6 { 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:400px; 
 
\t } 
 

 
.login { 
 
display: inline; 
 
padding-left: 10px; 
 
}

<div class="header"> 
 
    <img class="header-background" src="https://s17.postimg.org/5590nqkyn/dna-image.png"> 
 

 
    <img class="header-title" src="https://s12.postimg.org/5vqt7imb1/northman-wordmark.png" width="400" height="157"> 
 
    <h1>OUR DNA</h1> 
 
    <p>Northman was established to provide radically-evolved insurance solutions for the adventure and extreme sport markets. Northman is changing the extreme insurance playing field.</p> 
 
</div> 
 

 

 
<div class="nav"> 
 

 
    <img class="navbar-logo" src="https://s12.postimg.org/p1g2nywql/northman-logo.png"> 
 
    <ul class="navbar-list"> 
 
     <li class="navbar-tags"><a href="#">OUR DNA</a></li> 
 
     <li class="navbar-tags"><a href="#">PROGRAMS</a></li> 
 
\t \t \t \t \t <li class="navbar-tags"><a href="#">RESEARCH</a>/li> 
 
     <li class="navbar-tags"><a href="#">STORIES</a></li> 
 
     <li class="navbar-icons"><i class="fa fa-facebook-square"></i></li> 
 
     <li class="navbar-icons"><i class="fa fa-twitter-square"></i></li> 
 
     
 

 
    </ul> 
 
    <div class="squares"> 
 
<p class="square square1">ADDITIONAL SPORT</p> 
 
<p class="square square2">COLLEGIATE</p> 
 
<p class="square square3">INDIVIDUAL</p> 
 
<p class="square square4">PROFESSIONAL</p> 
 
<p class="square square5">Additional Sport</p> 
 
<p class="square square6">Additional Sport</p> 
 
</div> 
 

 
\t \t \t <a class="login" href="#">Log In</a> 
 
    <a class="login" href="#">Sign Up</a> 
 
\t \t \t  </div>

Auch sehen ausgezeichnete ähnliche Diskussion here