[Image Gallery Background]

According to your css file the background-image for #gallery should be

http://capnhud.googlepages.com/gimp_head_shadow.png

 

but it doesn't download, so check the path, filename or if you haven't uploaded it yet.

 

Edit: it didn't download first time, but it does now, so it must be another problem.

[Right-Side Menu doesn't expand it just overlaps]

the menu doesn't move horizontally.

 

The menu is on the right, but vertical. Do you mean that you want it to be horizontal? If so, edit the stylesheet like this:-

 

#menu li {

float: right;

/*clear: both;*/

}

because clearing the float means that you have stopped the next li from being on the riight of the previous one. You will find that the first li for "Who we are" goes to the far right and the others on the left of it (the reverse order), although the whole menu sits on the right, so you may want to reverse the order of the li tags in the html file.

 

the child li are just overlapping.

 

You have no padding and the width of 10em is only just enough for the middle menu titles, so add a bit of side padding:-

#menu a { padding: 0 5px;

display: block;

width: 10em;

color:#3CD8D7;

}

 

However, the edits above are only a partial solution as the menu as a whole isn't wide enough and your last menu title is just a period . and this still has 10em allocated for it and it goes down to a row below, so you may need to reduce the text and 10em to something less.

[CSS suddelnly stopped working?]

When I looked at the pages before, the top part obviously was using a stylesheet and I didn't notice that there is a large blank space to scroll down past to see a scrolling div at the bottom.

 

In the html file you have coding for the View Cart then this:-

 

I think the large empty space is probably because you have this style:-

.bottom_line {

position: absolute;

z-index: 2;

height: 1000px;

width: 554px;

left: 144px;

bottom: -1008px;

}

 

which has a height of 1000px and the bottom: -1008px probably isn't dragging it back up as you think it should. I haven't tested your code but I suggest that you look at this style.

[CSS suddelnly stopped working?]

It displays perfectly on my IE7, so it may be a cache issue on your computer where the cached css file has got corrupted, but your IE is still trying to use it instead of downloading it again.

 

Empty your IE cache and see if that helps.

[CSS Ul Li Menu issue in Internet Explorer 6.0 (IE6).]

I'v edited a lot of things for this page:-

http://www.wickham43.com/forumposts/alamoindex090510.html

and this stylesheet:-

http://www.wickham43.com/forumposts/alamostyle090510.css

 

I've made the top level boxes different widths using classes with widths so that they equal 980px. I also changed some table widths from 950px to 980px to look neater (but the header image is 950px and centers).

 

You had ul tags in the wrong place, but also the text in your drop down boxes is in many cases longer than the text in the top level box, so I had to edit them in Contact which is on the right or the drop down boxes would extend beyond the right side and there would be no scrollbar for the bit cut off. I also edited the text in some other boxes.

 

There are still some validation errors but at least the menu works in IE6, IE7, Firefox.

 

I didn't need to use the conditional comment with the stylesheet for IE6; perhaps the menu from cssplay doesn't need it.

[How do I make sliding navigation menu my site?]

Eric's forgotten to give a link to his site:- http://www.visibilityinherit.com/ but I don't know which page in it he wanted to show you.

 

It could be javascript or flash to produce the slider effect. Look at Hotscripts:-

http://www.hotscripts.com/

Javascript http://www.hotscripts.com/category/javascript/scripts-programs/ probably in Image Effects

[Better Practice?]

Always try to use an external stylesheet; it simpifies editing if you have a website with many pages and also reduces the file size of each page.

 

Use a class or id if you have a special situation which requires a different style, like a sentence in red text. You could put this class or id style in the main stylesheet if the same isolated situation occurs on several pages or in head section style tags if it just occurs on one page.

 

Use inline styles (in the html body markup) only as a last resort.

[Frames Assistance]

Here is a very, very, simple page with a normal table and a smaller position: absolute table layered on top of it.

 

>
br />
"http://www.w3.org/TR/html4/strict.dtd">



Table test
<br /><br />#table1 { width: 800px; height: 500px; background-color: skyblue; }<br />#table2 { position: absolute; width: 500px; height: 300px; <br />background-color: lime; top: 50px; left: 150px; }<br />



</pre>
<table id="table1">

Table cell 1
Table cell 2

Table cell 3
Table cell 4   
</table>
<br><br><br><table id="table2">
Table cell 5
Table cell 6

Table cell 7
Table cell 8   
</table>
<br><br><br

 

A slightly more complicated example is here:-

http://www.wickham43.com/forumposts/aeguy090509.html

which shows a main table centered in any screen resolution and the smaller table layered on top which remains in the same position within the first table wherever it may be on the screen.

