Image banner stretch to fit a fixed wiki container on different size resolutions?

HTML & CSS
,
1 
<style type="text/css">
.myTable1 {float: left;margin: 0 0 0; background-color: #eee; border-collapse:collapse; }
.myTable1 th { background-color:#474747; padding: 0px; border:4px solid #000;  }
.myTable1 td,.myTable1 th  {border: 3px solid #474747; }
</style>


<table class="myTable1">
<th align="center">(((<div style="text-align: center;border:10px solid #474747;Background-color: #fff;>[image||{UP}/Images/Machine 1/Jiffy Production/jiffy banner template 1025.png]</div>)))</th></table>
2

ok so ill explain a little better, im fairly new to coding, im building an internal wiki for the company i work for, it will not allow java script or jquery. its got a built in template. ive been working on it for a few weeks but recently they change computers on me… and I noticed that the images i have for a banner are not fitting to the tables. I know the html looks a little funky the “((( )))” are a border property within the wiki and the “” is the image property. what I need is My banner to stretch to the width of the container no matter what computer resolution i am using… hope this makes sense and thanks for any help in advance

3

and ive tried the Position: fixed; width: 100%; but then it just floats over the page as i scroll down

4

Hi, @509designcompany 509designcompany. Welcome to the forums.

Have you tried prototyping the page using HTML and CSS, then, after a suitable layout with resizing images is established and tested as a “working page”, convert only as much of the HTML and CSS to your unidentified wiki code as necessary?

Our posting guidelines define a “working page” as one that starts with <!doctype, contains all of the elements necessary to render the page, and ends with </html>.

With luck, someone might be familiar with the wiki product that you have chosen and might be able to offer assistance.

I’m afraid that is the best that I can recommend at this time.

5

Thanks for your input and yes i’ve tried resizing the images but when i switch monitors, the image “floats” over the page container. or too small for the page container… Ive centered it, but them i just have lots of padding or empty space on the sides of the image. Im pressured because this might be my future job here at this company, and I have to present it to the CEO :anguished: Ive build web pages in the past, but never any with wiki, and this wiki is an old one. But on the plus side, i think i found my passion :slight_smile:

6

Perhaps you just don’t quite understand enough of the basics of HTML and CSS to do what you would like (just guessing).

If you can post a “working page” of your prototype that uses valid HTML and CSS and none of the wiki code, then we should be able to help with the out of place images.

7

I don’t know what templating engine you’re using, but a <div> inside of a <th> doesn’t look right to me. In fact, I’m not seeing why it shouldn’t be only a div without any table elements at all.

<table class="myTable1">
<th align="center">
(((<div style="text-align: center;
border:10px solid #474747;
Background-color: #fff;>
[image||{UP}/Images/Machine 1/Jiffy Production/jiffy banner template 1025.png]
</div>)))
</th></table>

If you are using the table tags to “force” styling, there are better ways. Also note there is a missing double quote for the div style attribute value.

8

It wont allow some html, and yes i agree i probably don’t know enough of the basics yet. but if I try to use something like this for the image it will not show up. when I build a table it maxes out within the container, but when I add a banner image in the or tag it will not stretch or shrink to fit the width of the table… let me see if i can get the script section from the page source, not sure if it will help but its worth a try

9

like this?

<div style="text-align: center;border:10px solid #474747;Background-color: #fff;">[image||{UP}/Images/Machine 1/Jiffy Production/jiffy banner template 1025.png]</div>

it looks good to me the reason i had it inside the is because it ads another border it was just for looks… But i still cant get the image to Strech

10

If you include HTML tags or other code inline with your posted sentences, preceed the tag with a backtick and end the string with another backtick. Doing that will keep the code formatted.

example `<span class="color1">` sentence.

 

img {
    display:block;
    width:100%;
    height:auto;
}

will stretch a foreground image to fit the width of its container and will maintain its aspect ratio.

1 Like
11

omg!!! your the greatest!!! this worked beautifully!! Thank you all for all your help!!!

2 Likes
12 
img {
    display:block;
    width:100%;
    height:auto;
}
</style>

   `<span class="img"><div style="text-align: center;border:10px solid #474747;Background-color: #fff; style="width: 100%;">[image||{UP}/Images/Machine 1/Jiffy Production/jiffy banner template 1025.png]</div>`

:grinning: hopefully someday i can return the favor and help someone else out

13

We look forward to seeing you around

To keep the formatting of a block of code included within a post, preceed the block with three backticks on a line by themselves and end the block with three more backticks on a line by themselves, like this:

```
your code block here
```

OR paste your block of code into the post, highlight it, and click the </> icon in the message editor’s menu bar.

14

Ok thanks! yeah i’m sure this isn’t the last you’ll see of me :wink: I have a lot of learning to do and Im aware i gotta clean up my coding… its worse than my house :slight_smile:

1 Like
15

No probs. Post #12 looked like it was readymade to try the Discourse formatting techniques on so I “opportunistically” included the “how to” hints. You can find them repeated in our posting guidelines along with more info.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.