Jump to content

how to stop <span> causing new line?


Julius

Recommended Posts

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?

post-107495-13482403270643_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

post-107495-13482403271501_thumb.png

Link to comment
Share on other sites

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
}

Link to comment
Share on other sites

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.

post-107495-13482403271792_thumb.png

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.