The Joomla! Forum ™

Download

Demo


Board index » Joomla! 2.5 - Ask Support Questions Here » Extensions for Joomla! 2.5 » Modules - Joomla! 2.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.



Post new topic Reply to topic  Page 1 of 1
  [ 9 posts ] 
  Print view Previous topic | Next topic 
Author Message
Cmoorhouse
PostPosted: Mon Aug 06, 2012 6:29 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 22, 2012 7:31 pm
Posts: 35
I am trying, without success, to align 3 custom html modules horizontally. Each with a narrow margin between each. Each module contains an image only. All 3 images are the same size but i would like my css to re-size them to enable them to fit within the wrapper space created. Currently they appear but overlap

My css code is:
#productwrapper {
width: 520px;
margin: 10px 0 0 0;
overflow: hidden;
}

div.productmodules {
float: left;
}

div.productmodules div.moduletable {
float: left;
width: 160px;
margin: 0 5px 0 0;

Any ideas? A screen shot of the overlapping images is attached

thank you
Caroline


You do not have the required permissions to view the files attached to this post.

Top
 Profile  
 
bbolli
PostPosted: Mon Aug 06, 2012 7:07 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 11, 2011 9:43 pm
Posts: 435
Location: Chicago, IL
As always with CSS, there's more then one way to get where you want. First, use your browsers develop tools to drill down to the offending elements and verify whether an actual <img> element is being used or if the image is being loaded as a background to a div.

if there is an actual <img> element, you should be able to adjust the image size using CSS selectors. By using only width you should be able to avoid the images being distorted.

Code:
div.moduletable img {
  width: 160px;
}


If the image is attached to a an HTML element as a background you can center and size to 100% of the container element. First lets see if my first solution is applicable.

Another item to look at in the developers console HTML tab, is what the margin and padding are for each element. When you hover your mouse over a <div> tag for example, on your browsers website tab, the bounds, padding and margin of the <div> will be highlighted. Invaluable in these cases as sometimes the issue is tied to another CSS entry you wouldn't have thought of.

Good luck...
Top
 Profile  
 
Cmoorhouse
PostPosted: Mon Aug 06, 2012 7:23 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 22, 2012 7:31 pm
Posts: 35
thank you, they were created as actual <img> elements and I have adjusted the image size using CSS, inserting the code

div.moduletable img {
width: 160px;
}


but.... - the images are now distorted as the height has remianed as was. The images when loaded had the option constrain proportions ticked

Any ideas?
Top
 Profile  
 
bbolli
PostPosted: Mon Aug 06, 2012 8:09 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 11, 2011 9:43 pm
Posts: 435
Location: Chicago, IL
Well, we can either go the hard way or the easy way here. Hard way is using the GD PHP5 classes to take the image, resize and if the proportions don't match auto crop the image before displaying.

The easy way would be to wrap the image in a container with the width and height you need, hide the overflow and center the image vertically and horizontally. You will loss some of the image edges but depending on your coding skills might be much easier.

An even easier solution, manually resize the images using irfaview or another image editor. This would require the process to be repeated each time a new module you want displayed is added.

Can I ask why you opted not to go with an image gallery extension like SigPlus? You can control the number of pictures, auto re-size and a lot more which might work here. Also, what type of module did you use, Custom HTML? If so, the built in editors have the nasty habit of putting junk tags you can't see in the WYSIWYG view, click the button which looks like this "<>" and you will be able to see the HTML tags.

http://www.irfanview.com/
Top
 Profile  
 
Cmoorhouse
PostPosted: Mon Aug 06, 2012 9:06 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 22, 2012 7:31 pm
Posts: 35
If i use something like Sigplus can i create a link from each image to another page on my site?

The 3 images are the 3 product ranges currently available. I want a would be customer to click from the image through to the complete product listing for each respective product range?
Top
 Profile  
 
bbolli
PostPosted: Mon Aug 06, 2012 9:40 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 11, 2011 9:43 pm
Posts: 435
Location: Chicago, IL
Oh... so what Module Type are you using for the picture container? I would create a menu with the three product view you want and assign the images as link images.

Then create a Menu Module, assign the newly created menu and assign to the appropriate position. Considering, I would manually format the images using image editing software to make your life easier.

Does that make sense?
Top
 Profile  
 
Cmoorhouse
PostPosted: Mon Aug 06, 2012 10:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 22, 2012 7:31 pm
Posts: 35
Following you i think!

i have tried to create a three product menu - - i slected the menu item type, create article - is this correct?

All images are successfully appearing. But where/how do i insert the links to to other web pages? When i name the menu title i cannot give it the same name as used in my main menu and so the link does not work? My main menu includes the following cake kits, party bags and wedding favours.

These are the same 3 pages i want my new menu images to link to

thank you for all your help with this
Top
 Profile  
 
bbolli
PostPosted: Mon Aug 06, 2012 11:02 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 11, 2011 9:43 pm
Posts: 435
Location: Chicago, IL
If you are referring to the Link field on the left Details section, don't touch it. Joomla will automatically assign it. Just select Single Article (and select the article of course), name it (don't worry about alias, Joomla will auto-populate as well), attach the image and save.

In the end you should have one new Menu with three Menu Items.
Top
 Profile  
 
Cmoorhouse
PostPosted: Tue Aug 07, 2012 12:00 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Jan 22, 2012 7:31 pm
Posts: 35
thank you -
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 9 posts ] 


Board index » Joomla! 2.5 - Ask Support Questions Here » Extensions for Joomla! 2.5 » Modules - Joomla! 2.5

Who is online

Users browsing this forum: No registered users and 4 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group