[Help] Image Overflow Issue

Nova includes a new and robust way of skinning the entire system without ever touching the core of the application. If you have questions about how to build a theme for Nova, how to modify a theme or you just want to show off your work, this is the place to do it!

Stormwolfe Tue Jul 28, 2015 4:02 pm

[Help] Image Overflow Issue

Good Day,

I'm getting better with my Nova skinning, but still run into issues. I'm working on a new game - go figure - and eventually would like a total custom look...anyway...

This is my issue. I have a header graphic that I don't want to change, but I do want the ship image where I have it... Currently I have the img code in the welcome page message. The issue is, when changing the size of the browser window, the image either overflows the whole page or it gets funky looking when sized down. I've tried fixing with image size code in the <img src /> tag and I've tried just resizing the image down to like a width of 960 px.

Now, I know there's a better way to do what I want to do... Can anyone tell me what it is?

Much Thanks,

Jer
User avatar

Posts: 467


Williams Tue Jul 28, 2015 4:44 pm

Re: [Help] Image Overflow Issue

You have a link to the site so we can see what you're trying to achieve?

There might be something that you can do with CSS to make sure that the image resizes properly (or at least doesn't cover up stuff around it when the window is resized), but I could really do with seeing what you're trying to achieve to be able to think of the best way to achieve what you're after.
Matt aka
Krace / Williams

USS HighlanderMy Xtras Profile
ImageImage

Posts: 288


Stormwolfe Tue Jul 28, 2015 5:26 pm

Re: [Help] Image Overflow Issue

Hi Matt - thanks for responding.

Looks like I forgot to include a link. Here ya go! And if you need more access or something, let me know.

http://www.rpgrealm.org/index.php/main/index
User avatar

Posts: 467


Williams Wed Jul 29, 2015 7:33 pm

Re: [Help] Image Overflow Issue

Try swapping this

Code: Select all
<center><img width="960" height="374" alt="ship" src="/images/invictus-mainpg.png"></center>


with this:

Code: Select all
<div style="width:90%; margin:auto;"><img alt="ship" src="/images/invictus-mainpg.png" style="max-width: 100%; max-height: 100%;"></div>


That'll create a div container that's 90% the width of your .content container, and make the image size match the size of the div box.
Matt aka
Krace / Williams

USS HighlanderMy Xtras Profile
ImageImage

Posts: 288


Stormwolfe Wed Jul 29, 2015 9:52 pm

Re: [Help] Image Overflow Issue

Perfect! Works amazingly.

Thank you so much!

Blessed Be,

Stormwolfe
User avatar

Posts: 467



Return to Skinning

Who is online

Users browsing this forum: No registered users and 1 guest

cron