Wrox Programmer Forums
|
BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
This is the forum to discuss the Wrox book Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars; ISBN: 9780470187593
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 7th, 2009, 12:58 AM
Authorized User
 
Join Date: Jan 2009
Posts: 26
Thanks: 4
Thanked 1 Time in 1 Post
Question All Photo Albums page

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
 
Old January 7th, 2009, 03:14 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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 Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

Last edited by Imar; January 7th, 2009 at 03:16 AM..
 
Old January 7th, 2009, 03:17 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

>> (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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
The Following User Says Thank You to Imar For This Useful Post:
cbspira (January 7th, 2009)
 
Old January 7th, 2009, 12:31 PM
Authorized User
 
Join Date: Jan 2009
Posts: 26
Thanks: 4
Thanked 1 Time in 1 Post
Default

Thanks for replying so fast.

Quote:
Originally Posted by Imar View Post
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 View Post
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 View Post
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 View Post
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 View Post
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
 
Old January 7th, 2009, 12:53 PM
Authorized User
 
Join Date: Jan 2009
Posts: 26
Thanks: 4
Thanked 1 Time in 1 Post
Thumbs up

Hi Mr. Spaanjaars,

Quote:
Originally Posted by Imar View Post
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
 
Old January 8th, 2009, 03:54 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
The Following User Says Thank You to Imar For This Useful Post:
cbspira (January 8th, 2009)
 
Old January 8th, 2009, 12:20 PM
Authorized User
 
Join Date: Jan 2009
Posts: 26
Thanks: 4
Thanked 1 Time in 1 Post
Thumbs up

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

Quote:
Originally Posted by Imar View Post
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 View Post
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 View Post
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 View Post
Hope this helps
Absolutely!

Thank you very much,
Mrs. CB Spira
 
Old January 10th, 2009, 08:09 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!





Similar Threads
Thread Thread Starter Forum Replies Last Post
Error posting photo to photo album abel714 BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 10 February 5th, 2007 03:07 AM
Photo software malambing57 ASP.NET 1.0 and 1.1 Professional 1 January 9th, 2007 11:50 AM
Display 'no photo' in a JSP when photo is not pres Inderjeet Pro JSP 0 April 21st, 2006 05:35 AM
fading from photo to photo in flash elladi Flash (all versions) 1 November 28th, 2004 11:21 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.