Move div to the right

Question

Move div to the right

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

First I want to clarify that I am new to this, so please excuse the format of the question. I would like to move my DIV with class "Menu" to the right and I can not find a way to do it, here I leave my code.

<body>
   <div> 
    <!-- Header -->
        <div class="header">
            <div class="logo">
                <a href="#">
                    <img src="img/img-tea-cozy-logo.png" alt="Tea Cozy Logo" />
                </a>
            </div>

            <div class="menu">
                <nav>
                    <span><a href="#">Mission</a></span>
                    <span><a href="#">Featured Tea</a></span>
                    <span><a href="#">Locations</a></span>
               </nav>
            </div>
       </div>
    </div>    
</body>

html css

asked by Arturo Pérez 24.06.2018 в 15:24

source

3 answers

___ ___ As erkimt make the main image occupies 100% of width and height ______ qstntxt ___

I would like to know how to do so that the main image of a page has a high of 100% of the browser mainly without the need to apply pixels.

I can do it by applying the pixels but when viewing it from another pc or a monitor with different screen resolutions this one does not look the same since it had it pre-defined for a specific resolution.

I want to achieve something like this See Here , that As you can see when the page is opened there is a main image and if you see it from another device you can still see the same without any distortion or the image is cut off. Eye, the page is not mine I just put it as an example.

My code:

%pre% %pre%

______ azszpr174982 ___

CSS has a set of properties that do exactly what you're looking for

%code% causes the image to be applied to the entire container without showing the leftovers on the sides or up and down

%code% causes the origin of the image to be the vertical and horizontal center

%pre% %pre%

______ azszpr174984 ___

if you apply this code to a div:

%pre%

I should give you the height and width of the page at that time, also if you put a background image to the div you can put:

%pre%

___ Format JSON

score 1 · Answer 1

Good day friend, that can be done by applying a simple class in css below I leave the line of code.

.menu{text-align: right;}

Apply in the following style in your CSS and ready your group (div) will be aligned to the right.

score 1 · Answer 2

If you want the div menu to look to the right of the div with the logo class, it's as easy as adding float: left in logo:

.logo {float:left;}

<body>
   <div> 
    <!-- Header -->
        <div class="header">
            <div class="logo">
                <a href="#">
                    <img src="img/img-tea-cozy-logo.png" alt="Tea Cozy Logo" />
                </a>
            </div>

            <div class="menu">
                <nav>
                    <span><a href="#">Mission</a></span>
                    <span><a href="#">Featured Tea</a></span>
                    <span><a href="#">Locations</a></span>
               </nav>
            </div>
       </div>
    </div>    
</body>

score 0 · Answer 3

Ready friend:)

<style>
.header {
  display: flex;
  
}

.menu {
  float: right;
}

.logo {
  float: left;
}

</style>

<body>
  <div>
    <!-- Header -->
    <div class="header">
      <div class="logo">
        <a href="#">
          <img src="img/img-tea-cozy-logo.png" alt="Tea Cozy Logo" />
        </a>
      </div>

      <div class="menu">
        <nav>
          <span><a href="#">Mission</a></span>
          <span><a href="#">Featured Tea</a></span>
          <span><a href="#">Locations</a></span>
        </nav>
      </div>
    </div>
  </div>
</body>