CODEWITHSUNDEEP
htmlcss
new
new

Reputation: 11

HTML text allignment issues

Why does my text looks like it's combined together when you run it? is there something wrong with the code? the part with the div. I'm trying to separate them. I changed the "fixed" to " bottom", it's working but it just gonna make the text going up. I'm trying to make like a watermark in the left bottom and give you an opinion where you can change the light mode into dark mode. please help me with this project. don't worry about the content, it just for demonstration.

 </body>
</html>
    <style type ="text/css" >
      .footer{ 
          position: fixed;     
          text-align: left;    
          bottom: 0px; 
          width: 100%;
          color: black;
      }  
   </style>
   </head>
   <body>
       <div class="footer">Made by rama 4/6/2020</div>
       <div class="footer"><a href="D:\dark mode uwu project rama.html" target="_self">use dark mode</a></div>
   </body>

Upvotes: 0

Views: 82

Answers (4)

Avinash Dalvi
Avinash Dalvi

Reputation: 9321

I have done changes in his code only not added extra styling and design.

</body>
</html>
    <style type ="text/css" >
      .footer{ 
          position: fixed;     
          text-align: left;    
          bottom: 0px; 
          width: 100%;
          color: black;
      }  
   </style>
   </head>
   <body>
       <div class="footer">Made by rama 4/6/2020
       <a href="D:\dark mode uwu project rama.html" target="_self">use dark mode</a>
       </div>
       
   </body>

Upvotes: 0

Ken
Ken

Reputation: 673

You have to apply .footer class to the first div only, delete the second div because you don't need it. Here's an example.

.footer {
  position: fixed;
  text-align: left;
  bottom: 0px;
  width: 100%;
  color: black;
}
</body>

</html>
</head>

<body>
  <div class="footer">Made by rama 4/6/2020 <a href="D:\dark mode uwu project rama.html" target="_self">use dark mode</a></div>
</body>

If you want to move "use dark mode" one line down, all you need to do is add an html <br> tag. Like this...

.footer {
  position: fixed;
  text-align: left;
  bottom: 0px;
  width: 100%;
  color: black;
}
</body>

</html>
</head>

<body>
  <div class="footer">Made by rama 4/6/2020 <a href="D:\dark mode uwu project rama.html" target="_self"><br>use dark mode</a></div>
</body>

Upvotes: 3

Niklas
Niklas

Reputation: 1948

You need to wrap all elements and make them fixed.

I added the .footer>* to align the children of the footer left to right. Otherwise they would be on top of each other, because div tags are filling out the hole width.

      .footer{ 
          position: fixed;     
          text-align: left;    
          bottom: 0px; 
          width: 100%;
          color: black;
      }
      .footer>* {
        display: inline-block;
      }
   <body div class="footer">
       <div>Made by rama 4/6/2020</div>
       <div><a href="D:\dark mode uwu project rama.html" target="_self">use dark mode</a></div>
   </div>

Upvotes: 3

yinsweet
yinsweet

Reputation: 2851

Wrap both of your <div> with <div class="footer">

</body>

</html>
<style type="text/css">
  .footer {
    position: fixed;
    text-align: left;
    bottom: 0px;
    width: 100%;
    color: black;
  }
</style>
</head>

<body>
  <div class="footer">
    <div>Made by rama 4/6/2020</div>
    <div><a href="D:\dark mode uwu project rama.html" target="_self">use dark mode</a></div>
  </div>
</body>

Upvotes: 2

Related Questions