We help IT Professionals succeed at work.

Precise / Absolute / Relative positioning for text and images

Rowby Goren
Rowby Goren asked
on
189 Views
Last Modified: 2014-06-08
Hello

I have some images and text which are being controlled, in a general way, by css.

But I want the image and text to be precisely positioned, while still being useable, if possible, in my Twitter/Bootstrap responsive website.

For the image and text here are the two css styles I have so far:

div#maximenuckLEFT li.maximenuck img {
    border: medium none;
    float: left;
}

div#maximenuckLEFT span.titreck {
    float: right;
    text-decoration: none;
}

Open in new window


In my next post I will provide the link to the development site.

Thanks!

Rowby
Comment
Watch Question

Author

Commented:
Here's a link to the page, a work in progress:

The text and left is in the middle of the page, on the left.

Link to page, work in progress

Thanks!

Rowby
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Do you want precision or do you want responsive? Precision usually means inflexible, which is pretty much the opposite of responsive.

I recommend you stick with floats and margins. If you want more specific suggestions, you'll need to show us how you want that to look.

Author

Commented:
Hi Kravimir

Yes, I think as I work on it I can use regular floats and margins.  Later today or tomorrow I'll give you an example how I want it to look.

At least now I know I should to rule out "precision" when working in responsive mode.

Rowby

Author

Commented:
Hi Kravimir,

Okay!  I am taking your suggestion and going with floats and margins, etc.  

Attached is a mockup  rough idea how i want it to look.  I can fine tune the margins, padding etc.  But I need the image to be on the left and the text to be on the right, taking advantage of the full width of the menu.  (The styling is basic in my primitive mockup  example.  I will make it look much better :)

The person who developed the menu module said it can all be done with CSS.   So I'd appreciate your thoughts on dong it.

Ideally I would put the css in my custom.css file to override any other css :)

Thanks!

Rowby

Author

Commented:
Forgot to include the mockup.


Here it isMockup

Author

Commented:
Hi

Hold off for now, while I have the developer of the menu double check some of my settings.

Thanks

Rowby

Author

Commented:
Hi

While waiting for the menu's developer's response, I made some progress.

Please look at this page.   LINK to test page

Scroll down to the menu(s) in the middle of the page with the garish colors (fake colors for css testing purposes).

Looking at the menu on the left, I was able to add a class to the text link.   I am hoping that adding padding and maybe margins to that link will fix the problem.

The css is  
<a class="maximenuck MenuImagesTrio" title="MenuImages" href="#">
<img align="left" alt="MusicFromScratch" src="/images/templateImages/performance-music-violin.jpg">
<span class="titreck">MusicFromScratch</span>
</a>

Open in new window

So I can apply it to similar menus I don't want the css to be  too specific.  Perhaps something just based on "a class="maximenuck MenuImagesTrio"

Any thoughts?

Thanks!

Rowby
LINK: How it looks now (on top) and how I want it to look: (on bottom).

Author

Commented:
Hi Hi Kravimir,

OK!  I worked with the menu developer in cleaning up the overall container for the submenu.
So what I would appreciate your help is the positioning of the image and the text in the submenu.  

It's only the menu on the left we are styling. Once that's done I will clone it to the middle and right menus.

To keep the style useable for all 3 menus can we base the style on the following html?

<a class="maximenuck MenuImagesTrio" title="MenuImages" href="#">
<img align="left" alt="MusicFromScratch" src="/images/templateImages/performance-music-violin.jpg">
<span class="titreck">MusicFromScratch</span>
</a>

Open in new window


That is, I would prefer not to base it on div#performanceLEFT -- unless it's absolutely necessary.

I would like to be able to move the image more to the left - floating it, and then float the text to the right.  So if you can give me the overall CSS code I will then have control of the two elements and will fine tune the exact pixels on my own.

Thanks!

Rowby
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
The best way to move the image more to the left would be to decrease the left padding for the link which is set in the "div#performanceLEFT ul.maximenuck li.maximenuck a" rule  in "/modules/mod_maximenuck/themes/trio/css/maximenuhck.php?monid=performanceLEFT". Loading the same stylesheet with different selectors multiple times is very inefficient.

Then add something like this to one of your stylesheets:
.maximenuck a.MenuImagesTrio {
	text-align: right;
}
.maximenuck a.MenuImagesTrio img {
	float: left;
	margin-right: 1em;
}

Open in new window

Author

Commented:
Thanks Kravimir,

I will look into that file and make the change(s).

I'll do that later today.

Thanks!

Rowby

Author

Commented:
Thanks

I made the changes and that did it.

Any reason you chose 1em for the right margin settings (rather than px).

Rowby

Author

Commented:
Trying to now fine tune the padding / margins right and left.

The following doesn't seem to be connecting with the html:

.maximenuck a.MenuImagesTrio {
	text-align: right;
  padding-right: 20px;
}
.maximenuck a.MenuImagesTrio img {
	float: left;
	margin-right: 20em;
}

Open in new window

Maybe I d not have it quick right    As tests I tried margins and padding. :(

Rowby

Author

Commented:
Hi,
Here's  my latest attempt:

.maximenuck a.MenuImagesTrio {
	text-align: left;
  margin-left: 20px;
  padding-left: 20px;
}
.maximenuck a.MenuImagesTrio img {
	float: left;
	margin-left: 20em;
  margin-left: 20px;
  padding-left: 20px;
}

Open in new window


Doesn't seem to affect anything.    

Rowby
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Some of the styles aren't working because of other existing rules. The "div#performanceLEFT li.maximenuck > a img" rule is overriding some of those margins.

Any reason you chose 1em for the right margin settings (rather than px).
I find that 1em is often a good starting point for padding. Also I like to remind people that there are more units than just "px" and percentages.

Author

Commented:
Hi

Can you tell me which stylesheet you are seeing "div#performanceLEFT li.maximenuck > a img

I thought, in general, that the cascade of the custom.css file will "override' any existing css's
Thanks

Rowby
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks, Kravimir:

I cleaned up maximenuhck.php, with the help of firebug, and added some styles on the custom.css and this particular issue has been fixed

I have a submenu width issue, but that will wait for another Experts Exchange question.

This comment was particularly helpful: " includes an ID-selector will override any that does not."

When you say "ID Selector" I assume that would cover  both div.  and div#?    (div ID and div CLASS)????

Rowby
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
You're welcome.

When you say "ID Selector" I assume that would cover  both div.  and div#?    (div ID and div CLASS)????
Your question is not clear so I'll explain more about this. In CSS Selectors an ID has the highest weight. Class and attribute selectors have the next highest, element-type comes next, and then the universal selector has the lowest.

Here are two good articles on this:
http://www.sitepoint.com/get-specific-css-styles/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.