Previous Thread
Next Thread
Print Thread
Rate Thread
#322581 02/22/2017 2:20 PM
Joined: Jul 2004
Posts: 132
Likes: 1
Journeyman
Journeyman
Offline
Joined: Jul 2004
Posts: 132
Likes: 1
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.

Sponsored Links
driv #322582 02/22/2017 2:40 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
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.

driv #322583 02/22/2017 2:47 PM
Joined: Jan 2000
Posts: 5,833
Likes: 20
UBBDev / UBBWiki Owner
Time Lord
UBBDev / UBBWiki Owner
Time Lord
Joined: Jan 2000
Posts: 5,833
Likes: 20
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>



UBB.Dev - Putting Dev into UBB.threads
Company: VNC Web Services - UBB.threads Scripts and Scripting, Install and Upgrade Services, Site and Server Maintenance.
Forums: A Gardeners Forum, Scouters World, and UGN Security
UBB.Threads: My UBB Themes, My UBB Scripts
driv #322586 02/22/2017 2:55 PM
Joined: Jul 2001
Posts: 1,157
Likes: 82
coffee and code
coffee and code
Joined: Jul 2001
Posts: 1,157
Likes: 82
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://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


Current developer of UBB.threads PHP Forum Software
Current Release: UBBT 7.7.5 // Preview: UBBT 8.0.0
isaac @ id242.com // my forum @ CelicaHobby.com
driv #322588 02/22/2017 3:17 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
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.

Sponsored Links
JAISP #322589 02/22/2017 3:41 PM
Joined: Jul 2001
Posts: 1,157
Likes: 82
coffee and code
coffee and code
Joined: Jul 2001
Posts: 1,157
Likes: 82
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


Current developer of UBB.threads PHP Forum Software
Current Release: UBBT 7.7.5 // Preview: UBBT 8.0.0
isaac @ id242.com // my forum @ CelicaHobby.com
driv #322590 02/22/2017 5:45 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
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

JAISP #322592 02/23/2017 7:45 AM
Joined: Jul 2004
Posts: 132
Likes: 1
Journeyman
Journeyman
Offline
Joined: Jul 2004
Posts: 132
Likes: 1
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?

driv #322593 02/23/2017 12:33 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
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

driv #322594 02/23/2017 12:59 PM
Joined: Jul 2004
Posts: 132
Likes: 1
Journeyman
Journeyman
Offline
Joined: Jul 2004
Posts: 132
Likes: 1
I wouldn't dream of criticising your code mate, I appreciate you sharing. smile


Sponsored Links
driv #322595 02/23/2017 1:03 PM
Joined: Jul 2004
Posts: 132
Likes: 1
Journeyman
Journeyman
Offline
Joined: Jul 2004
Posts: 132
Likes: 1
By the way id242, the max-width:1000px; height:auto; worked just as I needed it to.
Thanks.

driv #322596 02/23/2017 1:07 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
I only mentioned that as I get negative criticism all the time lol.

driv #322597 02/23/2017 1:10 PM
Joined: Jul 2001
Posts: 1,157
Likes: 82
coffee and code
coffee and code
Joined: Jul 2001
Posts: 1,157
Likes: 82
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


Current developer of UBB.threads PHP Forum Software
Current Release: UBBT 7.7.5 // Preview: UBBT 8.0.0
isaac @ id242.com // my forum @ CelicaHobby.com
driv #322598 02/23/2017 1:17 PM
Joined: Feb 2008
Posts: 449
Enthusiast
Enthusiast
Joined: Feb 2008
Posts: 449
LOL@id242

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.


Link Copied to Clipboard
Donate Today!
Donate via PayPal

Donate to UBBDev today to help aid in Operational, Server and Script Maintenance, and Development costs.

Please also see our parent organization VNC Web Services if you're in the need of a new UBB.threads Install or Upgrade, Site/Server Migrations, or Security and Coding Services.
Recommended Hosts
We have personally worked with and recommend the following Web Hosts:
Stable Host
bluehost
InterServer
Visit us on Facebook
Member Spotlight
Posts: 70
Joined: January 2007
Forum Statistics
Forums63
Topics37,573
Posts293,925
Members13,849
Most Online5,166
Sep 15th, 2019
Today's Statistics
Currently Online
Topics Created
Posts Made
Users Online
Birthdays
Top Posters
AllenAyres 21,079
JoshPet 10,369
LK 7,394
Lord Dexter 6,708
Gizmo 5,833
Greg Hard 4,625
Top Posters(30 Days)
Top Likes Received
isaac 82
Gizmo 20
Brett 7
Morgan 2
Top Likes Received (30 Days)
None yet
The UBB.Developers Network (UBB.Dev/Threads.Dev) is ©2000-2024 VNC Web Services

 
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20221218)