HTML Help

Re: Problems with thumbnail viewer

sticks464 — Wed Jul 08, 2009 6:39 pm

Author: sticks464

Posted: Wed Jul 08, 2009 6:39 pm

The font is set in several places in the css file

Code:

body {
background:#020202;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;/*base font size for all text*/
}
...
#menu a {
...
font-size:120%;/*font-size for top menu*/
font-weight:bold;
}
...
#footer {
...
font-size: 72%;/*font-size for footer menu*/
...
}

I will pm you with my email so you can send me the psd.

Re: Problems with thumbnail viewer

christinalkc — Wed Jul 08, 2009 5:19 pm

Author: christinalkc

Posted: Wed Jul 08, 2009 5:19 pm

The font I used for the large text is Verdana, bold and 48 pt on PSD.

I still have everything on PSD file (images, text etc) Is there anything you need?

Btw, I was going through the codes from your site, I was wondering where do I change the font? I don't see anywhere that it says Font type?

Cheers..

Re: Problems with thumbnail viewer

sticks464 — Wed Jul 08, 2009 1:18 pm

Author: sticks464

Posted: Wed Jul 08, 2009 1:18 pm

Here's the problem, unless you have the original psd it is impossible to extract the right image since this is one big image. What font did you use for the large text ie. home, about, contact etc.?

Re: Problems with thumbnail viewer

christinalkc — Wed Jul 08, 2009 9:57 am

Author: christinalkc

Posted: Wed Jul 08, 2009 9:57 am

Wow!!!! Excellent layout! Love it!

To your question on the previous post, I was thinking putting a couple of links (new pages) on the top right menu and the footer. My site will have the total of 5 pages.

home | about us | services | gallery | contact us

The gallery link is the page where the gallery goes to.

The side bar can be completely removed I guess. On my original index page (and about and contact page) I have some designs on the right side of the body. I would love that to stay and also to add that in place of the side bar. Meaning both sides have some designs so it won't look so empty.

I had those large font title on the body for "about us" "contact us" on my original page, how can I keep that?

Lastly, do you mind if I put "Designed by Moray Web Design" next to "All Rights Reserved"

Thanks so much!!!!!!

Re: Problems with thumbnail viewer

sticks464 — Wed Jul 08, 2009 6:40 am

Author: sticks464

Posted: Wed Jul 08, 2009 6:40 am

Here's what I have for your site.

Re: Problems with thumbnail viewer

sticks464 — Tue Jul 07, 2009 9:58 pm

Author: sticks464

Posted: Tue Jul 07, 2009 9:58 pm

I thought you gave up on me. Ok I'll get the up after I make changes and remove the tabs for the ones that will never have links. The rest of the site can have the sidebar except for this page which will have all the galleries. I'll post up a link tomorrow. I'm off to bed right now.

I just happened to think of this , what page are you putting the script links on since your using frames?

Re: Problems with thumbnail viewer

christinalkc — Tue Jul 07, 2009 9:58 pm

Author: christinalkc

Posted: Tue Jul 07, 2009 9:58 pm

Sorry for the long delay. I posted my reply two days ago and I didn't know it didn't get posted right!! Okay, let me do this again. Hopefully it gets posted this time......

Yes, I can do without the sidebar.

I am not sure if I am able to imagine the layout with the centered tabbed menu... do you have a screenshot that I can perhaps see? I do like the idea of just one page where the gallery is. I was just thinking and this is just a suggestion, what do you think if we have a link "Gallery" on the top menu and the footer alongside the HOME, ABOUT US and CONTACT US. Then it clicks to a new page of gallery.

No thumbnails sounds fine to me but if it makes things easier, I am all up for it.

There are 8 links on the sidebar. There will never be any pics available for ODOR REMOVAL and DETAILING. Currently I have 8 pics for BUMPER REPAIR and 8 pics for HEADLIGHT RESTORATION. I am still waiting for pics for the rest of the 4 links (SCRATCHES, WINDSHIELD, CIGARETTE and TOUCH-UP) I hope I will be able to add them to the page in the future or whenever I get them.

So please go ahead and put the files and images up on your site.

Do let me know anything that I could do at the meantime?

Re: Problems with thumbnail viewer

christinalkc — Tue Jul 07, 2009 9:45 pm

Author: christinalkc

Posted: Tue Jul 07, 2009 9:45 pm

Hmmm.. I replied to your post two days ago and it didn't show up???

Re: Problems with thumbnail viewer