[Hits with Google and Yahoo]

Other factors which I am sure help the Google ranking is to choose a domain name that is relevant, so a domain name that is www.desmoinesgarages.com will be recognised by Google as the main website for Garages in Des Moines and given a little more importance, coupled with the analysis of the text.

 

Also revise the website frequently as this is noticed by search engines. They will start to ignore a site that is never updated.

[Hits with Google and Yahoo]

How exactly does a search engine find websites?

 

The way search engines rank pages is secret and seems to vary over time, so it's difficult to guess how they do it.

 

However, it's a fair bet that Google scans every webpage completely and will find nearly all web pages within a day or two; but it may not consider a page worth ranking until it becomes popular.

 

It also depends on how a viewer uses the search function. If someone searches for hotels Google will find millions of web pages. If you search for hotels in London it will show thousands but if you search for hotels in Park Lane London Google will find a few and if you had a website about one of those hotels it would probably appear on the first page or two whereas in a search for just hotels your page might be thousands of pages down the list.

 

It helps to think about what words people would use to search and then incorporate them in your page title, page headings and page text as Google will scan the whole page for association of words and proximity of the key words to each other.

[Frames Assistance]

We don't know what the structure of your page is; I'm guessing that it's tables.

 

Whatever the structure is, you can often use a div with position: absolute; (perhaps needing z-index as well) and this just sits on top of any other content, taking its top and left positions from the top left corner of the viewport, and is "out of the flow" of the page code so it's independent of anything else (code it after all the other page code).

 

Edit: I don't think an iframe would work. It would need to sit inside a div or table td tag and is a complete html page (although it can have a transparent background) so I don't think an iframe could span across several td cells or divs.

[Frames Assistance]

There's no reason why you can't have one big background-image for the whole page and place text or images over it. I prefer that to slicing up an image into lots of bits and placing them in table and td tags which is what most people seem to do.

 

If you want a small area to be a smaller box (a div box, not a frame) you can use a scrolling div.

CSS:-

#scrolldiv { width: 300px; height: 250px; overflow: scroll; }

HTML markup:-

Text or image here

 

A scrolling div needs a height and width so that a scrollbar will enable viewers to see content too big for the box. Overflow: auto; will only show a scrollbar where needed.

[CSS Ul Li Menu issue in Internet Explorer 6.0 (IE6).]

Your html file has the IE6 stylesheet in a normal link, so it's affecting all browsers. It needs to be in a conditional comment just for IE6. Place it after the main stylesheet link:-

....................VictorsFood.com




........................<br />[/code]

where lt IE 7 means less than IE7.
 
When you have edited the above, the scrollbar returns to IE7.
 
When I tested your page in IE7 I started with ActiveX disabled and the dropdown menus were offset to the right. The same happened in IE6, so you may want to look for a pure CSS drop down menu from cssplay.com which don't need ActiveX. Firefox is unaffected and shows the dropdown menu boxes under the top level box with or without javascript and IE7 and IE6 are OK only if ActiveX is enabled.
 
I tested in IE6 and found that the scrollbar was hidden there too and also the footer didn't show until I edited the overflow and height. I found that the drop down menu boxes were horizontal so I added float: none; as it seems the drop down level was using the float: left from the top level. I found that this worked in IE6 for the ie6.css stylesheet:-
[code]
html {
   /*overflow:hidden;*/
   }
body {
   /*height:100%;*/
   overflow:auto;
   }
#footerwrap {
   bottom:-1px;
   }
li li { text-align: left; float: none;} 

[Layout help]

You have margin-left: 10%; and margin-right: 10%; for the #quotes div with the flash. The flash object is 900px wide so why not change the div to 900px and center it? (The pink is just temporary for you to check where it shows.)

 

#quotes { width: 900px; margin: auto; background-color: pink;

/*margin-left: 10%;

margin-right: 10%;*/

font-size: small;

}

 

The flash code you have used uses classid and this normally needs an nested embed tag. Here are three examples of different flash codes:-

http://www.wickham43.net/flashvideo.php

 

The #topmenu looks OK to me but perhaps the width: auto; is causing a problem. Try editing the width to 850px like the width of #main:-

#topmenu {

height: 30px;

width: 850px;/*auto;*/

background-color: #006633;

}

 

The left logo and menu are inside the #left div which extends to 100% of the width as it has no width defined (no problem with that) so add a style for the left list ul tag:-

#left ul { margin-left: 20px; padding: 0; }

 

this is because ul tags have different default left padding so that needs to be made 0 and then set margin-left to be the same as the image above.

 

The white background for #main only goes down to the bottom of the menu on the left in Firefox with width: auto; because you have the following structure:-

