HTML/CSS/Bootstrap: Navigationsschaltflächen am Rand der Fußzeile

Question

Ich versuche, drei Navigationsschaltflächen am Rand der Fußzeile zu implementieren (so überlappen die Kopfzeile und gehen in "Mitte der Seite"). Es soll wie folgt aussehen:

How it is supposed to look like

Die drei Tasten ich spreche, die „Armaturenbrett“ sind, „Berichte“ und „Formularbearbeitung“ Tasten.

Ich kam tatsächlich zu diesem Design, aber als ich die anderen zwei Tasten über diesem ("Kontakt" und "Abmelden") implementiert, sprang eine der 3 Navigationstasten aus seiner Position und ich frage mich, warum dies passiert ist ? Auch wenn ich danach bootstrap cdn implementiert habe, haben alle drei Buttons ihre Größe und Position geändert und jetzt bin ich irgendwie verloren. Dies ist, wie es jetzt aussieht:

Current design

Mein Code ist folgende: HTML:

<div class="wrapperforstickyfooter"> 
<header role="banner" class="header-reports"> 
    <div class="content-wrap"> 
    <img class="logo" src="../../_images/logo.JPG" alt="Logo"> 

    <input class="logoutbtns" type="button" value="Log out"/> 
    <i class="material-icons" id="logout-icons">lock</i> 
    <input class="contactbtns" type="button" value="Contact us"/> 
    <i class="material-icons" id="contact-icons">contactmail</i> 

    <a class= "buttonDB" href="#"> Dashboard</a> 
    <a class= "buttonREP" href="#"> Reports</a> 
    <a class= "buttonEDIT" href="#"> Form editing</a> 
</div> 
</header> 

CSS:

.buttonDB, .buttonREP, .buttonEDIT { 
background: rgb(234,235,235); 
color: rgb(109,111,113); 
text-decoration: none; 
height: 20px; 
width: 180px; 
display: inline-block; 
text-align: center; 
margin-bottom: -20px; 
border-top: 10px solid rgb(227,111,30); 
position:relative; 
left:330px; 
top:20px; 
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif; 
} 

.buttonREP { 
border-top: 10px solid rgb(225,37,134); 
} 

.buttonEDIT { 
border-top: 10px solid rgb(110,25,112); 
} 

.content-wrap { 
max-width: 1170px; 
margin: 0 auto; 
padding: 5px; 
} 

Die Klasse .contentwrap ist implementiert, um die textfreien Ränder am Rand von sicherzustellen die Seiten, ohne die Hintergrundfarbe der Kopf- und Fußzeile zu beeinflussen.

Nicht sicher, ob Sie müssen dies aber dies ist die CSS für den Abmelde und kontaktieren Sie uns Tasten:

.logoutbtns { 
    float:right; 
    border: none; 
    background: rgb(0,143,197); 
    color: white; 
    font-size: 1em; 
    /*padding:30px 15px;*/ 
    padding-top:30px; 
    padding-right: 15px; 
    margin-right:0; 
    margin-bottom:0; 
} 

.contactbtns { 
    float:right; 
    border: none; 
    background: rgb(0,143,197); 
    color: white; 
    font-size: 1em; 
    padding-top:30px; 
    padding-right: 10px; 
    margin-right:40px; 
    margin-bottom:0; 
} 

.material-icons{ 
color:white; 
float:right; 
} 

#logout-icons, #contact-icons{ 
margin-top:25px; 
margin-right:0px; 
margin-bottom:0; 
padding-bottom:0; 
} 

ich ganz hier steckte und kann nicht herausfinden, was ich falsch gemacht hätte.

Answer 1

Löst dies Ihr Problem? Nur die Änderungen wurden an der .buttonDB, .buttonREP, .buttonEDIT {} vorgenommen und eine Schaltflächengruppenklasse hinzugefügt. Sie können die Position der Schaltflächengruppen-Klasse entsprechend Ihren Anforderungen ändern, unabhängig davon, ob Sie einen relativen Rand oder einen absoluten Rand haben möchten.

