3 Spalten Fußzeile links, Mitte und rechts

Wie Sie sehen, versuche ich eine Fußzeile zu erstellen, wo es 3 Spalten gibt, eine links, eine rechts und eine in der Mitte mit grauem Hintergrund, sollte es aussehen wie folgt aus:3 Spalten Fußzeile links, Mitte und rechts

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Frontend</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="box"> 
       <div id="header"> 
        <br /> 
        <div id="searchMenu"> 
         <input id="sweBtn" type="button" value="SVENSKA" /> 
         <input id="engBtn" type="button" value="ENGLISH" /> 
         <input id="searchTxt" type="text" /> 
         <input id="searchBtn" type="button" value="SÖK" /> 
        </div> 
        <br /> 
       </div> 
       <div class="col-md-4 text-left" id="imgText"> 
        <h3>VÄLKOMOMEN TILL<br />SUBLIME<br />CONSULTING!</h3> 
        <p>Alla Sveriges advokater är med i<br />Advokatsamfundet. Advokat-<br />samfundet upprätthålåler en hög<br />etisk och professionel standard<br /> hos Sveriges advokater, och ser till<br /> att advokaternas erfarenheter tas<br /> till vara i lagstifningen och den<br />övriga rättsutvecklingen.</p> 
       </div> 
       <div class="col-md-4"> 
        <img id="imgHeader" src="~/img/Header.png" /> 
       </div> 
       <div> 
        <ul id="navBar"> 
         <li><a>BEHÖVER DU AVOKAT?</a></li> 
         <li><a>ADVOKATETIK</a></li> 
         <li><a>ATT BLI ADVOKAT</a></li> 
         <li><a>UTBILDNING</a></li> 
         <li><a>ADVOKATSSAMFUNDET TYCKER</a></li> 
        </ul> 
        <img id="rssImg" src="~/img/RSSIcon.png" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="box"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a> 
          <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a> 
          <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a> 
         </div> 

         <div class="col-md-4"> 
          <a href="/Design">Om cookies-></a> 
         </div> 

         <div class="col-md-4"> 
          <p><strong>Sublime Consulting AB</strong></p> 
          <p>Telefon 08-459 96 00</p> 
          <a href="mailto:[email protected]">[email protected]</a> 
          <a>Mer kontaktuppgifter</a> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </footer> 
</body> 
</html> 

<link href="~/Content/custom.css" rel="stylesheet" />

CSS:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

    li a { 
     display: block; 
     color: #F3CAAA; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

     li a:hover { 
      background-color: dimgrey; 
     } 

#header { 
    background-color: #503F31; 
    color: white; 
    padding: 30px; 
} 

#searchMenu { 
    margin-left: 1450px; 
} 

#sweBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    border:double; 
    color: grey; 
} 

#engBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    border: double; 
    color: #F3CAAA; 
} 

#searchTxt { 
    background-color: grey; 
    border-color: grey; 
} 

#searchBtn { 
    font-family: 'Times New Roman'; 
    background-color: Transparent; 
    color: #F3CAAA; 
} 

#imgText { 
    font-size: 25px; 
    position: absolute; 
} 

#imgHeader { 
    width: 1904px; 
} 

#navBar { 
    font-family: 'Times New Roman'; 
    background-color: #503F31; 
    background-image: url(img/RSSIcon.png); 
} 

#rssImg{ 
    width: 30px; 
    height: 30px; 
    position:absolute; 
    margin-left: 1800px; 
    margin-top: -40px; 
} 

#footer { 
    background-color: grey; 
    color: white; 
    padding-bottom: -250px; 
}

Hier ist ein Link zu jsfiddle: ""

Was mache ich hier falsch ??

Quelle

2016-08-21 Malphai

Html der Fußzeile scheint in Ordnung zu sein. Zuerst sollten Sie die CSS-Links in die Kopfzeile setzen. Zweitens - Bootstrap-Link einfügen (auch im Header): https://www.bootstrapcdn.com/.

Quelle

2016-08-21 10:49:31 lwozniak

Sie haben Recht, sie sind richtig platziert. Aber wie kann ich dafür sorgen, dass es eine graue Box hat, wie Sie es auf dem Bild sehen? – Malphai

Sie haben keine ID namens footer (#footer). Benutze 'footer' anstelle von '#footer' in deinem CSS (entferne #). – lwozniak

3 Spalten Fußzeile links, Mitte und rechts

Antwort

Verwandte Themen