38 replies [Last post]
cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Hugo has asked me to start a new thread with what is left of my long running home page project. Adding this code to my sidebar images has fixed the IE7 problem with getting the images to stagger properly.

#albumlist {
margin-left:0;
padding-left:0;
list-style:none;
}
#albumlist li {
/* width not strictly
required but may keep
IE happy */
width:278px;
}
#albumlist li.left {
/*properties removed*/
}
#albumlist li.right {
text-align:right;
}

I altered it a little bit to look like this so that there is a break at the top of the images and the header and so that the images are not going over the edge on the right:

#albumlist {
margin-left:5;
padding-left:0;
list-style:none;
margin-top: 2px;
padding-top: 2px;
}
#albumlist li {
/* width not strictly
required but may keep
IE happy */
width:235px;

}
#albumlist li.left {
/*properties removed*/
}
#albumlist li.right {
text-align:right;
}

Why Hugo added text-align: right I am not sure since there is no text. The images are still not quite positioned the same on all browsers but IE7 looks much better. However, IE6 still looks awful. My pngs that I am using are not showing up as transparent but the sidebar image are staggered now. This is the link to what IE6 looked like before the new code was applied. The only difference is the staggered images now. http://www.csscreator.com/files/IE6.gif.

Should I switch to gifs instead of the pngs? If I switch to gifs will the other browsers see these as transparent? They are saved as alpha transparent. I did pngs because I read somewhere that they are a smaller file size. I also thought that all modern browsers could handle png format. Am I incorrect in my thinking?

Because I am the MOM, that's why!!!

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 10 years 5 days ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

I only briefly read over

I only briefly read over your issues, but this article might help:
http://en.wikipedia.org/wiki/PNG and it's actually gifs that are a smaller file size, not pngs.

@}->-- Amanda

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

It's entirely up to you.

It's entirely up to you. PNGs are MUCH better for smooth gradients and transparency, but IE6 doesn't support them without extra code.

I had noticed your PNGs were quite large and took a while to download. I would consider resaving them as GIFs and seeing if there's any noticeable quality loss.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

argh text-align-right is the

argh text-align-right is the crux of that proposal. Inline elements can be positioned by their parent using text-align, this includes images.

The point here was to not use complex properties such as float and position absolute where they weren't strictly required, this is a simple solution based on the fact that your sidebar and ul/lists have space it made sense that the list was allowed to have that full width of it's parent and then the image would naturally sit to the left side of that list element; to achieve the staggered effect one simply took one of the existing classes you had set on the lists i.e .right and instead of the float property we use the text-align property to shift the image to the right side. The list elements already - being block by nature - start on their own line so the text align was/should be the only rule needed for the stagger.

I'm worried that you have felt a need to adjust the rules as the images when I checked should have and did sit neatly within their ul and sidebar and overall within the layout but perhaps I missed something.

You appear to not have noted my instruction on the hasLayout trigger needed for the #middle section, you have to apply either height or width, display:inline-block, zoom, to name but a few.

I think that I said that you could probably get away with width in this instance.

