PDA

View Full Version : Banner fitting problem


Eliteoomph
10-22-2010, 05:50 AM
Hey guys. I am working on a banner. My problem is I have a image banner that has a gradient effect. I would like the gradient effect to stretch the length of the screen. My idea was to create 2 duplicate images on the gradient to put on either side of my image banner and then have those images repeat as the screen size expands... however I have not been able to get this to work. I am new at this and do not know exactly what I am doing.
http://www.montgomerydentist.com (http://www.montgomerydentist.com/) is the site if you would like to see what my problem is. Any help would be greatly appreciated.

edbr
10-22-2010, 06:08 AM
use a 1px slice of your gradient image use it as a background div use background image repaet although it should repeat by default

Corrosive
10-22-2010, 06:13 AM
Yes, if you follow eds method just set the repeat as the background to the body tag and then you can lay the banner over the top (as part of your actual site structure) to get the effect you want.

Eliteoomph
10-22-2010, 06:21 AM
This is the way I currently have it.

How should I change the code from here?

<div class="container">
<div class="header"><!-- end .header -->
<div align="center"><img src="images/side gradiant.jpg"background-repeat: repeat; width="1" height="192" /><img src="images/MD Header.jpg" width="700" height="192" /><img src="images/side gradiant.jpg" width="1" height="192" />

Corrosive
10-22-2010, 06:25 AM
Try view >> source on the code for this; http://www.yotocreative.co.uk we have the same kind of set-up. Pay attention to how we have applied the body styles in the style sheet.

gentleone
10-22-2010, 06:28 AM
This is the way I currently have it.

How should I change the code from here?

<div class="container">
<div class="header"><!-- end .header -->
<div align="center"><img src="images/side gradiant.jpg"background-repeat: repeat; width="1" height="192" /><img src="images/MD Header.jpg" width="700" height="192" /><img src="images/side gradiant.jpg" width="1" height="192" />

You'll have to slice your gradient image in Photoshop or whatever you using and use CSS (background property) to position it. Something like this.
CSS:

body {background: url(images/side-gradiant.jpg) repeat-x}


And it's also recommended not to use spaces in your file names. You can get troubles with that when FTP-ing to your server.

Eliteoomph
10-22-2010, 06:42 AM
Corrosive I appreciate that.. the site looks great and yes that is exactly what I am trying to do but I couldn't find the code referencing the banner in there. This is no doubt due to my own ignorance...

Gentleone, I have taking the image down to 1px wide and 192 height using photoshop.
Where exactly would I insert that code?

I am sorry guys for my ignorance... I am trying to learn this stuff as fast as I can but I feel a bit overwhelmed at the moment..

Corrosive
10-22-2010, 06:51 AM
The code you need to look at in our site is the main3.css file (yes, I got through three!) That has the code that styles the HTML content.

Why the stress? You have all the time in the world to learn this. Don't get stressed by it or you'll end up not enjoying the learning experience.

Eliteoomph
10-22-2010, 06:59 AM
Because I have been working on this for the last 5 hours...
I even started a new blank html doc and inserted an image and tried to get it to repeat and couldn't...
What is so frustrating is the first time I started on the site and inserted and images it repeated... and I had to switch it to no repeat... it was so simple...
but now for the life of me I can't get it to work.

I right clicked on your website and clicked view source...
I don't know how to get to your main3.css file

And here is another silly question... if I am using css coding in my html file do I have to have a .css file also for the website? right now I have started working on a spry menu bar also and it my default creates all the nessesary files but I just didn't know if I was suppose to have any .css files also...

Thanks for bearing with me here

Corrosive
10-22-2010, 07:08 AM
OK, five hours ain't that bad for a beginner. Sites used to take me ages! As long as you aren't on a deadline you can chill a bit. I know it is frustrating but it is a great feeling when it all comes together. Enjoy it because eventually you'll know what you are doing and that feeling of achievement comes round less and less often.

