FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS Question Aid Please

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


JinTenshi
Alright. My question is pretty simple. I've seen background images cloned to fit the entire page ( Ie. Repeat-x and Repeat-y ) but what I want is actually just a piece of code that repeats an image in the x-axis.

Code:

.heading {
what code here?
}

<div class="heading"> Text </div>


Would appreciate the help. Thanks.
meejoku
maybe you can use this way :

Code:

#header {
     background-image: url(someimage.jpg);
     background-repeat: repeat-x;
}
JinTenshi
DIV can have background images?
mariohs
Everything can have background images Very Happy
JinTenshi
Ah, now that solves everything. Thanks!
JinTenshi
Sorry, either it's because I'm too noob and inexprienced, or my coding is wrong.

Code:

<html>

<head>
<title>Test</title>
<style type="text/css">
#test {
background-image: url(lol.JPG);
background-repeat: repeat-xy;
}
</style>
</head>

<body>
<div class="test">LOL test LOL test LOL</div>
</body>

</html>


Do you spot any mistakes whatsoever? Cause my code is not working.
Infinity-al
This should work

Code:
<html>
<head>

<style type="text/css">
body
{
background-image: url('lol.jpg');
background-repeat: repeat-x
}
</style>
</head>

<body>
<div class="test">LOL test LOL test LOL</div>
</body>
</html>
TheGustav
Maybe this is what you're looking for?

Code:
<html>

<head>
<title>Test</title>
<style type="text/css">
div.test
{
background-image: url(lol.JPG);
background-repeat: repeat-xy;
}
</style>
</head>

<body>
<div class="test">LOL test LOL test LOL</div>
</body>

</html>


Also, I guess you could take out the div part in the CSS code to make any class="test" give that image background..

Code:

.test
{
background-image: url(lol.JPG);
background-repeat: repeat-xy;
}


That would set the div class of test to have that background, which seems to be what you're trying to get.
JinTenshi
@ TheGustav : Yes! That worked! And I noticed I did it wrongly didn't I? I used # instead of . for class items.

@ Infinity-al : I wasn't looking for that cause I know to repeat the entire background for the entire page is that code, I just wanted only a section to have that background. Thanks for helping anyways!
TheGustav
Glad to have helped. Smile
JinTenshi
Another question now. The one above have been solved thanks to TheGustav. =D

So anyways. I have this :
Code:

<div class="test">
<p id="thing1">Something</p>
<p id="thing2">Somethingz</p>
</div>


Is there any CSS code I can use so much so that whenever there is a mouseover the paragraph "thing1" OR "thing2" the respective background will change color? Help would be appreciated. Thank you. =)
TheGustav
Maybe you're looking for something like this...?

Code:

<style type="text/css">
div.test
{
background: green;
}

p.hov:hover { background: red; }
p.hov2:hover { background: blue; }
</style>

<body>
<div class="test">
<p class="hov">Something</p>
<p class="hov2">Somethingz</p>
</div>
</body>


Last edited by TheGustav on Tue Apr 10, 2007 6:58 pm; edited 1 time in total
JinTenshi
TheGustav wrote:
Maybe you're looking for something like this...?

Code:

<style type="text/css">
div.test
{
background: green;
}

p.hov:hover { background: red; }
p.hov2:hover { background: blue; }
</style>

<body>
<div class="test">
<p class="hov">Something</p>
<p class="hov2">Somethingz</p>
</div>
</body>


(Again, you can delete the p part and the hov and hov2 class will work for anything, not just <p> Smile )


It seems the code doesn't work. It does change my DIV background to green, but upon hovering the paragraphs, the background remained the same. =(
frugo
maybe you can't use css
TheGustav
It really doesn't work? Using that exact code when I put my mouse over the line that says Something, it changes that line to red, and when I hover over the line that says Somethingz, it changes that line to blue. Confused

EDIT: Well, I just tried deleting the "p" before the .hov:hover, and that seems to make it not work.... Smile

Try adding the p's back there? If you want to do it for anything other than <p>, you may have to just manually put that in the CSS.
mariohs
JinTenshi wrote:
Another question now. The one above have been solved thanks to TheGustav. =D

So anyways. I have this :
Code:

<div class="test">
<p id="thing1">Something</p>
<p id="thing2">Somethingz</p>
</div>


Is there any CSS code I can use so much so that whenever there is a mouseover the paragraph "thing1" OR "thing2" the respective background will change color? Help would be appreciated. Thank you. =)


Code:
div.test p{
background:red;
}

div.test p:hover{
background:blue;
}


This works on serious browsers, like Firefox 2 and Opera 9. IE 6 is out.
IE6 doesn't have support for the :hover pseudo-classes unless on anchors (<a> tag). So, if you really need to do this on a <p> tag, you have to use a little javascript fix for IE6.
But if you intend to put the colors on a <a> tag, you can normally use the a{} and a:hover{} to style it and all browsers, including IE6 will play nice.

Let me know if you need help with javascript to do the background color change.
JinTenshi
mariohs wrote:
JinTenshi wrote:
Another question now. The one above have been solved thanks to TheGustav. =D

So anyways. I have this :
Code:

<div class="test">
<p id="thing1">Something</p>
<p id="thing2">Somethingz</p>
</div>


Is there any CSS code I can use so much so that whenever there is a mouseover the paragraph "thing1" OR "thing2" the respective background will change color? Help would be appreciated. Thank you. =)


Code:
div.test p{
background:red;
}

div.test p:hover{
background:blue;
}