To understand HasLayout (and it's important to) have a google or look for the sig link in one of Chris..S posts.

For the pngs it might be worth doing a search on the forum as there have been many lengthy threads on how to deal with alpha transparency for the piece of crud known as IE6.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Live showed images right on

Live showed images right on the line between header and content backgrounds. I wanted the images to be a bit lower so that there was a distinct division. Also the images in IE7 live showed over to the right too far.

I do not understand the hasLayout but I guess I can do some research on it. If I get stuck as what exactly to do with this, I will post.

I will change my pngs to gifs and see what happens in the browsers. My husband works for MS and said that it really didn't matter about how IE6 is interpreting the images since if people are doing their security updates properly then IE7 was part of a security update and they don't use IE6 any more any way. Okay whatever! I like to make sure all my bases are covered. Wink

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

At risk of sounding

At risk of sounding extremely rude please tell your husband that that notion just doesn't cut it do M$ really think that security updates will magically mean that IE6 will suddenly vanish no longer being a problem? We will have to suffer developing for that appealing browser that has caused so much frigging misery, wasted time, and general high level consternation amongst the web development community for quite a while yet.

Apologies for the rant but MS have actively done so much to retard and damage standards and CSS advancement, and it really really makes my blood boil, truly Smile

Personally I'm praying that we're starting to see the decline of MS influence.

Oh and ask your husband about hasLayout as it's a nightmare that MS coded into the core of their Trident engine and isn't anything to do with the specs and causes 90% of the problems faced when trying to get simple compliant CSS rules to behave in IE

Rant over Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 51 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

appealing browser

Hugo wrote:
appealing browser

appalling?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

cgacfox wrote:My husband

cgacfox wrote:
My husband works for MS and said that it really didn't matter about how IE6 is interpreting the images since if people are doing their security updates properly then IE7 was part of a security update and they don't use IE6 any more any way.

Tell him MS need to ditch the Genuine check before letting people upgrade to IE7, they'll probably find IE7 shoots up to about 80% of the browser market share Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

wolfcry911 wrote:Hugo

wolfcry911 wrote:
Hugo wrote:
appealing browser

appalling?

Laughing out loud I blew it, so apoplectic with rage I went and heaped praise on IE instead of disgust Smile

Right thread derailed enough and my normal poise and calm restored.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

thepineapplehead

thepineapplehead wrote:

Tell him MS need to ditch the Genuine check before letting people upgrade to IE7, they'll probably find IE7 shoots up to about 80% of the browser market share Wink

'Genuine Check' why so TPH, no on second thoughts don't answer that one!

Oops sorry derailed again.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Ask away all you like, I'm

Ask away all you like, I'm perfectly legal now, and it feels good Laughing out loud

But MS would seriously notice a much bigger uptake of IE7 if it didn't require a Genuine copy of Windows.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sure they would, but

I'm sure they would, but they don't want people getting the benefits of improvements if they have a cracked copy do they?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Ok guys let's get back on

Ok guys let's get back on the subject at hand. IE6 still exists, people still use it, and we have to deal with it. I read some stuff on the layout but am not sure still what I am supposed to do with it and where to put it in the code to get IE6 to behave. I changed my transparent images that were pngs to gifs and now they are not showing as transparent. They have a drop shadow that is all screwed up. That is why I chose to use the pngs because it handles transparency better than gifs saved with alpha transparency. I tried changing alpha to index transparency and that didn't work either. Is there code to use to get IE6 to recognize the pngs and not screw things up? Is this were the layout code comes into play?

I also thought that I could redo the images that have the drop shadow and background pattern. I would have to slice them so that the pattern still shows from the background but also includes the drop shadow effect. Or is there code that I can add to each image to get the same effect that I created in Fireworks? I don't mind using extra code to get IE6 to recognize what I am trying to do.

AttachmentSize
new_ie7.gif 139.41 KB

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

cgacfox wrote:Ok guys let's

cgacfox wrote:
Ok guys let's get back on the subject at hand. IE6 still exists, people still use it, and we have to deal with it.

Erm it wasn't us saying not to care about IE6 was it? Smile Yes it still exist that was exactly my point.

On other matters, I've noticed that you have run the question pertaining to the staggering of the images on sitepoint while this sort of practise is frowned upon (and yes I have heard all the arguments for doing so) what did make me raise an eyebrow and purse my lips somewhat was the fact that you linked to the layout image you have stored on this forum, I think that you should really remove that link, if you want sitepoint members to see it then store it on their servers, rather than consuming CSScreator bandwidth.

On the subject of pngs and alpha channels have you not tried one of the IE6 fixes.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

[quote=Hugo

Hugo wrote:

On other matters, I've noticed that you have run the question pertaining to the staggering of the images on sitepoint while this sort of practise is frowned upon (and yes I have heard all the arguments for doing so) what did make me raise an eyebrow and purse my lips somewhat was the fact that you linked to the layout image you have stored on this forum, I think that you should really remove that link, if you want sitepoint members to see it then store it on their servers, rather than consuming CSScreator bandwidth.

On the subject of pngs and alpha channels have you not tried one of the IE6 fixes.

I am sorry, Hugo. I will remove the link at Sitepoint. I have most of their books that I purchased to figure out CSS and thought maybe someone there might have another take on the staggering, but it was fixed from this site.

As far as the pngs and alpha channels, I don't know of any IE6 fixes. Remember I am completely new to CSS that is not generated from Dreamweaver when I build a site and is embedded on my HTML page.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 6 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

IE6 and below don't support

IE6 and below don't support alpha transparency on PNGs, you need to use scripting to get them to work.

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I've been doing some

I've been doing some research on code to use and have found several sites that talk about using javascript to get it to work. However, as in my case when I tested it, I have to accept the use of the active-X. Not all people trust this. Is there an easier way to use code to get IE6 to recognize png alpha transparency? Do I place it on the CSS page or the XHMTL page? HELP!!! I am so close to getting this done.

Also I wanted to ask about the other pages in my site. the about us page will just have the header, nav, content, and footer so does it become a 2 column page? The shopping cart pages will have an image, text describing the image and a cart button in the content area. Can I use 2 column there as well? If I am thinking correctly my home page uses a 3 column layout. The third column being the sidebar. Correct?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I found a post on this forum

I found a post on this forum for a fix to pngs but am confused by what the poster said about setting the background to white being his problem. http://www.csscreator.com/node/20000. Is he talking about when he made the images in whatever graphics program he uses? When I made my pngs, the canvas is transparent. Is there another place I should be looking because this solution did not work for me and now the other browsers are showing the same problem. I use Fireworks MX 2004 to make my graphics.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I know you have been very

I know you have been very patient with me but could someone answer this last post? This might be the fix I need to get IE6 to work with my pngs. I have also found a great tool that allows me to download and use older versions of IE and have tested the page in IE5.5. We won't even go into the mess that shows up for that browser. If anyone is intersted in the download, let me know. I don't know if it is allowed on this site for me to post the link.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think the link to which

I think the link to which you refer is probably the Treadsoft one
which has ben posted a few times they were first out with a rather good IE7 standalone. (but all these efforts can be buggy and severly compromise a system if not carefull so take care)

It's fine to post links such as that if they are germane to a thread.

As for the site can you post a link to let everyone see what stage you're at with the png fixes and why they are causing problems.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

That is the site where I got

That is the site where I got the download to install older versions of IE. I chose to install 5.5 and 6. There are some die-hards that are still running 5.5. Here is my site so far. IE6 still shows the pngs not transparent plus I don't know why the footer area is separated from the content area. At least that is how I see it. http://www.freewebs.com/foxdencreations/

I was curious about the post where eoran stated that he/she fixed the png transparancy problem because the background was set to white instead of something else. Here is the link to that thread again. http://www.csscreator.com/node/20000. I would be curious as to what this person is talking about. This may be my solution until the world no longer uses IE6. IE 5.5 really shows my page messed up. I guess I could put a disclaimer that if viewing my site, please use IE7 due to IE6 problems with CSS, but I would rather show that I can overcome this problem in case someone visits my site and sees that I am a web designer and wants to maybe visit my web business site and hire me. Wink

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think the poster was

I think the poster was referring to having inadvertently set a white background to the element thus negating the benefits of a transparent image where clearly you don't want the background of an element filled in with solid color.

With your site I can't seem to see where you have tried to implement any fixes for IE png.

As for the footer area separation I have now mentioned that twice and provided the necessary solution sorry but I'm not prepared to repeat my self for a third time Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Well I found where I went

Well I found where I went wrong with what I was doing with the images. They are saved as PNG8 with transparent backgrounds. I added the code that eoran had found and got the images to work correctly. However, there is still a break between the middle and footer areas that I don't understand. Also my logo somehow moved over to the left. I need to get that corrected. Attached is an image of the page in IE6. I will upload all the new files this evening when I get home from work so that others can see it if they have IE6 running and see the code.

AttachmentSize
IE6_new.gif 83.76 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Here is the link to the

Here is the link to the updated site with the code that causes IE6 to recognize pngs.

http://www.freewebs.com/foxdencreations/

I have been working on finding out how to do the hasLayout. Remember that I am really new to all of this. You said in another post "You appear to not have noted my instruction on the hasLayout trigger needed for the #middle section, you have to apply either height or width, display:inline-block, zoom, to name but a few.

I think that I said that you could probably get away with width in this instance.

To understand HasLayout (and it's important to) have a google or look for the sig link in one of Chris..S posts." I have printed out and read and re-read Chris..S article on this subject. I am still confused as to what I need to do to get this to work in IE6. I will re-read again but might need further assistance with this.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I searched the forum for any

I searched the forum for any other posts talking about hasLayout and found one that fixed my problem. I added height: 1% to the #middle part and it fixed the problem in IE6. The logo is still too far over to the left but at this point I don't really care any more.

I asked before if my home page was considered a 3 column layout due to the sidebar. I think I need to switch to 2 column layout for the about us and shopping cart pages. Please tell me if my thinking is correct. If so, then I need to build another CSS page to be called for those pages.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Good stuff , I wasn't being

Good stuff , I wasn't being crual Smile, but the info you needed for the #middle problem was in my posts and you did find it in the end.

The logo image position is a bit of an odd one and might be a feature of these nasty fixes one has to use, the only solution I can see at the moment is to actuall position the h1 rather than the image background we can do this by filtering a rule to IE6 only in the form of the star selector filter, thusly:

* html h1 {margin-left:75px;}

The page column question would have been helped if one of the other pages in question were actually available to view!!!!

If you feel that you need to change to a two column from three then it's simple enough, having removed say the right sidebar for a two column layout markup you can feed new rules for the #content based on descendent selectors and a unique id on the body tag i.e:

#content { margin: 0 100px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; }

body#two-col #content {
margin: 0 0 0 175px;
}

This feeds a new set of rules for #content that adjust the margins to take account of the space now avalable to the righthand side but only if tthe #content id is nested within an ancestoral/antecedent element named #two-col.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I haven't even built the

I haven't even built the other pages yet in Fireworks. I have been concentrating on getting the home page finished so I know what pretty much I am doing. The about us page will not have the images to the right. I want to be able to use the entire content area for text. As for the shopping cart pages, I am not sure the best layout for those (i.e. 2 column or 3 column). The nav stays the same on all pages. The top image of the jewelry also goes away on the other pages. The shopping cart pages will have in the content area:
1. an image of the product 2. text describing the product 3. the shopping cart button that links to Paypal.

The only other page that might pose a problem for me would be the By Special Request page. That is going to hold a form to fill out. However I feel that a 2 column page will work for that as well.

Since I am not really changing backgrounds or nav buttons, I believe that all I need to do would be to do the markup in HTML and then do the CSS for those pages. From your previous post it looks like when I do the markup I can set a new id for this and just add the CSS to be called on the same CSS page that I just built without having to call a new page. Am I understanding this correctly?

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well your initial page is as

Well your initial page is as your template, in theory all you need to do is copy your index remove the right div markup and any elements in the main content area and you have a blank new page with just the essential page to page elements such as header, navigation, footer, etc.

And yes then you control the new page with new style set rules from within the same stylesheet as I described earlier, don't think in terms of breaking up your styles as it's a vastly more complex business to keep control of , it's what I'm doing at present with four style files to provide modular control of multi layout styles and it's a headache and prone to many pitfalls.

And please you DO NOT build pages in Fireworks it's a graphics programme isn't it? this is a coding practise and nothing makes many of more irritated than graphic design led development , yes that's what I'm also having to do at the moment and the graphic designer ain't got no clue about design for web and I'm having to bite my tongue a lot.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Thanks for the heads up,

Thanks for the heads up, Hugo. I appreciate it. I guess I worded it incorrectly. I design how I want the pages to look with the graphics in Fireworks (which is a graphics program). Then thepineapplehead had me move to the HTML page after the initial design in Fireworks to do the markup so that if someone had styles turned off they would still see all the content of the page without graphics. CSS is used to style the page with the graphics that I created in Fireworks.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I understand, that's fine. I

I understand, that's fine. I just overreact to design led layouts as they really do so much harm with too many people, developers and clients alike, believing that cos they see a static graphic representation that that must be the site or that the site must look exactly like that and then why on earth having seen that graphic can it so much longer to get posted up to their host, pah!

Roughly speaking now you should have a pretty much stable layout, what you can do is copy that index twice and remove #right nested content from one and name it ? two-col-tpl.html and the other keep the #right column but strip out all the content that won't transfer from page to page and name that three-col-tpl.html and then you have your two main layouts as ready to fill frameworks both controlled from the same stylesheet.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Cool. I will start working

Cool. I will start working on it and if I get stuck, you know I will be back here! Wink

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Hugo wrote:If you feel that

Hugo wrote:
If you feel that you need to change to a two column from three then it's simple enough, having removed say the right sidebar for a two column layout markup you can feed new rules for the #content based on descendent selectors and a unique id on the body tag i.e:

#content { margin: 0 100px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; }

body#two-col #content {
margin: 0 0 0 175px;
}

This feeds a new set of rules for #content that adjust the margins to take account of the space now avalable to the righthand side but only if tthe #content id is nested within an ancestoral/antecedent element named #two-col.

Hugo.

Well, my brain is not understanding this properly. I have added the code that was suggested but I am not sure if I did it correctly or in the correct spot.

About.html page:




//

Foxden Creations












Welcome to Foxden Creations


Here you will find unique, hand-crafted beaded jewelry that will set you apart
from the crowd.


Please come in and look around, I am sure there is something that will catch
your eye.


I also take special orders if you don't find what you are looking for! Just fill
out the form on the "By Special Request" page.











CSS added:

html { background: #18222E; } body { width: 767px; margin: 2em auto; position: relative; } * { behavior: url(scripts/iepngfix.htc); } #header { background: url(images/border/header.gif); } h1, h2 { margin-top: 0; } h1 { background: url(images/foxden_creations_logo.png) no-repeat 2em 0; height:145px; text-indent: -9999em; margin: 0; } * html h1 { margin-left:75px; } #middle { background: url(images/border/middle.gif); overflow: hidden; height: 1%; } #content { margin: 0 100px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; } body#two-col #content { margin: 0 0 0 175px; } #sidebar { float: right; width: 300px; margin-right: 30px; display: inline; }

#albumlist {
margin-left:5;
padding-left:0;
list-style:none;
margin-top: 2px;
padding-top: 2px;
}
#albumlist li {
/* width not strictly
required but may keep
IE happy */
width:235px;

}
#albumlist li.left {
/*properties removed*/
}
#albumlist li.right {
text-align:right;
}