sticks464 — Sun Jul 05, 2009 9:09 am

Author: sticks464

Posted: Sun Jul 05, 2009 9:09 am

I have fixed the image gallery and fixed IE also. However this comes with some compromises. The layout works fine if I do away with the left sidebar. To compensate for no sidebar I made the galleries inside a tabbed menu layout, centered. There is only one page and works the same as with a sidebar. The gallery also does not use thumbnail images, it uses the large image as a thumbnail, eliminating the need for thumbnail images.

If you want I can put all the files and images I use on my website and let you download them. Then if you have questions or want to make changes we want have to make so many post in the forum.

Keep the page layout I posted earlier as you can probably use it with the other pages that do not have the gallery.

Let me know so I can either continue with the tuts or link you to the code.

AFTER THOUGHT:
I just happened to think maybe I'm on the wrong track doing an image gallery for each of the links in the side bar. Is the bumper repair the only gallery and the other links for pages with no gallery? I don't want to give you the wrong code.

Re: Problems with thumbnail viewer

christinalkc — Sat Jul 04, 2009 8:50 pm

Author: christinalkc

Posted: Sat Jul 04, 2009 8:50 pm

No worries Take your time.

I was working on the rest of the pages (index, about and contact) and tried to remove the absolute positioning and everything went haywire.

Cheers..

Re: Problems with thumbnail viewer

sticks464 — Sat Jul 04, 2009 8:23 pm

Author: sticks464

Posted: Sat Jul 04, 2009 8:23 pm

I haven't deserted you. There are some problems getting the gallery working correctly with this layout. As soon as I iron it out I will post the rest of the css and any changes.

Just to let you know before we get too far into this only to find it is not cross browser compatible.

Re: Problems with thumbnail viewer

christinalkc — Fri Jul 03, 2009 9:46 am

Author: christinalkc

Posted: Fri Jul 03, 2009 9:46 am

I am amazed!!! Thanks very much. Looks easy but I need to study everything to make sure I know what is going on

I am still not entirely done with all the images but will get them sorted out this afternoon - both small thumbnail and larger image.

I am all ready for the next lesson.....

Cheers.

Re: Problems with thumbnail viewer

sticks464 — Thu Jul 02, 2009 11:09 pm

Author: sticks464

Posted: Thu Jul 02, 2009 11:09 pm

Next step:
Create a folder to hold all site content, give it any name you want.
Inside this folder create two folders, one named css and one named images.
Put all your images inside the images folder.
We will enter all xhtml coding before we attempt to do any styling.

The layout we will use is a universal two column xhtml layout. Copy the code and save it in a new file and name it bumper.html

code

Code:

We will use Eric Meyers css reset styles to remove all browser defaults. Copy this code into a new page and name it css-reset.css. Save this file to the css folder.

css

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Let's enter some code for our elements.
In the menu div we want the top right menu so we will put the anchor links inside this div. We give a class to the last anchor so that we can remove some styling later.

Code:

<div id="menu">
<a href="">home</a><a href="">about us</a><a class="last" href="">contact us</a>
</div>

Inside the header div we want the image of the logo text 'Complete Auto Reconditioning'. Use the name you gave this image in the path. The width and height should correspond with what I have.

Code:

Inside the wrapper div is where the main content goes. We will put an h1 and the image gallery. I only did one image in the gallery and again you will have to enter the path to your large image. These images should all have the same width and height of 546x286.

Code:

<h1>bumper repair</h1>
      <div id="gallblock">
         <ul>
            <li><a class="gallery slidea" href="#nogo"><span><img src="images/bumperthumbnailb4big.jpg" alt="" title="" /></span></a></li>
            <li><a class="gallery slideb" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidec" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slided" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidee" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidef" href="#nogo"><span><img src="" alt="" /></span></a></li>
         </ul>
      </div>

Let's move to the sidebar and put in our menu. This is nothing more than an unordered list. As new pages are created you can enter the path for them. Once again we use a class of last on the last anchor link for future use to remove styling.

Code:

<ul>
<li><a href="">Bumper repair</a></li>
<li><a href="">Scratches</a></li>
<li><a href="">Headlight restoration</a></li>
<li><a href="">Odor removal</a></li>
<li><a href="">Cigarette burns</a></li>
<li><a href="">Windshield repair</a></li>
<li><a href="">Touch-up</a></li>
<li class="last"><a href="">Detailing</a></li>
</ul>