This works on serious browsers, like Firefox 2 and Opera 9. IE 6 is out.
IE6 doesn't have support for the :hover pseudo-classes unless on anchors (<a> tag). So, if you really need to do this on a <p> tag, you have to use a little javascript fix for IE6.
But if you intend to put the colors on a <a> tag, you can normally use the a{} and a:hover{} to style it and all browsers, including IE6 will play nice.

Let me know if you need help with javascript to do the background color change.


Hmm, I've given it a test and indeed FF2 worked out better. And I tested it on IE7 and it doesn't work neither. Perhaps I would need javascript to make it compatible with both IE and FF. Or maybe I could be just lazy and say the website is for FF. Thanks for clarifying.

And upon testing TheGustav's code on FF, it works! Thanks TheGustav once again! =D

Mariohs, mind giving me some Javascript here? =P I can edit the script myself, but I don't know how to create the script. So perhaps you could give me a simple one and I'll edit from thereon. Thanks in advance!
mariohs
Saying your site is only for FF, you will be loosing around 80% of the total public for your site. So that's not the way to go Very Happy

I made a very little example for you and here it goes:
http://mariohs.frih.net/testes/jin.html

The css
http://mariohs.frih.net/testes/jin.css

The js
http://mariohs.frih.net/testes/jin.js

A few theory...
The css:
As long as IE doesn't support the :hover pseudo-class, the way to go is to apply a "real class" through javascript manipulating the onmouseover and the onmouseout events. So, if you take a look at the css, there's another declaration: div.test p.over. The .over class is set dinamically through javascript.

The js:
The second function (sfHover) is the one to go. It's pretty simple: it gets the parent div (which I applied the id="jin") and then get the child elements <p>. Then it just applies the class over when mouse is over, and removes it when mouse is out.

The first function (addLoadEvent) is a utility function. Because you have to initialize the function sfHover as soon as the page is completely loaded, you could just use the window.onload function. But if you need to initialize more than this function, I added a function that does that.

References:
I took most of the sfHover function from the suckerfish dropdowns as it uses basically the same engine.
The addLoadEvent function, I took from Simon Willison.

Tested on IE6, Firefox 2 and Opera 9. Everything works fine Wink

Hope I have helped and sorry for the bunch of geekness on the explanations...

[edit]
There's another way to do it, forgot to mention. Take a read on this article:
Fake :hover on all elements for IE. It doesn't need more explanations as its much more simple. Why didn't I mentioned this before? Because that solution uses a .htc file, and it's not W3C compliant, although it will work in most browsers. Furthermore, the suckerfish solution is much more lightweight than this one, although a little bit more difficult to implement.

So, it's up to you to decide whether to go for suckerfish or .htc. I recommend the suckerfish one, but that's not my decision Wink
[/edit]
JinTenshi
mariohs wrote:
Saying your site is only for FF, you will be loosing around 80% of the total public for your site. So that's not the way to go Very Happy

I made a very little example for you and here it goes:
http://mariohs.frih.net/testes/jin.html

The css
http://mariohs.frih.net/testes/jin.css

The js
http://mariohs.frih.net/testes/jin.js

A few theory...
The css:
As long as IE doesn't support the :hover pseudo-class, the way to go is to apply a "real class" through javascript manipulating the onmouseover and the onmouseout events. So, if you take a look at the css, there's another declaration: div.test p.over. The .over class is set dinamically through javascript.

The js:
The second function (sfHover) is the one to go. It's pretty simple: it gets the parent div (which I applied the id="jin") and then get the child elements <p>. Then it just applies the class over when mouse is over, and removes it when mouse is out.

The first function (addLoadEvent) is a utility function. Because you have to initialize the function sfHover as soon as the page is completely loaded, you could just use the window.onload function. But if you need to initialize more than this function, I added a function that does that.

References:
I took most of the sfHover function from the suckerfish dropdowns as it uses basically the same engine.
The addLoadEvent function, I took from Simon Willison.

Tested on IE6, Firefox 2 and Opera 9. Everything works fine Wink

Hope I have helped and sorry for the bunch of geekness on the explanations...

[edit]
There's another way to do it, forgot to mention. Take a read on this article:
Fake :hover on all elements for IE. It doesn't need more explanations as its much more simple. Why didn't I mentioned this before? Because that solution uses a .htc file, and it's not W3C compliant, although it will work in most browsers. Furthermore, the suckerfish solution is much more lightweight than this one, although a little bit more difficult to implement.

So, it's up to you to decide whether to go for suckerfish or .htc. I recommend the suckerfish one, but that's not my decision Wink
[/edit]


Well, Ok, so maybe I'm not gonna say my site is for FF. LoL. Basically it would be nicer to look in FireFox, but IE users will not lose out too. =D But looking at the hard work you went through for me, En Gracias. Touching. =')

Thanks for the script and the demonstration. And also the sources of information. And the final source of information, the one in [edit]...[/edit], that source said that CSS :hover function would be supported in IE 7, but I guess it's not. IE would need tonnes of improvement to work better than FireFox.

Thanks once again mariohs, you've been a great help.
mariohs
I'm glad to help! Let me know if you managed to do it, also post here if you have any further doubts Very Happy
Related topics

Question: Answers please.
Dynamic User Customizable Sites. CSS + PHP = Awesome!
CSS/Layout Help Please!
css question
CSS - CSS Tutorial for skin maker
php, css question (wordpress)
hiding css from netscape
CSS Quotation Help
Simple CSS Question (Urgent Help)
extra line from css in drop down menu
Help Suggestion
HTML help needed
Help on Backing up MySQL Databases
Dialup in Ubuntu
Solve my Dilemma
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.