Previous Thread
Next Thread
Print Thread
Rate Thread
Responsive header #322581
02/22/2017 1:20 PM
02/22/2017 1:20 PM
Joined: Jul 2004
Posts: 81
UK
D
driv Offline OP
Power User
driv  Offline OP
Power User
D
Joined: Jul 2004
Posts: 81
UK
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
Re: Responsive header [Re: driv] #322582
02/22/2017 1:40 PM
02/22/2017 1:40 PM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
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.

Re: Responsive header [Re: driv] #322583
02/22/2017 1:47 PM
02/22/2017 1:47 PM
Joined: Jan 2000
Posts: 5,929
Portland, OR, USA
Gizmo Offline

UBB.Dev / UBB.Wiki Owner
Time Lord
Gizmo  Offline

UBB.Dev / UBB.Wiki Owner
Time Lord
Joined: Jan 2000
Posts: 5,929
Portland, OR, USA
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, UBB.Sitemaps
Re: Responsive header [Re: driv] #322586
02/22/2017 1:55 PM
02/22/2017 1:55 PM
Joined: Jul 2001
Posts: 1,113
California
isaac Online happy
$coffee=code(true);
isaac  Online Happy
$coffee=code(true);
Joined: Jul 2001
Posts: 1,113
California
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

Re: Responsive header [Re: driv] #322588
02/22/2017 2:17 PM
02/22/2017 2:17 PM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
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
Re: Responsive header [Re: JAISP] #322589
02/22/2017 2:41 PM
02/22/2017 2:41 PM
Joined: Jul 2001
Posts: 1,113
California
isaac Online happy
$coffee=code(true);
isaac  Online Happy
$coffee=code(true);
Joined: Jul 2001
Posts: 1,113
California
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

Re: Responsive header [Re: driv] #322590
02/22/2017 4:45 PM
02/22/2017 4:45 PM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
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

Re: Responsive header [Re: JAISP] #322592
02/23/2017 6:45 AM
02/23/2017 6:45 AM
Joined: Jul 2004
Posts: 81
UK
D
driv Offline OP
Power User
driv  Offline OP
Power User
D
Joined: Jul 2004
Posts: 81
UK
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?

Re: Responsive header [Re: driv] #322593
02/23/2017 11:33 AM
02/23/2017 11:33 AM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
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

Re: Responsive header [Re: driv] #322594
02/23/2017 11:59 AM
02/23/2017 11:59 AM
Joined: Jul 2004
Posts: 81
UK
D
driv Offline OP
Power User
driv  Offline OP
Power User
D
Joined: Jul 2004
Posts: 81
UK
I wouldn't dream of criticising your code mate, I appreciate you sharing. smile


Sponsored Links
Re: Responsive header [Re: driv] #322595
02/23/2017 12:03 PM
02/23/2017 12:03 PM
Joined: Jul 2004
Posts: 81
UK
D
driv Offline OP
Power User
driv  Offline OP
Power User
D
Joined: Jul 2004
Posts: 81
UK
By the way id242, the max-width:1000px; height:auto; worked just as I needed it to.
Thanks.

Re: Responsive header [Re: driv] #322596
02/23/2017 12:07 PM
02/23/2017 12:07 PM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
I only mentioned that as I get negative criticism all the time lol.

Re: Responsive header [Re: driv] #322597
02/23/2017 12:10 PM
02/23/2017 12:10 PM
Joined: Jul 2001
Posts: 1,113
California
isaac Online happy
$coffee=code(true);
isaac  Online Happy
$coffee=code(true);
Joined: Jul 2001
Posts: 1,113
California
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

Re: Responsive header [Re: driv] #322598
02/23/2017 12:17 PM
02/23/2017 12:17 PM
Joined: Feb 2008
Posts: 458
PA
JAISP Offline
Enthusiast
JAISP  Offline
Enthusiast
Joined: Feb 2008
Posts: 458
PA
[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.


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 for Migration, Security or Coding Services.
Recommended Hosts
We have personally worked with, and recommend, the following Web Hosts:
· Stable Host
· Blue Host
· Interserver.net
Visit Us on Facebook
Member Spotlight
Mark_S
Mark_S
UK
Posts: 309
Joined: November 2003
Show All Member Profiles 
Forum Statistics
Forums64
Topics37,428
Posts293,394
Members13,779
Most Online1,498
Mar 17th, 2017
Top Posters(All Time)
AllenAyres 25,587
JoshPet 11,330
Rick 8,373
LK 7,396
Lord Dexter 6,503
Gizmo 5,929
Greg Hard 5,533
Top Posters(30 Days)
isaac 12
Gizmo 1
Today's Statistics
Currently Online 615
Topics Created 0
Posts Made 0
Users Online 1
Birthdays 18
The UBB.Developers Network (UBB.Dev/Threads.Dev) is ©2000-2017 VNC Web Services

 
Powered by UBB.threads™ PHP Forum Software 7.6.1
(Snapshot build 20171111.dev)
Page Time: 0.038s Queries: 15 (0.009s) Memory: 3.2977 MB (Peak: 3.5158 MB) Zlib enabled. Server Time: 2017-11-18 17:44:13 UTC