[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Unable to reposition an object

Posted on 2012-09-06
10
Medium Priority
?
682 Views
Last Modified: 2012-09-07
Hello

I would like to reposition the link "Try Demo" using the "trydemobuttonspacing a" class but it is not successful.

Where did i do wrong?


test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
<title>Untitled Document</title>
</head>
<li class="trydemobuttonspacing">Demo Programs<a href="http://www.test.com/Demo/" TARGET="_blank">Try Demo</a></li>
<body>
</body>
</html>


test.css
.trydemobuttonspacing a{
      float: right;
         position:absolute;      
      line-height: 15px;
    margin-top: 3px,
    margin-right: 30px;
}

body
{
background-color:#b0c4de;
}
0
Comment
Question by:surework1
  • 5
  • 3
  • 2
10 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38371839
You've set the position to absolute, but you haven't given it any parameters. You need a value for top or bottom and left or right. See this reference.

Example:
position: absolute;
left: 30px;
top: 50px;

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38371845
Also, "float: right;" is unnecessary because "position: absolute;" takes the element out of the normal flow anyway.
0
 
LVL 9

Expert Comment

by:Derek Jensen
ID: 38372527
Have you tried position: relative?
I'd try something like this:
.trydemobuttonspacing {
    position: relative;
}
.trydemobuttonspacing a {
    float: right;
    top: 15px;
    right: 15%;
    left: 0;
    bottom: 1em;
    line-height: 15px;
    margin-top: 3px,
    margin-right: 30px;
}

Open in new window

You can of course change top & right(and left & bottom) to whatever you want. :-)

However, with position: relative you don't necessarily need top/right/left/bottom; not unless you're trying to move the link across the edge of another, existing element.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:surework1
ID: 38376093
Hello

Thanks for the answers. Regarding the "test demo" link, I need to float: right and shift left by 200px. is it possible or what is the correct method?


.trydemobuttonspacing a {
    float: right;
    right: -200px;
}
0
 
LVL 9

Expert Comment

by:Derek Jensen
ID: 38376122
In my experience, to get it to shift correctly you need a corresponding 'position: ' attribute, but like xmediaman said, 'position: absolute' makes 'float: right' unnecessary. :-)
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38376129
You can't float an inline object. A link is like a word in a sentence. In order to float it, you'll have to make it a block element. If you want it 200 pixels from the right, give it a 200 pixel margin.
.trydemobuttonspacing a {
	display: block;
	margin-right: 200px;
}

Open in new window

0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 800 total points
ID: 38376133
Sorry, I left out the float.
.trydemobuttonspacing a {
	float: right;
	display: block;
	margin-right: 200px;
}

Open in new window

0
 
LVL 9

Accepted Solution

by:
Derek Jensen earned 1200 total points
ID: 38376268
umm...I'm thinking that's not what he's looking for. Take a look at this:float and position anchor tagNo display: block needed. :-)

...not trying to argue with you, I just like to keep CSS as simple as possible. Less chance of it tripping over its own feet that way. ;-)
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38376400
I stand corrected. Actually, bigdogdman, now that you mention it, that makes sense. You can float images and they are inline elements, too.
0
 

Author Comment

by:surework1
ID: 38378867
Hello All,

I hope u may spend sometime answer this question,

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27857798.html
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

872 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