Home Forums Weaver Xtreme Theme keep tall narrow image connected to menu bar and footer throughout resizing

This topic contains 11 replies, has 3 voices, and was last updated by  wilderbee 1 week, 1 day ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #55811

    wilderbee
    Participant

    Is there a way to keep a tall narrow image connected to the menu bar and the footer during resizing?

    A container background image distorted way out of bounds during resizing.

    Currently using three [show-if] clauses to apply different image lengths for desktop, smalltablet, and phone.  That almost works.  When the length is extra-long the ends of the image merge into the menu bar and the footer (using all one color).  However when the screen downsizes the ends of the image pull out of the menu bar and footer leaving gaps.   If I make the image extra-extra long, the image spears through the footer and creates a super-deep footer box.

    Have you any ideas if this can be done?   Have looked around at different possibilities, just not sure where to focus my efforts.

    Thank you!    (development link follows)

    #55812
    Private Reply

    wilderbee
    Participant
    This reply has been marked as private.
    #55813

    Weaver
    Keymaster

    The only way I know to really accomplish that would be by using JavaScript.

    Almost any CSS technique (including parallax) relies on at least some scaling to the bg image.

    And you have invalid inline styling on the Rappelling image – the syntax on style= is wrong – missing wrapping quotes and = instead of : on the rules. I’ll let you look up the proper syntax.

    #55814

    scrambler
    Moderator

    If we are speaking about the BMS image on the top left, can you explain in more details what behavior you would like to see when the browser gets smaller, as I am not sure what you mean by connected.

    Right now the image is above the menu bar, are you wanting it to be in the menu bar (same vertical position as the menu items, or just on top as now, but with a different scaling behavior.

    If you want the header image on top as now, what scaling behavior are you after exactly.

    For example if you wanted the image to start scaling when the browser starts getting below 1200px wide, you would create a header image that is 1200px wide (adding a lot of transparent BG on the right), then use the header image option to “Use actual Size”

    #55815

    wilderbee
    Participant

    Was referencing the content image Rappelling guy. He surfs around. Wanted to keep his rock wall connected to the menu bar And the page footer.

    Darn code clutter, thanks. Yet good to revisit and test when and not to use img style. In this case it causes an odd horizontal image compression at some viewing sizes. So not using img style.

    Can keep the image ‘attached’ to the menu bar using a negative top margin. The image still floats away from the page footer at some viewing sizes. So be it.

    Thank you!

    The image below has the width attribute set but the stylesheet overrides it and sets the width to 100%:
    img src=”image.png” alt=”HTML5 Icon” width=”128″ height=”128″

    The image below uses the style attribute which overrides the stylesheet:
    img src=”image.png” alt=”HTML5 Icon” style=”width:128px; height:128px;”

    #55822

    scrambler
    Moderator

    FIRST, there are a few problems on your site.
    Given your whole site is expanded, there is no need to expand (or extend) any of the sub areas.
    Yet you have many of the sub areas (header, container, footer ..) set to expand/stretch, and or Extend BG attributes.
    These are redundant and can cause problems, so go to Main Options > Full width, and uncheck all the expan/extend sub areas options.

    For Your Image:
    The issue here is the fact that the reflow of the contnet when the browser gets narrower causes the height to change significantly.

    the only way to solve that problem is to have an image that is as long as the longest it needs to be, and then have it cropped when needed.

    There are two ways to do that.
    – Use a background image on the text container that is positionned top and right, it will automatically be cropped at the bottom
    – Use an image positionned absolute inside the text container, with container set to overflow hidden so it crops the image when it extends past the bottom,.

    To use the second method, do the following

    • Add the image at the end of the Text in the same div
    • Position the div relative and overflow hidden
    • Position the image absolute (top & right).

    It will look something like

    <div style="position:relative;overflow:hidden;float:left; width:60%; margin:0 0 0 -1%; padding:0 0 0 1%; color:#FFFFFF; font-size:112%; background-color:rgba(0, 0, 0, 0.5);"> 
    TETX
    <img style="position:absolute;top:0px;right:-150px;max-width:150px;" width="340" height="1600" alt="Rappelling" src="//bmsrescue.com/dev/wp-content/uploads/Rapelling-340x1600.png"/>
    </div>

    I added the max-width:150px on the image, because it is too large. ideally make the image the proper size
    if not quite there, post back with things in place and we can tune it.

    Not:For optimal use of the space, instead of using a 60% width for the text, you could use a max-width, if so you would need to add a right padding that will always create a space for the image.

    #55833

    wilderbee
    Participant

    OMG thank you so much!  Need a few days to work this in.  So looking forward to it.  Each experiment takes moments up to the host and back (satellite) so I never get as many iterations as I would like – thus didn’t test each expanded option (will revisit doing local installs when the snow flies).  Made assumptions that seemed to work with expectation to recheck before production.  Everything is learn as you go because it keeps changing so rapidly.  I’m not a full-timer.  Try to keep up with the guides on Weaver and the forums (the textbooks) but so much there, much development over the years.  Powerful.

    AND you anticipated my next need to smooth things out.  Awesome!  Fantastic forum.  Will report back ASAP.

    This dev is a replacement for same domain name live site.  Supposedly a ‘quick and simple’ do over.  Hm.  Someday, maybe, but then tools will change Again.  Such fun.

    #55921

    wilderbee
    Participant

    I worked with the position code above plus experimented at W3schools.com. Something was not working as hoped, many trials, all variations.  Even when copying working code from W3schools.com to a scratch page the divs would not lay side-by-side.  Examples do not seem to convert to my environment for whatever reasons.   I could only get side-by-side display by closing the parent position:relative div and then opening position:absolute as an independent div.  Which probably means my use of relative and absolute are now off.  Whatever, it is working.  Position happily keeps the divs from stacking when the window is squeezed, as needed in this case (vs using float which stacks).

    The idea of using one image made it too small on desktop view.  So back to using [show_if] for three devices with three image sizes. Experimented to find best image sizes by using code, first, then applied best guess directly to the images and then imported them again.  Compromises.  But no sizing code.  Oddly, top margin adjustments for each of the three [show_if] phrases had to be progressively increased by a lot:  top:-10%, top:-30%; and top:-60% respectively (to make the content image stay merged with the menu bar during window squeeze).

    All above is okay for now, thank you!

    Last item, I have looked for parameters to control the too-large spacing between the content and the footer.  I would like to reduce that spacing, how to do that?     http://www.bmsrescue.com/dev/home

     

    #55925

    scrambler
    Moderator

    I am not sure why you did not just use the code I gave you then explain what changes you wanted, but as you wish 🙂

    You have a syntax error in your inline position absolute that makes the rule inactive.

    You have

    positon:absolute

    instead of position:absolute

     

    #55941

    wilderbee
    Participant

    Yes I copied your code to a test page but it did not work for me as-is.  Took it as a teaching method and modified from there.  Then repeat with a fresh page to try other adjustments.  Several times.  Unfortunately on a last effort the misspelling happened but it was spelled correctly on other test pages (progressive page versions are kept until done) .

    Now added a new public page with your code here:  https://bmsrescue.com/dev/home-testing-scrambler-four/.  The image does not show in Firefox or Chrome.  That image exists and can be called by url (until eventually deleted because no longer favored).

    Misspelling was key, of course, thanks.  Now putting the two positioning divs into one div works much better.  But that caused the images to display too small so returned “max-width” to the [show-if] phrases, and the images show larger again. Good.

    I removed the float:left in the position:relative div as I could not see any benefit, is it needed for something?   And removed overflow:hidden from your text div, which should not be clipped, and put it in the image div which should be clipped.  Which BTW only hides the overflow on the footer end of the images for small tablet and phone versions, not the desktop version (identified in the url names).  The desktop image flows Over the footer line, the others flow Under it.  A mystery but okay as the image and main footer area are the same color, no footer text in the way.  In our case, only breaks footer box outline, no biggie.

    Also fixed the spacing between content and footer with Weaver settings.  I just could not see that the settings were making the intended difference, previously, because it turns out the ***ISP is caching***.  Suspicious, called them today.  They turned off their ‘web accelerator’ cache.  Which has to be reset by them each modem boot (must call them).  Caching is Everywhere.

    Thank you for your patience.

    #55945

    scrambler
    Moderator

    In the test page with my code make the following changes (in yellow)

    <div style="margin: 0px 0px 0px -1%; padding: 0px 150px 0px 1%; width: 60%; color: rgb(255, 255, 255); overflow: hidden; font-size: 112%; position: relative; background-color: rgba(0, 0, 0, 0.5);">TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETXTETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX TETX<br>
    <img width="340" height="1600" style="top: 0px; right: 0px; position: absolute; max-width: 150px;" alt="Rappelling" src="http://bmsrescue.com/dev/wp-content/uploads/Rapelling-340x1600.png">
    </div>

    You need to add a right padding to the container div for the image to be placed in. if not, the image is outside the div, and the overflow:hidden cuts it off

    Then you position the image right:0 so the image is Inside the div right margin

    You do not need the float left on the div in that configuration

    You do need the overflow:hidden, as this is what will clip the image so it only shows inside the div. the size of the div is dynamically set by the text content when the content flows into more lines it gets taller and more of the image is visible

    #55957

    wilderbee
    Participant

    Yes, I see on your example that ‘right:0px’ on the 2nd(child) container will keep it inside the 1st(parent) container and aligned to the right.  However I could then see that the 2nd container (a transparent image) needed to be on the Outside of the 1st container to get a brighter background.  Found no rule saying it cannot hang outside, providing there is space.  With parent container approx.50% of the page width, setting the 2nd container to ‘left:100%’ positioned it completely outside of the 1st container but also in touch with that right border.  Perfect.

    Then upon further exam, turns out that for a short page of code there was no need for a parent (position:relative) container at all.  In which case the (position:absolute) container defaults to the page itself as the parent container.  Upon removal of the parent (position:relative) container various offsets had to be recomputed, altogether resulting in simplified code for easier maintenance.

    As usual, your input headed me in the right direction.
    Thanks for all!
    (Today’s version at http://www.bmsrescue/dev/home in case it might help someone else).

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.