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:
In my next post I will provide the link to the development site.
Thanks!
Rowby
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;
}
In my next post I will provide the link to the development site.
Thanks!
Rowby
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
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.
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
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
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
Hi
Hold off for now, while I have the developer of the menu double check some of my settings.
Thanks
Rowby
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
Any thoughts?
Thanks!
Rowby
![LINK: How it looks now (on top) and how I want it to look: (on bottom).]()
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>
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?
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
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>
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/t
Then add something like this to one of your stylesheets:
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;
}
Thanks Kravimir,
I will look into that file and make the change(s).
I'll do that later today.
Thanks!
Rowby
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
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:
Rowby
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;
}
Rowby
Hi,
Here's my latest attempt:
Doesn't seem to affect anything.
Rowby
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;
}
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
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
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
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
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.
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
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
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.