Solved

Css position absolute problem

Posted on 2013-05-15
10
343 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
ID: 39169648
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
ID: 39169649
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
ID: 39169657
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Author Comment

by:Panos
ID: 39169669
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
ID: 39169680
And what do you want it to do?
0
 
LVL 2

Author Comment

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

Expert Comment

by:nickinthooz
ID: 39169702
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
ID: 39169718
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
ID: 39169729
Ok thank you for your help
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 39169737
Thank you for your help
regards
panos
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

810 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