HTML5 DIV fehler

Lukas B.

Hallo,

ich sitze derzeit an einer website und habe folgendes Problem.

Die div "features" soll alle divs einschließen. Jedoch endet sie nach der div "uberschrift" und ich weiß nicht warum.

blackfisch

Kanns daran liegen, dass du alle als "Box1" bezeichnet hast?

Lukas B.

Hallo,

in wiefern spielt das eine Rolle ? das weist ja nur die style classe zu.

Panthor Life

Zitat von blackfisch

Kanns daran liegen, dass du alle als "Box1" bezeichnet hast?

Nein, so funktioniert HTML nicht, class/id werden nur für styling/scripting verwendet.

blackfisch

Hmm... is was dran Vergiss meinen Senf, ich mach echt zu wenig mit HTML... verwechselt

Lukas B.

Passt schon

Sonst noch jemand ne Idee?

nflug

Versuch den allen mal eine ID zuteben

Panthor Life

Schick einfach mal das Stückchen HTML als Text, nicht als Bild.

Lukas B.

Hallo,

@Flyyying_nflug das hat leider nichts gebracht.

Hier der codeschnipselt:

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>
                ***
            </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>

Alles anzeigen

Panthor Life

Funktioniert doch perfekt.

nflug

Zitat von Lukas B.

Hallo,

@Flyyying_nflug das hat leider nichts gebracht.

Hier der codeschnipselt:

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>
                ***
            </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>

Alles anzeigen

Schick uns mal dein css Bereich

Lukas B.

Hallo,

bei mir leider nicht:

Und genau so hoch ist die Überschrift also schließt es die boxen nicht mit ein.

Lukas B.

Hier der CSS Bereich:

Code

.features {
    background-image: url(../images/features.png);
    background-repeat: no-repeat;
    background-color: #fff;
	background-position: center center;
    height: 100%;
}




.features .box1 {
    float: left;
    padding: 1.25em;
    text-align: center;
    width: 25%;
    margin-right: 2%;
    margin-left: 2%;
    margin-top: 1.75em;
    color: #fff;
    font-family: 'Hammersmith One', sans-serif;
    font-size: 1.5em;
    height: 7em;
    background-color: transparent;
}




.features .box1 a {
    color: #fff;
}




.features .box1 i{
    margin-bottom: 0.4em;
}

Alles anzeigen

nflug

Also ich hab jetzt auch nicht so die Ahnung aber oben bei background Position steht doppelt Center

Lukas B.

Hallo,

@Flyyying_nflug das ist für Vertikal und Horizontal.

Ich habe gerade nochmal geschaut. Im Internetexplorer geht es, in google chrome nicht.

nflug

Zitat von Lukas B.

Hallo,

@Flyyying_nflug das ist für Vertikal und Horizontal.

Ich habe gerade nochmal geschaut. Im Internetexplorer geht es, in google chrome nicht.

Du musst dann glaube ich Abfragen in welchem Browser der User das benutzt und dann was abändern aber das ist auch nur so eine Theorie

Lukas B.

Hallo,

Echt davon habe ich noch nichts gehört aber kann schon sein. Was mich wundert ist, dass es auf derselben Seite mit anderen Divs geht.

Panthor Life

Zitat von Flyyying_nflug

Du musst dann glaube ich Abfragen in welchem Browser der User das benutzt und dann was abändern aber das ist auch nur so eine Theorie

Es gibt Gründe wieso es Bootstrap gibt. Benutz es einfach @Lukas B.

Fluent layouts die in allen Browsern gehen zu machen ist nicht ganz so einfach.

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.

Panthor Life · Wie gesagt, ich benutze Chrome 57.0.2987.21 beta (64-bit), geht perfekt.

Wie gesagt, ich benutze Chrome 57.0.2987.21 beta (64-bit), geht perfekt.

Tags