Resolved CSS for resizable image? [Archive]

View Full Version : Resolved CSS for resizable image?

mlegg

01-17-2013, 12:40 AM

I am trying to make a site with HTML5 and responsive design. I have the test page here (http://www.ipcamhd.com/index-test.html)

What do I have to do so the main banner image scales (down or up) to fit various screen sizes?

here is the HTML

<!DOCTYPE html>
<html>
<head>
<title>IPCamHD.com Our Cameras are all HD. Demand it for your Security!</title>
<link rel="stylesheet" type="text/css" href="styles-test.css">
<link rel="stylesheet" href="CSS3Menu/css3menu/style.css" type="text/css" /><style>._css3m{display:none}</style>
<Link rel="icon" type="image/ico" Href="images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!">
<meta name="keywords" content="IP CAM 2012, security camera, surveillance, Tenvis, Compro, wireless camera, surveillance camera, security video, spy camera, home security camera, surveillance camera, VPN software, Stop Identity Theft, IP Cam 2012, security equipment, monitoring equipment, intelligent monitoring, DVR, hard disk recorders, network cameras, security, video monitoring, NVR, network hard disk video recorder, H 264 DVR System, HD Video Security System, HD Surveillance Camera, HD Security Cameras Systems, Home Video Surveillance Packages, High Definition Surveillance System">
<meta name="author" content="Matt Pilon Sr.">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>

<script src="js/modernizr-1.0.min.js"></script>
<div id="mainPicture"><img src="images/main-logo.jpg" alt="IPCAMHD logo"></div>

</head>

<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="index.html" title="Home" style="height:18px;line-height:18px;">Home</a></li>
<li class="topmenu"><a href="#" title="Products" style="height:18px;line-height:18px;"><span>Products</span></a>
<ul>
<li><a href="tenvis.html" title="Tenvis">Tenvis IP Cams</a></li>
<li><a href="compro.html" title="ComPro">ComPro Technology Cams</a></li>
<li><a href="nvr.html" title="Network Video Recorder">Network Video Recorder</a></li>
<li><a href="accessories.html" title="VMS Software">VMS Software</a></li>
<li><a href="car-sec.html" title="Car Video Security">Car Video Security</a></li>
</ul></li>
<li class="topmenu"><a href="#" title="Catalogs" style="height:18px;line-height:18px;"><span>Catalogs</span></a>
<ul>
<li><a href="tenvis-cat.html" title="Tenvis Catalog">Tenvis Catalog</a></li>
<li><a href="compro-cat.html" title="Compro Catalog">Compro Catalog</a></li>
</ul></li>
<li class="topmenu"><a href="support.html" title="Support" style="height:18px;line-height:18px;">Support</a></li>
<li class="topmenu"><a href="policies.html" title="Policies" style="height:18px;line-height:18px;">Policies</a></li>
<li class="topmenu"><a href="about.html" title="About Us" style="height:18px;line-height:18px;">About Us</a></li>
<li class="toplast"><a href="contact.html" title="Contact" style="height:18px;line-height:18px;">Contact</a></li>
</ul>

<div class="contentBox">
<div class="innerBox">
<div class="contentText">
<h2>Our Cameras are all HD. You demand it on your Television. Demand it for your Security!</h2>
<div id="3column">

<div id="col1">
Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>

<div id="col2">
Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>

<div id="col3">
Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!</div>

<div id="clearance" style="clear:both;"></div>

</div>

<p style="text-align:center;"><a href="https://www.facebook.com/IpCamHd" target="_blank"><img src="images/facebook.jpg" alt="Like us on Facebook"></a> Follow us on Facebook!</p><br>
<div style="clear:both;"></div></div></div></div>
<div id="footer">© 2012 <a href="http://ipcamhd.com/">IPCamHD.com</a> / Cromwell Drive, San Antonio, TX, 78201 / <a href="mailto:mattpilonsr@ipcamhd.com">Matt Pilon Sr.</a> / (210) 617-3519</div>
</body></html>

mlegg

01-17-2013, 12:42 AM

Here is my CSS, I thought by making the 90% it would leave a bit of the grey sides, so the page isn't just all white.

body {
margin: auto;
color : #000000;
background-color: #CCCCCC;
background-repeat : repeat;
width : 90%;
}

#mainPicture {
height: auto;
width: 90%;
margin: auto;
}
.contentBox {
font-family: Georgia;
font-size:18px;
clear:both;
}

