Member Avatar for samson.oba.77

Hi ! I don´t understand why my div class="footer" doesnt appear, everthing else seems to work fine. Thx for help !

<!DOCTYPE html>
<html>
<head>
    <title>Hauptseite</title>
    <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<style type="text/css">
 html,body{height:100%;margin:0;background-color:#191970;}
.maincontent{position:relative;min-height:100%;margin-left:10%;margin-right:10%;background-image:url(pic1_pixabay.jpg);background-size:100%;background-repeat: no-repeat;}
.frontbox{position:absolute;margin-top:1%;left:1%;right:2%; padding:20px;font-size;text-align:center;background-color:white;opacity:0.5;border:thick solid #4D94FF;border:(255, 255, 255, .5); border-radius: 25px;}
.sidebox{position:absolute;top:40%;left:2%;width: 250px;background-color:white;opacity:0.5;border:thick solid #4D94FF;border-radius: 25px;}
.footer{background-color:black;}
</style>
</head>
<body>
<div class="maincontent">
<div class="frontbox">
 <a href="UnserePhilosophie.html">Unsere Philosophie</a>&nbsp
 <a href="url">&Uumlber uns</a>&nbsp 
 <a href="url">Unser Portfolio</a>&nbsp 
 <a href="url">Blog</a>&nbsp 
 <a href="url">Unser Kontakt</a>&nbsp 
 <a href="url">Sample Page</a>&nbsp 
 <a href="url">Tryout Page</a> 
</div>
<div class="sidebox">
 <ul style="list-style-type:disc">
 <li><h1>Updates und Archive</h1></li>
 <li><a href="url">J&aumlnner 2015</a></li>
 <li><a href="url">Februar 2015</a></li>
 <li><a href="url">M&aumlrz 2015</a></li>
 <li><a href="url">April 2015</a></li>
 <li><a href="url">Mai 2015</a></li> 
 <li><a href="url">Archive</a></li> 
 </ul>

</div>
<div class="footer"> Impressum  all rights reserved </div>
</div>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 187 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by samson.oba.77

Dani AI

Generated

Short summary and cause

's suggestion (anchoring the footer to the viewport) explains why the footer suddenly appeared for . In this layout the absolutely positioned boxes are taken out of normal flow, so they do not push the page content down; a footer placed after them can end up overlapped or effectively hidden. Small CSS/html mistakes (missing values, invalid declarations, malformed attributes) also make debugging harder and can change how different browsers render later rules.

Practical checklist

  • Confirm the footer is in the layout flow (avoid absolute positioning for main layout elements unless intentional).
  • If the footer must overlay content, give it a stacking order (z-index) and an explicit background + text color.
  • Prefer rgba() backgrounds instead of lowering overall element opacity when only background transparency is wanted. Opacity on a container affects its children.
  • Use browser developer tools to inspect computed position/size and to temporarily add an outline or bright background to locate elements.
  • Validate HTML/CSS and fix malformed attributes (a broken meta or stray CSS token can complicate rendering).

A modern, reliable alternative

A flexbox "sticky footer" keeps the footer at the bottom when content is short but lets it follow content when the page grows. The idea is to make the page a column-flex container and let the main area grow:

/* layout idea (do not paste in unchanged if other rules conflict) */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { flex: 1 0 auto; }
footer { background: #000; color: #fff; padding: 12px; flex-shrink: 0; }

Final notes

If fixing CSS alone (as suggested) is preferred, focus on removing invalid declarations and restoring normal flow first. That keeps the footer predictable across browsers and avoids overlap with absolutely positioned widgets.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

html5 :: no type on css or script

line 9 querying border:thick solid #4D94FF;border:(255, 255, 255, .5); duplicate definitions
and ;font-size; no size

for .footer{background-color:black;}
try .footer{background:black;color:white;position:fixed;bottom:0;z-index:1;}
to;
stick the div in place,
make other elements slide under as they scroll
give contrast between background and text

you can condense css
background-image:url(pic1_pixabay.jpg);background-size:100%;background-repeat: no-repeat;}
is the same as background:url(pic1_pixabay.jpg) 100% no-repeat;}

when you get it all right for this page,
put the script and css to external files, used for all pages
makes every page smaller and faster

Hello and good luck,

Edited by almostbob
Member Avatar for samson.oba.77

@ almostbob thx it worked !!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.