close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Rounded corner template redesign issues

Thread began 2/26/2010 2:13 pm by dianadolce243401 | Last modified 3/02/2010 8:03 pm by dianadolce243401 | 1555 views | 7 replies |

dianadolce243401

Rounded corner template redesign issues

Hi everyone,

I am trying to use the rounded corner template for a new site. Followed all the instructions for creating new images in FW CS4 and then used CSSSculptor to create a new template. Main changes that I made to the template images were the width of the site and making the headerBackground not repeat. Now many things are going wrong.

1. When ever I have tried to use the rounded corner template and upload, site only shows the text and no images in IE7 (haven't checked this in other browsers though). I have checked and rechecked the path, looked at the path in other sites I have done, and I am perplexed!!! Here are links to the site and css code....I know I am just not seeing the problem.
index3.html,
screen.css

2. Images do appear in design or split view in DW CS4.

3. To show you what I see in DW here is a screenshot,
bhs_siteImage.jpg

4. See the darker area in the shadow effect under the bhs_logo image. It is not there in FW so it looks like something is repeating, but I don't have the backgrounds set to repeat in the header area.

4. Both the footerTop.png and footerBottom.png will not show at all.

I have tried, padding, positions, margins, visibility everyway possible to make this work. Any suggestions for my issues?

Warm Regards,
Diana

Sign in to reply to this post

Eric Mittman

I think the first thing is that there is a problem with the css file you are linking to, when I check the source it is looking for the css file here:

screen.css

This page returns a 404 so it is not finding the css there. It looks like you need to add bhs/ to this path just before the CSSSculptor part.

I think once you get the paths to the css correct it will be much easier to look into the other issues you are experiencing. Please make this update and get back to us with the result.

Sign in to reply to this post

dianadolce243401

The problem with only text showing is a dreamweaver testing server issue that I think I am on the path to figuring it out.

But in regards to the other problems, the slight repeat shadow at top and the disappearing footer images, here a link that will work.....and it shows the images.

Thank you............Diana

index3.html

Here is the css code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
background-color: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
}
h1 {
color: #1A1976;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
h2 {
color: #1A1976;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
a, a:link {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color:#6CF;
text-decoration: none;
}
a:hover {
color:#FC0;
text-decoration: underline;
}
a:focus {}
a:active {
color: #ffffff;
}
#outerWrapper {
margin: 0 auto 0 auto;
padding-top: 0px;
text-align: left;
width: 969px;
}
#outerWrapper #headerBackground {
background-image: url("../BHS2_images/bhs_headerTop.png");
background-repeat: no-repeat;
background-position: top;
}
#outerWrapper #headerBackground #headerTop {
background-image: url("../BHS2_images/bhs_logo.png");
background-position: center;
background-repeat: no-repeat;
height: 168px;
}
#outerWrapper #headerBackground #headerBottom {
background-image: url("../BHS2_images/bhs_headBottom.png");
background-position: center bottom;
background-repeat: no-repeat;
}
#outerWrapper #contentWrapper {
background-image: url("../BHS2_images/bhs_contentbg.png");
background-repeat: repeat-y;
background-position: center;
overflow: hidden;
padding-left: 55px;
padding-right: 14px;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 14px 8px 14px 12px;
width: 209px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #306;
line-height: 14px;
}

#outerWrapper #contentWrapper #content {
margin: 0 0 0 260px;
padding: 14px 4px 14px 0px;
width: 590px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #306;
line-height: 16px;
}
#outerWrapper #contentWrapper #content a {
color:#00F;
text-decoration:underline;
}
#outerWrapper #contentWrapper #clearFloat {
clear: left;
display: block;
}
#outerWrapper #footerBackground #footerBottom #footerTop {
background-image: url("../BHS2_images/Bbhs_footerTop.png");
background-repeat: no-repeat;
}
#outerWrapper #footerBackground {
background-image: url("../BHS2_images/bhs_footerBG.png");
background-repeat: repeat-y;
color: #ffffff;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
}
#outerWrapper #footerBackground #footerBottom {
background-image: url("../BHS2_images/bhs_footerBottom.png");
background-repeat: no-repeat;
}

Sign in to reply to this post

Eric Mittman

I noticed that the footer looked like it had a gap just before it. When I viewed the source it looks like a <p> tag is used around the links. This <p> tag is what is causing the footer to have the gap, if you remove it things seem to match up.