#main div with height: auto; width: 850px;

#right with float: right; width: 500px;

#left with no width and no float so it actually extends full width around the floated right div and the logo and list move up into the space on the left of #right.

However, floated divs are assumed to have no height so #main only extends down to the bottom of the unfloated #left div.

 

The answer is to put an unfloated div with no height and invisible under the floated div to drag the background down.

 

Add this style:-

.clear { clear: both; width: 100%; height: 0; visibility: hidden; }

Edit #main to have height: auto:-

#main {

margin: auto;

margin-top: 30px;

width: 850px;

height: auto;/*500px;*/

background-color: white;

}

and edit the html markup which adds a new div just before the closing tag of #main:-

 

.....................

 

 

 

 

[The Table Debate]

The experts who produce the standards for coding have produced a new set of table codes - display: table and lots of others like inline-table and table-row. See

http://www.w3.org/TR/CSS2/tables.html

 

so tables will continue to be used, but you are supposed to use them where they are best suited and use HTML and CSS where it is best suited.

[IE Displaying Different Text Color]

The small image on the left is a png but the wider image is a jpg. It's possible that IE is processing them differently.

 

Can you make them both jpg and check?

[Is there a good explanation...?]

I suppose it really depends on the type of page you are designing.

 

It's probably best to think of all the general styles that will apply to the whole page, in fact the whole website of many pages, and code them into the body style, say for font-family, font-size, color and so on (you could put text-align: center here too but then you might need to change it in some places).

 

Then when you have a containing element like a div in a particular area of you page, like a sidebar or menu, create a class for that div and define different styles.

 

Tables should not be used to format a whole page, use divs and CSS. Use tables just for part of a page where you want to display tabular data, like a calendar or a schedule of products and prices. In which case the table will probably have a defined width, but width: 100% or width: auto is not wrong. it just depends on the circumstances.

 

As far as inheriting styles is concerned, some do, some don't, and it's best to experiment.

[Active State in CSS menu]

The a:active only works in most browsers when you are holding down the mouse button (so that it shows which link is active).

 

You want a permanebt different color on the new page. See

http://www.wickham43.net/highlighthome.php

 

The top example uses CSS and the bottom example PHP. The top CSS method is probably the simplest and uses a "matched pairs" principle. Every page has a different id (either for the body tag or a menu div) and the menu links have the ids and when the menu matches the id of the page, the color or background image changes.

 

The examples use background-images and colors but you can leave out the background-images.

 

It works by changing the a: text color for the link which the matches the page id, not the a:active color.

[Images]

We need to see your complete code, preferably an online page so that we can download it all, including the image.

 

However, some general info: An image has a fixed size in pixels and browser viewports can have varying sizes in pixels, so your image may be too large for some or too small for others.

 

A background-image cannot be made to stretch (you can only position it sy at the viewport center or repeat it), but a normal image can stretch to fit a viewport if you use % sizes:-

 

[paragraph won't allow formatting]

Is there a way to center just one line within a paragraph?

 

Various ways.

You have to start a new paragraph or heading with text-align: center; either inline

Centered text

or as a class

.centertext { text-align: center; }

Centered text

 

or you can use a span tag inside one p tag which needs display: block to start a new line 100% wide. This keeps the same line height and margins between lines (a new p tag will probably create more space between lines):-

css:-

.centertextspan { display: block; text-align: center; }

html markup:-

hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello

hello hello hello hello hello hello hello hello hello hello hello hello hello

hello hello hello hello hello hello

hello hello hello hello hello hello hello hello hello hello hello hello

hello hello hello hello hello hello hello hello hello hello hello

[problem in IE 7]

It could be a cache problem (unfortunately you can't tell a viewer to clear their cache very easily) or a slow download (is it a large image file size in KB?) or perhaps she has a problem with her computer (old or infected or not much spare space).

[problem in IE 7]

It shows in my IE7.

 

Use http://browsershots.org/ or netrenderer to see how a page looks in different browsers.

[Length of frames]

The length of a frame is controlled by the rows size in the frameset file.

 

If you load the main template and View Source it should show you the source code for the frameset file which will have something like the following:-

 

<p>Your browser doesn't support frames</p>

 

where the frameset rows is the height for the frames inside.

 

Is there a way I can change frames to something else automatically without changing the layout?

 

Framesets and frames are a special (and out-dated) method of coding. You would normally have to re-code everything. However, as you have Dreamweaver, which I don't use, you might be able to use the design view but even that is not recommended by others on this board.

[problem in IE 7]

The gray background does show in my IE7 for the right panel under Contact Us.

[converting table to css]

...by 'spaces' he means semi-colons

 

Too early in the morning for me here in UK