Hallo,
Dann ist mir gerade noch ein Fehler aufgefallen. Für Google Chrome vergrößere ich die Div mit margin.
Was brauche ich da für den Internetexplorer?
Hallo,
Dann ist mir gerade noch ein Fehler aufgefallen. Für Google Chrome vergrößere ich die Div mit margin.
Was brauche ich da für den Internetexplorer?
Hallo,
@Greeny es gibt aber auch gründe warum man es nicht verwenden kann. Es ist ein Ausbildungsprojekt und ich muss alles selber schreiben.
Hast du es auf einer öffentlichen Seite dann könnte ich es mir auch mal ansehen
Hallo,
habe leider derzeit nicht die Möglichkeit.
Habe das Problem jetzt gelöst indem ich die höhe absolut gesetzt habe.
Leider wird im Firefox und anderen Browsern der Hintergrund nicht hinter margin angezeigt sondern hört nach dem Element auf. Wie kann ich das beheben?
Leider wird im Firefox und anderen Browsern der Hintergrund nicht hinter margin angezeigt sondern hört nach dem Element auf. Wie kann ich das beheben?
Margin ist außerhalb des Elements und wird so auch nicht durch den Hintergrund gefüllt. Für deinen Zweck musst du Padding benutzen.
Infografik
Funktioniert es denn jetzt?
Hallo,
konnte es leider noch nicht probieren.
Padding ist doch aber an allen seiten oder gibt es padding auch nur für eine seite ?
Genauso wie margin gibt es auch ähnliche Befehle beim padding: W3School
Hallo,
danke werde es gleich mal probieren.
Hallo,
@beatzcraft das hat so funktioniert, Danke.
Jetzt habe ich leider immer noch das Ursprüngliche Problem.
Wenn in die Div-Größe relativ setze, ist diese in der Höhe nicht vorhanden.
HTML Code
<div class="features" id="features">
<div class="uberschrift">
</div>
<div class="box1">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-bullseye fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-battery-empty fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-bicycle fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-heartbeat fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-bullhorn fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-phone fa-3x" aria-hidden="true"></i><br>
V
</div>
<div class="box1">
<i class="fa fa-mobile fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-clock-o fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-map-o fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="fa fa-thermometer-quarter fa-3x" aria-hidden="true"></i><br>
</div>
<div class="box1">
<i class="" aria-hidden="true"></i><br>
</div>
</div>
</div>
Alles anzeigen
Die div Features definiert den Hintergrund der Boxen.
CSS Code
.features {
background-image: url(../images/features.png);
background-repeat: no-repeat;
background-color: #fff;
background-position: center center;
height: 83.313em;
width: 100%
}
.features .boxen {
width: 100%;
height: 100%;
clear: both;
}
.features .box1 {
float: left;
padding: 1.25em;
text-align: center;
width: 25%;
margin-right: 2%;
margin-left: 2%;
margin-top: 4%;
color: #fff;
font-family: 'Hammersmith One', sans-serif;
font-size: 1.5em;
height: 11%;
}
.features .box1 a {
color: #fff;
}
.features .box1 i{
padding-bottom: 0.4em;
}
Alles anzeigen
Setze ich die Höhe der Div auf einen %-Wert, ist er in der Höhe nicht vorhanden.
//edit:
Fehler behoben.
Ich hatte vergessen das floaten zu clearen. Alle Fehler behoben.