#footer {
clear: both;
background: url(images/border/footer.gif);
font: bold x-small Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
}
#footer p {
margin: 0;
}

/* Let's get some images on the nav buttons! */
ul#nav {
float: left;
width: 175px;
margin: 0 0 0 15px;
padding: 0;
list-style: none;
text-align: center;
display: inline;
}
ul#nav li {
width: 85%;
margin: 1em auto;
}
ul li a {
display: block;
height: 39px;
text-indent: -999em;
text-decoration:none;
}
ul li#nav-home a {
background: url(images/buttons/home.png);
}
ul li#nav-about a {
background: url(images/buttons/aboutus.png);
}ul li#nav-necklaces a {
background: url(images/buttons/necklaces.png);
}
ul li#nav-earrings a {
background: url(images/buttons/earrings.png);
}
ul li#nav-bracelets a {
background: url(images/buttons/bracelets.png);
}
ul li#nav-lanyards a {
background: url(images/buttons/lanyards.png);
}
ul li#nav-bookmarks a {
background: url(images/buttons/bookmarks.png);
}
ul li#nav-request a {
background: url(images/buttons/request.png);
}
#necklace {
position: absolute;
top: 30px;
right: 1em;
background: transparent url(images/jewelry.png) no-repeat;
height: 324px;
width: 158px;
left: 574px;
}
#border-top {
background: url(images/border/top.gif);
height: 41px;
}
#border-bottom {
background: url(images/border/bottom.gif);
height: 39px;
}

