how to stop <span> causing new line?

[Julius]

Look at the attached picture to see whats wrong.

 

Markup:

<div class="fr user-menu">
<ul>
<li><a href="#" class="round icon ic-user"></a><span class="mini-info">Welcome, Julius</span></li>
<li><a href="#" class="round icon ic-settings"></a></li>
<li><a href="#" class="round icon ic-messages"></a></li>
<li><a href="#" class="round icon ic-logout"></a></li>
</ul>
<div class="clear"></div>
</div>

 

CSS

.fr {
float: right;
}
.mini-info {
display: block;
margin: 0px;
background-color: black;
font-size: 12px;
color: white;
padding: 4px;
border-radius: 7px 5px 5px 7px;
}

.user-menu ul {
list-style-type: none;
}

.user-menu li a {
display: block;
float: left;
}

other classes (round, icon, ic-*) I think has nothing to do with it since they just have some padding and background image attributes.

 

So how can I force other elements after span to be in same line as span is?

[AyKay47]

This is because you have set .mini-info to display: block;

This will cause the span to be a block, thus creating a break before and after the element.

You will probably want .mini-info to be display: inline-block instead.

[Julius]

Didn't help. I tried in .mini-info set display to inline, inline-block, same did to li a, nothing. It still causes a new line after it

[AyKay47]

well, you won't want them set to display: block anyway.

If this did not solve the issue, you will need to provide all of the relevant code, even if you think it is not causing it. I suspect some kind of width issue. But I cannot be sure without seeing the full css and relevant html.

[Julius]

heres the html

<div class="grid_12 topbar">
		<div class="fl brand">
			<h1><a href="#">Testas</a></h1>
		</div>

		<div class="fr user-menu">
			<ul>
				<li>
					<a href="#" class="round icon ic-user"></a>
					<span class="mini-info">Welcome, Julius</span>
				</li>
				<li><a href="#" class="round icon ic-settings"></a></li>
				<li><a href="#" class="round icon ic-messages"></a></li>
				<li><a href="#" class="round icon ic-logout"></a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>

	</div>
	<div class="clear"></div> <!-- TOP BAR END -->

 

CSS

.grid_12 {
float: left;
width: 940px;
}

.grid_1, .grid_2,
.grid_3, .grid_4,
.grid_5, .grid_6,
.grid_7, .grid_8,
.grid_9, .grid_10,
.grid_11, .grid_12 {
margin: 0 10px;
}

.topbar {
height: 60px;
background-color: #fff;
}

.fl {
float: left;
}

.fr {
float: right;
}

.user-menu ul {
list-style-type: none;
}

.user-menu li a {
display: block;
float: left;
}

.round {
border-radius: 5px;
}

.icon {
background-color: red;
background-repeat: no-repeat;
background-position: center;
padding: 13px;
margin-right: 5px;
}

.ic-user {
background-image: url('../images/icons/ic_user.png');
}

.ic-settings {
background-image: url('../images/icons/ic_settings.png');
}

.ic-messages {
background-image: url('../images/icons/ic_mail.png');
}

.ic-logout {
background-image: url('../images/icons/ic_cancel.png');
}

.mini-info {
display: block;
margin: 0px;
background-color: black;
font-size: 12px;
color: white;
padding: 4px;
border-radius: 7px 5px 5px 7px;
}

display: block; gives me no space between those two elements, and that is what I want, so if we will fix this issue with span and there will be a gap between those two elements, I hope you will help me merging them again, like it is now

[AyKay47]

A couple of things:

 

1. set the list items to float left not the anchors, you typically want the parent most element to float not a child.

 

2. having display: block with floating items is pretty useless since the float property takes the element out of position anyway and is typically used to stack elements.

 

3. What is the total width of these elements?

How large are the photos?

Is there any chance that the elements simply are too large to fit into 940px?

 

with these things being said, my css would look something like this (note that this is pseudo code since I do not know how large the images are etc..):

 

.grid_12 {
    float: left; //should this really be floating?
    width: 940px;
}

.grid_1, .grid_2,
.grid_3, .grid_4,
.grid_5, .grid_6,
.grid_7, .grid_8,
.grid_9, .grid_10,
.grid_11, .grid_12 {
    margin: 0 10px;
}

.topbar {
    height: 60px;
    background-color: #fff;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.user-menu ul {
    list-style-type: none;
}

.user-menu li { //changed to list items
    float: left;
}

.round {
    border-radius: 5px;
}

.icon {
    background-color: red;
    background-repeat: no-repeat;
    background-position: center;
    padding: 13px;
    margin-right: 5px;
}

.ic-user {
    background-image: url('../images/icons/ic_user.png');
}

.ic-settings {
    background-image: url('../images/icons/ic_settings.png');
}

.ic-messages {
    background-image: url('../images/icons/ic_mail.png');
}

.ic-logout {
    background-image: url('../images/icons/ic_cancel.png');
}

.mini-info {
    background-color: black;
    font-size: 12px;
    color: #fff;
    padding: 4px;
    border-radius: 7px 5px 5px 7px;
}​

 

I question the floats that you have, but that might just be because I can't see the entire layout.

some minor changes, but will certainly make a difference.

If this still does not work for you, please post a full screen shot of the page so I can see the full layout.

[Julius]

Well, now elements are in the same line, but everything looks crappy now. Images are 16x16px, I added some padding (red color) so that the element would be bigger and clearly visible. But now:

 

1. Somethings wrong with padding, I just wanted it to be about 5px outside icon in all directions, but when display was set to block, 13px of padding gave me what I wanted

2. How can I put that element that is on the spans left (that icon with padding) to be on spans left, like it is in the first attached file?

 

Thanks for helping me out

 

EDIT:

.icon {
background-color: red;
background-repeat: no-repeat;
background-position: center center;
padding: 1px 15px 5px 15px;
margin-right: 5px;
}

take a look at the padding. It gives me pretty much what I want (like in first attached file), but why the numbers are so strange?

[AyKay47]

You will have to tweak the padding to make it work.

As for the span being next to the user image, it's not because class='icon' has a margin-right of 5px;

You will most likely have to create another class or id specifically for the user pic anchor.

 

.user-icon
{
background-color: red;
background-repeat: no-repeat;
background-position: center center;
padding: 1px 15px 5px 15px;
//no margin
}

[Julius]

Well, I think I fixed it. I just moved anchor inside span. Removed margin, added some padding here and there and there it is. Will have to get back to this, because when I zoom in, sizes of span and those icons padding appears to be different while when zoom is set to 100%, i can't see any difference.