Anyhoo, lecture over (sorry 'bout that).

Here is a link straight to my stlesheet; http://www.yotocreative.co.uk/css/main3.css and yes you should have two principal files for a website. The HTML file (content) and the CSS file (styles). If you need a quick explanation then try this; http://corrosiveonline.co.uk/tutorials_css_explained.php

Eliteoomph
10-22-2010, 07:16 AM
I am guessing this is what I am suppose to be looking at?
body {
background: #ccc url(../images/top-grad4.jpg) repeat-x scroll center top;

and also is that suppose to go in my css file?

thanks for the link to the tutorial... I will need that

and yes I do sort of have a deadline I need to show this guy something by the beginning of next week.
and the 5 hours I spent was just on trying to make the image repeat...

Corrosive
10-22-2010, 07:29 AM
Yes, that's the right bit.

I have just found this for you which may be easier than going through someone else's code; http://www.cssgirl.com/resources/2008/06/07/create-full-width-header-footer-with-centered-content-using-css/ Looks like a good method.

I thought this was a practice site or something. Now I understand the stress! You don't need me to tell you that offering to build a website for someone when you don't know what you are doing is a bit silly right?

Hope that tutorial helps & good luck.

Eliteoomph
10-22-2010, 07:34 AM
With the sites I normally build I just use Photoshop to design everything and then dreamweaver to lay it out. I have done some flash intro's as well but never worked with CSS. But with this one I need to have drop down menu's and I want to make the banner stretch right. I am normally pretty good at figuring this sort of stuff out on my own but tonight just has me frustrated...

Corrosive
10-22-2010, 07:43 AM
With the sites I normally build I just use Photoshop to design everything and then dreamweaver to lay it out.

You mean 'export as HTML' in Photoshop don't you :(

Hopefully that tutorial will help you get the method for full width banner anyway.

Eliteoomph
10-22-2010, 07:44 AM
that didn't work...

Shouldn't I just be able to create a new blank page and insert an image and make it repeat?

shouldn't that be easy to do...

Eliteoomph
10-22-2010, 07:48 AM
Basically I would just create everything in images and then use dreamweaver to arrange the content, link everything and do a little SEO for the spiders and then publish.

Corrosive
10-22-2010, 07:52 AM
No, you shouldn't be able to do it with an inserted image. Inserted images are only really for images you want included in your content. The background to a banner is an image for the look of a site so it goes in the CSS style sheet. There you can set it as a background to the body tag and to repeat and it doesn't interfere with the content. You then create a wrapper or container div to center the rest of your layout and this appears over the top of the background sliced image. Put a banner div in set your banner as a background as well (using CSS again) and it gives the impression that the banner stretches all the way across.

Corrosive
10-22-2010, 07:52 AM
Basically I would just create everything in images and then use dreamweaver to arrange the content, link everything and do a little SEO for the spiders and then publish.

Then you shouldn't be charging people for websites.

Eliteoomph
10-22-2010, 07:55 AM
everyone has to start somewhere...
if he doesn't like it he doesn't have to pay for it...

Eliteoomph
10-22-2010, 07:57 AM
No, you shouldn't be able to do it with an inserted image. Inserted images are only really for images you want included in your content. The background to a banner is an image for the look of a site so it goes in the CSS style sheet. There you can set it as a background to the body tag and to repeat and it doesn't interfere with the content. You then create a wrapper or container div to center the rest of your layout and this appears over the top of the background sliced image. Put a banner div in set your banner as a background as well (using CSS again) and it gives the impression that the banner stretches all the way across.

by inserting an image I just mean inserting the banner image. like I said the first time I started working on this it automatically repeated the image... and I didn't do anything with a css file... Ed said something also about it should do it automatically... I feel like I am missing something simple here...

Eliteoomph
10-22-2010, 07:59 AM
bigcitymarketing.net
is a site I just did...
I thought it turned out pretty good
especially the flash since it was the first time I had ever worked with it before...

Eliteoomph
10-22-2010, 08:15 AM
I deleted everything and am starting again from scratch...

Corrosive
10-22-2010, 08:15 AM
everyone has to start somewhere...
if he doesn't like it he doesn't have to pay for it...

Yes, everyone has to start somewhere... With learning their trade. If I come round your house to fix your central heating or you bring your car to me at my garage to be fixed and I say 'we'll I've not done the best job but everyone has to start somewhere', what would you say? Then, of course, my heating breaks down or the brakes fail on my car...

As for Big City Marketing you have already said that you 'do a little SEO for the spiders'. I agree that, on the surface, the site looks OK but the code tells a different story;

Your front page is a flash intro which, if handled correctly, can be OK but still isn't ideal for SEO. If you think a few keywords will cure it then you need to understand that it has been six years since Search Engines even cared about keywords meta tags. So, you have fallen at the first hurdle there.

<h1 align="center"><img src="BCM Header.jpg" width="800" height="200" /></h1>
<h1 align="center" class="k"> <a href="Home.html"><img src="Home Button.jpg" width="175" height="59" border="0" /></a><a href="EasySteps.html"><img src="StartHere.jpg" width="175" height="59" border="0" /></a><a href="http://fs3.formsite.com/Eliteoomph/BigCityMarketing/index.html"><img src="Contactus.jpg" width="175" height="59" border="0" /></a><a href="Aboutus.html"><img src="Aboutus.jpg" width="175" height="59" border="0" /></a></h1>

Your h1 tags, the MOST important on the page in terms of SEO contain no HTML text so you have already put the site owner at a disadvantage against their competitiors. You should also only ever have one h1 tag.

<p align="center" class="text"><span class="red">Welcome to Big City Marketing!</span></p>
<p class="font2">If you are here I guess you are wondering, &ldquo;<strong>What is this free marketing thing all about</strong>&rdquo; and &ldquo;<strong>Is it really possible</strong>&rdquo; and &ldquo;<strong>if it is possible what is the catch</strong>&rdquo;?<br />
Well I have good news! Not only is it <strong>possible</strong> but also there is <strong>NO catch</strong>. </p>

Your two key phrases on the page that probably should be your h1 and h2 tags are just paragraphs so, SEO fail again.

In fact the rest of your page is all paragraphs!

To achieve spacing you have used;

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Which puts style and content firmly together. This goes against the very essence of W3 standards and the benchmark for professional web design.

Also, you don't use a separate stylesheet so page weight is increased, slowing download times and, you guessed it, harming SEO again.

I'm not going to go on as I have my own work to do but, yes, your designs are OK but you shouldn't be selling sub-standard goods to unwitting customers. Imagine if it was one of your family getting ripped off!

gentleone
10-22-2010, 08:18 AM
Basically I would just create everything in images and then use dreamweaver to arrange the content, link everything and do a little SEO for the spiders and then publish.

If it was as simple like that, we would live in a perfect world.

In the real world you don't underestimate the whole process of designing and developing a website. There are so many things to take into consideration and to achieve to deliver a website that works according to the fundamental basics.

Eliteoomph
10-22-2010, 08:26 AM
thanks corrosive for your constructive criticism...
It is my website so I don't think you will have to worry about anyone being affected other then myself...

Gentleone, yeah you got that right... but I still don't understand why it worked at first but now doesn't... I will keep messing with it until I get it figured out and post my results.

Thank you all for your time and help

Corrosive
10-22-2010, 08:47 AM
thanks corrosive for your constructive criticism...
It is my website so I don't think you will have to worry about anyone being affected other then myself...



Then at least there are no victims in this case but you are still selling websites. I have probably come across as a total d*ck but I am passionate about what I do and I have to compete in a market where people think it is OK to knock up a badly coded site in a few hours. My sites take a few days at least and I get undercut for doing it properly. I guess I should just join 'em if I can't beat 'em. ;-)

Eliteoomph
10-22-2010, 08:50 AM
I am just trying to help a friend out man...
It isn't like I am doing this for a living over here...
I wasn't born understanding css...
I have to start somewhere

Eliteoomph
10-22-2010, 08:53 AM
I am starting to understand it a lot more though...
It appears to me that dreamweaver includes the style sheet in the html doc...
Is that correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 0px;
padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-repeat: repeat;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background: #6F7D94;
width: 100%;
background-repeat: repeat;
}

/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {
padding: 0px 0;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #6F7D94;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
<div class="header"><!-- end .header --></div>
<div style="background-repeat:repeat-x"
<div align="center"><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /><img src="images/MD Header.jpg" width="700" height="192" alt="header" longdesc="images/MD Header.jpg" /><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /></div>
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the liquid layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Layout</h2>
<p>Since this is a one-column layout, the .content is not floated. </p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<!-- end .content --></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

Corrosive
10-22-2010, 09:06 AM
Yes, that is correct. The inbuilt DW templates give a good starting guide for beginners but the styles are all in one page.

If you create a separate file called styles.css (or whatever you want really), put that in a folder called css in your site root and then link to it between the head tags of your page;

<link href="css/styles.css" rel="stylesheet" type="text/css">

Then you control your whole website layout from one file and can make site-wide changes (hence the 'cascading' bit).

To get your banner effect you can add a repeating image to your body tag styles;

body {background: #ccc url(your-image.jpg) repeat-x scroll center top;}

Once this is done you will see your gradient image stretch right across the view port window.

Next you need to create a container/wrapper div to centre your website content and then put a div in that with your banner as a background.

It will look like the banner stretches full width of the page whilst your actual website content sits in the middle.

Eliteoomph
10-22-2010, 09:17 AM
I pasted the code you gave me towards the top..
is this the right spot?

Also I have a container div toward the bottom where it shows my class header and all links... is this part right?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
background: #ccc url(images/MD Header.jpg) repeat-x scroll center top;}
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 0px;
padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-repeat: repeat;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background: #6F7D94;
width: 100%;
background-repeat: repeat;
}

/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {
padding: 0px 0;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

.headerbg {
position:relative;
margin: 0 auto;
width:800px;
}

/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #6F7D94;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
<div class="header"> <div align="center"><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /><img src="images/MD Header.jpg" width="700" height="192" alt="header" longdesc="images/MD Header.jpg" /><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /></div></div>
<div style="background-repeat:repeat-x">

<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the liquid layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
<h2>Layout</h2>
<p>Since this is a one-column layout, the .content is not floated. </p>
<h3>Logo Replacement</h3>
<p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<!-- end .content --></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

Corrosive
10-22-2010, 02:39 PM
Yeah, that looks good.

Eliteoomph
10-22-2010, 03:02 PM
www.montgomerydoctors.com

doesn't look good here though

Corrosive
10-22-2010, 03:10 PM
Broken link :(

Eliteoomph
10-22-2010, 03:13 PM
sorry I am tired.. not much sleep
montgomerydentist.com

Corrosive
10-22-2010, 03:58 PM
Well, your background for the body tag should be your thin, repeating strip of the gradient and not your banner.

Eliteoomph
10-22-2010, 04:00 PM
ok changed that now what?

Corrosive
10-22-2010, 04:15 PM
Your container is obscuring the body tag. If you want that layout then add;

background: #ccc url(images/side gradiant.jpg) repeat-x scroll center top;

...to your container styles instead.

Eliteoomph
10-22-2010, 07:59 PM
ok is this code correct?


<div class="container">
<div style background: #ccc url(images/side gradiant.jpg) repeat-x scroll center top;
<div class="header"> <div align="center"><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /><img src="images/MD Header.jpg" width="700" height="192" alt="header" longdesc="images/MD Header.jpg" /><img src="images/side gradiant.jpg" width="1" height="192" alt="side" /></div></div>
<div style="background-repeat:repeat-x">

still haven't seen any difference since I have been editing the code at all...

gentleone
10-22-2010, 08:07 PM
Corrosive meant to the .container styles in your CSS, not in the HTML.

Eliteoomph
10-22-2010, 08:11 PM
ok so is this right?
still no changes in the appearance...

.container {

background: #ccc url(images/side gradiant.jpg) repeat-x scroll center top;
width: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

gentleone
10-22-2010, 08:21 PM
okay, and now remove the background property from .header in your CSS, because that's the gray background color what covers now your gradient slice.
Remove this from .header:

background: #6F7D94;

Eliteoomph
10-22-2010, 08:29 PM
ok background color is now gone but the image still isn't repeating...

gentleone
10-22-2010, 08:37 PM
Okay we gonna do it differently. Remove that background property from your .container in your CSS. We gonna set it as background for the header.

Replace your whole .header with the one below:

.header {
width: 100%;
height: 192px;
background: url(images/side gradiant.jpg) repeat-x;
}

Eliteoomph
10-22-2010, 08:42 PM
ok done..
now what
btw thanks for helping me!

gentleone
10-22-2010, 08:48 PM
I see... still nothing... lets clean op your HTML. I see twice in your header div the following div tag. Delete them both.
<div align="center"><img src="images/side gradiant.jpg" width="1" height="192" alt="side" />

Eliteoomph
10-22-2010, 08:50 PM
I I Captain!
well now it is left aligned...
so at least it is something different...

gentleone
10-22-2010, 09:05 PM
also delete a closing div tag </div> and that <div style=etc
</div>
<div style="background-repeat:repeat-x">

Eliteoomph
10-22-2010, 09:10 PM
ok deleted...

gentleone
10-22-2010, 09:34 PM
I looked and looked, but can't for the life of me see what's causing the image not to repeat... i call it a day and will look tomorrow at it again with fresh eyes if you didn't found the solution yet.

Eliteoomph
10-22-2010, 09:40 PM
ok buddy...
I really appreciate all your help...
at least I don't feel quite so crazy for spending so much time on it and not being able to get it to work...

Anyone else think they have the skills to tackle this one? :wink:

edbr
10-23-2010, 01:31 AM
i would rename side gradiant.jpg to side-gradiant.jpg

Eliteoomph
10-23-2010, 02:11 AM
ok i renamed it

Thanks

Eliteoomph
10-23-2010, 02:25 AM
I renamed it in the .container and it didn't do anything but then i saw it was referenced in the .header code and renamed it and it appears to BE WORKING!!!
Thanks Ed... I new it was something simple
Although I am kinda glad it took some trial and error because I learned a lot
I think that is a couple times now that you have helped me out!
I appreciate it!

gentleone
10-23-2010, 09:40 AM
Glad it's all sorted out! I was also a bit bothered by that space in the file name, but didn't know that it would cause this no repeating.

You can delete by the way that background property in .container CSS. There's no need to have it double.

Eliteoomph
10-25-2010, 01:04 AM
I had a feeling that it would be something simple like that.
I wanted the color on the side of my spry menu bar to stretch across also so I just made the body color the same and it caused the effect that I was looking for. Is this the correct way to do this? Also, for the content in the page would you suggest I use tables?

Eliteoomph
10-25-2010, 01:10 AM
goodness.. now the spry menu bar isn't appearing right.... it did the same thing before but it was because it was not linked right... see anything that jumps out at you as to why it would be doing this?

Eliteoomph
10-25-2010, 01:44 AM
update: I got it working but honestly not sure how...

Corrosive
10-25-2010, 06:02 AM
Would you suggest I use tables?

No, not for content unless it is tabular data.

Eliteoomph
10-25-2010, 01:40 PM
Is there a way that I can just use photoshop to design the rest of the page but then still input whatever html I need to for SEO?

Corrosive
10-25-2010, 01:42 PM
Yes, we do all of our designs in Photoshop and then break them down into component images and rebuild in Dreamweaver, adding the HTML text required for good page ranking.

Eliteoomph
10-25-2010, 02:52 PM
ok great! glad to know I am thinking in the right direction!
Thanks