css doesn't apply in footer div
Question
hello^^ I'm working on a small HTML/CSS Website and don't get something. I have the following html page:
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } h1 { font-family: myFirstFont; font-weight: bold; font-size: 350%; text-align: left; } .centered { text-align: left; } .container-fluid { width: 100%; } #footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: gray; color: white; text-align: center;}
<!DOCTYPE html> <html lang="de"> <head> <!-- Latest compiled and minified CSS for using bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript for using bootstrap--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link type="text/css" rel="main stylesheet" href="css/main.css"/> <!-- character set --> <meta charset="utf-8"> <!-- page's author --> <meta name="author" content="author@mail.xy"> <!-- responsive to mobile devices. width=device-width sets width accordingly to device. initial-scale=1" set initial zoom level when page is first loaded. --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Sites title --> <title>testseite</title> </head> <body> <!-- navigation bar --!> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <img class="navbar-left" src="imgs/le-logo.png" width="15%" alt="Let'Encrypt Logo"> <a class="navbar-brand" href="#"> Testseite</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Start</a></li> <li><a href="system.php">Aufbau des Systems</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> </ul> </div> </nav> <!-- bootstrap container definition to implement sidebar--!> <div id="sidebar" class="col-sm-3"></div> <div class="container-fluid"> <div class="col-sm-9"> <!-- Content --> <h1>Testseite 2018 </h1> <p class="centered">Diese Webseite dient als Test zur TLS-Zertifizierung durch Let's Encrypt und wurde mit HTML, CSS, PHP und Bootstrap erstellt.</p> <div class="row"> <div class="col-sm-3"> <img class="img-rounded" src="imgs/html-logo.png" alt="HTML-Logo" width="75%"> </div> <div class="col-sm-1"></div> <div class="col-sm-3"> <img class="img-rounded" src="imgs/css-logo.png" alt="CSS-Logo" width="75%"> </div> </div> <br> <div class="row"> <div class="col-sm-3"> <img class="img-rounded" src="imgs/PHP-Logo.png" alt="PHP-Logo" width="75%"> </div> <div class="col-sm-1"></div> <div class="col-sm-3"> <img class="img-rounded" src="imgs/bootstrap.png" alt="Bootstrap-Logo" width="75%"> </div> </div> <div id="footer" class="col-sm-12"> <p>Author</p> <p>Enterprise</p> <p>2018</p> <img src="imgs/logo_2.png" alt="img_descp"> </div> <!-- jQuery library for using bootstrap--> </body> </html>
I've marked the footer syntax, as you can see I've added an ID, tried it before with a class and it worked for a while until I edited the images.
The html text gets displayed properly and the way I want, but the CSS is not applied. In h1 I can see it working but chrome doesn't show the main css applied when I check the footer div. Grateful for anyone who has a guess, have been a while since I had to work with html.
1 answers
solution1
4 ACCPTED 2018-03-27 07:43:27
You entered an invalid value in the <link> tag's rel property.
Change:
<link type="text/css" rel="main stylesheet" href="css/main.css"/>
To:
<link type="text/css" rel="stylesheet" href="css/main.css"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.