.button-group{ 
 
    display: flex; 
 
    position: absolute; 
 
    right:15%; 
 
    top: 100px; 
 
} 
 

 
.buttonDB, .buttonREP, .buttonEDIT { 
 
background: rgb(234,235,235); 
 
color: rgb(109,111,113); 
 
text-decoration: none; 
 
height: 50px; 
 
width: 180px; 
 
display: inline-block; 
 
text-align: center; 
 
border-top: 10px solid rgb(227,111,30); 
 
position:relative; 
 
font:13px/1.5 Verdana,Helvetica,Arial,sans-serif; 
 
margin-right: 10px; 
 
} 
 

 

 
.buttonREP { 
 
border-top: 10px solid rgb(225,37,134); 
 
} 
 

 
.buttonEDIT { 
 
border-top: 10px solid rgb(110,25,112); 
 
} 
 

 
.content-wrap { 
 
max-width: 1170px; 
 
margin: 0 auto; 
 
padding: 5px; 
 
} 
 

 
.logoutbtns { 
 
    float:right; 
 
    border: none; 
 
    background: rgb(0,143,197); 
 
    color: white; 
 
    font-size: 1em; 
 
    /*padding:30px 15px;*/ 
 
    padding-top:30px; 
 
    padding-right: 15px; 
 
    margin-right:0; 
 
    margin-bottom:0; 
 
} 
 

 
.contactbtns { 
 
    float:right; 
 
    border: none; 
 
    background: rgb(0,143,197); 
 
    color: white; 
 
    font-size: 1em; 
 
    padding-top:30px; 
 
    padding-right: 10px; 
 
    margin-right:40px; 
 
    margin-bottom:0; 
 
} 
 

 
.material-icons{ 
 
color:white; 
 
float:right; 
 
} 
 

 
#logout-icons, #contact-icons{ 
 
margin-top:25px; 
 
margin-right:0px; 
 
margin-bottom:0; 
 
padding-bottom:0; 
 
} 
 

 
@media only screen 
 
and (max-width : 700px) { 
 
.button-group{ 
 
    right:3%; 
 
} 
 
.buttonDB, .buttonREP, .buttonEDIT { 
 
    height: 30px; 
 
    width: 100px; 
 
    } 
 
}

<div class="wrapperforstickyfooter"> 
 
<header role="banner" class="header-reports"> 
 
    <div class="content-wrap"> 
 
    <img class="logo" src="../../_images/logo.JPG" alt="Logo"> 
 

 
    <input class="logoutbtns" type="button" value="Log out"/> 
 
    <i class="material-icons" id="logout-icons">lock</i> 
 
    <input class="contactbtns" type="button" value="Contact us"/> 
 
    <i class="material-icons" id="contact-icons">contactmail</i> 
 

 
    <div class="button-group"> 
 
    <a class= "buttonDB" href="#"> Dashboard</a> 
 
    <a class= "buttonREP" href="#"> Reports</a> 
 
    <a class= "buttonEDIT" href="#"> Form editing</a> 
 
</div> 
 
</div> 
 
</header> 
 
</div>

ich Änderungen in der Antwort gemacht, hoffe, es hilft.

Answer 2

@Harshit:

Danke für Ihre Antwort! Wie gesagt, es funktionierte und sieht jetzt wirklich gut aus. Wenn Sie jedoch die Größe des Fensters ändern (d. H. Kleiner machen), bleiben die Schaltflächen genau dort, wo sie sind, so dass sich der Rand auf der rechten Seite weder ändert noch deren Größe ändert.

Ich stellte jetzt den Button-Gruppe Klasse wie folgt aussehen:

.button-group{ 
display:flex; 
position:absolute; 
right:7%; 
top:100px; 
} 

Dies ist, wie die Seite am Anfang aussieht.Die Tasten sind genau, wie sie sein sollen:

Und das ist, wie es aussieht, wenn es kleiner zu machen:

One direkt sehen kann, dass die Tasten, um das gleiche halten Abstand zum rechten Rand, während der andere sofort beginnt, den Abstand zum rechten Rand zu verkleinern. Auch wenn ich es wirklich klein mache, verschwinden die Buttons, sobald sie sich am linken Rand des Fensters befinden. Was mache ich hier falsch?