• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Picture Positioning

JacR

New Coder
Hi, CodeForum Community,
I am trying to code a website but in need of help with certain elements like picture postitioning.
I want to change the position of the bottom logo to the right of the top logo so it'll line up.
Here's a direct link to the codepen project https://codepen.io/jacrhisiart/pen/WNxwXVM
HTML:
<!DOCTYPEhtml>
<body>
 <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
          <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
    />
</body>
<html>


      
  <center>
  <h1>TheFilePartition</h1>
    <p>Tech News Delivered.</p>
           <br />
        <br />
        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
        <br /><br />
    <div class="container">
               <br />
        <br />
        <img
          class="animate__animated animate__zoomIn"
            
          img src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          top="200px"   
          width="200px"
          alt="amongus "
          class="header-title-avatar"
        />
        <br /><br />
    </div>
  </center>
  <div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <body style="background-color:#919395;">
    <a href="i am idiot">Please help</a>
    <a href="example">example</a>
    <a href="stuff">stuff</a>
<div id="main">
  <button class="openbtn" onclick="openNav()">☰ </button>

</html>
CSS:
body {
  font-family: 'Alata', sans-serif;
  background-color: #919395;
  color:white;
}
* { color:#fff; text-decoration: none;}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #696969;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #919395;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #919395;
  color: white;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
}

.openbtn:hover {
  background-color: #919395;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
JavaScript:
 var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };
function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
 

Malcolm

Administrator
Administrator
Verified
Hi there,

Welcome to Code Forum!

So you want the bottom logo on the same as the top but to the right?

Edit: Like this?
If so remove the all break tags </br> between the two logos, then create a new class within the class attribute of the bottom logo with the name "blueLogo" (like shown below).
HTML:
<br />
<br />
  <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
  />
        <br /><br />
               <br />
        <br />
  <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
                   <br />
                   <br />
Then add another class to blue logo,
HTML:
   <img
          class="animate__animated animate__zoomIn blueLogo"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

Go to CSS and write:
CSS:
.blueLogo {
    float:right;
}
 
Last edited:

JacR

New Coder
Hi there,

Welcome to Code Forum!

So you want the bottom logo on the same as the top but to the right?

Edit: Like this?
If so remove the all break tags </br> between the two logos, then create a new class within the class attribute of the bottom logo with the name "blueLogo" (like shown below).
HTML:
<br />
<br />
  <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
  />
        <br /><br />
               <br />
        <br />
  <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
                   <br />
                   <br />
Then add another class to blue logo,
HTML:
   <img
          class="animate__animated animate__zoomIn blueLogo"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

Go to CSS and write:
CSS:
.blueLogo {
    float:right;
}

Thanks but, i guess it didn't work on the codepen project is there any reason?? did i do it wrong? let me know https://codepen.io/jacrhisiart/pen/WNxwXVM
 
best to start building your framework while you are there, if you don't want to use bootstrap you can simply do it like this :)

HTML:
<!DOCTYPEhtml>
<body>
 <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
          <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
    />
</body>
<html>
 
  <center>

    <div class="container">

      <h1>TheFilePartition</h1>
      <p>Tech News Delivered.</p>

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
 
      </div> <!-- subcontainer -->

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
 
      </div> <!-- subcontainer -->

    </div>

  </center>
        
  <div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <body style="background-color:#919395;">
    <a href="i am idiot">Please help</a>
    <a href="example">example</a>
    <a href="stuff">stuff</a>
<div id="main">
  <button class="openbtn" onclick="openNav()">☰ </button>

</html>

CSS:
body {
  font-family: 'Alata', sans-serif;
  background-color: #919395;
  color:white;
}
* { color:#fff; text-decoration: none;}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #696969;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #919395;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #919395;
  color: white;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
}

.openbtn:hover {
  background-color: #919395;
}

#main {
  transition: margin-left .5s;
  padding: 16px;

}
 
 
  .container{
    width:100%;
  }
 
  .subcontainer{
    width:50%;
    float:left;
  }

