Link with image on one line

Can someone help me to bring the arrows and the text on one line? (see image) The link tag should fill out the "th" (display:block).

HTML:

<th colspan="1" rowspan="1" class="ui-state-default"> <a href="http://www.example.com">example</a> <span class="ui-icon ui-icon-carat-2-n-s"></span> </th>

CSS:

.ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_222222_256x240.png); } .ui-icon-carat-2-n-s { background-position: -128px 0; } table#example th a { display:block; } table#example th span { float: right; }

Can I may be realize that with the z-index CSS-attribute or something like that?

Thank you very much!

-------------Problems Reply------------

Try adding float left to the anchor:

table#example th a {
float: left;
display:block;
}

Are you sure you want to be using tables for this? If you're using tables purely for layout; don't. There's a few ways to do this using css:

Method 1:

HTML

<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>

CSS

.link, .arrows {
float: left;
}

.link {
margin: 0px 10px; /* Spacing either side of link */
}

Method 2

HTML

<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>

CSS

.link {
display: inline;
margin: 0px 10px; /* Spacing either side of link */
}

Change the CSS so that the <a> and <span> both float left:

table#example th a {
float: left;
}

table#example th span {
float: left;
}

Example here.

Category:html Views:0 Time:2011-08-30

Related post

  • Excel link in word adds blank lines 2013-05-23

    I am pasting into WORD a link to a cell in an EXCEL. For some reason, it is adding a blank space before and after the inserted value. For instance, start with this in WORD: This is test line 1. This is test line 2. Add a blank line between the two an

  • How to get a 64 bit dll with c source file, def file, link file by using command line in vc 6.0 2010-06-11

    My compile environment is windows xp and vc 6.0. Now I have a c source file(msgRout.c), def file(msgRout.def), link file(msgRout.link), then I use commands below to get a 32 bit dll: 1.cl /I ../include -c -W3 -Gs- -Z7 -Od -nologo -LD -D_X86_=1 -DWIN3

  • Making all three 3 HTML links display on the same line with HTML/CSS? 2011-11-04

    I have the following HTML (removed some of the form input tags to make the code minimal for readability): <a href="add.html">Add</a> <a href="remove.html">Remove</a> <form action=""> <a href="" onclick="parentNode.sub

  • Problem with a linked text box on a line chart 2012-08-05

    I have a line chart in a powerpoint 2010 slide. The chart is linked to an Excel 2010 worksheet and there is a text box on the chart which is also linked to a cell on that worksheet. When the worksheet changes the line chart on the slide updates OK bu

  • How do I link my UIButton to a line of code inside my didFinishLaunching? 2013-05-10

    I want my button to restart my view when clicked, so when I click on it I want to run the following line of code: [self.navigationController pushViewController:self.viewController animated:YES]; or would I want it to run my entire didFinishLaunching

  • Linking a slide bar to lines graph.__keywords: slide bar, chart, graph 2012-07-07

    i'm comparing 3 offers from different suppliers, i have a table that includes the number of free units from each supplier vs their monthly fees and extra units cost. i want to create a slide bar with number of used free units and link it to a graph.

  • ASp.NET MVC2 - Rendering an action link and text on same line 2011-03-04

    I will like to achieve the following html using Html.ActionLink: <li><a href="/WhatWeDo/JohnDoe">John Doe</a>President</li> The name "John Doe" and title "President" will be coming from a staff model. This is what I have: <

  • no line break in a long html link? 2009-11-04

    I know, nobr tag is deprecated, then how can i do this with other tag or css? --------------Solutions------------- use the following css property: white-space:nowrap; Try using non-breakable spaces to prevent text from breaking: &nbsp; You can al

  • Mail program splits link over two lines 2010-05-05

    In C#, I'm sending a mail with an activation link to users after they have registered. However, the link is split over two lines in the mail and thus doesn't work. I've checked in Visual Studio and the string containing the link looks fine. I've also

  • CSS menu auto width - links with multiple words line breaking 2010-11-18

    Here's a live demo for your convenience: http://jsfiddle.net/Lr6NQ/2/ On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so th

  • css few links on a menu steps to a new line 2012-04-15

    I create CSS menus day in, day out and I've never come across this problem before and its really baffling me! :S I've tried everything I can think of with no luck. In Chrome it works fine, but in Firefox the last link steps onto a new line, in IE the

  • Firefox is putting scratch lines through links on webpages 2012-05-08

    I have Firefox 28. I made a change a few days ago and some of the clickable links on pages have a line drawn through them. I think it is called a strike through. It is weird. It only effects the way I see the site. Everything works as it should. Also

  • my sent web links have only one line higlited when a recipiant recives it 2013-04-02

    Why when a recipient receives a link I send using the “Send Link By E-Mail” in internet explorer using Outlook 2003 is only the first line highlighted? Rather than just clicking on the link, it requires the recipient to copy and past the link into th

  • linking cells by lines 2015-02-13

    hello, i want to link cells with a line, either elbow or straight , in the cells i have symbols and i want to move these symbols to different cells due to dates and targets etc, how do i link 2 cells with a line and not have this line break when i mo

  • LightWindow & IE7, "Line 444 - object does not support this property or method" 2008-09-03

    I have just received and bypassed a problem with LightWindow and IE7 where, on page load, it throws a JavaScript error on line 444 of lightwindow.js, claiming that the object does not support this property or method. Despite finding various postings

  • How to get the source file name and the line number of a type member? 2008-09-24

    Considering that the debug data file is available (PDB) and by using either System.Reflection or another similar framework such as Mono.Cecil, how to retrieve programmatically the source file name and the line number where a type or a member of a typ

  • Tiger/Lines or shapefiles of USA states and cities? 2008-12-09

    i've been asked to generate some demographic reports (crime rates, birth/deaths, etc) based on state and cities for the USA. I have all the demographic data (provided by our client) but can't seem to find any places which have the boundaries (read: L

  • How do I project lines dynamically on to 3D terrain? 2009-01-16

    I'm working on a game in XNA for Xbox 360. The game has 3D terrain with a collection of static objects that are connected by a graph of links. I want to draw the links connecting the objects as lines projected on to the terrain. I also want to be abl

  • g++: In what order should static and dynamic libraries be linked? 2009-01-29

    Let's say we got a main executable called "my_app" and it uses several other libraries: 3 libraries are linked statically, and other 3 are linked dynamically. In which order should they be linked against "my_app"? But in which order should these be l

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.195 (s). 11 q(s)