Sorry about being so slow on understanding this and asking for so much help! Wink

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I found out where I went

I found out where I went wrong. I moved the body#two-col #content above the #content on the CSS page and now it works. However, the last paragraph does not behave as I want it to and I want the text moved over a bit so that it is not so close to the nav. I was thinking padding but not sure I am thinking correctly. Not sure margins would work either. The nav is contained with the content so the last paragraph wraps at the bottom because there is no image to move it over. How do I correct this so that all text is in alignment?

Here is the link to the pages:
http://www.freewebs.com/foxdencreations/ Just click on the about us link to see what I am talking about.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure what you're doing

Not sure what you're doing here but have a feeling that things are getting out of hand somewhat.

You appear to have created a new div and given it an ID of #two-col yet have used the ruleset as I wrote it which set the ID as an identifier of the body tag so what you have won't work and you don't want to be moving rulests around in the stylesheet.

Follow what I wrote earlier, all you have to do is add the ID #two-col to the body tag what this does is provide a means to create a descendent set of selectors i.e if #content has a parent or ancestor or antecedent element called #two-col then apply these properties instead of the earlier #content ruleset, you do not need to add any new divs/elements (if that is what you have done) essentially the idea here is that you will have simply removed from the markup the right column div with that gone and the body with the id #two-col then #content reads the new rules and applies a new set of margins that allow #content to move across to take up the space vacated by the absent right column.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I am getting confused about

