Precise / Absolute / Relative positioning for text and images

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

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.

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

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

Forgot to include the mockup.


Here it is

Hi

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

Thanks

Rowby

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>

Select allOpen 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

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>

Select allOpen 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

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;
}

Select allOpen in new window

Thanks Kravimir,

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

I'll do that later today.

Thanks!

Rowby

Thanks

I made the changes and that did it.

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

Rowby

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;
}

Select allOpen in new window

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

Rowby

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;
}

Select allOpen in new window

Doesn't seem to affect anything.    

Rowby

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.

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

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

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