.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
#left_col {
float:left;
width:45%;
padding:5px;
}
#right_col {
float:right;
width:45%;
padding:5px;
}

#lft {
float: left;
width: 32%;
padding:5px;
}

#mid {
float: left;
width: 32%;
padding:5px;
}

#rgt {
float: left;
width: 32%;
padding:5px;
}
table#yourtable {
margin: 0 auto;
}
#3column {
width: 960px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

#col1 {
margin: 10px;
float: left;
width: 285px;
}

#col2 {
margin: 10px;
float: left;
width: 285px;
}

#col3 {
margin: 10px;
float: left;
width: 285px;
}

#footer {
background-color: #595959;
max-width : 960px;
text-align : center;
font-size : 16px;
font-family: Georgia;
color : #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
}
#footer a:link {
color : #FFFFFF;
text-decoration : underline;
}
#footer a:visited {
color : #FFFFFF;
text-decoration : underline;
}
#footer a:hover {
color : #000000;
background-color : #FFFFFF;
text-decoration : underline;
}
#footer a:active {
color : #FFFFFF;
background-color : #FFFFFF;
text-decoration : underline;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Beverleyh

01-17-2013, 06:38 AM

Try adding
#mainPicture img { max-width:100%; height:auto; }so, we're not using an explicit size for the img - we're letting it resize up or down automatically.

IE8 needs something extra though so create a conditional stylesheet with an additional width:auto; in it.

Beverleyh

01-17-2013, 06:51 AM

Ps - you could also use device size media queries to serve a resized image to smaller screens:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

This way you're not forcing somebody on a teeny weeny smartphone to download a huge pic - you can serve them an img that's easier on bandwidth. That's probably going to fair better with iPhone/iPad - there's a 25k limit on cache size for those so if all your resources (css files, images, etc) come in under 25k each, they'll be cached and the user won't have to wait for them to download afresh on every view.

mlegg

01-17-2013, 12:16 PM

I have the media queries in the css already. I just tried the max-width 100% but it didn't stretch the image wider or scale the image down.

Beverleyh

01-17-2013, 12:33 PM

I have the media queries in the css already.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}Yes, but you havent defined anything in them yet. The queries you posted for the different devices are empty so you need to add your custom CSS (heights, widths) in those.

BUT, with the image defined already in the src of the img tag (directly in the markup), you cant switch in different images via the CSS media queries. What you could do however, is to set the src to point to a transparent gif, but then set the logo as a background-image on the img tag. You'll then be able to switch in different sized background-images according to the chosen size for your device media query.

I just tried the max-width 100% but it didn't stretch the image wider or scale the image down.That's because you didnt define it against the img - you did
#mainPicture { max-width:100%; height:auto; } instead of
#mainPicture img { max-width:100%; height:auto; } You only used the CSS against the #mainPicture div container. Remember, we're targetting the img here rather then the containing div - the img is what you want to automatically resized.

mlegg

01-17-2013, 06:37 PM

I copied the media query from the link you provided above. I also added the img and the image does scale down correctly. It does not grow larger.

or do I have to make a larger image so it will scale down? the current banner I made in Photoshop is 960px X 200 px

now I just noticed a small separation between the banner and the css menu :confused:

Beverleyh

01-17-2013, 07:25 PM

I copied the media query from the link you provided above.
Those are the queries for targetting different device sizes but but there are no styles defined in them. Where it says " /* Styles */ " you would need to define whatever CSS you wanted to adopt in that particular device, so this is where you could, if you wanted to, changes image dimensions or font-size. You would have to decide that based on your own requirements though.

I also added the img and the image does scale down correctly. It does not grow larger.

or do I have to make a larger image so it will scale down? the current banner I made in Photoshop is 960px X 200 px

now I just noticed a small separation between the banner and the css menu :confused:You could make a larger image but I dont recommend going too big - maybe one that is 1400px maximum. What I recommend in conjunction with that is capping the width of all your content to a max-width of 1400px too. Whatever width you decide, just match the content with the banner image.

