CODEWITHSUNDEEP
htmlcss
Mehmet
Mehmet

Reputation: 227

How to locate image before list?

Hi I have a list that is compromised of 5 items and a little photo. I want "foto.png" to sit before list.

Now it looks like this:-

enter image description here

What I want to do is: enter image description here

Here is my code below:-

 .headerbar {
    	text-align: right;
    	padding-top: 10px;
    
    }
    .profilephoto {
    	float: right;
    	margin: 0 auto;
    }
    .headerbar li {
    	color: white;
    	display: inline;
    	list-style: none;
    	margin: 7.5px;
    	font-weight: bold;
    	font-size: 18.5px;
    	font-family: "Dosis", Helvetica, sans-serif;
    }
    .headerbar li:last-child {
    	margin-right: 7.5px;
    	color: #ff5f5f;
    }
  <div class="headerbar">
        	<div class="profilephoto"><img src="/img/foto.png" width="60"></div>
        	<ul>
    			<li><a href="#"> Profile</a></li>
                <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
                <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
            	<li><a href="#">&#8226; &#8226; &#8226;</a></li>
                <li><a href="#">QUIT</a></li>
            </ul>
        </div>

Upvotes: 3

Views: 83

Answers (6)

Giedrius
Giedrius

Reputation: 138

I suppose you want to keep photo and list near each other? You can make .profilephoto an inline-block level element and float the list right, check the demo: https://jsfiddle.net/gkaraliunas/8b8hsnys/

Upvotes: 2

Sven van den Boogaart
Sven van den Boogaart

Reputation: 12327

Place the image in the list. 

<div class="headerbar">
        <ul>
            // picture added here
            <li><img src="/img/foto.png" width="60"></li>
            <li><a href="#"> Profile</a></li>
            <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
            <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
            <li><a href="#">&#8226; &#8226; &#8226;</a></li>
            <li><a href="#">QUIT</a></li>
        </ul>
    </div>

You dont have to use floats this way and can ommit the prophilephoto css class.

You can still add margins by applying it to the li like:

 <li style="margin-left:20px;"><img src="/img/foto.png"  ></li>

or add a class to the li 

 <li class="profilepic"><img src="/img/foto.png"  ></li>

and in css:

.profilepic{
margin-left:20px;
}

Upvotes: 2

Zeev Katz
Zeev Katz

Reputation: 2273

Don't use float in this case, you have an display: inline-block; property for this issues.

Change this:

.profilephoto {
    float: right;
    margin: 0 auto;
}

To this:

.profilephoto {
    display: inline-block;
    vertical-align: middle;
}

Example:

.headerbar {
    text-align: right;
    padding-top: 10px;

}
.profilephoto {
    display: inline-block;
    vertical-align: middle;
}
.headerbar li {
    color: white;
    display: inline;
    list-style: none;
    margin: 7.5px;
    font-weight: bold;
    font-size: 18.5px;
    font-family: "Dosis", Helvetica, sans-serif;
}
.headerbar li:last-child {
    margin-right: 7.5px;
    color: #ff5f5f;
}
    <div class="headerbar">
        <ul>
        <div class="profilephoto"><img src="/img/foto.png" width="60"></div>
            <li>
             <a href="#"> Profile</a></li>
            <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
            <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
            <li><a href="#">&#8226; &#8226; &#8226;</a></li>
            <li><a href="#">QUIT</a></li>
        </ul>
    </div>

Fiddle example

Upvotes: 2

Stuart
Stuart

Reputation: 6780

You are floating the photo to the right! So float it to the left:

.profilephoto {
    float: left;
}

Upvotes: 1

OK sure
OK sure

Reputation: 2656

I think just changing the following should do the trick. Before:

.profilephoto {
    float: right;
    margin: 0 auto;
}

To:

.profilephoto {
    display: inline-block;
    margin: 0 5px 0 0;
}

Upvotes: 2

Anfuca
Anfuca

Reputation: 1329

You are floating foto.png to right...
Float both, .profilephoto and ul, to left, instead to right.

Upvotes: 3

Related Questions