asked on

Side by side button in css

I need help to align 4-5 button side by side . I try but I am getting a black bar in the page and I cant seem to find where to get it out .... here is the script.

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

      <style>
      .container * {
      transition: all 2s;
      -moz-transition: all 2s;
      -webkit-transition: all 2s;
      -o-transition: all 2s;
      }

.container {
      margin: auto;
      padding: 15px;15px;
      box-sizing: border-box;
      resize: none;
      }
      .navbar {
      border-radius: 4px;
      }
      .navbar-inverse .navbar-brand {
      color:red;
      }
      .form-control {
      width: 40px;
      }

      #Tab{
      position:absolute;
      width:100%;
      height:140px;
      top:0px;
      left:0px;
      background-color:white;



      }


            </style>
</head>
<body>

<div id= "Tab"> </div>
      <div class="container">
      <div class="sidebyside">

      </div>
      </div>
      <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
      <form class="navbar-form navbar-"left" role="search">

<button type="button" class=" btn btn-primary load"> Home </button>
<button type="button" class="btn btn-primary load"> About us </button>
<button type="button" class="btn btn-primary load"> Menu </button>
<button type="button" class="btn btn-primary load"> Photos </button>
<button type="button" class="btn btn-primary load"> Contact </button>

      </form>
      </div>
      </nav>

      </button>


      </script>

Ishaan Rawat

Your HTML was not valid.

<div id= "Tab">
      <div class="container">
      <div class="sidebyside">

      <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
      <form class="navbar-form navbar-left" role="search">
      
         <button type="button" class=" btn  btn-primary load"> Home </button>
         <button type="button" class="btn btn-primary load"> About us </button>       
         <button type="button" class="btn btn-primary load"> Menu </button>
         <button type="button" class="btn btn-primary load"> Photos </button>
         <button type="button" class="btn btn-primary load"> Contact </button>
       
         
      </form>
      </div>
      </nav>
      </div>
      </div>
      </div>

Open in new window

You closed the div tags as soon as you opened it.
Try the above

mitchroy Grubb

ASKER

Ok thank I will try ..

mitchroy Grubb

ASKER

I have uploaded a picture, it that black line there

mitchroy Grubb

ASKER

...

Member_2_248744

greetings mitchroy Grubb, , something seems very wrong with your HTML for a Navigation Bar at the top of a Page? ? You have a <form> element in this, , I can not see why anyone could place a <form> in any Navigation Bar with choices like -
Home , About Us , Menu, Photos, and Contact

these are web pages on your site, and are usually NOT in a <form> but usually are in a link element -
<a href="index.html">Home</a>

What kind of Nav Bar are you trying to create here, Is is a normal type Nav Bar, , , OR is this for an AJAX section change, or other special Nav Bar , with javascript operations? ? ?

mitchroy Grubb

ASKER

Well I am a beginner on this, I wanted to have buttons with the contents of home about us , etc... Going across and then add the logo on the opposite side

Member_2_248744

OK, You do not necessarily have to use the <button> element to have a link <a> look like a button. . . You are using the bootstrap CSS, and for bootstrap there are hundreds of examples online for NavBars, BUT since you are a beginner, you should maybe look at so Tutorials for Bootstrap NavBars, -
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

Using Bootstrap can make some things in CSS be easier to accomplish, but most people need to learn the basics of HTML and CSS before they can understand what to do with Bootstrap.

Ask Questions if you need more info

mitchroy Grubb

ASKER

Oh OK thanks ... I have the basics of Html but Css is new to me and I am just teaching myself...

Member_2_248744

There is so much now in the ways you can use CSS, that for beginners, it seems overwhelming all there is to learn. But I think it is very very important for a web page builder to learn as much about CSS as they can manage, since it can make a big difference in the way a Page looks and operates, ESPECIALLY for muti device Responsive SIZE changes.

some places to learn about CSS -
https://www.w3schools.com/css/default.asp
http://www.csstutorial.net/

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mitchroy Grubb

ASKER

Thank you. I will try it once I get to Pc... Thanks again...

mitchroy Grubb

ASKER

Will let u know of the out come

mitchroy Grubb

ASKER

thanks for the help it works but image i have there wont display as it should be ...

mitchroy Grubb

ASKER

I can give you the site so you can look at it

Member_2_248744

I did not include any <img> in the HTML that I gave? ? But the <img> already has an inline block kind of display, so if in the HTML for
<div id="navTop">

then it will display wherever it's placed -

<div id="navTop">
<img src="icon.jpg" />
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="menu.html">Menu</a>
<a href="photos.html">Photos</a>
<a href="contact.html">Contact</a>
</div>

I can look at the page source code if you have a web address for the page.

mitchroy Grubb

ASKER

got it . super !!! ur great

Member_2_248744

This is an easy and simple top menu bar, and with CSS you can do many many additions and changes to placement, size, space between, colors, and so many other things in the way it looks. I always advise beginners to CHANGE the CSS settings in this and other things, to learn what happens in the way it shows in the browser. any web search for a CSS adjustment like display -
"css display"
will show you web pages to learn what all you can set for the display

Member_2_248744

I just did this web search
"css vertical-align"
and got pages about using that, IF you mix images and text or inline-block display items, then you may need to have the vertical-align in the css.

mitchroy Grubb

ASKER

Member_2_248744

It's been to long for a response, Closing this abandon question