PDA

View Full Version : Image Sizing



wojeezy08
May 11th, 2017, 09:00 PM
Fairly new to html here:

I have two lists with corresponding images to the right:
17037

I would like the pictures to be as tall as their respective list. What would be the easiest way to achieve that?

Code:

a class="rfqbutton" href="contact/request-a-quote.html">Request a Quote </a>
<h2>We provide:</h2>
<ul>
<li>Product Certification and Safety Testing</li>
<li>Field Evaluations</li>
<li>Performance/Comparison Testing</li>
</ul>
<h2>Product Testing/Evaluation Experts for:</h2>
<ul>
</ul>
<h3 style="text-align: left;"><span style="font-size: medium;"><strong style="font-size: 0.8em;">UL Standards, including: <img style="float: right;" src="uploads/images/15-12073_IAS_Mark_Testing_Lab.jpg" alt="" width="81" height="125" /> </strong></span></h3>
<ul>
<li style="text-align: left;">HVAC Equipment ................................. UL 1995, UL 60335<span style="white-space: pre;"> </span></li>
<li style="text-align: left;">Duct Heaters *.....................................<span style="white-space: pre;"> </span>UL 1996</li>
<li style="text-align: left;">Lighting<span style="white-space: pre;"> ............................................. UL 1598, UL 8750</span></li>
<li style="text-align: left;">Lightning Protection<span style="white-space: pre;"> ..............................<span style="white-space: pre;"> </span>UL 96</span></li>
<li style="text-align: left;">Water Heaters<span style="white-space: pre;"> ....................................<span style="white-space: pre;"> </span>UL 174</span></li>
<li>Electrical Equipment.............................. UL 508, UL 508A</li>
</ul>
<h3><span style="font-size: medium;"><strong style="font-size: 0.8em;">European Conformity (CE), including:<img style="float: right;" src="uploads/images/European%20Conformity.jpg" alt="" width="106" height="104" /></strong></span></h3>
<ul>
<li>IT Equipment ....................................... EN 60950</li>
<li style="text-align: left;">Air Conditioners *................................... EN 14511</li>
<li>EMC ................................................... EN 61000</li>
</ul>
<h2>Industry Services</h2>
<ul>
<li>Certifying body and test lab for ENERGY STAR</li>
<li>Energy Efficiency Rating (EER)</li>
<li>Seasonal Energy Efficiency Rating (SEER)</li>
<li>Desuperheater Efficiency</li>
<li>Corrosion</li>
<li>Static Uplight Resistance</li>
<li>Tensile Strength</li>
<li>Compressive Strength</li>
<li>Electrical/Material Endurance</li>
<li>Electro/Mechanical Cycling</li>
<li>Lifecycle/Durability Testing</li>
</ul>

sunfighter
May 11th, 2017, 11:00 PM
The code you posted and the image do not match.

The last list in your code will have a very large image attached to it making the page really ugly.

This
src="uploads/images/European%20Conformity.jpg"

we can't see; it's on your computer.

wojeezy08
May 12th, 2017, 10:09 PM
European%20Conformity.jpg is the image of the black letter that read "CE"

It's the one boxed in red:
17047

sunfighter
May 12th, 2017, 11:05 PM
And have still do not have access to it. You must post it to the web someplace so we can use it. I use photobucket. there are other sites.

wojeezy08
May 15th, 2017, 05:13 PM
Ah ok. Here it is:

Imgur: The most awesome images on the Internet (http://imgur.com/a/1VZfX)

trying-my-best
May 15th, 2017, 06:53 PM
Another way I like to do it is to use a public domain link from the internet to fill the space of the image to serve as an example.

coothead
May 15th, 2017, 11:10 PM
Hi there wojeezy08,


check out the attachment, which contains a working example.

I did not attempt to make it work for mobile devices as you
have not stated your requirements for that area.

At present it works for pages with a width of 440px plus.



coothead

wojeezy08
May 16th, 2017, 09:49 PM
Cool, thanks for the example.

Noob question here: I don't see the actual text anywhere in the CSS file. For example, the words "HVAC equipment" do not appear in the code, but do appear in the final product. How is this being achieved?

I ask because I'm trying to figure out how to best implement your example into the HTML of my webpage.

Thanks

coothead
May 16th, 2017, 10:03 PM
Hi there wojeezy08,


The HTML code is not in the screen.css file it is in the index.html file.;)

This is what you will see...



<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="css/screen.css" media="screen">

</head>
<body>

<ul id="links-one">
<li><span>HVAC Equipment</span><span>UL 1995, UL 60335</span></li>
<li><span>Duct Heaters *</span><span>UL 1996</span></li>
<li><span>Lighting</span><span>UL 1598, UL 8750</span></li>
<li><span>Lightning Protection</span><span>UL 96</span></li>
<li><span>Water Heaters</span><span>UL 174</span></li>
<li><span>Electrical Equipment</span><span>UL 508, UL 508A</span></li>
</ul>

<ul id="links-two">
<li><span>IT Equipment</span><span>EN 60950</span></li>
<li><span>Air Conditioners *</span><span>EN 14511</span></li>
<li><span>EMC</span><span>EN 61000</span></li>
</ul>

</body>
</html>
...if you happen to open it. :D



coothead

wojeezy08
May 18th, 2017, 03:17 PM
Oh ya....:o

I'll work with the example and let you know how it goes.

THANK YOU THANK YOU THANK YOU

coothead
May 18th, 2017, 05:30 PM
No problem, you're very welcome. ;)


coothead