Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

position span inside a table cell by class or id

Posted on 2016-10-20
5
Medium Priority
?
92 Views
Last Modified: 2016-10-21
If i have a html table with id of mytable and inside of this table i have a table cell with class colstyle 2. In this table cell I have 2 spans.
One span has a class of span1class and the other one has a class of span2class

If I use this css statement it positions both of my spans on the top right

        #mytable td.colstyle2 span {
            position: absolute;
            top: 1px;
            right: 1px;
        }

How would my statement look if I only want the statement to apply to the span with class span1class ?
0
Comment
Question by:maqskywalker
  • 3
  • 2
5 Comments
 
LVL 2

Expert Comment

by:Amita Singh
ID: 41853289
please share your html code or link.
0
 
LVL 1

Author Comment

by:maqskywalker
ID: 41853930
Hi here is a fiddle of my example.

http://jsfiddle.net/r2db13tg/

Notice how the span containing "Howdy"  and the span containing "Hello" are both being put on the top right.

I only want the span with class Peach containing "Hello"  to be put on the top right.

My desired result should look like this:

desired result
So in my fiddle. This span with and it's hyperlink are the only thing I want put on the top right corner:

                                    <a href="http://www.google.com">
                                        <span title="My Second Span" class="PeachClass" id="TestSpan2">
                                            Hello
                                        </span>
                                    </a>
0
 
LVL 2

Accepted Solution

by:
Amita Singh earned 2000 total points
ID: 41854242
add this css
#mytable td.colstyle2 span#TestSpan2 {
    position: absolute;
    right: 1px;
    top: 1px;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41854363
Perfect. Thanks.
0
 
LVL 2

Expert Comment

by:Amita Singh
ID: 41854372
You Welcome
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question