I have only messed with what's inside your centre tags with HTML and the bottom part of the CSS, all i have done is made a 100% width box and then put 2 50% width boxes inside and floated them left. By doing this as the screens size changes the boxes will change size too making things a bit more dynamic
 

JacR

New Coder
best to start building your framework while you are there, if you don't want to use bootstrap you can simply do it like this :)

HTML:
<!DOCTYPEhtml>
<body>
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
          <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
    />
</body>
<html>

  <center>

    <div class="container">

      <h1>TheFilePartition</h1>
      <p>Tech News Delivered.</p>

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

      </div> <!-- subcontainer -->

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

      </div> <!-- subcontainer -->

    </div>

  </center>
      
  <div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <body style="background-color:#919395;">
    <a href="i am idiot">Please help</a>
    <a href="example">example</a>
    <a href="stuff">stuff</a>
<div id="main">
  <button class="openbtn" onclick="openNav()">☰ </button>

</html>

CSS:
body {
  font-family: 'Alata', sans-serif;
  background-color: #919395;
  color:white;
}
* { color:#fff; text-decoration: none;}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #696969;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #919395;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #919395;
  color: white;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
}

.openbtn:hover {
  background-color: #919395;
}

#main {
  transition: margin-left .5s;
  padding: 16px;

}


  .container{
    width:100%;
  }

  .subcontainer{
    width:50%;
    float:left;
  }

I have only messed with what's inside your centre tags with HTML and the bottom part of the CSS, all i have done is made a 100% width box and then put 2 50% width boxes inside and floated them left. By doing this as the screens size changes the boxes will change size too making things a bit more dynamic
Thanks SOOOO MUCH :) I added a third one but centered. how do i move that a bit up or the others down?
 
Last edited:
HTML:
    <div class="container">

      <h1>TheFilePartition</h1>
      <p>Tech News Delivered.</p>

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
 
      </div> <!-- subcontainer -->

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
 
      </div> <!-- subcontainer -->
    
          <div class="subcontainer1">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          center="100"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />
 
      </div> <!-- subcontainer -->

    </div>

  </center>

Here is the correct HTML you put the subcontainer outside :D

Get red of subcontainer1 and edit subcontainer too :-

CSS:
  .subcontainer{
    width:33.33%;
    float:left;
  }

now depending on the order of the containers in the html will depend on how they show :D
 

JacR

New Coder
Thanks SOOOO MUCH :) I added a third one but centered. how do i move that a bit up or the others down?
HTML:
    <div class="container">

      <h1>TheFilePartition</h1>
      <p>Tech News Delivered.</p>

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(21).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

      </div> <!-- subcontainer -->

      <div class="subcontainer">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

      </div> <!-- subcontainer -->
   
          <div class="subcontainer1">

        <img
          class="animate__animated animate__zoomIn"
          src="https://thefilepartition.tk/assets/My%20Post%20(24).png"
          center="100"
          width="200"
          alt="amongus "
          class="header-title-avatar"
        />

      </div> <!-- subcontainer -->

    </div>

  </center>

Here is the correct HTML you put the subcontainer outside :D

Get red of subcontainer1 and edit subcontainer too :-

CSS:
  .subcontainer{
    width:33.33%;
    float:left;
  }

now depending on the order of the containers in the html will depend on how they show :D
MINDBLOWN. how can i thank you enough!! Thanks for the div tips too :)
 
Your very welcome, that's what this forum is for :D The only other tips that I wish i knew earlier are:-

One - Code indents, for example
HTML:
<html>
    
    <div class="onecon">
        
        <div class="twocon">
            
        </div>
        
    </div>
    
</html>
This will help you so much with neating your code and makeing it easier to read later on.

Two - Hidden comments, every code type has a hidden comment so, for example, HTML is <!--- Hidden Text ---->, these are good because let's say for example my last project was 5k lines of code, no a normal person it will take them ages to see what I have done and heck it would take me the same, now let's say i put the hidden text on the end of every div so I know what that end tag was ending or I put it at the start of the header bar so I know here is the header code :D

I hope ive helped a little at least, best way to thank me is to learn all you can and then pass it onto the next person and keep the circle alive, if you ever need anything else just drop me a message :D
 
Top Bottom