Hi there.

I'm having an issue with my class/id selectors.

This is the code I am currently using within the HTML.

<div id="my-login-bar">
<img class="logoutimage" src="img/icon-logout.png" />
<a class="loggingout" href="LOCATION">log out</a>

LOCATION is the equivalent of some PHP code I have in there.

In my CSS file the #my-login-bar has a position and width etc. However at the moment the image with the class .logoutimage sits too high beside the link. But when I change the margin-top or padding-top in the .logoutimage it also pushes around the link. And vice versa when I try altering the margin-top or padding-top in the class .loggingout for the link.

Can anyone help?


8 Years
Discussion Span
Last Post by diafol

margins, padding, doesnt work
try position relative to/from something fixed (in this example the bottom of my-login-bar)
something to try
my-login-bar is set for dimensions and position, elements inside my-login-bar can be set relative to my-login-bar

.logoutimage { top:auto;bottom:3px;left:3px;right:auto;}
.loggingout { top:auto;bottom:3px;left:auto;right:3px}

one is set relative to left bottom, the other set realtive to right bottom
to align the items just change anything not set "auto" and shift em round

Edited by almostbob: n/a


Forget your classitis:

<div id="my-login-bar">
<img src="img/icon-logout.png" />
<a href="LOCATION">log out</a>

This just takes out all those presentation-only attributes - unless you're using them as hooks for js??

Using AB's CSS:

#my-login-bar img { top:auto;bottom:3px;left:3px;right:auto;}
#my-login-bar a { top:auto;bottom:3px;left:auto;right:3px}

Edited by diafol: n/a

Votes + Comments
tight, clean, the obvious answer AFTER you point it out

Thanks for the help, managed to fiddle with it a bit and got it working.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.