![]() |
|
|
#1 |
|
Guest
Posts: n/a
|
divs and pictures
I have a 3 column web site. In the 3rd (right) column I have small pictures -
actually they are fairly large but made smaller in size. What I want to do is allow the user to click on a picture and have a larger picture appear. I have been doing this using divs with position absolute, and in general it seems to more or less work, but I am having some problems and I have a question - first the question. Since I am using the same image file for both the small picture and large div with the picture in it, am I correct in assuming that it will only be downloaded once? If not is there a way I can make it download only once? Now for the problems - when I insert one of the div's for the pictures, I am using the draw layer tool. If I carefully position my cursor before I use the tool, it puts the div somewhere in the vicinity of where the cursor was. If I forget to do this, sometimes it will end up in the middle of some text, and split the text into two paragraphs, which seems kind of wierd, but maybe not if it thinks that is where I really want it because I left the cursor there. Also, the position seems unstable in weird ways - if I go to preview on the file menu and check them in IE7 with the files local on my computer, they seem to be in the right place. But if I load them up to the web site and then check them they have all moved around. But the biggest problem is that sometimes my right two columns will suddenly drop below the left column. When this happened yesterday I made a new empty page with just my dwt in it, and then just copied the code that was not in the dwt from the code screen on the page that was acting up, into the new page. I did this a little bit at a time so that I could find the code that was causing the problem, but when I got done, the new page still worked fine. It has happened again this morning, so I decided that maybe if I made the left div a little narrower it would fix the problem, but no such luck. Then it happened a third time when I moved a div trying to clean up the code a little (one of the picture divs with position:absolute) and when I moved it back the problem went away again. And there are similar divs in the spot where I moved the div to, but none where I moved it from. Should these aboslute divs maybe be put at the end of the file so they don't affect the other divs? I am using the layout, with some minor modifications and additions from http://by-expression.com/content/samples.aspx in particular the reading example, and the web site is http://archconcepts.johnsonleflore.com Is there an easy way to find out what is causing this apparent interference between divs? Or is my copying a little at a time from one page to another to isolate the problem the best way? Thanks for anybodies help! Anne |
|
|
|
#2 |
|
Guest
Posts: n/a
|
Re: divs and pictures
Anne,
Don't use the same image for both the small and large version. It is inconsiderate to the bandwidth of those who don't want to see the larger images. It slows down your page load AND browsers don't do a good job of displaying images at any size other than their native size. Create a thumbnail then link it to the larger image. Though I suspect you would be far better off from your description in using a third party photo gallery that has all the behaviors built-in to display the larger image. There are many excellent free ones listed in the thread at http://by-expression.com/forums/p/95/623.aspx#623 or you might want to consider using Lightbox 2 http://www.lokeshdhakar.com/projects/lightbox2/ I would also recommend not using absolute positioning since it is inheritly unstable and is likely to break viewed in a browser or on a different screen resolution than the one you are testing in. Using absolute positioning will break the reading template. While you may have used the Reading template as a base I would not have recognized it as such.There is a lot of code that I know is not in the reading template that could be causing your issues such as "position: relative" for your container, using points for font sizes (something that is dependent on the visitor's browser and operating system), also I never recommend using Verdana. In fact I recommend against it because the difference in size between Verdana and the next named font (Arial) is approximately 20% so if you size for Verdana and the visitor doesn't have it then it will be way to small, especially if the visitor is on a Mac which typically renders text smaller than Windows computers (less of a problem since Apple moved to the Intel platform.) You should also be using structural mark-up. When I look at the code there is not a single heading element on the page. This will hurt you when it comes to search engines. It also provides no structure to your page, everything has exactly the same space. This sort of code is asking for problems. <!-- #BeginEditable "RightContent" --> <br />Click on images to enlarge or shrink<br /><br /> <img alt="addition and renovation B. B. Kirkbride Bible" height="150" src="images/kirkbrid.jpg" width="217" onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" /> <p class="no_top_space"><em> <strong>Addition and Renovation<br />to B.B. Kirkbride Bible</strong><br /> Indianapolis, Indiana><br /> At minimum the above would be: Style definition: ..portfolio { font-style: italic; font-wieght: bold; margin: 0; padding: 0; text-align: center; } Use a style because strong and em have semantic mark-up and you are using them for formatting. <p>Examples of our work</p> <p class="portfolio"> <img alt="addition and renovation B. B. Kirkbride Bible" height="150" src="images/kirkbrid.jpg" width="217" onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" title="click to view larger image"/> Addition and Renovation<br /> to B.B. Kirkbride Bible </p> -- Cheryl D Wise MS MVP Expression Author: Foundations of Microsoft Expression Web See our selection of Expression Web tutorials at http://by-expression.com/content/tutorials.aspx "Anne Johnson" <AnneJohnson@discussions.microsoft.com> wrote in message news:1137307F-F96B-48C4-A9BF-3979816CEDA2@microsoft.com... >I have a 3 column web site. In the 3rd (right) column I have small >pictures - > actually they are fairly large but made smaller in size. What I want to do > is > allow the user to click on a picture and have a larger picture appear. > > I have been doing this using divs with position absolute, and in general > it > seems to more or less work, but I am having some problems and I have a > question - first the question. > > Since I am using the same image file for both the small picture and large > div with the picture in it, am I correct in assuming that it will only be > downloaded once? If not is there a way I can make it download only once? > > Now for the problems - when I insert one of the div's for the pictures, I > am > using the draw layer tool. If I carefully position my cursor before I use > the > tool, it puts the div somewhere in the vicinity of where the cursor was. > If I > forget to do this, sometimes it will end up in the middle of some text, > and > split the text into two paragraphs, which seems kind of wierd, but maybe > not > if it thinks that is where I really want it because I left the cursor > there. > > Also, the position seems unstable in weird ways - if I go to preview on > the > file menu and check them in IE7 with the files local on my computer, they > seem to be in the right place. But if I load them up to the web site and > then > check them they have all moved around. > > But the biggest problem is that sometimes my right two columns will > suddenly > drop below the left column. When this happened yesterday I made a new > empty > page with just my dwt in it, and then just copied the code that was not in > the dwt from the code screen on the page that was acting up, into the new > page. I did this a little bit at a time so that I could find the code that > was causing the problem, but when I got done, the new page still worked > fine. > It has happened again this morning, so I decided that maybe if I made the > left div a little narrower it would fix the problem, but no such luck. > Then > it happened a third time when I moved a div trying to clean up the code a > little (one of the picture divs with position:absolute) and when I moved > it > back the problem went away again. And there are similar divs in the spot > where I moved the div to, but none where I moved it from. Should these > aboslute divs maybe be put at the end of the file so they don't affect the > other divs? > > I am using the layout, with some minor modifications and additions from > http://by-expression.com/content/samples.aspx > in particular the reading example, and the web site is > http://archconcepts.johnsonleflore.com > > Is there an easy way to find out what is causing this apparent > interference > between divs? Or is my copying a little at a time from one page to another > to > isolate the problem the best way? > > Thanks for anybodies help! > Anne |
|
|
|
#3 |
|
Guest
Posts: n/a
|
Re: divs and pictures
Cheryl,
thanks for all your comments and time. I will check out the viewers, and go away from Verdana - I was using it because my client wanted a font with wider letter spacing. The container div with the relative positioning has inside of it the stuff that was in the reading example. I found the format for the container div when I was looking for how to do a fixed width site centered on the page. If I want to do the reading format but with a fixed width rather than floating width page similar to what displays on my site, what would you recommend? I did try it with my screen width reset to 800 x 600, and all pages but one were broken. But on further inspection I realized that I had put a fixed width on the center column - when I took that out everything started working again. As for font sizes, I didn't realize that pt would cause problems. Is the implication that I should stick to small, x-small, medium, etc, or is it OK to use something like .9em to get an in between size? I will be adding the heading element - I have not gotten together with my client to get a list of key words yet. On the use of structural markup, I did get lazy and not put the italic mark in a style in the CSS on that particular div (I probably actually made more work for myself), but the bold is only on the first line of each title. It seems really awkward to do a <span> or a separate paragraph with the margins set to 0 for the one line of bold, as compared with just enclosing that line is <strong></strong or <b></b>. Essentially I hear you saying that all formatting should be in the CSS, eiher in the linked CSS file or in the styles at the top of the page. Is this what you intended by your statement? Thanks again for your help - and I am going to check out your Expresssions Web Tutorials, and look for your book. I am self taught on web design, and I need some good material to fill in the holes that I know I have, but I'm sure I often don't recognize. Many years working with computers, but just about a year seriously learning web design, and about half time at that. Anne Cheryl D Wise" wrote: > Anne, > > Don't use the same image for both the small and large version. It is > inconsiderate to the bandwidth of those who don't want to see the larger > images. It slows down your page load AND browsers don't do a good job of > displaying images at any size other than their native size. > > Create a thumbnail then link it to the larger image. Though I suspect you > would be far better off from your description in using a third party photo > gallery that has all the behaviors built-in to display the larger image. > There are many excellent free ones listed in the thread at > http://by-expression.com/forums/p/95/623.aspx#623 or you might want to > consider using Lightbox 2 http://www.lokeshdhakar.com/projects/lightbox2/ > > I would also recommend not using absolute positioning since it is inheritly > unstable and is likely to break viewed in a browser or on a different screen > resolution than the one you are testing in. Using absolute positioning will > break the reading template. > > While you may have used the Reading template as a base I would not have > recognized it as such.There is a lot of code that I know is not in the > reading template that could be causing your issues such as "position: > relative" for your container, using points for font sizes (something that is > dependent on the visitor's browser and operating system), also I never > recommend using Verdana. In fact I recommend against it because the > difference in size between Verdana and the next named font (Arial) is > approximately 20% so if you size for Verdana and the visitor doesn't have it > then it will be way to small, especially if the visitor is on a Mac which > typically renders text smaller than Windows computers (less of a problem > since Apple moved to the Intel platform.) > > You should also be using structural mark-up. When I look at the code there > is not a single heading element on the page. This will hurt you when it > comes to search engines. It also provides no structure to your page, > everything has exactly the same space. This sort of code is asking for > problems. > > <!-- #BeginEditable "RightContent" --> > <br />Click on images to enlarge or shrink<br /><br /> > <img alt="addition and renovation B. B. Kirkbride Bible" height="150" > src="images/kirkbrid.jpg" width="217" > onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" /> > > <p class="no_top_space"><em> > <strong>Addition and Renovation<br />to B.B. Kirkbride Bible</strong><br > /> > Indianapolis, Indiana><br /> > > At minimum the above would be: > > Style definition: > > ..portfolio { > font-style: italic; > font-wieght: bold; > margin: 0; > padding: 0; > text-align: center; > } > > Use a style because strong and em have semantic mark-up and you are using > them for formatting. > > <p>Examples of our work</p> > <p class="portfolio"> > <img alt="addition and renovation B. B. Kirkbride Bible" height="150" > src="images/kirkbrid.jpg" width="217" > onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" > title="click to view larger image"/> > Addition and Renovation<br /> > to B.B. Kirkbride Bible > </p> > > > > > > -- > Cheryl D Wise > MS MVP Expression > Author: Foundations of Microsoft Expression Web > > See our selection of Expression Web tutorials at > http://by-expression.com/content/tutorials.aspx > > > "Anne Johnson" <AnneJohnson@discussions.microsoft.com> wrote in message > news:1137307F-F96B-48C4-A9BF-3979816CEDA2@microsoft.com... > >I have a 3 column web site. In the 3rd (right) column I have small > >pictures - > > actually they are fairly large but made smaller in size. What I want to do > > is > > allow the user to click on a picture and have a larger picture appear. > > > > I have been doing this using divs with position absolute, and in general > > it > > seems to more or less work, but I am having some problems and I have a > > question - first the question. > > > > Since I am using the same image file for both the small picture and large > > div with the picture in it, am I correct in assuming that it will only be > > downloaded once? If not is there a way I can make it download only once? > > > > Now for the problems - when I insert one of the div's for the pictures, I > > am > > using the draw layer tool. If I carefully position my cursor before I use > > the > > tool, it puts the div somewhere in the vicinity of where the cursor was. > > If I > > forget to do this, sometimes it will end up in the middle of some text, > > and > > split the text into two paragraphs, which seems kind of wierd, but maybe > > not > > if it thinks that is where I really want it because I left the cursor > > there. > > > > Also, the position seems unstable in weird ways - if I go to preview on > > the > > file menu and check them in IE7 with the files local on my computer, they > > seem to be in the right place. But if I load them up to the web site and > > then > > check them they have all moved around. > > > > But the biggest problem is that sometimes my right two columns will > > suddenly > > drop below the left column. When this happened yesterday I made a new > > empty > > page with just my dwt in it, and then just copied the code that was not in > > the dwt from the code screen on the page that was acting up, into the new > > page. I did this a little bit at a time so that I could find the code that > > was causing the problem, but when I got done, the new page still worked > > fine. > > It has happened again this morning, so I decided that maybe if I made the > > left div a little narrower it would fix the problem, but no such luck. > > Then > > it happened a third time when I moved a div trying to clean up the code a > > little (one of the picture divs with position:absolute) and when I moved > > it > > back the problem went away again. And there are similar divs in the spot > > where I moved the div to, but none where I moved it from. Should these > > aboslute divs maybe be put at the end of the file so they don't affect the > > other divs? > > > > I am using the layout, with some minor modifications and additions from > > http://by-expression.com/content/samples.aspx > > in particular the reading example, and the web site is > > http://archconcepts.johnsonleflore.com > > > > Is there an easy way to find out what is causing this apparent > > interference > > between divs? Or is my copying a little at a time from one page to another > > to > > isolate the problem the best way? > > > > Thanks for anybodies help! > > Anne > > |
|
|
|
#4 |
|
Guest
Posts: n/a
|
Re: divs and pictures
I just opened the Reading template and there is no position: relative in it.
I was pretty sure there wasn't because I wrote it and I don't use positioning. To make the reading template fixed with change the original #container from: #container { border: 1px solid #2E1308; background-color: #884F06; color: #DCCEC1; margin: 0; padding: 0 0 0 8px; } To #container { border: 1px solid #2E1308; background-color: #884F06; color: #DCCEC1; width: 760px; margin: 0 auto; padding: 0 0 0 8px; } That is the only change necessary for the Reading template at http://by-expression.com/samples/reading/index.html Points resize based on the visitor's OS settings which can cause problems if people are using larger fonts. They do not resize in IE 6 or below and will only "zoom" not resize in IE 7. You can use keywords, ems or percents. You have to be careful of size nesting making text too small with percentages but checking pages should prevent that. Structural mark-up has nothing to do with keywords. You have visual headings but they are not marked as such which means that only those people who are actually seeing your pages (as opposed to those using screen reader or just reading the code such as search engine bots) will not know what is or is not a header. I do see headings in the masthead but you are using <h4> for size instead of semantics. <div id="header_right"> <h1 class="no_top_space">Architectural Concepts, Inc.</h1> <h4>609 Massachusetts Avenue<br /> Indianapolis, Indiana 46204-1606<br /> Phone: (317) 638-7600<br /> Fax: (317) 633-6674<br /> Toll Free: (877) 244-0563</h4> </div> Should be: <div id="header_right"> <h1>Architectural Concepts, Inc.</h1> <address>609 Massachusetts Avenue<br /> Indianapolis, Indiana 46204-1606<br /> Phone: (317) 638-7600<br /> Fax: (317) 633-6674<br /> Toll Free: (877) 244-0563</address> </div> Styles #header_right h1, #header_right address { margin: 0; padding: 0;} You can adjust the font display as needed for "#header_right address" if you separate out the styles. -- Cheryl D Wise MS MVP Expression Author: Foundations of Microsoft Expression Web See our selection of Expression Web tutorials at http://by-expression.com/content/tutorials.aspx "Anne Johnson" <AnneJohnson@discussions.microsoft.com> wrote in message news:B3740248-4452-49DB-B197-2FDED4FD2F42@microsoft.com... > Cheryl, > > thanks for all your comments and time. > > I will check out the viewers, and go away from Verdana - I was using it > because my client wanted a font with wider letter spacing. > > The container div with the relative positioning has inside of it the stuff > that was in the reading example. I found the format for the container div > when I was looking for how to do a fixed width site centered on the page. > > If I want to do the reading format but with a fixed width rather than > floating width page similar to what displays on my site, what would you > recommend? I did try it with my screen width reset to 800 x 600, and all > pages but one were broken. But on further inspection I realized that I had > put a fixed width on the center column - when I took that out everything > started working again. > > As for font sizes, I didn't realize that pt would cause problems. Is the > implication that I should stick to small, x-small, medium, etc, or is it > OK > to use something like .9em to get an in between size? > > I will be adding the heading element - I have not gotten together with my > client to get a list of key words yet. > > On the use of structural markup, I did get lazy and not put the italic > mark > in a style in the CSS on that particular div (I probably actually made > more > work for myself), but the bold is only on the first line of each title. > It > seems really awkward to do a <span> or a separate paragraph with the > margins > set to 0 for the one line of bold, as compared with just enclosing that > line > is <strong></strong or <b></b>. > > Essentially I hear you saying that all formatting should be in the CSS, > eiher in the linked CSS file or in the styles at the top of the page. Is > this > what you intended by your statement? > > Thanks again for your help - and I am going to check out your Expresssions > Web Tutorials, and look for your book. I am self taught on web design, > and I > need some good material to fill in the holes that I know I have, but I'm > sure > I often don't recognize. Many years working with computers, but just about > a > year seriously learning web design, and about half time at that. > > Anne > > Cheryl D Wise" wrote: > >> Anne, >> >> Don't use the same image for both the small and large version. It is >> inconsiderate to the bandwidth of those who don't want to see the larger >> images. It slows down your page load AND browsers don't do a good job of >> displaying images at any size other than their native size. >> >> Create a thumbnail then link it to the larger image. Though I suspect you >> would be far better off from your description in using a third party >> photo >> gallery that has all the behaviors built-in to display the larger image. >> There are many excellent free ones listed in the thread at >> http://by-expression.com/forums/p/95/623.aspx#623 or you might want to >> consider using Lightbox 2 http://www.lokeshdhakar.com/projects/lightbox2/ >> >> I would also recommend not using absolute positioning since it is >> inheritly >> unstable and is likely to break viewed in a browser or on a different >> screen >> resolution than the one you are testing in. Using absolute positioning >> will >> break the reading template. >> >> While you may have used the Reading template as a base I would not have >> recognized it as such.There is a lot of code that I know is not in the >> reading template that could be causing your issues such as "position: >> relative" for your container, using points for font sizes (something that >> is >> dependent on the visitor's browser and operating system), also I never >> recommend using Verdana. In fact I recommend against it because the >> difference in size between Verdana and the next named font (Arial) is >> approximately 20% so if you size for Verdana and the visitor doesn't have >> it >> then it will be way to small, especially if the visitor is on a Mac which >> typically renders text smaller than Windows computers (less of a problem >> since Apple moved to the Intel platform.) >> >> You should also be using structural mark-up. When I look at the code >> there >> is not a single heading element on the page. This will hurt you when it >> comes to search engines. It also provides no structure to your page, >> everything has exactly the same space. This sort of code is asking for >> problems. >> >> <!-- #BeginEditable "RightContent" --> >> <br />Click on images to enlarge or shrink<br /><br /> >> <img alt="addition and renovation B. B. Kirkbride Bible" height="150" >> src="images/kirkbrid.jpg" width="217" >> onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" >> /> >> >> <p class="no_top_space"><em> >> <strong>Addition and Renovation<br />to B.B. Kirkbride >> Bible</strong><br >> /> >> Indianapolis, Indiana><br /> >> >> At minimum the above would be: >> >> Style definition: >> >> ..portfolio { >> font-style: italic; >> font-wieght: bold; >> margin: 0; >> padding: 0; >> text-align: center; >> } >> >> Use a style because strong and em have semantic mark-up and you are using >> them for formatting. >> >> <p>Examples of our work</p> >> <p class="portfolio"> >> <img alt="addition and renovation B. B. Kirkbride Bible" height="150" >> src="images/kirkbrid.jpg" width="217" >> onclick="FP_changeProp(/*id*/'kirkbride',0,'style.visibility','visible')" >> title="click to view larger image"/> >> Addition and Renovation<br /> >> to B.B. Kirkbride Bible >> </p> >> >> >> >> >> >> -- >> Cheryl D Wise >> MS MVP Expression >> Author: Foundations of Microsoft Expression Web >> >> See our selection of Expression Web tutorials at >> http://by-expression.com/content/tutorials.aspx >> >> >> "Anne Johnson" <AnneJohnson@discussions.microsoft.com> wrote in message >> news:1137307F-F96B-48C4-A9BF-3979816CEDA2@microsoft.com... >> >I have a 3 column web site. In the 3rd (right) column I have small >> >pictures - >> > actually they are fairly large but made smaller in size. What I want to >> > do >> > is >> > allow the user to click on a picture and have a larger picture appear. >> > >> > I have been doing this using divs with position absolute, and in >> > general >> > it >> > seems to more or less work, but I am having some problems and I have a >> > question - first the question. >> > >> > Since I am using the same image file for both the small picture and >> > large >> > div with the picture in it, am I correct in assuming that it will only >> > be >> > downloaded once? If not is there a way I can make it download only >> > once? >> > >> > Now for the problems - when I insert one of the div's for the pictures, >> > I >> > am >> > using the draw layer tool. If I carefully position my cursor before I >> > use >> > the >> > tool, it puts the div somewhere in the vicinity of where the cursor >> > was. >> > If I >> > forget to do this, sometimes it will end up in the middle of some text, >> > and >> > split the text into two paragraphs, which seems kind of wierd, but >> > maybe >> > not >> > if it thinks that is where I really want it because I left the cursor >> > there. >> > >> > Also, the position seems unstable in weird ways - if I go to preview on >> > the >> > file menu and check them in IE7 with the files local on my computer, >> > they >> > seem to be in the right place. But if I load them up to the web site >> > and >> > then >> > check them they have all moved around. >> > >> > But the biggest problem is that sometimes my right two columns will >> > suddenly >> > drop below the left column. When this happened yesterday I made a new >> > empty >> > page with just my dwt in it, and then just copied the code that was not >> > in >> > the dwt from the code screen on the page that was acting up, into the >> > new >> > page. I did this a little bit at a time so that I could find the code >> > that >> > was causing the problem, but when I got done, the new page still worked >> > fine. >> > It has happened again this morning, so I decided that maybe if I made >> > the >> > left div a little narrower it would fix the problem, but no such luck. >> > Then >> > it happened a third time when I moved a div trying to clean up the code >> > a >> > little (one of the picture divs with position:absolute) and when I >> > moved >> > it >> > back the problem went away again. And there are similar divs in the >> > spot >> > where I moved the div to, but none where I moved it from. Should these >> > aboslute divs maybe be put at the end of the file so they don't affect >> > the >> > other divs? >> > >> > I am using the layout, with some minor modifications and additions from >> > http://by-expression.com/content/samples.aspx >> > in particular the reading example, and the web site is >> > http://archconcepts.johnsonleflore.com >> > >> > Is there an easy way to find out what is causing this apparent >> > interference >> > between divs? Or is my copying a little at a time from one page to >> > another >> > to >> > isolate the problem the best way? >> > >> > Thanks for anybodies help! >> > Anne >> >> |
|
![]() |
| Thread Tools | |
| Display Modes | |
|
|