Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Css position absolute problem

Posted on 2013-05-15
10
Medium Priority
?
357 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 1336 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 664 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 1336 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month20 days, 15 hours left to enroll

864 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