Links and images menu with float

Question

Links and images menu with float

Navigation

#1 by (1 votes)

3

I tried to create a menu with html and css without any framework, I used float:left to put the image with the logo on the left and rest of the images that are anchors should I want to be able to find the right one, but when I use float:right I did not get the expected result, could you help me identify the problem?

Note: It does not have to be with float that's the way I tried. It is worth remembering that the menu accompanies the scroll of the site.

Here is the code I tried:

#wrap {
  width:calc(100% - 1px);
}

body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
}

body a {
  text-decoration:none;
}

body img {
  border: none;
}

.menu {
  position: fixed;
  top: 0;
  height: 80px;
  z-index: 1000;
  background-color: #f2f2f2;
}

.menu img {
  float:left;
  margin: 15px 0px 0px 20px;
  height: 70%;
}

.menu .menu-link {
  float:right;
}


.menu .menu-link a {
  line-height: 100px;
  color: #00497e;
  text-transform:uppercase;
  font-size: 11pt;
}

.menu .menu-link a:hover {
  border: 0;
  background-color: #e20613;
  color: white;
}

<div id="wrap">
  <div class="menu">
    <a href="#">
      <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png"></a><divclass="menu-link">
      <a href="#about" id="menuAbout">
        <img src="https://static.dentaldepartures.com/places/fa-building-o.png"style="width:5%;" />
        Empresa
      </a>
      <a href="#users" id="menuUser">
        <img src="http://alumnes.org/wp-content/uploads/2017/06/fa-user-circle-o-c0a2bd7a.png"style="width:5%;" />
        Usuário
      </a>
    </div>
  </div>
</div>

My goal was something like this:

html css

asked by anonymous 27.12.2017 / 19:34

1 answer

jQuery variable for URL Duplicate focus when using requestFocus in an EditText

score 1 · Accepted Answer

Caique your code is very messy rss, so I made a very basic modelinha with some measures in PX same and with FlexBox for you to have an idea.

html, body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
  width: 100%;
}

.menu {
    height: 80px;
    width: 100%;
    background-color: #666;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
}
img {
    max-height: 60px;
}
.logo {
    background-color: red;
    height: auto;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
}
.direita {
    display: flex;
}
.item {
    background-color: blue;
    margin: 0 10px;
    box-sizing: border-box;
    padding: 10px;

}
.item a {
    color: #fff;
    line-height: 80px;
    align-self: center;
}

<div class="menu">
    <div class="logo">
        <a href="#">
            <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png"></a></div><divclass="direita">
        <div class="item">
            <a href="#about" id="menuAbout">
                <img src="https://static.dentaldepartures.com/places/fa-building-o.png"/>Empresa</a></div><divclass="item">
            <a href="#users" id="menuUser">
                <img src="http://alumnes.org/wp-content/uploads/2017/06/fa-user-circle-o-c0a2bd7a.png"/>Usuário</a></div></div></div>

FromtheonestudiedinthecodeyouwillseethatitisveryquietandworksbetterthanFloat.

NowamodelwithFloat:LeftandFloat:Righttounderstandtheconceptbettersinceitwasyourfirstchoice

Sendsfull-screentonotappearbuggedinthesnippetrun

html, body {
  font-family: 'Open Sans';
  padding:0;
  margin:0;
  width: 100%;
  height: 100%;
}
.menu {
    height: 80px;
    width: 100%;
    background-color: #666;
    position: fixed;
    top: 0;
}
.logo {
    float: left;
}
.logo a img {
    max-width: 30%;
    height: auto;
    margin: 10px;
}
.item {
    float: right;
    display: inline-block;
    margin: 15px;
}
.conteudo {
    margin-top: 80px;
    height: 1000pxpx;
}

<div class="menu">
    <div class="logo">
        <a href="#">
            <img alt="Logo" src="http://inpartsaudebi.com.br/assets/img/brand-inpart.png"></a></div><divclass="direita">
        <div class="item">
            <a href="#about" id="menuAbout">
                <img src="http://placecage.com/50/50"/>Empresa</a></div><divclass="item">
            <a href="#users" id="menuUser">
                <img src="http://placecage.com/50/50"/>Usuário</a></div></div></div><divclass="conteudo">
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
    <p>conteúdo</p>
</div>

Very simple template too, just for educational purposes