HTML and Style Sheets

Thu Nov 22, 2007 12:24 pm

Hello,

I have a problem with my slideshow in my main page http://www.pbase.com/edouarrr

My vertical pictures have lost their top borders since I changed my CSS, but I don't know what.

I also have another question: is it possible to have the pictures in the slideshow biger ?

Here are my Html code : <H1 align=center><BR><BR>
Edouard Steru photography
<BR><BR><BR><BR><BR><BR>

<html lang="en-US"><head>
<center>
<table border="0" cellpadding="3" cellspacing="0" width="800">
<tbody>
<tr>
<td align=left><img src="http://www.pbase.com/image/56552555/original.jpg"></td></tr>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="8"></td></tr>
<tr>
<td colspan="3" valign="bottom">
<table class="luis" border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" height="8"></td></tr>
<tr align="middle">
<td><a href="http://www.pbase.com/edouarrr/profile"><h3>Profile</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://www.pbase.com/edouarrr/guestbook"><h3>Guestbook</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://www.pbase.com/edouarrr/root&view=recent"><h3>Recent</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://www.pbase.com/edouarrr/root&view=tree"><h3>Galleries</h3></a></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg" width="8"></td>
<td><a href="http://upload.pbase.com/edit_gallery/edouarrr/root"><h3>Edit</h3>
</a></td></tr></tbody></table></td></tr>
<tr>
<td valign="top">
<img id="imgid" src="http://www.pbase.com/image/56552555/original.jpg"></td>
<td><img src="http://www.pbase.com/image/56552555/original.jpg"><width="15"></td>
<td bgcolor="#333333" valign="top">
<table border="0" cellpadding="5" cellspacing="0">

</p></td></tr></tbody></table></td>
</tr>
<tr>
<td colspan="5"><img onload="" src="http://www.pbase.com/image/56552555/original.jpg" height="6"></td></tr>
<tr>
<td colspan="5" align="center">
<p>
<br>
</p></td></tr></tbody></table></center>
</H1>
<BR><BR><BR>
<DIV ALIGN=CENTER><TABLE BORDER="3" BORDERCOLORLIGHT=white BORDERCOLORDARK=whiteCELLSPACING=8>
<TR><BR><BR>
<TD>SLIDESHOW(nice, size=original, delay=1, loop=no)</TD></TR></TABLE><BR></DIV>

<CENTER>Welcome to my gallery<CENTER>
<TD align=middle colSpan=5>
<BR><CENTER>Please contact me if you want to use some of my pictures (edouardsteru@hotmail.com)
<BR><BR><BR>
If you like my pictures, please write a comment and/or vote.
<BR>
<BR>
<BR>
Laissez moi un petit mot d'encourragement et/ ou un vote si vous apprÃ©ciez mes photos, ca fait toujours plaisir.

Et n'hÃ©sitez pas Ã me contacter si vous Ãªtes intÃ©ressÃ© par certaines photos.</TABLE></CENTER><BR><BR><BR><BR><BR><BR><BR>

And here are my css:

/*this will hide the PBase Menu*/
table{
margin-top: -39px;
padding-bottom: 30px;
}

IMG.thumbnail {
VERTICAL-ALIGN: middle;
BACKGROUND-COLOR: #000000;
horizontal-align: middle;
border: black 5px solid
}

