Solved

Css position absolute problem

Posted on 2013-05-15
10
338 Views
Last Modified: 2013-05-15
Hello experts.
I 'm trying to use this tutorial:http://vandelaydesign.com/demos/inline-edit/

I want to use ul and li tags instead of divs but i have problems to place the a tags on the right of the li tag. i get them on the right of the screen.

Any help?
<style type="text/css">
div#maincontent{display: inline;
    float: left;
    margin: 0 0 0 55px;
    padding: 13px 0 0;
    width: 700px;}
ul.bdesc
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.bdesc li
{
background-image: url(img/sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #d9d9d9; 
}
.datainfo { margin-left: 10px; font-size: 11px; color: #333; }
.lidesc a.editlink { position: absolute; right: 0; top: 13px; }
.savebtn { position: absolute; right: 0; top: 13px; padding: 4px 9px; background: #5972a8; font-size: 1.2em; cursor: pointer; border: 1px solid #1a356e; color: #fff; -webkit-box-shadow: inset 0 1px 0 #8a9cc2; -moz-box-shadow: inset 0 1px 0 #8a9cc2; box-shadow: inset 0 1px 0 #8a9cc2; margin-bottom: 5px; margin-top: -5px; display: none;
}
.savebtn:hover { color: #fff; background: #607db7; text-decoration: none; }
.savebtn:active { background: #556790; }
</style>
<div id="maincontent">
 <ul class="bdesc">
   <li class="lidesc" id="bdesc_1">
      <span class="datainfo" id="sp_1">Item 1</span>
      <a class="editlink" href="#">Edit Info</a>
      <a class="savebtn">Save</a>
   </li>
   <li class="lidesc" id="bdesc_2">
      <span class="datainfo" id="sp_2">Item 2</span>
      <a class="editlink" href="#">Edit Info</a>
      <a class="savebtn">Save</a>
   </li>
   <li class="lidesc" id="bdesc_3">
      <span class="datainfo" id="sp_3">Item 3</span>
      <a class="editlink" href="#">Edit Info</a>
      <a class="savebtn">Save</a>
   </li>
 </ul>
</div>

Open in new window

screen.gif
0
Comment
Question by:Panos
  • 5
  • 3
  • 2
10 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 334 total points
Comment Utility
Change the class for .lidesc a.editlink as below

.lidesc a.editlink { float:right }
0
 
LVL 6

Assisted Solution

by:nickinthooz
nickinthooz earned 166 total points
Comment Utility
You don't need absolute positioning.  Change the position: absolute; to position: relative; and go from there.

.lidesc a.editlink { position: relative; float:right; }

Open in new window


Absolute positioning does just that, positions the link 0 pixels from the right and 13 pixels from the top of the screen.

From there you can either use padding, margin, or float:right; to move it over.

edit* Gary's comment is the more correct of the two, relative is not needed, it's implied so you technically don't have to use it.
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi nickinthooz
.....Absolute positioning...

If you see the tutorial it is not placing the a tags 0 pixels from the right.
Can you please explain why?
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi GaryC123

float right is doing the job.  but there is a little problem. For a long text i get a result like the screenshot.
screen.gif
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
And what do you want it to do?
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 2

Author Comment

by:Panos
Comment Utility
Maybe setting a width to the span could wrap the text before the a tag
0
 
LVL 6

Expert Comment

by:nickinthooz
Comment Utility
do this:

.lidesc a.editlink { margin-left: 20px; }

Open in new window


However, ideally you would want to shrink the width of the <li> and keep your float so they all stay lined up.
0
 
LVL 58

Accepted Solution

by:
Gary earned 334 total points
Comment Utility
If it is a static width element then you can just add a width to the description span - .datainfo (say about 650px)
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Ok thank you for your help
0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you for your help
regards
panos
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now