css

Page

<< EDITED for the question you actually asked but I didn’t read properly sorry! >>

To align text to the top of a <td>:

<td style="vertical-align:text-top;">text</td>

 

Apologies, I just had time to sit down now in front of Dreamweaver and try it again. Works fine here.

 

 


Making a header image resize dynamically in Moodle

Best to try this with a clean testing page in case things go awry, then the code is minimal and nothing can be broken accidentally.

First insert your image, then open the HTML editor,

The code will look something like this:

<img src="yoururlhere/image.jpg" height="200" width="1200" />

 

Notice It’s telling the browser to make the image a ‘static’ size (200×1200 in my case for the header image). Change height and width so it looks like this:

<img src="yoururlhere/image.jpg" height="auto" width="100%" />

 

You can also set a max-width (so it doesn’t resize your image larger than its full width because this can make it fuzzy)

In this case I convert the code into a long chain like this:

<img style="height: auto; width: 100%; max-width: 1200px;" src="yoururlhere/image.jpg"/>

 

(I would type this rather than cut & paste from this blog since WordPress is formatting the quotation marks ” oddly)


If this doesn’t work you can try nesting it inside of a ‘div’

(These are old instructions because the way listed above also worked in my theme and was eaiser)

Change height and width so it looks like this:

<img src="yoururlhere/image.jpg" height="auto" width="100%" />

 

Then you create a ‘div’ container around it:

<div style="width: 100%; max-width: 1200px;"><img src="yoururlhere/image.jpg" height="" width="100%" /></div>

 

Notice that I set a “max-width” property. This keeps the browser from resizing my image larger than its natural width because this makes it look fuzzy! 1200px is the full width of my image, so that’s where the number came from.

Save & test. If the code works you can then copy it and try pasting it into an existing page. (Do copy your existing page code to notepad first perhaps so you can put it back if anything goes wrong).
Hopefully that should do it! (I noticed that some themes prevent resizing so if you run into problems be sure to let me know what theme you are using, and the pixel dimensions of your image.)    🙂

One thought on “css

Leave a Reply