20 replies [Last post]
doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

Hi guys,

New to the board, and this is my first post!

I wrote this code:

<style type="text/css">
    body {
	margin:0;
	padding:0;
	font: bold 11px/1.5em Verdana;
	position: absolute;
	height: auto;
}

h2 {
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}
    #tabsK {
      float:right;
      width:100%;
      background:#E7E5E2;
      font-size:93%;
      line-height:normal;
	  border-bottom:0px solid #54545C;
      }
    #tabsK ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #tabsK li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsK a {
      float:left;
      background:url("tableftK.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsK a span {
      float:left;
      display:block;
      background:url("tabrightK.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsK a span {float:none;}
    /* End IE5-Mac hack */
    #tabsK a:hover span {
      color:#FFF;
	  background-position:100% -42px;
      }
    #tabsK a:hover {
      background-position:0% -42px;
      }
    #tabsK a:hover span {
      background-position:100% -42px;
	  }
#rectangle {
	float:left;
	width:100%;
	background:url("square.jpg") no-repeat left top;
	font-size:93%;
	line-height:inherit;
	border-bottom:0px solid #54545C;
	background-repeat: repeat-y;
	background-position:left;
      }
</style>

The code at the bottom is not repeating on the y-axis. Anyone know the problem??!

#rectangle {
float:left;
width:100%;
background:url("square.jpg") no-repeat left top;
font-size:93%;
line-height:inherit;
border-bottom:0px solid #54545C;
background-repeat: repeat-y;
background-position:left;
}

Been trying to solve for couple hours now!

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

CSS Repeat-y?

Could you explain what it is that your trying to repeat along the y axis?

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

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

Hi there,

I'm trying to repeat the square.jpg image.

Is this not the way to go about doing this?

The top code is just a CSS based menu.

The bottom code is just not repeating square.jpg for me!!

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

CSS Repeat-y?

Why have you got shorthand background properties for that image then? loose the last two properties and just style the image on the shorthand background declaration.

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

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

Sorry, I'm pretty new to all this!

I've lost the last two properties, but nothing seems to have changed, i've even wrote the code with just the background repeat-y line, and deleted all other properties, but to no avail!

Anymore suggestions?

Anonymous
Anonymous's picture
Guru

CSS Repeat-y?

background:url("square.jpg") no-repeat left top;

Why put a "no-repeat" in there if you want to repeat-y? That makes no sense at all.

Perhaps the shorthand overrides the background-repeat even though background-repeat comes later in the code.

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

I have to put the no-repeat because the square.jpg will just keep on going left.

Any suggestions?

It can't be that difficult to find a code to go down the page?

Thanks!

Anonymous
Anonymous's picture
Guru

CSS Repeat-y?

Are you just going to continue to ignore all of our suggestions? :roll:

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Repeat-y?

change the no-repeat to repeat-y - isn't that what you want?

Anonymous
Anonymous's picture
Guru

CSS Repeat-y?

wolfcry911 wrote:
change the no-repeat to repeat-y - isn't that what you want?
Isn't that what was already said by hugo and some other guy? :twisted:

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

That is what I want it to do, i just saw my error!

My fault guys!

But...replaced with repeat-y, and nothing.

I'll try longcode!

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

Maybe someone could try this code with an image they may have:

#rectangle {
float:left;
width:100%;
background:url("square.jpg");
background-repeat:repeat-y;
font-size:93%;
line-height:inherit;
border-bottom:0px solid #54545C;
}

and tell me where i'm going wrong!

It should work shouldn't it, but for me, nothing! Dreamweaver editor user BTW.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Repeat-y?

do you have any content in this float?

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

Nope, I removed the float, and still nothing to go by. Hmmmm...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Repeat-y?

doubles, we're trying to help here, but you're not making it easy.
Hugo said to put the repeat-y in the shorthand background rule - do that. I even spelled it out for you.
Do NOT use Dreamweaver for testing. Use a text editor (or DW's code view only) and a real browser.
You have not given the float a height so if there is no content in this element there will be no height and therefor no background!
show us more code

doubles
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2006-03-28
Posts: 8
Points: 0

CSS Repeat-y?

<head>
<style type="text/css">
    body {
	margin:0;
	padding:0;
	font: bold 11px/1.5em Verdana;
	position: relative;
	height: inherit;
}

h2 {
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}
    #tabsK {
      float:right;
      width:100%;
      background:#E7E5E2;
      font-size:93%;
      line-height:normal;
	  border-bottom:0px solid #54545C;
      }
    #tabsK ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #tabsK li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsK a {
      float:left;
      background:url("tableftK.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsK a span {
      float:left;
      display:block;
      background:url("tabrightK.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsK a span {float:none;}
    /* End IE5-Mac hack */
    #tabsK a:hover span {
      color:#FFF;
	  background-position:100% -42px;
      }
    #tabsK a:hover {
      background-position:0% -42px;
      }
    #tabsK a:hover span {
      background-position:100% -42px;
	  }
#rectangle {
	background:url("square.jpg");
	background-repeat:repeat-y;
      }
	  #rectangle a span
</style>
</head>

That is the head...

And this is the DIV in the body...

	<div id="rectangle">
	<ul>
	</ul>
</div>

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

CSS Repeat-y?

This is proving a struggle Smile

doubles could you just style on the background property thusly:

#rectangle {
background: url(square.jpg) repeat-y;
}

Also for the sake of it can you add a fixed height to this div so that you know it's displaying.

Hugo.

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

Anonymous
Anonymous's picture
Guru

CSS Repeat-y?

Hugo wrote:
This is proving a struggle Smile
Yes, a definite struggle. Labour intensive even. Tongue

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

CSS Repeat-y?

your div is not showing. I bet it's as flat as a nickle.

try this;

#rectangle { 
background: url(square.jpg) repeat-y; 
height: 40px;
width: 40px;
border-width: 1px;
border-style: solid;
border-color: red;
}

lol, a spellchecker.

As a rule, I never touch anything more sophisticated and delicate than myself

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

CSS Repeat-y?

Hmm, which is why I mentioned:
"Also for the sake of it can you add a fixed height to this div so that you know it's displaying." earlier, along with the request to style on the background :roll:

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

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 45 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

CSS Repeat-y?

Yea I know, but I think he needs to hear things more than once before they're applied Wink

As a rule, I never touch anything more sophisticated and delicate than myself