HTML5 DIV fehler

Lukas B.

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?

nflug

Zitat von Lukas B.

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

Lukas B.

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?

beatzcraft

Zitat von Lukas B.

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

beatzcraft

Funktioniert es denn jetzt?

Lukas B.

Hallo,

konnte es leider noch nicht probieren.
Padding ist doch aber an allen seiten oder gibt es padding auch nur für eine seite ?

beatzcraft

Genauso wie margin gibt es auch ähnliche Befehle beim padding: W3School

Lukas B.

Hallo,

danke werde es gleich mal probieren.

Lukas B.

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

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

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.

Lukas B.

//edit:

Fehler behoben.

Ich hatte vergessen das floaten zu clearen. Alle Fehler behoben.

Tags