All Photo Albums page

cbspira · January 7th, 2009, 12:58 AM

I have a few questions about this page and the way it's constructed and styled, and I hope someone can answer me :-)

The page in question is: PhotoAlbums/Default.aspx
It's based on the master page with /Styles/Styles.css providing the .itemContainer styles (copied mostly verbatim from the source, except for a border thrown in for debugging purposes)

Here's my situation:
I noticed that the navigation controls were floating on top of the caption and the delete button. At first I thought that the style was not being applied, so I added a border to the

Code:

.itemContainer li img

section - the border is visible in design view of the page in vwd, so I knew that the style is being applied. I then tried looking at the generated HTML of the page to see if maybe the images were not falling into the li img category, but I struck out because the view source only yielded html of the page without the selected album, so it returned "no data returned" (sidebar: how would one look at the source of such a dynamic page? I even tried working off-line once I had an album selected, but that didn't seem to make a difference)
It occurred to me that the problem is because my pictures are portrait, not landscape, and that the style only limits the width, not height. I changed the setting to a manageable height, and sure enough, the controls were no longer interfering with my pictures.

(if there were a bald emoticon here I'd insert it - between this, my yellow screen of death post, and figuring out how to enable ssl for the password controls, I've (figuratively) ripped out all of my hair.

)

This leads me to my questions:
1. Is there a way (ok, dumb phraseology, there's always a way!) to programmatically figure out if a picture is portrait or landscape and then restrict the size based on that? I was thinking to compare height and width, and whichever is greater would be the dimension that would be restricted. I don't want to restrict both because that may skew an image, and it looks like by only specifying one dimension the image is resized to scale. Not all of my pictures are the same dimensions (due to cropping and what-not) so I couldn't even make an assumption of portrait =u by w and landscape=y by z. When in the course of the events would be the best time to accomplish this?

2. Is there a reason the borders do not show up in the final page? Here's what I have:

Code:

  border-style: double;
  border-width: thick;

It shows up in the design placeholders, but not on the page (I even set the color to something outlandish just to make sure the theme wasn't interfering - it did not help)

3. When all is said and done, is there a way to enforce that the navigation controls can't occupy the same space as another control (or vice versa)? It's pretty disconcerting to see (not to mention unprofessional presentation). (I have a couple of screen shots that I can upload if that would be helpful)

Thanks,
Mrs. CB Spira

Imar · January 7th, 2009, 03:14 AM

Hi there,

Re: resizing images: yes you can do that, like this:

Code:

 
    Public Shared Function GetImageSize(ByVal fileNameIn As String) As Size
      Dim myBitmap As Bitmap = Nothing
      Dim theSize As Size = Size.Empty
      Try
        ' Open the image
        myBitmap = New Bitmap(fileNameIn)
        theSize = myBitmap.Size
      Catch
        ' Ignore; we return Size.Empty in that case
      Finally
        If myBitmap IsNot Nothing Then
            myBitmap.Dispose()
        End If
      End Try
      Return theSize
    End Function

This returns a Size that has a Width and a Height that you can compare.

Re; the border: try setting !important and see if that helps:

border-style: double !important;
border-width: thick !important;

This marks it as more important than other settings so you can find out if it at least gets applied. I am not sure what you are trying to apply where, but you might want to look at the final HTML in the browser; ASP.NET may have added an in-line style for the border which you cannot override from CSS. If that's the case, consider dropping the control (probably an ImageButton).

Re overlapping controls: Depends on on your code. Normally, they don't overlap. One control will not overlap with another. However, as soon as you start changing the position of a control, they might overlap. I think you'll find it useful to get a good book on CSS like York's Beginning CSS that will help you understand these issues.

Hope this helps.

Cheers,

Imar

Imar · January 7th, 2009, 03:17 AM

>> (sidebar: how would one look at the source of such a dynamic page?

Take a look at the "Internet Explorer Developer Toolbar" or "Firebug" for firefox...

Imar

cbspira · January 7th, 2009, 12:31 PM

Thanks for replying so fast.

Quote:

Originally Posted by Imar

Re: resizing images: yes you can do that, like this:

Code:

 
    Public Shared Function GetImageSize(ByVal fileNameIn As String) As Size
<snip>

This returns a Size that has a Width and a Height that you can compare.

When in the page cycle should this function be invoked? I'd be using it to force a style override - I guess it would have to be after the .css style gets looked at...

Quote:

Originally Posted by Imar

Re; the border: try setting !important and see if that helps:

border-style: double !important;
border-width: thick !important;

Yup, that did the trick.

Quote:

Originally Posted by Imar

I am not sure what you are trying to apply where, but you might want to look at the final HTML in the browser;

Sorry, I wasn't clear. I added the borders to the section:

Code:

.itemContainer li img
{
  width: 180px;
  margin: 10px 20px 10px 0;
  border-style: double;
  border-width: thick; 
}

because I wanted to make sure the style was being picked up for the images. The borders appeared in the design view of VWD but not on the rendered page... I really don't need the borders now that I figured out the problem was with the height, but I was wondering why they didn't apply (in case I ever did want to apply a border). I did try to look at the code, but could not (I'll try the suggestion you posted below answering my sidebar...).

Quote:

Originally Posted by Imar

ASP.NET may have added an in-line style for the border which you cannot override from CSS. If that's the case, consider dropping the control (probably an ImageButton).

I'm not sure what you mean about ASP.Net adding a style - why would the first section of the style be applied (width, height, margins) but not the border? I also do not understand the reference to an ImageButton - are you saying that ASP.Net would have rendered the images as ImageButtons?

Quote:

Originally Posted by Imar

However, as soon as you start changing the position of a control, they might overlap. I think you'll find it useful to get a good book on CSS like York's Beginning CSS that will help you understand these issues.

OK, thanks for the suggestion and all your help.

Have a great day,
Mrs. CB Spira

cbspira · January 7th, 2009, 12:53 PM

Hi Mr. Spaanjaars,

Quote:

Originally Posted by Imar

Take a look at the "Internet Explorer Developer Toolbar"

Thanks! I never knew about this tool (where have I been?)
I discovered that it's only the border-width that's not getting applied for some reason. The toolbar claims that border-*-width (css) is set to 0px... I have to track this down now, but now I feel equipped to handle the challenge!

Thanks for all your help,
Mrs. CB Spira

Imar · January 8th, 2009, 03:54 AM

The border is put there by the ASP.NET Framework. Try this:

1. Create a new Web page

2. From the Toolbar drag an <asp:Image /> control. You get this:

Code:

<asp:Image ID="Image1" runat="server" />

3. Save, and open the page in the browser

4. View the HTML source. You get this:

Code:

<img id="Image1" src="" style="border-width:0px;" />

ASP.NET adds the border there for you automatically. Not sure if it's a feature or a bug, but it can interfere with your page design at times. Since in-line styles overrule anything else you need to use stuff like !important to overrule this setting. Alternatively, you could set the border directly on the image, although that defeats the purpose of CSS a bit....:

<asp:Image ID="Image1" runat="server" BorderColor="Green" BorderStyle="Dashed" BorderWidth="4px" />

With regards to getting the size of the image: I would change the database schema so the Picture table gets a Height and a Width property (or an Orientation property). Since getting the size of images is a slow operation, you don't want to do this every time you need to show an image. Instead, do this at upload time, store the data in the database and use that when presenting the image.

Hope this helps,

Imar

cbspira · January 8th, 2009, 12:20 PM

Mr. Spaanjaars,
Thank you once again for replying...

Quote:

Originally Posted by Imar

The border is put there by the ASP.NET Framework. Try this:
<snip>

ASP.NET adds the border there for you automatically. Not sure if it's a feature or a bug, but it can interfere with your page design at times.

Ummm... I vote bug

- is there any purpose that is being filled with a border-width of 0px? Besides, if it really was a feature it should have been documented...

Quote:

Originally Posted by Imar

Since in-line styles overrule anything else you need to use stuff like !important to overrule this setting. Alternatively, you could set the border directly on the image, although that defeats the purpose of CSS a bit....:

Since I'm already using CSS, !important is the way to go for me...

Quote:

Originally Posted by Imar

With regards to getting the size of the image: I would change the database schema so the Picture table gets a Height and a Width property (or an Orientation property). Since getting the size of images is a slow operation, you don't want to do this every time you need to show an image. Instead, do this at upload time, store the data in the database and use that when presenting the image.

Yes! I like this much better.... I was wondering how the speed would be affected - it makes much more sense to store the orientation at upload time - also, this way the calculation only needs to be done once, not every time the image is requested...

Quote:

Originally Posted by Imar

Hope this helps

Absolutely!

Thank you very much,
Mrs. CB Spira

Imar · January 10th, 2009, 08:09 AM

Quote:

is there any purpose that is being filled with a border-width of 0px

It can be useful for images within <a> elements; Without the 0 px border, they get a blue link border by default.Other than that, I don't see a reason for it.

Quote:

Since I'm already using CSS, !important is the way to go for me...

Setting the border attribute on the <asp:Image /> control renders CSS as well, as an in-line style sheet. But I agree, !important is probably a better option here.

Quote:

Thank you very much,

You're welcome....

Imar