CSS Help!!

[MantiVersuS]

παιδιά έχω κολήσει σε ένα σημείο και θέλω τα φώτα σας!

θέλω να φτιάξω μια σελίδα και να έχει στα αριστερά ένα μενού με διάφορες επιλογές. τα βάζω σε ένα table και κάθε επιλογή σε ένα κελί το ένα κάτω από το άλλο.

αυτό το μενού θέλω να είναι στάσιμο.

το πρόβλημα είναι ότι όταν περνάει το ποντίκι πάνω από τις επιλογές θέλω να αλλάζει το background αλλά όχι μόνο στο χώρο που πιάνουν οι λέξεις αλλά σε όλα το κελί!

δηλαδή θα περνάει το ποντίκι πάνω από ένα κελί με μια επιλογή και θα αλλάζει σ'όλο το κελί το background.

μπορείτε να βοηθήσετε σας παρακαλώ?

[HighT3ch]

Υπάρχουν πολλοί τρόποι να το κάνεις αυτό. Μπορείς να χρησιμοποιήσεις table, divs ή λίστα.

 

Ένα απλό παράδειγμα με λίστα είναι:

 

>
<style>
#menu {
width: 100px;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
text-align: left;
margin: 1px 0 0;
}
#menu a {
display: block;
border: 1px solid #555555;
padding-left: 3px;
width:100%;
background-color: #c3c3c3;
font: 13px Tahoma;
font-weight: bold;
color: green;
text-decoration: none;
}
#menu a:hover {
background-color: yellow;
color: blue;
}
</style>

<ul id="menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
<li><a href="">Button 4</a></li>
</ul>

[MantiVersuS]

σ'ευχαριστώ πολύ φίλε μου! με divs το δοκίμασα και στον ΙΕ παίζει κανονικά στον Mozilla δεν λειτουργεί.

μήπως μπορείς να μου πεις πως γίνεται και με tables?

[HighT3ch]

Στα γρήγορα έκανα αυτό:

 

>
<style>
#menu2 {
width: 100px;
}

#menu2 .normal {
border: 1px solid #555555;
padding-left: 3px;
background-color: #c3c3c3;
font: 13px Tahoma;
font-weight: bold;
color: green;
text-decoration: none;
}

#menu2 .hover {
border: 1px solid #555555;
padding-left: 3px;
background-color: yellow;
font: 13px Tahoma;
font-weight: bold;
color: blue;
text-decoration: none;
cursor: pointer;
}
</style>

<script>
function normal(obj)
{
obj.className='normal';
window.status = '';
}

function hover(obj)
{
obj.className='hover';
window.status = obj.innerText;	 //Use textContent for Mozilla
}

function goTo(url)
{
location.href = url;	
}
</script>

<table cellspacing="1" cellpadding="1" id="menu2">
<tr><td class="normal" onMouseOver="hover(this)" onMouseOut="normal(this)" onClick="goTo('http://www.google.com')">Button 1</td></tr>
<tr><td class="normal" onMouseOver="hover(this)" onMouseOut="normal(this)" onClick="goTo('http://www.yahoo.com')">Button 2</td></tr>
<tr><td class="normal" onMouseOver="hover(this)" onMouseOut="normal(this)" onClick="goTo('http://www.insomnia.gr')">Button 3</td></tr>
<tr><td class="normal" onMouseOver="hover(this)" onMouseOut="normal(this)" onClick="goTo('http://www.in.gr')">Button 4</td></tr>
</table>

[MantiVersuS]

Σ'ευχαριστώ πολύ φίλε! Η βοήθεια σου ήταν πολύτιμη!!!

Με βοήθησες πολύ! :-D:-D:-D