At the moment, all of your content width is flowing off into infinity which looks rather odd on very wide monitors, so limiting the width retains a degree of control in an ever expanding uncertainty. How wide will monitor/screen resolutions go in the future? Who knows, but here's how things look at the mo: http://www.w3schools.com/browsers/browsers_resolution_higher.asp

Of course you don't need to make a wider image at all. You could keep the 960px one and cap your content to match; max-width:920px;

Alternatively, if you prefer your content to flow wider, you can cap content width at, say, 1280px but set the #mainPicture div's background as white. Your banner is mainly white so it should look OK. It just depends what you want to do.

mlegg

01-18-2013, 01:12 AM

thank, I will work on the media query later. I made the banner image 1280px wide and added background-color: #FFFFFF; to the css but how do I get rid of the slim grey line under the banner/over the nav menu bar??

Beverleyh

01-18-2013, 01:36 PM

<div id="mainPicture"><img src="images/main-logo.jpg" alt="IPCAMHD logo"></div>

</head>

It might be because you have the closing </head> tag after the banner image markup (ie - your banner image is inside the <head> section)

You also have a closing </body> tag at the end of your page but no opening <body> tag earlier on in the document.

I know that strictly speaking, you dont need to define the head or body section in HTML5 (or did that start in an earlier HTML version?) but as you've overlooked some mis-matched pairs, its probably inducing a few errors and browsers rendering troubles. If I were you, I'd err on the side of caution and define them in the correct places rather than omit/mis-match them.

If you correct the page structure, it should hopefully fix things.

Reference for HTML5 page structure: http://css-tricks.com/snippets/html/html5-page-structure/

Also, you can use the W3C Validator to help pin-point/fix markup issues: http://validator.w3.org/

mlegg

01-18-2013, 03:28 PM

I can't believe I forgot the body tag. I added it and went to the validator link and the new updated page passes but I still have that small grey line separating between the menu and the image. I don't see anywhere in my css that I have padding. :confused:

http://www.ipcamhd.com/styles-test.css is the main css and I get this after validating

Sorry! We found the following errors (2)
URI : http://www.ipcamhd.com/styles-test.css
61 Invalid ID selector [#3column]
173 Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

the css for the nav menu is at http://www.ipcamhd.com/CSS3Menu/css3menu/style.css

Sorry! We found the following errors (5)
URI : http://www.ipcamhd.com/CSS3Menu/css3menu/style.css
12 ul#css3menu1 Property zoom doesn't exist : 1
13 ul#css3menu1 Parse Error *display:inline;
13 * Parse Error *padding-right:1.28%;
13 * Parse Error ;}
43 Sorry, the at-rule @-moz-document is not implemented.

Beverleyh

01-18-2013, 04:48 PM

I'm back on iPhone now so I can't investigate CSS specifics.

The gap *could* be due to any number of issues, but if you've zero'd the margins/paddings on the banner img + containing div, and the menu ul + any containing div, another possible culprit *could* be borders. I say this because the default border width in browsers is 3px, so if you've got a border specified somewhere that is set as transparent but has no width defined, it will default to 3px, which sort of looks like the size of the gap you mentioned. In a case such as this, you would set the border-width to 0 and the gap should vanish.

But even if there are no borders to blame, you should be able to fix it by setting a negative top margin on the menu div/ul (I can't remember how its contained now) to pull it upwards to meet the banner. Either that or set a negative bottom margin on the banner div to allow the menu to sit a bit higher (assuming that both are relatively positioned)

Hope that makes sense.

mlegg

01-19-2013, 12:44 AM

OMG this is driving me nuts. I can't believe I can't fix this.

Beverleyh

01-19-2013, 06:26 AM

Ok - so have you tried dismantling the page and building it up again gradually to pinpoint the problem?

As a bare minimum, have you tried removing the menu ul/li markup? Does the banner img and main content panel below shunt back together with a nice tight fit (no gap)? If so, there's an issue with margins or paddings on your menus.

What i suggest is starting over with an empty page and work through the markup, adding each element back in until you find the one that causes the issue. Then target the CSS for that (and its parent and any children) - strip it back and build it back up gradually. This is the easiest way to narrow down CSS issues.

mlegg

01-19-2013, 09:44 PM

OK I started cding a new page from scratch and edited some of my css, then I remade the css nav manu. I am all set now.
thank you so much for hanging with me on this