Please post back and let us know if you have any further questions or troubles and we will help you with what we can.

Sign in to reply to this post

neilo

The headerTop div isn't tall enough to fit the (3) div back-ground images without a 10px overlap - this is causing the darker strip in the drop-shadow effect (the drop shadow being semi-transparent).

Increase the height of the headerTop div and position its bhs_logo.png background image correctly on the y-coordinate:

#outerWrapper #headerBackground #headerTop {
background-image: url(../BHS2_images/bhs_logo.png);
background-position: center 23px; /* position the y-coordinate */
background-repeat: no-repeat;
height: 178px; /* increase from 168px */
}

This should fix the header bit.

Sign in to reply to this post

dianadolce243401

Thanks Neil,

That fixed the header perfectly. I am still working on the footer, sometimes the bhs_footerTop.png shows up, but the bhs_footerBG.png is not staying put and repeating behind and below the bhs_footerBottom.png. Any other ideas?

I have tried implementing what you did for the header, along with padding and margin properties as well, but no luck. I am not a CSS goddess, but wanting to understand the CSS Sculptor better. How long have you been using Sculptor?

Thanks for your help Neil, you are a life saver,

Diana

Sign in to reply to this post

neilo

Hi Diana,

I did have a look at the footer the first time round, but must admit that I found the way that the html and css was formatted a bit confusing, so snuck off without mentioning it. I'm not quite sure what Sculptor had in mind, the footer divs seem a bit tangled up.

If it were me, I would recreate the footer divs in a more logical (to my mind) way. From the html of the page you linked to, I would change the last few lines (from line 57 to the end) from:

<br id="clearFloat" />
</div>
<div id="footerBackground">
<p><a href="">HOMEPAGE</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">UPDATE FORM</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">MAIL INFO</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">PHOTO GALLERY </a></p>
<div id="footerBottom">
<div id="footerTop">

</div>
</div>
</div>
</div>

</body>
</html>


To:

</div>
<div id="footerTop">&nbsp;</div>
<div id="footerMiddle"><a href="">HOMEPAGE</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">UPDATE FORM</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">MAIL INFO</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">PHOTO GALLERY </a></div>
<div id="footerBottom">&nbsp;</div>
</div>
</body>
</html>



For me, 'footerTop', footerMiddle' and 'footerBottom' would make future editing a lot easier.

And in the screen.css stylesheet, to match the new divs, I would therefore replace the last three rules:

#outerWrapper #footerBackground #footerBottom #footerTop {
background-image: url("../BHS2_images/Bbhs_footerTop.png");
background-repeat: no-repeat;
}
#outerWrapper #footerBackground {
background-image: url("../BHS2_images/bhs_footerBG.png");
background-repeat: repeat-y;
color: #ffffff;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
}
#outerWrapper #footerBackground #footerBottom {
background-image: url("../BHS2_images/bhs_footerBottom.png");
background-repeat: no-repeat;
}


with:

#footerTop {
height:28px;
background-image: url(../BHS2_images/bhs_footerTop.png);
background-repeat: no-repeat;
background-position: center;
}
#footerMiddle {
height:30px;
background-image: url(../BHS2_images/bhs_footerBG.png);
background-repeat: repeat-y;
background-position: center;
text-align: center;
padding-top: 10px;
}
#footerBottom {
height:56px;
background-image: url(../BHS2_images/bhs_footerBottom.png);
background-repeat: no-repeat;
background-position: center top;
}



Sorry this isn't too helpful from a learning point of view, but if you look at the new html code and the new css rules, you can see that it's a bit easier to see what's what.

I've had Sculptor for quite a while, but now mainly make my pages and css from scratch (if I'm not in a hurry) - as it helps me understand what can be done with css. It (CSS Sculptor) is a great help if you're starting out with css, especially when you have it write the explanatory comments along with the code.

Sign in to reply to this post

dianadolce243401

Yes, Neil, it was messed up and confusing. I was trying to rework the CSScultpor code and felt it was not making sense the way the template had it laid out. So much easier to work with the way you suggested and using less code too.

I learned CSS over 10 years ago before it was compatible with all browsers and before the Big WC3 stepped in. Now my clients want tableless, so I am back relearning and using CSS other than text styles. Keeps me on my toes as there is so much more to CSS now. Aaaauggg! I must admit, I do like it!

Thanks again to my wonderful friend from England...............

All the best,

Diana

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...