CODEWITHSUNDEEP
htmlcss
user10602591
user10602591

Reputation:

How to place elements where you want on a webpage?

I'm very new to web development. I feel confident in my knowledge in HTML and CSS to start building my webpage and I was exposed to a very small amount of bootstrap. My question is regarding a personal webpage I am building for myself. I want to have a navigation bar on the top that will link to different pages such as: "Home", "about me", "Projects". But I still have a hard time understanding how to position them where I want. My idea is to make these 3 fields a list, take out the list styling, and then make these elements inline-block. But for some reason, my code does not translate to what I want which is all 3 phrases on a single line and spaced out evenly. Further, even if I can manage that how can I control where it goes beside floating left or right or using bootstrap? Even though it may be less efficient can anyone explain to me the naive way of hardcoding it with just HTML and CSS just so I have an understanding? Do I have to manipulate the margins and padding through trial and error? Any advice would be appreciated, I have just begun to learn HTML and CSS but I am determined to get good at web development.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>First WebPage</title>
    <link rel="stylesheet" type="text/css" href = "style.css">

  </head>
  <body>
    <div class = "top-border">
      <ul class = "navbar">
        <li>Home   </li> <br>
        <li>About Me   </li> <br>
        <li>Projects   </li>
      </ul>
    </div>
  </body>
</html>

My CSS is 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.top-border {
  width: auto;
  height: 100px;
  background-color: #D46A6A;
}

.navbar{
  float:left;
  display: inline-block;
  list-style: none;
  margin-left: 20px;
}

Upvotes: 2

Views: 735

Answers (4)

Jason McComb
Jason McComb

Reputation: 1

I found that w3css (https://www.w3schools.com/w3css/) was easier than Bootstrap, had enough structure to produce the types of layouts you describe, AND has the added bonus of having a really small code footprint. Standard CSS only (No jQuery or JavaScript library).

Each feature links to a 'Tryit' editor. This link shows the layout you describe with two cells.

(https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_container)

   <div class="w3-cell-row">

     <div class="w3-container w3-red w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>

      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>

    </div>

Just add one more cell block, and you're there.

 <div class="w3-cell-row">
      <div class="w3-container w3-red w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
      <!--HERE-->
      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
</div>

Hope this helps, good luck!

Upvotes: -1

Bidhan Majhi
Bidhan Majhi

Reputation: 1370

Not using bootstrap here, as you have mentioned in your question

<div class="top-border">
    <div class="navbar">
        <a class="links" href="you can add your page links here" > Home </a>
        <a class="links" href="#" > About </a>
        <a class="links" href="#" > Project </a>
    </div>
</div>

<style>
.top-border{
   width:100%;
   height:auto;
   position:absolute; #or use float if you don't want a fixed navbar
   top:0; #add as per requirement
   left:0;
 }

 .navbar{
    height:100px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
  }

  .links{
   float:left;
   height: 50px;
   width: 100px;
   padding-top: 25px;
   padding-bottom : 25px;
   text-align: center;
   text-decoration: none;
  }
</style>

Also, don't forget to make the body margin 0.

Upvotes: 0

user10516706
user10516706

Reputation:

Using <br> tag is not proper way for layout implementation, Please omit them, I proffer using flex, the flex-box methods are very simple and useful. see below code:

.navbar {
  display: flex;
  flex-direction: row;
}

For more styles, use your past CSS.

Upvotes: 2

ewwink
ewwink

Reputation: 19164

to make your menu single line, remove <br> from your list and set li to float: left

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-border {
  width: auto;
  height: 100px;
  background-color: #D46A6A;
}

.navbar {
  float: left;
  display: inline-block;
  list-style: none;
  margin-left: 20px;
}

.navbar li {
  float: left;
  border-right: 1px solid yellow;
  padding: 2px 5px
}
<div class="top-border">
  <ul class="navbar">
    <li>Home </li>
    <li>About Me </li>
    <li>Projects </li>
  </ul>
</div>

Upvotes: 0

Related Questions