Link to home
Create AccountLog in
Avatar of Rowby Goren
Rowby GorenFlag 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
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

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
Avatar of 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.
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 isUser generated image
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>

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
User generated image
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
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

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

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

Open 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
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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