I am getting confused about what you are telling me, Hugo. I will remove the new div that I created on the about.html page but not sure what you mean by "add the ID #two-col to the body tag". Is this on the html page? Would it look like this?

Again I apologize for being ignorant about these things.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

An id is written as #idname,

An id is written as #idname, to identify an element with that id one writes id="idname" this is then an attribute of the element.

What is your about page? is it of the two column variety or three?

Earlier I talked about creating a simple set of template pages from the one that had been worked up. you should have two files that are just repeated elements such as headers, footers, navigation one of these files has all three major sections that comprise your left nav, middle content section, right side section apart from the obvious repeated elements e.g navigation all other content is stripped out the same goes for the second file except that this one has the right side element removed. these are shells to reuse when you either need a two column or three column. The two column is activated by adding the body id to that two column shell, your CSS file or stylesheet (it's not called a page) already ghas the rulesets required for either a wide margin #content or a narrow one as per the rulesets described earlier.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

The about us page, as well

The about us page, as well as the rest of the pages on the site will be 2 column pages. I only wanted the sidebar on the home page to hold the images to the right. So I have cut and pasted the home page into the other pages. I removed the div for the jewelry image that is in the header of the home page and removed the sidebar div as well.

Because I am the MOM, that's why!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 7 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Then all you need is the

Then all you need is the body tag ID and the rulesets as described earlier and you should be good to go.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 9 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Jumping ahead!

On the "By Special Request" page, I will have a form to fill out for custom orders. I want to use a form that was created for my family site using ASP.NET but it is in table form. I need to strip out the parts that I don't want to use but am not sure how to re-write it for CSS. Any suggestions of where to start after stripping out the unwanted parts of the form? I just want name, email, and design request to be the main parts with the design request replacing the comments texbox. Is it bad to maybe want to leave it as a table?

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>

<%@ Import Namespace="System.Web.Mail" %>

Sub Page_Load()
'=============================================================
'This subroutine will run every time your page loads. It contains all the instructions you want to give the server when a user
'loads this page into their browser. In this case, we are going to populate the dropdown list of states the first time the
'user loads the page
'=============================================================

' First, we are going to determine if this is the first time the user has loaded the page, by using the "IsPostBack"
' property. Because ASP.NET always posts a page back to itself, we can determine whether the page is loading from
' a post back, or not. If the page has been submitted once, all subsequent reloads of the page are considered postbacks.
' By populating the dropdown on the original page load, we can forego reloading the drop-down every time.

If Not IsPostBack then 'Test to ensure this page is not loading as a postback
' if it's not a postback, then add the states to the drdState control
' Also, just as we did with the radio button list in the body of the page, we can add list items
' to the dropdown list.

drdState.Items.Add("Alabama")
drdState.Items.Add("Alaska")
drdState.Items.Add("Arizona")
drdState.Items.Add("California")
drdState.Items.Add("Colorado")
drdState.Items.Add("Connecticut")
drdState.Items.Add("Delaware")
drdState.Items.Add("District Of Columbia")
drdState.Items.Add("Florida")
drdState.Items.Add("Georgia")
drdState.Items.Add("Hawaii")
drdState.Items.Add("Idaho")
drdState.Items.Add("Illinois")
drdState.Items.Add("Indiana")
drdState.Items.Add("Iowa")
drdState.Items.Add("Kansas")
drdState.Items.Add("Kentucky")
drdState.Items.Add("Louisiana")
drdState.Items.Add("Maine")
drdState.Items.Add("Maryland")
drdState.Items.Add("Massachusetts")
drdState.Items.Add("Michigan")
drdState.Items.Add("Minnesota")
drdState.Items.Add("Mississippi")
drdState.Items.Add("Missouri")
drdState.Items.Add("Montana")
drdState.Items.Add("Nebraska")
drdState.Items.Add("Nevada")
drdState.Items.Add("New Hampshire")
drdState.Items.Add("New Jersey")
drdState.Items.Add("New Mexico")
drdState.Items.Add("New York")
drdState.Items.Add("North Carolina")
drdState.Items.Add("North Dakota")
drdState.Items.Add("Ohio")
drdState.Items.Add("Oklahoma")
drdState.Items.Add("Oregon")
drdState.Items.Add("Pennsylvania")
drdState.Items.Add("Rhode Island")
drdState.Items.Add("South Carolina")
drdState.Items.Add("South Dakota")
drdState.Items.Add("Tennessee")
drdState.Items.Add("Texas")
drdState.Items.Add("Utah")
drdState.Items.Add("Vermont")
drdState.Items.Add("Virginia")
drdState.Items.Add("Washington")
drdState.Items.Add("West Virginia")
drdState.Items.Add("Wisconsin")
drdState.Items.Add("Wyoming")
' Now, the list items below only add a single value to the dropdown list, so the value and the text will be the same.
' You can have separate display text and values for each droipdown item, just be using the syntax:
' drdState.Items.Add("Display Text", "Value"). And, of course, as mentioned previously, you can use the ListItem control to have
' separate text and values, just like the RadioButonLists in the body of the page below.
end if
End Sub

Sub Submit_Click(o as Object, e as EventArgs)
'===========================================================
'This subroutine will handle the email portion of the form.
'The details will be explained in the comments below
'===========================================================

'The first thing we must do is declare or "Dimension" the variables we will use. We will declare variables for each form field,
'and we will insert those variables into the text of the email message.
Dim strSex as String = rblSex.SelectedItem.Value 'This will assign the value of the selected item of the "Sex" RadioButtonList to this variable
Dim strAge as String = rblAge.SelectedItem.Value 'This will assign the value of the selected item of the "Age" RadioButtonList to this variable
Dim strState as String = drdState.SelectedItem.Value 'This will assign the value of the selected item of the "State" DropDownList to this variable
Dim strName as String = txtName.Text 'This will assign the text of the "Name" textbox to this variable
Dim strEmail as String = txtEmail.Text 'This will assign the text of the "Name" textbox to this variable
Dim strURL as String = txtURL.Text 'This will assign the text of the "Name" textbox to this variable
Dim strCity as String = txtCity.Text 'This will assign the text of the "Name" textbox to this variable
Dim strComments as String = txtComments.Text 'This will assign the text of the "Name" textbox to this variable
Dim oMsg as New MailMessage 'This will create the Mail Message object that will send the form results to you via email
Dim strBody as String 'This will be a string value that we will construct below to create the HTML email message

If Not IsValid() then 'Because we are using validation controls, we have to check to see if the form is filled out ptopoerly
Exit Sub 'If the form isn't right, then we don't want to do anything further, so we'll exit this subroutine
end if

' ASP.NET uses the "Try-Catch" method of handling errors that may occur when the code runs. The "Try" phrase instructs the .NET framework
' to run some code. If an error pops up, the "Catch" line gives the instructions on what you want the page to do if an error is thrown
' So, we'll start off with the "Try" and that will include all the code needed to send the mail message
Try
'First we'll clear out the lblErr control, just in case there's text in it we don't want
lblErr.text = ""
'Now, we'll build the text string that contains the text and the HTML to format our email message
strBody = "A New visitor has signed the guest book at the Foxden web site. The following information was submitted:

" & _
"Visitor Name: " & strName & "
" & _
"Email Address: " & strEmail & "
" & _
"Web Site URL: " & strURL & "
" & _
"Sex: " & strSex & "
" & _
"Age: " & strAge & "
" & _
"City: " & strCity & "
" & _
"State: " & strState & "
" & _
"Comments: " & strComments & "
"

oMsg.From = strEmail 'This will use the email address the user provided as the "From" Address for the mail message
oMsg.To = "[email protected]" 'This is the address to which the mail message will be sent
oMsg.Subject = "New Guestbook, entry from the Foxden Web Site" 'This is the subject of the mail message
oMsg.Body = strBody 'The string value we created above will be the message body for this email
oMsg.BodyFormat = MailFormat.HTML 'This make the message an HTML email. If you don'r specify this, the emessage will be
'sent as plain text
SmtpMail.Send(oMsg) 'This notifies the .NST Framwork's email class to send the message we just constructed.
Response.Redirect("gb_response.htm")
Catch Exc as Exception 'Now we have to catch the error, and the "Exc" variable is an instance of the Exception Object
lblErr.text = "A Problem prevented your guestbook entry from being accepted: " & Exc.Message
End Try 'This lets the Framework know that the Try is complete

End Sub

Guest Book Sign In

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i





Guestbook Header







Link to Home Page



Link to Cori's Page



Link to Greg's Page



Link to Ashton's Page



Link to Chris' Page



Link to The Pets Page



Link to Dee & Gloria's Page



Link to Mike's Page



Link to Mark & Candy's Page



Link to Evert & Doris' Page



Link to Virgil & Pansy's Page



Link to The Home Theater Page



Link to The Library Page

Link to Guestbook Page

Link to default email
















Guest Book Sign In


To sign our guest book, Please fill out the fields below.













Gender:






























Full
Name:







Email address:







Home Page URL:






City:






State:





Comments:























Copyright © 2004 - 2005

Created by Cori Foxworthy/Owner of Foxden Web Solutions


All rights reserved.


Last updated 03/07/2005.


var sc_project=897435;
var sc_invisible=0;
var sc_partition=7;
var sc_security="3ec6a98d";

free html hit counter




 

Because I am the MOM, that's why!!!