/    Sign up×
Community /Pin to ProfileBookmark

relative positioning within another style

Copy linkTweet thisAlerts:
May 22.2007

Do you see anything wrong with my codes? Everytime I have a style (wlink) within another style (sidebar), the position of everything (in wlink) starts going all over the place. How do I get the links to align properly? Please help

/* side bar */
td.sidebar {
width: 200px;
height: 483px;
background-image: url(“images/residential/sidebar.gif”);
background-repeat: no-repeat;
}
div.wlink {
font-size:.85em;
align-text: right;
}
div.wlink a {
text-decoration:none; color:#ffffff;
}
div.wlink a:hover {
text-decoration:none; color:#000000;
}

<td rowspan=”2″ class=”sidebar”>
<!–side links–>
<div class=”wlink”>
<a href=”res_collections.html” style=”font-size: 1.2em; position:relative; top:40px; right:0px;”>collections</a>
<a href=”#” style=”position:relative; top:70px; right:0px;”>American Themes</a>
<a href=”#” style=”position:relative; top:100px; right:0px;”>Bonaparte</a>
</div>
</td>

[upl-file uuid=09cc8e31-cb09-4c98-bb9b-b45292553de7 size=16kB]alignment.jpg[/upl-file]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMay 23.2007 — First off, you shouldn't try to "push" things around using relative positioning - the object still "occupies" the space it is moved from.

Secondly, setting up the menu links as an unordered list of links will ensure each line appears on a new line (<a> elements are inline elements), and the required spacing can be set with margins on the <li> and <ul> elements within the list structure.

Thirdly, why are you putting all this in a table? - this is not the correct use for a table (to display tabular data).
Copy linkTweet thisAlerts:
@WebJoelMay 23.2007 — Small point of additional contention:

<!--side links-->

you should have a 'white-space' between the "<!-- s~" and the "~s -->" like:

<!-- side links -->

Firefox sometimes misreads the former and treats it differently, sometimes, displaying the text or the virtual line-height as if there were text actually present... (since it is not a proper !comment anyway). :o
Copy linkTweet thisAlerts:
@wantteaauthorMay 24.2007 — good point, thx
×

Success!

Help @wanttea spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...