Solved

Css position absolute problem

Posted on 2013-05-15
10
345 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SlickNav Menu Plugin Not appearing on mobile 6 63
css selector 1 24
How to resize a div in html 3 55
Change static entered data to dynamic with counter 5 36
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

696 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