Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Tiling of background image.

Reply
Thread Tools

Tiling of background image.

 
 
Shelly
Guest
Posts: n/a
 
      12-04-2007
Here is the URL:
www.sheldonlg.com/css.htm

The problem is this. Without the <div "index-01" ></div>, the green
background image from the #navWrapper does not tile. It shouldn't. Once I
put in that div, it tiles in the background. The index-01 is:

#index-01 {
position:relative;
width:900px;
height:132px;
background-image: url(http://www.thenursebook.com/images/index_01.gif);
}

If I remove the height: 132px; then it doesn't tile, but the image doesn't
appear either.



 
Reply With Quote
 
 
 
 
Shelly
Guest
Posts: n/a
 
      12-04-2007
Shelly wrote:
> Here is the URL:
> www.sheldonlg.com/css.htm
>
> The problem is this. Without the <div "index-01" ></div>, the green
> background image from the #navWrapper does not tile. It shouldn't. Once I
> put in that div, it tiles in the background. The index-01 is:
>
> #index-01 {
> position:relative;
> width:900px;
> height:132px;
> background-image:
> url(http://www.thenursebook.com/images/index_01.gif); }
>
> If I remove the height: 132px; then it doesn't tile, but the image
> doesn't appear either.


When I put in the missing </div> in my example, it still tiles in IE, but
not in FF. OK, so this is an IE problem. How do I fix this?


 
Reply With Quote
 
 
 
 
Shelly
Guest
Posts: n/a
 
      12-04-2007
Shelly wrote:
> Shelly wrote:
>> Here is the URL:
>> www.sheldonlg.com/css.htm
>>
>> The problem is this. Without the <div "index-01" ></div>, the green
>> background image from the #navWrapper does not tile. It shouldn't.
>> Once I put in that div, it tiles in the background. The index-01
>> is: #index-01 {
>> position:relative;
>> width:900px;
>> height:132px;
>> background-image:
>> url(http://www.thenursebook.com/images/index_01.gif); }
>>
>> If I remove the height: 132px; then it doesn't tile, but the image
>> doesn't appear either.

>
> When I put in the missing </div> in my example, it still tiles in IE,
> but not in FF. OK, so this is an IE problem. How do I fix this?


Well, I fixed it. I commented out the "padding: 0.5em 0em;" line in the
#navMain ul style. I remembered that IE seems to have trouble with padding.


 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      12-04-2007
Shelly wrote:
>
> www.sheldonlg.com/css.htm
>
> The problem is this. Without the <div "index-01" ></div>, the green
> background image from the #navWrapper does not tile. It shouldn't.


It shouldn't *not* tile? I think you misstated what you perceive to be
the problem.

Regardless, your HTML is invalid, so you can't expect any browser to
give you what you want.
http://validator.w3.org/check?verbos....com%2Fcss.htm

Fix your errors and try again.
- Your stylesheet needs to be inside the <head>
- <style> is missing the required type attribute
- You haven't closed all your divs

BTW, you should be using a strict doctype, not transitional.

> #index-01 {
> height:132px;
> background-image: url(http://www.thenursebook.com/images/index_01.gif);
> }
>
> If I remove the height: 132px; then it doesn't tile, but the image doesn't
> appear either.


Your html:
<div id="index-01"></div>

It's an empty element, which means it has no height, so there is no
space for a background. As it should be.

You seem to be hacking away at CSS without any comprehension of how it
is *supposed* to work. Get a book, or read the specs at w3c.org.

--
Berg
 
Reply With Quote
 
Shelly
Guest
Posts: n/a
 
      12-04-2007
Bergamot wrote:
> Shelly wrote:
>>
>> www.sheldonlg.com/css.htm
>>
>> The problem is this. Without the <div "index-01" ></div>, the green
>> background image from the #navWrapper does not tile. It shouldn't.

>
> It shouldn't *not* tile? I think you misstated what you perceive to be
> the problem.


It shouldn't tile.

> Regardless, your HTML is invalid, so you can't expect any browser to
> give you what you want.
> http://validator.w3.org/check?verbos....com%2Fcss.htm
>
> Fix your errors and try again.
> - Your stylesheet needs to be inside the <head>


I made a mistake in placing it here in the file I prepared for this group.
In the actual, it is in the <head>

> - <style> is missing the required type attribute


OK

> - You haven't closed all your divs


I caught that one about an hour ago.

>
> BTW, you should be using a strict doctype, not transitional.
>
>> #index-01 {
>> height:132px;
>> background-image:
>> url(http://www.thenursebook.com/images/index_01.gif); }
>>
>> If I remove the height: 132px; then it doesn't tile, but the image
>> doesn't appear either.

>
> Your html:
> <div id="index-01"></div>


The #index-01 has a background-image. It does display.

>
> It's an empty element, which means it has no height, so there is no
> space for a background. As it should be.


Please expand.

>
> You seem to be hacking away at CSS without any comprehension of how it
> is *supposed* to work. Get a book, or read the specs at w3c.org.


I didn't write this CSS and I am a php, not a CSS or html, person. I really
am just hacking away because I was asked to "fix" this and I am doing the
best I can without taking the extensive time to develop a whole new area of
expertise.


 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      12-04-2007
Shelly wrote:
> Bergamot wrote:
>> Shelly wrote:
>>>
>>> www.sheldonlg.com/css.htm
>>>
>>> The problem is this. Without the <div "index-01" ></div>, the green
>>> background image from the #navWrapper does not tile.

>
> It shouldn't tile.


But it does. You mistakenly believe that the user's font size will be
within whatever confines you set. Don't count on it. The green gradient
tiles both on the x and y axis. It's not attractive.

>> <div id="index-01"></div>
>>
>> It's an empty element, which means it has no height, so there is no
>> space for a background. As it should be.

>
> Please expand.


The background only displays when you set the height property on
#index-01, which is what you were complaining about. Without an explicit
height, the div expands to whatever its content height is. In this case,
it's 0. What do you think you'll see in a zero-height element?

>> You seem to be hacking away at CSS without any comprehension of how it
>> is *supposed* to work.

>
> I didn't write this CSS and I am a php, not a CSS or html, person. I really
> am just hacking away because I was asked to "fix" this


Hacking away without comprehension will only get you deeper into a hole
you'll have trouble getting out of, not to mention the frustration
you'll experience when things don't work. This little snippet you posted
is likely only the tip of the iceberg. I imagine there are more design
flaws than you know about.

Why don't you post a whole page?

--
Berg
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-04-2007
Shelly wrote:
> Bergamot wrote:



>> Your html:
>> <div id="index-01"></div>

>
> The #index-01 has a background-image. It does display.
>
>> It's an empty element, which means it has no height, so there is no
>> space for a background. As it should be.

>
> Please expand.
>


I don't know, its pretty self explanatory, but lets try an analogy.

What is size of the smallest box needed to hold *zero* wombats? Now you
measure the sides of that box and find height, width, and depth is
0"x0"x0". Now what color is it?

Same goes for the DIV. If it contains nothing then it will have *no
size* and therefore no background. You can explicitly give an empty DIV
dimensions as also you could grab a larger box to hold zero wombats, but
note that some browsers may not display a DIV unless it has something in
it, especially depending on your doctype.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-04-2007
In article <(E-Mail Removed)>,
"Shelly" <(E-Mail Removed)> wrote:

> > It's an empty element, which means it has no height, so there is no
> > space for a background. As it should be.

>
> Please expand.


Allow me... here is a work in progress (I don't think I can get
back to it before Xmas) but it does make a big thing about no
heights and widths which may inform you:

http://netweaver.com.au/floatHouse/page1.html

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
tiling background images Dave Kelly HTML 1 03-23-2008 11:29 PM
Fluid container with tiling background Nik Coughlin HTML 9 11-28-2007 06:56 PM
stretching the background image instead of tiling =?Utf-8?B?U3JpZGhhcg==?= ASP .Net 3 11-30-2005 11:32 AM
Printable tiling - Not tiling on screen needed. SS4 Computer Support 7 12-23-2003 03:05 AM
Re: Repeating a tiling image in a table cell Anders Thorsen Holm HTML 0 07-15-2003 08:22 AM



Advertisments