Previous Thread
Next Thread
Print Thread
#322581 - 02/22/2017 2:20 PM Responsive header  
Joined: Jul 2004
Posts: 81
driv Online content
Power User
driv  Online Content
Power User
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
#322582 - 02/22/2017 2:40 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

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.

#322583 - 02/22/2017 2:47 PM Re: Responsive header [Re: driv]  
Joined: Jan 2000
Posts: 5,926
Gizmo Online tapedshut
UBB.Dev / UBB.Wiki Owner
Time Lord
Gizmo  Online Tapedshut

UBB.Dev / UBB.Wiki Owner
Time Lord

Joined: Jan 2000
Posts: 5,926
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
#322586 - 02/22/2017 2:55 PM Re: Responsive header [Re: driv]  
Joined: Jul 2001
Posts: 1,063
isaac Offline
$coffee=code(true);
isaac  Offline
$coffee=code(true);

Joined: Jul 2001
Posts: 1,063
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

#322588 - 02/22/2017 3:17 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

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
#322589 - 02/22/2017 3:41 PM Re: Responsive header [Re: JAISP]  
Joined: Jul 2001
Posts: 1,063
isaac Offline
$coffee=code(true);
isaac  Offline
$coffee=code(true);

Joined: Jul 2001
Posts: 1,063
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

#322590 - 02/22/2017 5:45 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

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

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

#322593 - 02/23/2017 12:33 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

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

#322594 - 02/23/2017 12:59 PM Re: Responsive header [Re: driv]  
Joined: Jul 2004
Posts: 81
driv Online content
Power User
driv  Online Content
Power User
Joined: Jul 2004
Posts: 81
UK
I wouldn't dream of criticising your code mate, I appreciate you sharing. smile


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

#322596 - 02/23/2017 1:07 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

Joined: Feb 2008
Posts: 458
PA
I only mentioned that as I get negative criticism all the time lol.

#322597 - 02/23/2017 1:10 PM Re: Responsive header [Re: driv]  
Joined: Jul 2001
Posts: 1,063
isaac Offline
$coffee=code(true);
isaac  Offline
$coffee=code(true);

Joined: Jul 2001
Posts: 1,063
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

#322598 - 02/23/2017 1:17 PM Re: Responsive header [Re: driv]  
Joined: Feb 2008
Posts: 458
JAISP Offline
Beta Tester
JAISP  Offline

Beta Tester

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
Nettomo
Nettomo
Germany, Bremen
Posts: 433
Joined: November 2001
Show All Member Profiles 
Forum Statistics
Forums64
Topics37,414
Posts293,362
Members13,773
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,926
Greg Hard 5,533
Top Posters(30 Days)
Today's Statistics
Currently Online 725
Topics Created 0
Posts Made 0
Users Online 2
Birthdays 26
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 20170708.dev)
Page Time: 0.032s Queries: 14 (0.006s) Memory: 3.2866 MB (Peak: 3.5061 MB) Zlib enabled. Server Time: 2017-07-26 20:49:45 UTC