QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Need to make a header responsive

Started by Oldiesmann, Jun 26, 2022, 06:44 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Oldiesmann

Long story short, I found an active forum still running SMF 1.1.13 recently, and am now going to take care of getting it up to date for the admin, who knows nothing about these things (apparently the person who was helping them with this stuff can't do it anymore). The problem here is they have a nice header image that includes their logo, slogan and a few links. It's made up of several images and this is the code they're using:

<table border=0 height=84 cellpadding="0" cellspacing="0" width="100%"><tr><td background="/nav/headerbg.jpg"><div align="center"><img src="/nav/newheader.jpg" width="770" height="84"></div></td></tr>
<tr><td background="/nav/navbg.jpg"><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td><a href="/"><img src="/nav/home.jpg" border="0"></a></td><td><a href="http://www.finescalerr.com/subscribe.htm"><img src="/nav/order.jpg" border="0"></a></td><td><a href="http://www.finescalerr.com/smf/"><img src="/nav/forum.jpg" border="0"></a></td></tr></table></td></tr></table>

Here are the images and you can see it in action at https://www.finescalerr.com/smf/index.php. Arantor suggested splitting it up into 3 images, then using CSS to determine what's displayed and when (one image for the logo, one for the slogan and one for the "buttons"), but I'm not good at graphics or design, and that was assuming it was one large image rather than 5 images. It's not a hugely active forum apparently so for now I'll probably just throw the links in the header until we can get the rest worked out.
Christian Metal Fans - https://www.christianmetal.fans

Bigguy

Can that same code still not be used :??? I know "tables" are not the nicest thing to use but they are still valid.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Oldiesmann

Tables aren't really responsive. I'll see what it looks like on 2.1 but I don't know that it will work.
Christian Metal Fans - https://www.christianmetal.fans

Bigguy

I keep forgetting that there is a responsive css file. Your right, It should be changed.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Yeah, if the forum is going to be updated to 2.1 then in my experiences you'll need to make a test site for that first then try to make everything responsive. It will be a lot easier.

Oldiesmann

I've already upgrade the forum to 2.1, so any advice on how to make that header responsive would be helpful. Arantor suggested splitting it up into three images but that was before I realized it was already split up into several images.
Christian Metal Fans - https://www.christianmetal.fans

Bigguy

"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Oldiesmann

I already saw the W3Schools link. I'm thinking whoever wrote that has no idea what responsive design is... I'll take a look at the other two and see what I can come up with on a test board
Christian Metal Fans - https://www.christianmetal.fans

Bigguy

Lol, yeah that first one is pretty bad, lol.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin