Ant

Well somehow I have got the image to work properly. I think I removed the width:auto. I'm not sure now. BUT when I place the caption underneath, the text determines the width of the div now. So now I have to figure out how I tell the caption to not exceed the width of the photo.

I'm trying to sort out all my image styles with classes. I would like to have an image style that contains a caption. However I GUESS I cant do this WITHOUT the image being in it's OWN div. So I cant just use a class by itself, which is how I have been handling my images up to now. Some with a border, some floated left, some not. Here's how I assume it's done: .photo_with_caption { border: 1px solid #000000; width: auto; float: left; padding: 10px; margin-bottom: 15px; margin-left: 5px; .caption_style { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; text-align: center; padding-top: 10px; <div class="photo_with_caption"><img src="images/harry_salmon.jpg"/> <span class="caption_style">caption here</span></div> </div> However I cant get the div to have a width of auto and snap to the width of the image. What it's doing ( I THINK) is expanding to the container it's in (which happens to be floated left and a width of 660px) What can i do to tell my div to have a width of auto when it's inside a div that is floated left and has a defined width of 660px? NOTE: I just tried making the div 100% width and that didn't work. I tried removing the width of the parent div and left it blank, that didn't work. I tried auto width on the div(.photo_with_caption above) and that didn't work. I need the photo_with_caption class to resize to whatever the image is i put in it. All it does is resize to the parent element. I think I run into most of my problems (in css/etc) when I have objects within other objects and there becomes a complicated mess of how each one effects the other. So when I think (X) should happen it doesn't because it's being controlled by 3 other things. Then I have to go back and figure out which element is controlling which. thanks Ant

News, thanks for the explanation. I understand that and will make an attempt to layout my tags that way. Right now I think I have most of the problems solved without adding any exuberant amounts of CSS etc. I think it becomes a problem layout wise when you have not pre-laid out a head/subhead/body copy heirarchy Especially when there isn't always strict content. It's hard to explain without sitting down with someone and laying everything out and showing them first hand. Its almost as if I need to treat the webdesign like a newspaper (which is the field I work in) There are a set amount of style sheets in quark express that I created to reflect all the styles in use in the paper. body text, headlines, pull quotes, subheads etc... So every page of the newspaper looks the same when the editors lay things out. HOWEVER, my content in this web design is very minimal and not every page has the same by line, headline, and body copy. Some pages have headlines without subheads, so there is no order, so to speak, because the content is not complete and similar (due to the client not giving me full content) Well that was my best attempt at explaining it. When I am done I will post the site and maybe it will make more sense. Thanks Ant

Maybe a better question is how do I add an extra space after a block of copy without changing the bottom padding of the element which already has the bottom padding defined? I know empty returns are no good. So whats the standard practice for quick spaces? I think my main problem is since I have been plugging in all my content, I realize it's not so easy spacing elements when I have defined spacing already set for each element. So I cant just move things over slightly or up/down, or add leading like I can in print design. Even though i have total control with CSS, it's very slow going when my spacing is set and I havent anticipated the combination of all the elements. Sometimes 2 elements together look different and need different spacing than if they were paired with other elements. Make sense? Ant

That would mean giving them a different class that has different padding for each instance that arises where the space is too little or too much. That would be a lot of different classes for different padding options. Is that ok to do? It seems like a lot of css. for instance: .padding_bottom_5 .padding_bottom_8 .padding_bottom_12 Ant

Below is an example of a text spacing problem I'm having. But it pertains to A LOT of situations with spacing etc and css Sometimes I have an H2 heading above a P copy block other times its an H1 heading above a p copy block. So the bottom padding I set for my H2 heading IN MY CSS is sometimes too much or too little depending on what size text is underneath it What are my options? Do I have to declare different paddings directly in the html code to overide my CSS definition for that heading when the situation arises? Is it ok to use a standard CSS definition for things but then ALTER them due to specific situations or am I supposed to make separate CSS definitions for each unique occurrence? ( not sure that makes sense ) Thanks Ant

Thanks Andrea. I must have missed some empty <p> </p> Concerning the wrapper: I have the width specified, so I am missing your point. Concerning the strong attribute. How else would I add bold text to a word in a set of 2 words, or in this case a bolded "|" Adding a bold class to the particular character seems like the long way around. I originally planned to have text in the gray bar, so I left the css for it. Ant

ok heres the page. All the images and text are dummy content. http://www.streamsofdreams.com/testing_testing/testme.php Ant

Andrea, I will do that as soon as I can. Maybe that will help. Thanks Ant

no. I figured I would treat each piece of content in the floatme_left div individually since I didn't know if everything in that div would be aligned left. It's this sort of thing that I'm talking when I say theres many ways to do different things, and I'm not sure which way to do them. Ant

ok, but if I do that then the image centers itself. Then I can only get the image to align left by doing this: <img src="images/shopnews.jpg" alt="shop news" align="left"> I did that by clicking on the align pallet in DW For some reason I cant get the CLASS to align left on that image when using TEXT ALIGN in DW. Ant

Falken, this is what I have(a cut and paste from PART of the content). Maybe I'm making it harder than it needs to be. However now that I am getting down to the refinement process and trying to anticipate all my possible content variations, I am working on my text formating spacing etc..: This is where I am realizing there are tons of ways to handle things using css, but don't really know the "right" way etc... For instance should I add margins to everything, or do I add my margins to only some elements to create space. I have since added this to my <p> to begin using margins/padding to my text. I read that I need to define my <p>'s margins etc to allow me to space other things properly. margin: 0em; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; Here's part of the code. The float_left div holds all my content below my header. It also contains a float right column. <div id="float_left"> <img src="images/shopnews.jpg" alt="shop news" class="floatme_left"> <h2 class="clear">Casting Clinics</h2> <p class="date">(April 28, 2010)</p> </div> Here's the css: .floatme_left { float: left; } .clear {clear: both; } .date { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #993300; text-align: left; BTW, Andrea, I am using some headlines ( two - three words long at the most) as IMAGES so that I am not restricted in my design to using the helvetica/georgia font families. I realize it wouldn't be right to use images for a lot of content(text) but need a few to add interest to the design. I thought if I added the alt="" value it would be ok. Is that not correct?? Thanks Ant

Andrea, thanks, I understand now. I guess I thought it made more sense to create a class that effected the image and told the image to align left and have no images, text etc on the same line to the right of it. Basically i am creating some headline text images in illustrator and then using <p> after it etc. SO I wanted my headline IMAGE to have nothing to the right of it. I got the .clear class to work so I guess it's just as easy to use that when I want a "return" so to speak after an element. It's just backwards to me to tell the element after to "not be on the same line" as the element before it. Ant

Doesn't that mean that I have to add that style to <p> whenever I need it, i.e. randomly. Shouldn't the clear after the image follow the image style, thus my want for a class that is created for an image thats aligned left and cleared right. I guess what I'm saying is, isn't it easier to create an image class that specifies the desired effect rather than telling my <p> tag to do it each time I want that effect to occur. Ant

I'm not sure why I am stumped on this. I need to align an image LEFT thats within a floated left div. I want my text thats after the image to be underneath WITHOUT using <br> or empty returns. (per Andreas note in a previous post) I do not want the image to be in a div. I tried using a class of Float_left but the text (<p>) after it lines up next to it. I cant get the text to run underneath with some space between the two. I tried a bunch of things but cant get the class to do it's job. BTW in dreamweaver should I be using the image ALIGN property? I figured I should be using css instead, thus my reason for wanting to use a class to define this image style of align left and nothing to the right. Ant

Thanks guys. I guess I will put in the meta tags as I assume they cant hurt. The sitemap, I guess I can research it and see how it's done and if I want to include it. Falken thanks for the rundown, it was very informative. Ant

Thanks Andrea. my site will probably have about 18 pages not including the add-on pages when there is a new product or new event etc. Maybe I should research "site map" feature on web pages and see what they are all about. I thought it was all about SEO. I guess I'll add the metatags/keywords to the site as well. Ant

Andrea, THANK YOU!. No the site is not live yet. The old site is. I am making the changes you brought up. A few things: I chose to use the "normal" characteristic because at some point I noticed setting the font to "normal" changed it's appearance. SO, I guess I used it in a bunch of places. Maybe I noticed it when doing my h tags but didn't realize it was because h's were bold by default etc. So I blanketed everything with "normal" I'll remove them where they are not necessary. I removed the one bg repeat.( It was left there when I was testing as to where in the css the bg should go) The other BG repeat is because I used a BG blur effect on the whole site and repeated the bg blur effect to get the site to have a shadow behind it. I removed the empty P/H tags to create the space after on my body copy. It was supposed to use the hr tag with margins. It's just so easy to use a return than trying to decide NOW where in the sites content I may need to place a SET space after which tags etc. BTW any thoughts to these points. 1. meta tags ( keywords) There seems to be a lot of debate on it's use/effectiveness 2. site index (should I have it? ) Thanks Ant

After a lot of questions here I felt like I could finally post my code for my first page and see if anything strikes anyone as being incorrect etc.I realize theres probably a ton of unnecessary css, incorrect use of css/font etc, I'm hoping for any comments on the major problems. I realize not everything can be addressed. I'll just have to learn the nuances as I go of right/wrong usgae of elements. I believe this sort of thing is done here. If it's asking too much, no problem, I can continue and hope I handled all the aspects of the design etc properly. There are a few things I am not sure on and have NOT added to the site yet, but BELIEVE should be there. 1. meta tags ( keywords) There seems to be a lot of debate on it's use/effectiveness 2. site index 3. anything concerning seo that I have left out 4. extra content that is helpful in the footer, i.e. repeating the navigation at the top etc. 5. "if statement " I see them all the time in source codes but have not or do not know the correct uses for them concerning browser compatability etc Maybe most are just notes for the code??? If I have left out anything that I may have "skimmed over" in the web design 101 category also please let me know. After this I will make my css external and begin trying to figure out what pieces of the site I should turn into PHP include pieces. AGAIN, thanks to everyone that helped me get this far and answered all my questions. Ant <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <title>Streams of Dreams Fly Shop</title> <style type="text/css"> * { margin:0; /* zero out margin */ padding:0; /* zero out padding */ } html, body { height:100%; /* gives layout 100% height */ overflow:inherit; background-repeat: repeat-y; } #grey_bar_info { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; text-transform: uppercase; color: #CCCC99; background-color: #333333; height: 18px; width: 972px; text-align: center; padding-top: 8px; font-style: italic; padding-bottom: 9px; line-height: 18px; } #wrapper { min-height:100%; /* gives layout 100% height */ width:1000px; /* centers #wrapper */ position:relative; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; top: 15px; text-align: center; background-image: url(images/BG_blurr.jpg); background-repeat: repeat-y; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; } #header { /*position: absolute;*/ width: 972px; /*left: 0px;*/ /*top: 0px;*/ height: 145px; text-align: center; margin-right: auto; margin-left: auto; border-top-width: 1px; border-top-style: solid; border-top-color: #999999; } #left_main { background-color: #FFFFFF; width: 962px; /*left: 0px;*/ /*top: 100px;*/ padding-bottom: 10px; padding-top: 0px;/*110px;*/ padding-right: 5px; padding-left: 0px; text-align: center; margin-right: auto; margin-left: auto; } a { color: #996600; } .style3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: 20px; color: #FFFFFF; text-align: center; } * html #wrapper { height:100%; /* IE6 treats height as min-height */ } p { font-size:11.5pt; text-align:left; /* bottom padding clears the #footer */ font-family: Arial, Helvetica, sans-serif; color: #333333; line-height: 20px; font-weight: normal; } #clearfooter { height: 80px; border: 0; padding: 0; background-color: #FFFFFF; width: 972px; text-align: center; margin-right: auto; margin-left: auto; } #footer { height:70px; width:972px; background-color: #333333; text-align: center; margin-right: auto; margin-left: auto; padding-top: 15px; padding-bottom: 15px; margin-bottom: 30px; } .floatme_left { float: left; padding-right: 15px; padding-bottom: 10px; } hr { font-weight: bold; margin-top: 15px; margin-bottom: 15px; clear: both; } #right_main { width: 230px;/*110px;*/ /*padding-bottom: 80px;*/ float: right; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; top: 0px; border-left-width: 2px; border-left-style: solid; border-left-color: #333333; margin-right: 5px; margin-left: 10px; } .clear { clear: both; width: 100%; height: 0; visibility: hidden; } #float_left { float: left; width: 660px; padding-top: 10px; padding-left: 20px; padding-right: 22px; } #new_one { margin-left:auto; margin-right:auto; width:100%; background-color:#FFFFFF; text-align: center; padding-top: 8px; padding-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; margin-top: 15px; } #new_just { margin-left:auto; margin-right:auto; width:100%; background-color:#FFFFFF; text-align: center; padding-top: 8px; padding-bottom: 8px; font-style: italic; color: #666666; font-family: Arial, Helvetica, sans-serif; } .photo_caption1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-style: normal; font-weight: normal; text-transform: uppercase; color: #333333; } #new_two { margin-left:auto; margin-right:auto; width:100%; background-color:#FFFFFF; text-align: center; padding-top: 8px; padding-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; margin-top: 15px; } #new_three { margin-left:auto; margin-right:auto; width:100%; background-color:#FFFFFF; text-align: center; padding-top: 8px; padding-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 34px; font-weight: normal; text-align: left; clear: both; color: #000000; } h6 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-align: left; font-weight: normal; } h5 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: normal; text-align: left; } h4 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: normal; text-align: left; } h3 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: normal; text-align: left; } .date { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; text-align: left; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; color: #666666; font-weight: normal; line-height: 32px; text-align: left; } #headerart { height: 109px; width: 972px; text-align: center; padding-top: 10px; background-repeat: no-repeat; } /* nav styling */ #nav { text-align:center; height: 25px; background-color:#333333; } #nav ul { display:inline-block; list-style:none; } * html #nav ul { /* Target IE6 */ display:inline; } *+html #nav ul { /* Target IE7 */ display:inline; } #nav li { display:inline; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick; } #nav a { float:left; text-decoration:none; /* variable width */ font-size: 15px; height:25px; line-height: 25px; /* vertically align text - set to the same value as the height */ display:inline; padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; } #nav a:link { font-weight:normal; color:#FFFFFF; background-color:#333333; text-align:center; text-decoration:none; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; font-style: italic; } #nav a:visited { font-weight:normal; color:#FFFFFF; background-color:#333333; text-align:center; text-decoration:none; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; } #nav a:hover { color:#FFFFFF; background-color:#999999; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; } #nav a:active { color:#FFFFFF; background-color:#333333; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; padding-top: 0px; padding-right: 15px; padding-bottom: 0px; padding-left: 15px; } /* nav styling END */ #mainimage { height: 541px; width: 972px; background-color: #FFFFFF; text-align: center; margin-right: auto; margin-left: auto; padding: 0px; } .center_image { display: block; margin-left: auto; margin-right: auto } .photo_text { margin-left:auto; margin-right:auto; width:100%; background-color:#FFFFFF; text-align: center; padding-top: 8px; padding-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; text-transform: uppercase; margin-top: 15px; } .text_images { float: left; } #directions_etc { font-family: Arial, Helvetica, sans-serif; position: absolute; z-index: 2; height: 31px; width: 276px; top: 24px; font-size: 14px; text-transform: uppercase; text-align: right; right: 30px; } /* LIGHTBOX */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* LIGHTBOX */ </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="headerart"><img src="images/bannertest.jpg" width="972" height="109" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="727,6,959,36" href="#" alt="newsletter"> <area shape="rect" coords="859,47,956,61" href="#" alt="directions"> <area shape="rect" coords="25,24,407,97" href="#" alt="home"> </map></div> <div id="nav"> <ul> <li><a href="#"></a></li> <li><a href="#">Fly Shop </a></li> <li><a href="#">Photos</a></li> <li><a href="#">Trips</a></li> <li><a href="#">Events</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Guide Services </a></li> <li><a href="#">Contact Us </a></li> <li><a href="#">About Us</a></li> </ul> </div> </div> <div id=mainimage><img src="images/compilationtest.jpg" width="972" height="502"> <div id="grey_bar_info">April <strong>2010</strong></div> </div> <div id="left_main"> <div id="right_main"> <div id="new_just"><img src="images/just-in-NEW.jpg" alt="just in" width="226" height="67"><br> </div> <div id="new_one"> <img src="images/makos.jpg" alt="mako reels" width="82%" height="163" class="photo_text"><span class="photo_caption1">MAKO REELS</span><br> </div> <div id="new_two"><span class="photo_caption1"><img src="images/fly-fishing-reels.jpg" alt="loop reels" width="260" height="228" class="photo_text"></span></div> </div> <div id="float_left"> <img src="images/shopnews.jpg" width="242" height="42" class="text_images"><br> <h2> </h2> <h2>Casting Clinics</h2> <p><span class="date">(April 28, 2010) </span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#">read more... </a></p> <p> </p> <h2>Bonefish Trip</h2> <p><span class="date">(January 3, 2010) </span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#">read more... </a></p> <hr> <h2>The Hendricksons have arrived</h2> <p><span class="date">(April 28, 2010)</span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr> <h2>Saracione Mark IV Salmon and Steelhead Reels.</h2> <p><span class="date">(April 28, 2010)</span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<img src="images/saracione_reel.jpg" alt="saracione reel" width="234" height="256" class="floatme_left"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr> </p> <h2> </h2> <h2>Thomas and Thomas fly rod blanks </h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <hr> <h2>Patagonia deep wading jacket</h2> <p><span class="date">(April 28, 2010)</span> </p> <p><img src="images/81800_491.jpg" alt="patagonia jacket" width="256" height="256" class="floatme_left"></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr></div> <p> </p> <!--needed--> <div class="clear"> </div> </div> <!--end of #left_main--> <div id="clearfooter"> </div> <div class="style3" id="footer">Copyright © 2010 Streams of Dreams Fly Shop <strong> |</strong> 324 Route 17 North <strong> |</strong> Upper Saddle River, NJ 07458 <strong> |</strong> ph (201) 934-1138 <strong> |</strong> fax (201) 934-1180<br> Open Tuesday through Saturday, closed Sunday, Monday by appointment<br> Mailing list signup • Directions • Contact us <!-- end #wrapper --> <!-- #footer sits outside the #wrapper --> <!--</div>--> <!-- end #wrapper --> </div> </div> </body> </html>

Falken, when I change the extension from html to php it links to the page but shows the source code rather than the form. I thought i could simply change my html pages to php. I think i have forgotten how PHP actually works. Maybe I need to revisit the post I made here to remember. BTW my index page is presently .html maybe thats why? Ant

Well, I got an account on Mailchimp and have the sign up form linked to open a new window on the site. It was pretty easy. i chose what kind of form I wanted and was able to stylize it a bit. Once it was done i copied and pasted the "source code" and added it as a separate html page linked to my pages. I tried saving it as .php but it didn't work for some reason. Falken, thanks for clarifying what my options were and steering me towards the 2 companies. I can actually SEE how these things work and understand it better. Of course it's not actually live and I haven't used mailchimps services yet other than setting up a form etc. Ant

Thanks Falken. I didn't realize mailchip etc had a form that I could use directly on the site. I figured the do it yourself type scripts were going to be out of my league. I just signed up for mailchimp. We'll see how it works. Ant

Can someone help me figure out how to add a newsletter signup link, form, (not sure what it's proper term is)to my website. I have searched and cant seem to pin down exactly what I need. I don't think a simple "email us for our newsletter" link is "correct" That seems easy if you don't have hundreds of requests coming through. Although it also seems like an archaic "too simple" way of doing it Maybe I cant find a straight answer online because I'm not using the right terminology? I have read about companies like Constant Contact, who I assume I will need to use to send the newsletter for me since I cant use regular email etc.for large group emails. But whats the right way to add a newsletter sign-up form? Do the addresses get sent to a company like constant contact? Does the client(website owner) get the list(addresses) and then send the content(newsletter) & list to companies like constant contact for them to send out?? What do these lists look like when they come from a script? Is this all done using scripts? Which is something I really don't understand and have never seen first hand. Thanks for any help on straightening this out? Sorry for all the questions! Ant

Thanks for help guys. I'll see what I can come up with for the homepage that includes a little of both options. Ant

Ok so I guess the spotlight thing is sort of what I mentioned. A blurb, graphic etc that leads to a full story page.