The Joomla! Forum ™



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  [ 5 posts ] 
Author Message
 Post subject: Full width logo issue
PostPosted: Thu Dec 27, 2012 9:10 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Nov 25, 2006 12:16 am
Posts: 3
Problem:

When logo is full width of div.header (940px) and you have a window size between ~751px and ~963px the logo hangs off the right edge of div.container. This behavior happens in Firefox and IE but not Chrome (in Chrome the logo scales)

Desired result:

What I would like to have happen is the logo re-size like it does when the window width is less than 751px. Once the 'transition' happens the logo is the right width.

Thanks for any help.

Cw


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


Last edited by carlanw on Wed Jan 02, 2013 4:39 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Wed Jan 02, 2013 4:47 am 
Joomla! Hero
Joomla! Hero

Joined: Sat Feb 09, 2008 8:27 am
Posts: 2264
Location: California, USA
Do a Google search for "fluid images" and you should find your answer.

Mark


Top
 Profile  
 
PostPosted: Wed Jan 02, 2013 4:39 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Nov 25, 2006 12:16 am
Posts: 3
Markstein wrote:
Do a Google search for "fluid images" and you should find your answer.

Mark


Thank you Mark, that is exactly what I was needing! Appreciate it very much.

Cw


Top
 Profile  
 
PostPosted: Thu Feb 14, 2013 2:18 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Oct 04, 2006 2:42 pm
Posts: 15
carlanw. what did you do to solve your problem ? I am experiencing the same end-results as detailed in your original post.

Markstein. I have read on the fluid-images and from i see the img entry in the css file contains max-width: 100%, but only once the browser page goes below 768px does the header logo/image seem to pay attention to the max-width setting of img css entry ?


Top
 Profile  
 
PostPosted: Sat Apr 06, 2013 12:51 am 
Joomla! Intern
Joomla! Intern

Joined: Tue Feb 20, 2007 9:58 pm
Posts: 64
The problem is that the <a> element that contains the logo is set to float:left, whereas its parent <div> is set to float:none. As soon as you set an object as floating, its taken out of the flow and basically gets to grow as big as it wants - in this case, to the full-width of the <img>. Given that the <a> object can be as big as it wants, you can see why applying max-width:100% to the <img> object won't do anything - it can have whatever width it wants.

To fix it, I think all you need to do is apply the max-width:100% to the <a> object, which will cause it to have a width no larger than its parent container (even though the <a> object is floating). Note: This won't work if you apply a left/right margin to the <a> object, but by default its set to auto/0 so shouldn't be a problem.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 



Who is online

Users browsing this forum: hypnoticstate, sander_v_bergen and 23 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