a.thumbnail {
border: #EED8AE 3px ridge; /*ou double*/
DISPLAY: block;
BACKGROUND: white;
background-image: url(http://www.pbase.com/edouarrr/image/88976041.jpg);
MARGIN-BOTTOM: -14px;
WIDTH: 100%;
PADDING-TOP: 10px;
HEIGHT: 200px
}
a.thumbnail:hover {
border: #996633 3px ridge;
background-image: url(http://www.pbase.com/edouarrr/image/88976047/small.jpg);
}

.caption {
FONT-SIZE: 14pt;
color: #000000;
FONT-STYLE: normal
}

BODY {
MARGIN-TOP: 5px;
BACKGROUND: #000000
url(http://www.pbase.com/edouarrr/image/89317001.jpg)
SCROLLBAR-FACE-COLOR: red;
SCROLLBAR-HIGHLIGHT-COLOR: #DCDCDC;
SCROLLBAR-SHADOW-COLOR: #646464;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #646464;
SCROLLBAR-DARKSHADOW-COLOR: #000000
}

.message_body {
PADDING: 0px;
FONT-SIZE: 16pt;
COLOR: black;
FONT-FAMILY: verdana, arial, sans-serif;
FONT-STYLE: bold;
LETTER-SPACING: 1px;
text-align: left;
BACKGROUND-COLOR: white
}

div,th,tr,td,table,font,li,ul,form,blockquote,font,span,center,P,b,i,H1,h2,h3,h4,h5 {
border: 0px; padding: 0px; black
LETTER-SPACING: 1px;
color: black;
font: 16pt Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
FONT-WEIGHT: bold;
}

h1,H2,h3,h4,h5 {
FONT-WEIGHT: bold;
FONT-SIZE:22pt;
COLOR: white;
LETTER-SPACING: 8px;
BACKGROUND-COLOR: black;
VERTICAL-ALIGN: middle;
TEXT-ALIGN: center;
border: white 10px solid;
border-left: 10px ;
border-right: 40px ;
border-top: 10px solid;
border-bottom: 10px solid;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px;
width: 100%;
margin-right: 0px; margin-left: 0px
}

p {
PADDING: 0px;
FONT-SIZE: 14pt;
FONT-STYLE: normal;
text-align: center
}
b {
PADDING: 0px;
FONT-SIZE: 16pt;
text-align: right
}

font {
PADDING: 0px;
FONT-SIZE: 16pt;
text-align: center;
FONT-STYLE: bold;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 1px;
}

A:link, A:visited, A:active {
FONT-SIZE: 14pt;
FONT-FAMILY: Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
COLOR: #000000;
TEXT-DECORATION: none
}

A:hover {
FONT-FAMILY: Papyrus, Poor Richard, Bookman Old Style, verdana, Tahoma, Helvetica, sans-serif;
FONT-SIZE: 14pt;
FONT-STYLE: bold;
COLOR: #505064;
TEXT-DECORATION: underline
}

.current {
FONT-SIZE: 12pt;
FONT-FAMILY: verdana, arial, sans-serif;
COLOR: #000000;
TEXT-DECORATION: none;
FONT-STYLE: bold;
}

BODY TABLE A IMG {
DISPLAY: inline
}
HR {
POSITION: relative
}
.display {
border: #000000 2px solid;
margin-top: 1em;
background: #000000;
}
.lid{
background: transparent;
color: #000000;
font: 12pt verdana, arial, sans-serif;
text-decoration: none;
}

.sb{
background: transparent;
border: #C8C8C8 2px solid;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
color: #000000;
font: 12pt verdana, arial, sans-serif;
text-decoration: none;
}

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

I would also appreciate very much if you have suggestions to improve my CSS and Html codes

Thank you for your help

Thu Nov 22, 2007 6:11 pm

Using Firefox, all the boarders are there. As far as the size, you're using the originals already, and I'm not aware of how you can make them larger unless you upload larger photos. But I can't say how it would react if you do. One thing to consider however, is that many people might still be using a smaller screen resolution than you do. So large size photos in the slide show will cause them to scroll... which would be difficult using a slide show.

Thu Nov 22, 2007 6:43 pm

Hello

Thank you for your anwswer.

I am using IE7, so the problem of borders is not solved. But thanks to your post, I downloaded Firefox and saw that the background can't be seen with this browser. So I have one more question, which part of my CSS is bad ?

I did not realized that the screen I am using has a bigger resolution. I understand now why slideshow is smaller.

Thanks again

Thu Nov 22, 2007 6:54 pm

One of the major problems when coding is trying to get it to look the same in all browsers, since they can each see the code in various ways. You'll need someone more apt than me to answer your questions. My current technique requires a lot of time making changes, and hoping for a decent compromise.

Thu Nov 22, 2007 8:00 pm

I had a look in both IE and Firefox and I'm not quite sure where the missing border is. Are you talking about the thumbnail display or the image page?

The background image problem I believe is just a syntax error - you are missing a semi-colon from the end of the body background setting. Sometimes IE is more forgiving about syntax than Firefox - not always a good thing, as an error can lurk unnoticed until you make some other change in your CSS.

One other thing I noticed, in both IE and Firefox: in your India gallery the thumbails jump around a lot when I mouse over them - it's very distracting, especially if I happen to move the mouse quickly across that area of the page. It doesn't seem to happen in your root gallery.

Finally, in Firefox you seem to have a lot more space at the top of your root gallery, which in turn means that the bottom part of slideshow images can't be seen without scrolling.

Thu Nov 22, 2007 9:37 pm

Good tips, Alan. And I agree about the "bouncing" thumbnails in the galleries, when I run across this I find it very distracting too. It's easy to fix, however, and is controlled in this section below (note the boarder line):

Code: Select all: } a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active { border: rgb(0, 0, 0) 25px solid; padding-top: 5px; width: 172px; display: block; background: rgb(35, 35, 35); height: 200px; } a.thumbnail:hover { border: rgb(255, 160, 0) 10px solid; padding-top: 5px; width: 172px; display: block; background: rgb(38, 38, 38); height: 200px; }

The boarder has a difference in 15px when rolled over. There's two ways to avoid the images jumping. The easiest, of course, is to make both boarder sizes the same. The other would involve balancing the the difference in background space by increasing the entire thumbnail an extra 15 pix in size. This is assuming that you wanted to make the changes though, since you might prefer it this way. It's all personal taste. :wink:

Fri Nov 23, 2007 12:30 am

Thank you very much, I fixed the thumbnails problem in my indian gallery.

The missing top border problem in IE7 is only in the slideshow (and with vertical pictures).

I would also like to know if it is possible to edit HTML and CSS of Pbase in dreamweaver because writing it line by line is very long (and difficult).

If possible, how do you manage the Pbase basis that cannot be changed ?

As you can see I am new in Pbase, and I am discovering Html and CSS with the will to learn but also the frustrating feeling of knowing nothing. Thank you for learning me some tips and giving me the courage not to give up

Fri Nov 23, 2007 3:36 am

Edouarrr wrote:

If possible, how do you manage the Pbase basis that cannot be changed ?

Sorry, I'm not understanding what you're referring to.

Another note on your India gallery. If you'd like you can center the slide show by simply adding the center tag right before it:

Code: Select all: <center>

Now, in Firefox it sits to the left side.

Personally, I just use word pad. I'll start with the code of a page I'd like to change and transfer using "copy & paste". This way it's not necessary to write the entire code. My understanding is dreamweaver is an excellent program, but I've never used it. Maybe Alan or someone else owns it and could offer advise.

Fri Nov 23, 2007 2:05 pm

There is 2 CSS stylesheet which appear in firefox web developper when I edit CSS. The first one is what I called the Pbase Basis that cannot be modified.

I actually don't know if it can be edited and if yes, where ?

I also have the same question about Html. In webdevelopper tool, there are many Html infotmations that do not appear in the description box.

Fri Nov 23, 2007 3:45 pm

edouarrr wrote:There is 2 CSS stylesheet which appear in firefox web developper when I edit CSS. The first one is what I called the Pbase Basis that cannot be modified.

I actually don't know if it can be edited and if yes, where ?

I also have the same question about Html. In webdevelopper tool, there are many Html infotmations that do not appear in the description box.

Every single definition from the Pbase base css can be re-defined by you. Say you want to redefine .location, it is in the Pbase base css so you simply do a section like this for example

.location
{
----whatever changes you want, font size etc
}

in your own css with - that way you override the Pbase css with your definition (of .location in this example). So copy paste the entire pbase css (maybe a bit overkill) into your own css and you can redefine the lot!

As for HTML editors. I've been looking for something useable myself.
The webdev plugin for Firefox is fantastic for editing the css, so incredibly useful! For Html I am presently using the open source Kompozer and then manually cleaning up in wordpad because unfortunately Kompozer creates html code with completely random linebreaks making the code ugly

Anyone have a better preferably open source html editor than Kompozer?

regards,

Flemming

Tue Nov 27, 2007 1:05 pm

Hi edouarrr,

About the top border missing from your vertical pictures, well I don't see it, but I already came across a similar problem before.

It happened to me twice, each time with a DIV. Like you, only Internet Exporer seemed to be the problem, Firefox, Safari and Opera rendered it perfectly. I still don't know why it happens but I have found two ways around this bug.

- The first one was to specify a height to my DIV, it is not always possible since you usually prefer not putting this kind of restrictions to your DIVs.

- The second one was to float my DIV, which is not easy as well since it might alter the structure of your website.

Also, to only target IE 6 or IE 7 with CSS, you would have to use a trick like the following one:

Code: Select all: /* IE 6 only */ * html div#myDiv {float:left;} /* IE 7 only */ *:first-child+html div#myDiv {float:left;}

(more explanations about this CSS trick here : http://www.mdibb.co.uk/2007/02/13/two-css-hacks-for-identical-pages-on-ff-ie6-and-ie7/)

Hope this helped,
Daniel, another French guy ;-)

Tue Nov 27, 2007 3:47 pm

Sorry for overlooking the boarder problem, now I understand what you meant. Easy way would have been to only post landscape style photos to avoid the problem. Also, of all the galleries on pbase that I've so far checked, you have the longest download time I've yet seen. It also spreads too far across the page, and really far down, to make anyone using low resolution monitor settings patience to view. Of course, you may not be concerned with dial up users, or those stuck with using old monitors... your call.

Below is the report generated when checking your download times:
Analysis and Recommendations

* TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.
* TOTAL_OBJECTS - Warning! The total number of objects on this page is 44 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
* TOTAL_IMAGES - Warning! The total number of images on this page is 36 , consider reducing this to a more reasonable number. Combine, refine, and optimize your graphics. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
* TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 2 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.
* TOTAL_SIZE - Warning! The total size of this page is 708275 bytes, which will load in 149.96 seconds on a 56Kbps modem. Consider reducing total page size to less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Consider contacting us about our optimization services.
* TOTAL_SCRIPT - Caution. The total number of external script files on this page is 5 , consider reducing this to one or two. Combine, refine, and optimize your external script files. Ideally you should have one (or even embed scripts for high-traffic pages) on your pages.
* HTML_SIZE - Congratulations, the total size of this HTML file is 15280 bytes, which less than 20K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your page to display content in well under 8 seconds, the average time users are willing to wait for a page to display without feedback.
* IMAGES_SIZE - Warning! The total size of your images is 646201 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
* SCRIPT_SIZE - Warning! The total size of external your scripts is 38347 bytes, which is over 8K. Consider optimizing your scripts for size, combining them, and using compression where appropriate for any scripts placed in the HEAD of your documents.
* CSS_SIZE - Warning! The total size of your external CSS is 8447 bytes, which is over 8K. Consider optimizing your CSS for size by eliminating whitespace, using shorthand notation, and combining multiple CSS files where appropriate.
* MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.

Here on Pbase, it's near impossible to have download times below the recommended 8 seconds since we're over-laying style sheets on top of the CSS already there (which is slow in it's self). But by using smaller size images for the top, background and slideshow you could cut a good amount of time from your page. Just a thought, but each to their own. :wink:

Wed Nov 28, 2007 9:10 pm

Thank you very much to both of you,

I will try your trick cresus, but I do not have the skills yet (even if it is a great opportunity to learn, I have to much work right now).

Dang, your right it is much too long to download, thanks for warning me ... and I am concerned with anyone who spend time on my page.

By the way, how did you get this report with dowloading times ?

Wed Nov 28, 2007 11:57 pm

You can run the test using Firefox. Click "Tools" on the web developer section (not the top "Tools" tab on your browser) and you'll see "View Speed Report". Give it several seconds to read the page, and you'll see all the information. As I'd mentioned before, download time is very important if you're in an area without high speed connection. And we're already limited to the speed our pages load because we're over-laying CSS on top of CSS (thus the reason you see two styles when checking). And using large background photos on a page really increases the time a lot. This is one reason it's good to use a "splash page" (without thumbnails) for them to land on, then link to another, simpler designed gallery with thumbs showing.

This brings up another problem, since the average visitor will only click 3 times before they get to what they're looking for before they leave your site (another statistic I ran across).

As an example (since I'm guilty of having a page that loads too slow also, with lots of sub-galleries), the number of hits I receive from dial up users dropped from around 10% to around 3% after installing my current page. But since I'm being aware of screen resolutions, those using small sized screens of 800x600 have remained unchanged. My feelings were I wanted a certain style of design, but didn't want to lose both low resolution, and dial up users too so it's a compromise. These are questions stat counters can help you with, if you haven't installed them already. :wink:

HTML and Style Sheets

Slideshow and CSS + HTML troubles

Slideshow and CSS + HTML troubles

Who is online