16 replies [Last post]
deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

:scared:

Okay, so I have a site to do. I am experimenting with new ways of bringing in backgrounds into dreamweaver.

So, I created all my div tags n stuff and I wanted to bring in the entire layout image within my wrapper and then just lay all my boxes of content over top of the wrapper image. The problem is whenever i try to bring the image in, its BLANK! The image is a gif, but I already tried a JPEG.
The image is pretty large but I wouldn't think that would be a problem. I also tried slicing it and bringing it in, in pieces, still nothing. Please, someone help me out, what should i do?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 29 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Link? Code? Doctype?

Link? Code? Doctype? Validate? :shrug:
http://csscreator.com/node/3906

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

re: Link? Code? Doctype?

All i know is that the image is a gif from a psd. I am using css and bringing it in as a bg image. I validated my code and its fine.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Dreamweaver has a usefull

Dreamweaver has a usefull tool called Tracing Image, research it. We'll need to "see" your images before we can help you.

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

My code

This is my html document.

---------------------------------------------------

This is my css document, if this well help

#wrapper {
width:1160px;
height:679px;
background-repeat: no-repeat;
}

#middle {
}

#navigation {
}

#content {
}

#footer {
}

#top {
background-image:url(../images/images/RemarkableSelling_(new)newl.gif);
width:1160px;
height:205px;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

deezign21 wrote:This is my

deezign21 wrote:

This is my html document.

<div id="wrapper">
  <div id="top"> </div>
  <div id="middle">
    <div id="navigation"> </div>
    <div id="content"> </div>
  </div>
  <div id="footer"> </div>
</div>

If that's really your whole document it isn't an html document no matter what you say, since it is missing a number of required tags.

We need to see all of your code if we're going to give effective help.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

This is all the html

This is all the html code

Home Page

----------------------------------------------------------------------------------

This is all the css.

#wrapper {
width:1160px;
height:679px;
background-repeat: no-repeat;
}

#middle {
}

#navigation {
}

#content {
}

#footer {
}

#top {
background-image:url(../images/images/RemarkableSelling_(new)newl.gif);
width:1160px;
height:205px;
}
The background images will not show at all.
---------------------------------------------------------------------

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 29 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

The background for #top is

The background for #top is not showing?
And you're 100% sure the path is correct?
Are you trying this is Dreamweaver "Design" view or in a real Browser?
If it's "Design" view, remember that no one is going to navigate to your site in Dreamweaver, so it really doesn't matter how it looks in that. Dreamweaver should only be used as a really expensive text editor and FTP software.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

I tried to view it in the

I tried to view it in the browser and in the design view,but I still get nothing. This is what I have now for my html doc.

Home Page

With extensive experience in working with both custom solutions as well as packaged solutions such as SalesLogix and ACT!, we understand the importance and complexities of architecting a cohesive solution that meets your sales and marketing needs. Businesses, regardless of size, all seek to leverage the appropriate technology while enforcing their business’s best practices. We simplify and demystify that process by offering the right mix of products and services coupled with savvy business know how and ideas that really work.

And what about you?

How do you maintain your customer list? Some companies choose to use Outlook. While others request a Customer Relationship Management (CRM) application such as SalesLogix or ACT!. In any case, the challenge is to leverage this information to its fullest extent. Are you satisfied with your current sales and marketing tools? Are they integrated with your customer management system? Are they used on a consistent basis? Are your email campaigns tired and punch less? Is your messaging timely, relevant, and engaging? This is where we come it. At RemarkableSelling, we offer sales and marketing solutions that work for you. Yes, our tools are loaded with Wow factor. But, it’s not about innovation for the sake of being the technology leader. It’s about making technology work not only for you today, but also for tomorrow.

---------------------------------------------------------------------------------------------------

THis is what I have for my css:

@charset UTF-8;
/* CSS Document */

#wrapper {
width:1160px;
height:679px;
}

#top {
width:1160px;
height:205px;
background-image:url(../images/images/RemarkableSelling_(new)newl.gif);
}

#middle {
background-image:url(../images/images/RemarkableSelling_(new)n-02.gif);
width:1160px;
height:405px;
}

#navigation {
width:350px;
height:400px;
float:left;
}

#content {
height:380px;
width:500px;
float:right;
margin-right:270px;
}

#footer {
background-image:url(../images/images/RemarkableSelling_(new)n-03.gif)
width:1160px;
height:69px;
}

a:link{text-decoration:none;
color:#2f6895;
font:Verdana, Arial, Helvetica, sans-serif;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
color:#c85224;
font:Verdana, Arial, Helvetica, sans-serif;
}
-----------------------------------------------------------------------------------------------
No images show at all. Im pretty sure my paths are correct, there are no errors in my code validation at all. I was beginning to think that Dreamweaver has a built in function that doesn't allow someone to bring in images that are a certain size, but that is impossible right? It wouldn't make sense at all, but I really don't understand why this is happening. It happened to my once before, but I don't remember how I got it to work. I hope someone can help me.

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

I tried to view it in the

I tried to view it in the browser and in the design view,but I still get nothing. This is what I have now for my html doc.

Home Page

With extensive experience in working with both custom solutions as well as packaged solutions such as SalesLogix and ACT!, we understand the importance and complexities of architecting a cohesive solution that meets your sales and marketing needs. Businesses, regardless of size, all seek to leverage the appropriate technology while enforcing their business’s best practices. We simplify and demystify that process by offering the right mix of products and services coupled with savvy business know how and ideas that really work.

