Chapter 8 User control

Imar · December 29th, 2009, 05:07 PM

But what if you set the banner in the About page to Horizontal?

avs · December 29th, 2009, 05:17 PM

I set it in the properties grid just like the book says and it DOESN'T work as you say it should Followed steps 11-13 on page 282 exactly. Hard to screw up those 3 steps . You've totally lost me at this point. Thank you for your efforts but the code in the book does not work correctly.

Imar · December 29th, 2009, 05:21 PM

The code in the book *does* work as a) I have seen it run many, many times and b) it works on PlanetWrox.com which uses the same code base, So, clearly something else must be going wrong.

If you want, you can send me your project and I'll have a look. If you send me a message through my personal web site, I'll reply so you know my e-mail address. If you then send me a zipped version of the site, I'l take a look and let you know what the problem is.

Cheers,

Imar

chroniclemaster1 · December 29th, 2009, 06:34 PM

If you want to try an alternative, I have done a CSS-only version of this before.

In my banner, I've simply created a div "bannerImage" (the cite element creates the image title so that it's in text and the font is synchronized with the page content).

<div id="bannerImage"><cite class="title">Pondscape</cite></div>

Here's my CSS style rule.
#bannerImage {
position: absolute;
right: 0;
top: 0;
background: url(../AllSites/Images/EcDesignImages/galleryPonk1.jpg) top right no-repeat;
width: 100%;
max-width: 2000px;
height: 150px;
}

Aside from some positioning the magic happens in the last 4 properties. The background assigns the value of the image I want to apply. The height is set to the height of the image; however, instead of using "width" to set the width of the image, I use "max-width" so that it will show less of the image if the browser width is too narrow for the whole thing. Finally, you use width: 100% to force the div open as wide as the browser will permit.

I've used a 2000px wide image for broadest cross-browser / cross-monitor compatibility. This design can adapt from a 320px wide iPhone to an 2000+ pixel wide HD display seamlessly.
You can see the results in the banner on my homepage at http://www.earthchronicle.com/EC/Default.aspx.

avs · December 29th, 2009, 06:55 PM

Thank you, I will try this tonight. I've fixed my problem with the "About Page" but still have the original issue I raised, when the image is too big to fit the defined pagewrapper width, NOTHING displays. If I change the width to be "big enough" everything works as it should. Your solution, as I read it, speaks to this directly. "I use "max-width" so that it will show less of the image if the browser width is too narrow for the whole thing. "

I know its trivial, and really makes no difference in this example as what I've beat my head for is to show an image that does NOT fit correctly. Point is, I was trying to learn why I saw nothing, and how I could at least see a cropped version of the image when this might happen in a production environment.

I do appreciate the author trying to assist. Perhaps it is a typo on my part but I have looked at the code man times, and again as long as I give the image enough space to paint entirely ALL the code works fine.

Many thanks

Imar · December 29th, 2009, 07:16 PM

Quote:

Point is, I was trying to learn why I saw nothing, and how I could at least see a cropped version of the image when this might happen in a production environment.

Send me ypur project, or post the code here, and I'll help you figure it out...;-)

Cheers.

Imar

Imar · December 29th, 2009, 08:55 PM

Got it. Thanks.

In your sample project, the banner ends up *below* the content block.

The reason for this problem is that you have SideBar with a capital B in the Master Page and Sidebar with a lower case b in the CSS file. Changing this:

Code:

<div id="SideBar">

To this:

Code:

<div id="Sidebar">

in the Master Pages fixes the problem and displays the banner as explained in the book (so the code *does* work ;-) ).

This also enables you to use the trick I suggested earlier. Add:

overflow: hidden;

to the Sidebar declaration in Monochrome.css and the banner is cut off at the exact width of the Sidebar.

Cheers,

Imar

chroniclemaster1 · December 29th, 2009, 09:06 PM

Quote:

Originally Posted by avs

Thank you, I will try this tonight. I've fixed my problem with the "About Page" but still have the original issue I raised, when the image is too big to fit the defined pagewrapper width, NOTHING displays. If I change the width to be "big enough" everything works as it should. Your solution, as I read it, speaks to this directly. "I use "max-width" so that it will show less of the image if the browser width is too narrow for the whole thing. "

Many thanks

:) No problem. You're right there are two separate issues here. First, you're trying to understand the original problem, which is why Imar rocks.

Second is tech-ing the CSS so that it displays the "behavior" you want depending on people's browser configuration. CSS background images are a cool thing to have in your toolbox; I use CSS to apply images to a div unless the image is actually part of the content of the page (a photo to go with a news story, portrait to go with a bio, etc.)

The magic is the width: 100% which tells the image to take up as much space as it can AND the max-width which you set to the actual width of the image in pixels. This sets on upper limit on how far the browser will go along with the 100% width. When the width allows more than 2000 pixels of image to show, the div refuses to grow further because of the max-width. So on ultra wide HD displays, the site id (my logo) and the banner image begin to move apart. I've tacked the banner image to the right margin of the page so that it appears built for any size page, but this causes a less than ideal gap for ultra-high resolutions. I've simply made the decision in this design that this is better than the tradeoffs of other options I experimented with.

avs · December 29th, 2009, 09:17 PM

Thanks so much! I looked at that 100 times and (obviously) didn't see the difference. Many thanks