Avatar of Rowby Goren
Rowby Goren
Flag for United States of America asked on

Precise / Absolute / Relative positioning for text and images

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
CSS

Avatar of undefined
Last Comment
David S.

8/22/2022 - Mon
Rowby Goren

ASKER
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.

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.
Rowby Goren

ASKER
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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Rowby Goren

ASKER
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
Rowby Goren

ASKER
Forgot to include the mockup.


Here it isMockup
Rowby Goren

ASKER
Hi

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

Thanks

Rowby
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Rowby Goren

ASKER
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).
Rowby Goren

ASKER
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.

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Rowby Goren

ASKER
Thanks Kravimir,

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

I'll do that later today.

Thanks!

Rowby
Rowby Goren

ASKER
Thanks

I made the changes and that did it.

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

Rowby
Rowby Goren

ASKER
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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Rowby Goren

ASKER
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.

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.
Rowby Goren

ASKER
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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER CERTIFIED SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Rowby Goren

ASKER
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.

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