And what about you?

How do you maintain your customer list? Some companies choose to use Outlook. While others request a Customer Relationship Management (CRM) application such as SalesLogix or ACT!. In any case, the challenge is to leverage this information to its fullest extent. Are you satisfied with your current sales and marketing tools? Are they integrated with your customer management system? Are they used on a consistent basis? Are your email campaigns tired and punch less? Is your messaging timely, relevant, and engaging? This is where we come it. At RemarkableSelling, we offer sales and marketing solutions that work for you. Yes, our tools are loaded with Wow factor. But, it’s not about innovation for the sake of being the technology leader. It’s about making technology work not only for you today, but also for tomorrow.

---------------------------------------------------------------------------------------------------

THis is what I have for my css:

@charset UTF-8;
/* CSS Document */

#wrapper {
width:1160px;
height:679px;
}

#top {
width:1160px;
height:205px;
background-image:url(../images/images/RemarkableSelling_(new)newl.gif);
}

#middle {
background-image:url(../images/images/RemarkableSelling_(new)n-02.gif);
width:1160px;
height:405px;
}

#navigation {
width:350px;
height:400px;
float:left;
}

#content {
height:380px;
width:500px;
float:right;
margin-right:270px;
}

#footer {
background-image:url(../images/images/RemarkableSelling_(new)n-03.gif)
width:1160px;
height:69px;
}

a:link{text-decoration:none;
color:#2f6895;
font:Verdana, Arial, Helvetica, sans-serif;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
color:#c85224;
font:Verdana, Arial, Helvetica, sans-serif;
}
-----------------------------------------------------------------------------------------------
No images show at all. Im pretty sure my paths are correct, there are no errors in my code validation at all. I was beginning to think that Dreamweaver has a built in function that doesn't allow someone to bring in images that are a certain size, but that is impossible right? It wouldn't make sense at all, but I really don't understand why this is happening. It happened to my once before, but I don't remember how I got it to work. I hope someone can help me.

I have attached the image that I have sliced and tried to use in this document, If there are any other files that you may need to see in order to help, please let me know.

AttachmentSize
RemarkableSelling_(new).gif 48.2 KB
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I just recreated and cleaned

I just recreated and cleaned up your CSS/HTML, saved a copy of the picture that you linked, and set that single image to be the background for each of your DIV's in the CSS.. everything works fine when I see it. Of course, I get your entire image stretched in different ways, but I am getting the pictures to display.

Your #footer DIV is missing a semi-colon after your background-image line however.

Are you certain you are naming everything correctly? Why don't you rename the pics to someting more simple.. "top,gif", "middle.gif", "footer.gif".. at least that will be a bit easier to ensure everything is spelled correctly.

Also, you have tried to view your html file in something other than Dreamweaver? (I've never used Dreamweaver, but I mean to actually double-click the html file and letting it open in your web browser, as opposed to any viewer built into Dreamweaver)

I cleaned things up just so I could see everything better, but I didn't have to change a thing besides that missing semi-colon for images to be visible in every div.

EDIT:
Also, since you are using a wrapper DIV, why don't you just set your un-cut image as the background to that DIV, and then set no background for the rest of them? I just tried that, and it works as well.. and is technically less lines of code!

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

Thanks for the advice I am

Thanks for the advice I am going to go through and rename all my images. To comment on your tip about using the entire image as the wrapper background, I actually started out that way, but when the image didn't load I thought it was because I was using that method. I will try to get this thing to work. Thanks again!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

No problem at all! I hope

No problem at all! I hope you get it working..

I set the wrapper background to the image and it worked perfectly. Looks nice too! Good luck with it! :thumbsup:

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

THANKS!!!

OMG! All I had to do was change the name of the image to a simpler one. Thanks a lot for you suggestions. Whenever I get this thing online I will drop you a line so you can see how it turns out.

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

You really need to be

You really need to be careful with stuff like this until you understand how to write standards valid markup

<body tracingsrc="images/RemarkableSelling_(new)newl.gif" tracingopacity="100" >

This is an abomination Smile and must never see the light of day served up to browsers, it's another good reason why wysiwyg editors such as DW are not liked much, I can only hope that DW has some ingenious method of stripping that set of attributes out from a page before its set live.

Also note the construction of the image file names, I can't recall off the top of my head what characters are allowed in file names but know that commas are allowed and they can cause enough problems in DB if not caught in advance I would have thought it highly likely that having () in a file name would throw things off, look at the method of calling the image surrounded as it is in braces to start with.

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

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

I wish...

I know, my OCD often makes me think of very complicated file names. I need to stop doing that lol. I don't really like DW that much but I have never used any other app. I really think there should be a more user friendly web app. One that could be similar to InDesign, where you can move boxes of content freely. But I really don't much about web so they probably makes as simple as they can within they're restrictions.

deezign21
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2009-02-25
Posts: 10
Points: 0

I wish...

I know, my OCD often makes me think of very complicated file names. I need to stop doing that lol. I don't really like DW that much but I have never used any other app. I really think there should be a more user friendly web app. One that could be similar to InDesign, where you can move boxes of content freely. But I really don't much about web but I would imagine developers probably make it as simple as they can within they're restrictions of course. It would probably be extremely difficult to develop something like im talking about, but I bet it would be any graphic designers' dream...one day