UBB.Dev
Posted By: driv Responsive header - 02/22/2017 9:20 PM
Now that we have a responsive design, I'm wondering how to go about changing the header of my site.
Normally it's 1000px wide and centered in the middle of the screen.

My existing header ruins the responsiveness.
i.e. I had a Logo and then a banner side by side and underneath them, a horizontal menu.
(Previously all at 1000px width)

How would I go about coding this so that it looks good on a desktop, but also on a mobile device?

Thanks.
Posted By: JAISP Re: Responsive header - 02/22/2017 9:40 PM
I designed two separate headers and have it displayed by if it is a desktop / tablet or a mobile phone type device according to screen size.
Posted By: Gizmo Re: Responsive header - 02/22/2017 9:47 PM
I did this for a client:
HTML
<div align="center" style="background:url('/forum/images/background.png') repeat-x; width: 100%;">
<img src="/forum/images/logo.jpg" alt="" style="border:0;height:auto;max-width:100%;">
</div>

Posted By: isaac Re: Responsive header - 02/22/2017 9:55 PM
Driv and JAISP, read through this post
http://www.ubbcentral.com/forums/ub.../re-image-resizing-for-mobile#Post259144

It is based off from THIS post:
https://www.ubbdev.com/forums/ubbth...lates-for-purchase-7-6-0.html#Post322556

Gizmo, No need to add any of the "background:url..." stuff. That was for a client of yours who had a text overlays on his graphics.
Its a good example, but its not needed for most situations smile
Posted By: JAISP Re: Responsive header - 02/22/2017 10:17 PM
I had read both of those threads as they where happening.

I had designed similar but different headers and graphics for my websites for either mobile or other use depending on what was accessing the message systems. Also my graphics in my one site changes for nightfall or daybreak in progression over an hours time. Plus for the non mobile phone user my site header changes for holidays and various seasons. All this is according to date and time base.
Posted By: isaac Re: Responsive header - 02/22/2017 10:41 PM
Originally Posted by JAISP
I had read both of those threads as they where happening.

Setting static background is one way of doing things, but its limited in that it has its own set of problems.

Briefly visit this page and scroll down:
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Then dig in to this one:
https://en.wikipedia.org/wiki/Responsive_web_design

And finally, have a quick skim through this page:
https://www.w3schools.com/html/html_responsive.asp
Posted By: JAISP Re: Responsive header - 02/23/2017 12:45 AM
Yeah, sorry. I'm like 49, when I started bangin' away on a keyboard in 1982 they didn't have schools for all this stuff nor was the vastness of the Internet a reality lol. We had computer user groups sparsely scattered all over the country as where we thought each other computer programming.

As time went on some of us kept up with it and others had dropped along the wayside. I totally understand the sites you have directed me to and know of the aspect and reasoning. My site uses various different graphics for different devices for the sole reason of clarity, visibility, and design intent related to the fore mentioned.

I'm still old school but my reasoning for relating to the old school methods are for many reasons. Fifty years from now you won't find anyone cherishing a 2017 Ford Mustang but to this day the 1967 Ford Mustang Fastback is well sought after, for many good reasons. wink
Posted By: driv Re: Responsive header - 02/23/2017 2:45 PM
Originally Posted by JAISP
As time went on some of us kept up with it and others had dropped along the wayside.
Yep, up until October of 2013 I hand coded everything (as an amateur) but that's when I switched to Joomla. Since then I have sorely neglected my CSS - which is why I don't have a clue about responsive design...

Originally Posted by JAISP
I designed two separate headers and have it displayed by if it is a desktop / tablet or a mobile phone type device according to screen size.
Could I ask you to share this code JAISP?
Posted By: JAISP Re: Responsive header - 02/23/2017 7:33 PM
I'm in the process of rewriting it once again to be specific on the change from night / day and so on to be time exact for the northern hemisphere. Also keep in mind I'm old school and not up to date expert on the latest and / or greatest coding and so on but this works for me.

Please hold any negative criticism please. I wrote this in notepad and coded it all by hand.

http://www.abeagleworld.com/download/head.txt
Posted By: driv Re: Responsive header - 02/23/2017 7:59 PM
I wouldn't dream of criticising your code mate, I appreciate you sharing. smile

Posted By: driv Re: Responsive header - 02/23/2017 8:03 PM
By the way id242, the max-width:1000px; height:auto; worked just as I needed it to.
Thanks.
Posted By: JAISP Re: Responsive header - 02/23/2017 8:07 PM
I only mentioned that as I get negative criticism all the time lol.
Posted By: isaac Re: Responsive header - 02/23/2017 8:10 PM
Originally Posted by driv
By the way id242, the max-width:1000px; height:auto; worked just as I needed it to.
Thanks.

Thanks for your comment laugh

And JAISP... it was only "negative" because "negative" = "nothing." and normally "nothing" is dark. and it was dark outside, which explains why it was "negative."

You believe me, rite?

excuse me while I head back to the dog house. smile
Posted By: JAISP Re: Responsive header - 02/23/2017 8:17 PM
[email protected]

If you look at that code you will notice it changes the logo image aka dog from day to night. Eventually I will totally rewrite the code you see here as well, make it extreamly complex, add additional files separating everything into its own file, add additional folders for each type of interaction, and redefine everything written so far, then use that code.
© UBB.Developers