Tue, 2006-03-28 00:09
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!
Tue, 2006-03-28 00:26
#1
CSS Repeat-y?
Could you explain what it is that your trying to repeat along the y axis?
Tue, 2006-03-28 00:35
#2
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!!
Tue, 2006-03-28 00:41
#3
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.
Tue, 2006-03-28 00:47
#4
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?
Tue, 2006-03-28 01:12
#5
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.
Tue, 2006-03-28 01:19
#6
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!
Tue, 2006-03-28 01:20
#7
CSS Repeat-y?
Are you just going to continue to ignore all of our suggestions? :roll:
Tue, 2006-03-28 01:22
#8
CSS Repeat-y?
change the no-repeat to repeat-y - isn't that what you want?
Tue, 2006-03-28 01:25
#9
CSS Repeat-y?
wolfcry911 wrote:
Isn't that what was already said by hugo and some other guy? :twisted: change the no-repeat to repeat-y - isn't that what you want?
Tue, 2006-03-28 01:26
#10
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!
Tue, 2006-03-28 01:28
#11
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.
Tue, 2006-03-28 01:28
#12
CSS Repeat-y?
do you have any content in this float?
Tue, 2006-03-28 01:29
#13
CSS Repeat-y?
Nope, I removed the float, and still nothing to go by. Hmmmm...
Tue, 2006-03-28 01:33
#14
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
Tue, 2006-03-28 01:42
#15
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>
Tue, 2006-03-28 10:20
#16
CSS Repeat-y?
This is proving a struggle 
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.
Tue, 2006-03-28 12:29
#17
CSS Repeat-y?
Hugo wrote:
Yes, a definite struggle. Labour intensive even. This is proving a struggle
Tue, 2006-03-28 12:40
#18
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.
Tue, 2006-03-28 16:19
#19
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:
Wed, 2006-03-29 11:01
#20
CSS Repeat-y?
Yea I know, but I think he needs to hear things more than once before they're applied 