CSS wird nicht auf Fuß angewendet angularjs

Question

Ich habe seit zwei Tagen damit zu kämpfen, obwohl es sehr einfach aussieht. Wie Sie die Fußzeile sehen erstellt i im Bild hier:

Ich habe zwei Probleme:

• Ich kann nicht innerhalb des Textes keine css Änderungen in der Fußzeile zu gelten scheinen ("Capgemini Newcomer-Anwendung ")
• Ich kann keine Linie hinzufügen, die den Rest der Seite von der Fußzeile trennt, ohne das Logo abzufangen oder einen Rand zwischen dem Seiteninhalt und der Fußzeile anzuwenden, wie im nächsten Foto gezeigt:

HTML-Code

<ion-footer-bar class="bar"> 
    <img src="img/Imag.png" class="test2" /> 
    <div class="text"> Capgemini Newcomer Application </div> 
    <img src="img/Test3.png" class="test"/> 
</ion-footer> 

CSS-Code

.bar { 

    position: absolute; 
    margin-top: 20px; 
    height: 50px; 
    border-top: 2px solid #FBC02D; 

} 

.bar .test { 
    float: right; 
    clear: left; 
    position: fixed; 
    max-width: 130px; 
    max-height: 100px; 
    right: 0; 
    bottom: 2px; 
} 


.bar .test2 { 

    width: 40px; 
    height: 40px; 
    bottom: 20px; 
} 

.bar .text { 

    text-align: center; 
    font-size: 6; 
    bottom: 2px; 

} 

EDIT

Nachdem die Änderungen unten genannten tun, ich habe dies:

Answer 1

<ion-footer-bar ng-class="{'bar': true}">...</ion-footer> 

Answer 2

ein paar Probleme mit der CSS Es gibt, die wie Sie nicht erwarten würde funktionieren:

.bar { 
    position: absolute; 
    margin-top: 20px; /* doesn't do anything for position: absolute */ 
    height: 50px; 
    border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */ 
} 

.bar .test { 
    float: right; 
    clear: left; 
    position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */ 
    max-width: 130px; 
    max-height: 100px; 
    right: 0; 
    bottom: 2px; 
} 

.bar .test2 { 
    width: 40px; 
    height: 40px; 
    bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */ 
} 

.bar .text { 
    text-align: center; 
    font-size: 6; /* <-- font size needs a unit like "px" or "pt" */ 
    bottom: 2px; /* same as above, this should probably be margin-bottom instead */ 
} 

Gereinigt, könnte es wie folgt aussehen:

.bar { 
    position: absolute; 
    height: 50px; 
} 

.bar .test { 
    position: fixed; 
    max-width: 130px; 
    max-height: 100px; 
    right: 0; 
    bottom: 2px; 
} 

.bar .test2 { 
    width: 40px; 
    height: 40px; 
    margin-bottom: 20px; 
} 

.bar .text { 
    text-align: center; 
    font-size: 6pt; 
    margin-bottom: 2px; 
    border-top: 2px solid #FBC02D; 
} 

Dies wird immer noch das Logo mit dem Rahmen überlappen, aber das ist ein Problem, das Sie im Logo Bild beheben müssen.