Member Avatar for absticles

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>
</div>

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?

Thanks,
Abi

  • 3 Contributors
  • 5 Replies
  • 89 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for almostbob

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 because: n/a
Member Avatar for diafol

Forget your classitis:

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

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 because: n/a
commented: tight, clean, the obvious answer AFTER you point it out +4
Member Avatar for almostbob

like it, v.clean (no wasted 'anything')

Member Avatar for absticles

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

Member Avatar for diafol

Great! Are we solved?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.