Solved

Css position absolute problem

Posted on 2013-05-15
10
344 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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
Menu Selected on Chrome for Windows 13 22
SlickNav Menu Plugin Not appearing on mobile 6 53
Center div containing a script 6 22
Add shadow behind div 5 24
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 …
This article discusses four methods for overlaying images in a container on a web page
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 custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

789 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