And were almost there with the coding. All that's left is the footer. In here we put a duplicate of the upper right menu we used before and also copyright info.

Code:

Wow, there we have it, pretty simple says I.
Your page should now look like this (I left out some of the comments).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert page title here</title>
</head>

<body>
<div id="container">
<div id="menu">
   <a href="">home</a><a href="">about us</a><a class="last" href="">contact us</a>
</div>
<div id="header"><img src="images/bumperpic_logo.jpg" width="301" height="100" alt="logo" /></div>
<div id="spacer"></div>
<div id="content">
   <div class="wrapper">

   <h1>bumper repair</h1>
      <div id="gallblock">
         <ul>
            <li><a class="gallery slidea" href="#nogo"><span><img src="images/bumperthumbnailb4big.jpg" alt="" title="" /></span></a></li>
            <li><a class="gallery slideb" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidec" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slided" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidee" href="#nogo"><span><img src="" alt="" title="" /></span></a></li>
            <li><a class="gallery slidef" href="#nogo"><span><img src="" alt="" /></span></a></li>
         </ul>
      </div>

   </div>
</div>

<div id="sidebar">

   <ul>
<li><a href="">Bumper repair</a></li>
<li><a href="">Scratches</a></li>
<li><a href="">Headlight restoration</a></li>
<li><a href="">Odor removal</a></li>
<li><a href="">Cigarette burns</a></li>
<li><a href="">Windshield repair</a></li>
<li><a href="">Touch-up</a></li>
<li class="last"><a href="">Detailing</a></li>
</ul>
</div>
<div class="clearer"></div>

<div id="footer">
<a href="">home</a><a href="">about us</a><a class="last" href="">contact us</a>
<p>© Copyright 2009 www.autoreconditioner.com • All Rights Reserved</p>

</div>
</div>
</body>
</html>

Before we jump into the css make sure all your gallery images are 546x286 and your thumbnails are 81x89.
Inside your images folder you may want to make individual folders for each page to hold the images just for that particular page to eliminate any confusion as to what's what. This is entirely up to you though.

Ok, be back tomorrow with the css.

Re: Problems with thumbnail viewer

christinalkc — Thu Jul 02, 2009 9:52 pm

Author: christinalkc

Posted: Thu Jul 02, 2009 9:52 pm

I really owe you big time for your help!!! Thank you so much.

Okay, I have done the images separately as instructed. I have the logo_text, logo_bg, spacer, gody_bg, menu_bg, footer_bg. I hope I did the right thing....

I believe those are the images for the "universal" layout for all my pages, right?

CSS.. hmm I have never done anything on CSS, so this should be interesting to learn. Thank you again!!

I'll be waiting for the next lesson.

Cheers..

Re: Problems with thumbnail viewer

sticks464 — Thu Jul 02, 2009 10:14 am

Author: sticks464

Posted: Thu Jul 02, 2009 10:14 am

Ok, I will tutor you through this a little at a time.
First thing, did yo save your image as a psd in photoshop?

It is easier with a psd but will work using a jpg also except for the resizing.

Turn off all your layers except the main image that has the image of the car and the text 'Complete Auto Reconditioning'. Resize the text 'Complete' to about 36 pixels and position it to the left top with about 20px from the top and left side. Resize the text 'Auto Reconditioning' to 18pixels and position it under the 'Complete' text centered with 20pixels spacing. Resize the car image to about 100 pixels in height and leave it all the way to the right. Now your layer or logo image should be only 100pixels in height. Make a slice of just the text that is 100pixels high and wide enough to include all the text. Save this slice as logo_text.jpg. Make another slice that is only of the auto image 100pixels high and wide enough to include all of the image. Save this as logo_bg.jpg. If the bottom red and black lines are part of this layer make a new slice that is 10pixels wide by the height of the two lines. Save this slice as spacer.jpg.
Turn off this layer and turn on all layers except text layers. Make a new splice 10pixels wide and high enough to include the stripes of the top layer that will hold the home, about and contact us links. Stop your slice 1pixel below the grayish stript. Save this slice as menu_bg.jpg. Do the same thing for the footer including the red stripe at the top of the footer. Save this as footer_bg.jpg. Now create a new file 10pixels wide by 900pixels high. Make a gradient duplicating the center portion of your old image, red at the top graduating to black at the bottom. Save this image as gody_bg.jpg.
Now you should have all your images to re-create your layout with html and css.

The whole purpose is to create a layout that will work in a resolution of 1024x768 or greater.