CODEWITHSUNDEEP
htmlcss
Nikita Ivanov
Nikita Ivanov

Reputation: 525

Text is out of the window

I'm trying to make a header menu where some menus are on the left side on some of them on the right side.

Here's the html of the header:

<li class="nav6">
    <a href="#img"><img src="example.com/img.png"></a>
</li>
<div class="options">
    <li class="nav5">
        <a href="1">1</a>
    </li>
    <li class="nav5">
        <a href="2" target="_blank">2</a>
    </li>
    <li class="nav5">
        <a href="3">3</a>
    </li>
</div>

And here's the css:

.nav6 {
   position:absolute;
   left:95%;
}
.nav6 a {
    text-decoration: none;
    color:black;
}
.nav5 a:hover {
    background-color: #111;
    border-radius: 15px;
}
.nav5 {
    float:right;
}
.nav5 a {
    display: block;
    color: #282828;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

.options {
    float: left;
    display: inline-block;;
}
li{
    list-style-type: none;
}

So the problem is that either I'm on the phone or I'm just making the window smaller, part of the image that is in the .nav6 is partly going out of it or, because on my site I've added an automatic scroll bar, it automatically shows a scroll bar.

The thing I want is that the image would be on the right side, the .options would be on the left as they are but, the image would be fully seen in every way.

I've tried to add to the .nav6 a style:

float:right;

But the problem is that I've gotten a drop down menu in the .nav6 and it doesn't open with that style.

Upvotes: 0

Views: 570

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

If you want the image in right side you have to put the options before .nav6 and warp all with div and set display:flex

See fiddle: https://jsfiddle.net/om7am3x5/ 

.warp{
  display:flex;
}
.nav6 {

}
.nav6 a {
    text-decoration: none;
    color:black;
}
.nav5 a:hover {
    background-color: #111;
    border-radius: 15px;
}
.nav5 {
    float:right;
}
.nav5 a {
    display: block;
    color: #282828;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

.options {
    float: left;
    display: inline-block;;
}
li{
    list-style-type: none;
}
<div class=warp>
<div class="options">
    <li class="nav5">
        <a href="1">1</a>
    </li>
    <li class="nav5">
        <a href="2" target="_blank">2</a>
    </li>
    <li class="nav5">
        <a href="3">3</a>
    </li>
</div>
<li class="nav6">
    <a href="#img"><img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/></a>
</li>

</div>

Upvotes: 1

Related Questions