ok im coding a horizontal drop down menu.. but the problem im looking for a display other than block.. eg.
ul li a
{
display: block;
}
and i also cant use display: none cause it looks bad. what are some other display types?what are you trying to achieve?
What is happening when you set display to block for the links?what are you trying to achieve?
What is happening when you set display to block for the links?
well the side menu looks good, but what u scroll over to bring it down has a large space in it. like this basically:
Team [Vv] > side drop down
Counter-Strike > side drop down
Battlefield 2 > side drop down
but i need it to be like this:
Team [Vv] > side drop down
Counter-Strike > side drop down
Battlefield 2 > side drop down
here is the code im using in my head:
<style type=text/css>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 100px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #CC0000;
background: #000000;
padding: -5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
</style>
<script language="JavaScript" type="text/JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>do you mean that the margin between the elements of the menu are too big?do you mean that the margin between the elements of the menu are too big?
no i mean that the display: block; makes the spaces of team vv counterstrike and battlefield 2 too big.. here il take a screen shot.
this is with display: block;
<!-- m --><a class="postlink" href="http://www.vvclans.com/images/bad.JPG">http://www.vvclans.com/images/bad.JPG</a><!-- m -->
this is without any declared display
<!-- m --><a class="postlink" href="http://www.vvclans.com/images/bad%20still.JPG">http://www.vvclans.com/images/bad%20still.JPG</a><!-- m -->
please forgive the bad coloring, a result or ms paint and jpg.Hi,
The main options are:
display: block, inline, list-item or nonethank youthe whole list is
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-captionalrite thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?Could be height or line-height style for the a.try putting a 1px border around the links so you can see if it is the padding, the margins, or anything else... what are some other display types?
For future reference, you can always go straight to the source: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-displayalrite">http://www.w3.org/TR/CSS21/visuren.html ... playalrite</a><!-- m --> thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?
sorry i didnt see lilcrazyfuzzy's post only kelly's i still need to try fuzzy'sit wont do you any good, you really should try the advice in post #11it wont do you any good, you really should try the advice in post #11
i checked its not the padding or margins... its the display type... heres my only problem... i cant effect the link and menu seperately... lik for the drop down menu i need it to be block like, but for the links i need it to be like no display or something. however i still have not tried the other display tpyes you mentioned.did you try leaving it to default?did you try leaving it to default?
yes that is inline i believe.. if i dont declare anything then the drop down looks bad.... by looking at the style script is there any way to affect the drop down menu and the links seperately?alrite i think im looking for something like the opposite of table... cause display: table makes the links look the same as if it were block but the drop down menu looks inline... btw i rele appreciate all ur helpalrite its all good.. i just figured out how to fix the problem.. thanks for all your help...So what is your solution?1. the reason the extra spaces were there is because by declaring the display: block i no longer needed to have a <br> after the link. also i can directly affect the drop down menu by coding styles like so:
li ul a {
w/e code
}
ul li a
{
display: block;
}
and i also cant use display: none cause it looks bad. what are some other display types?what are you trying to achieve?
What is happening when you set display to block for the links?what are you trying to achieve?
What is happening when you set display to block for the links?
well the side menu looks good, but what u scroll over to bring it down has a large space in it. like this basically:
Team [Vv] > side drop down
Counter-Strike > side drop down
Battlefield 2 > side drop down
but i need it to be like this:
Team [Vv] > side drop down
Counter-Strike > side drop down
Battlefield 2 > side drop down
here is the code im using in my head:
<style type=text/css>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 100px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #CC0000;
background: #000000;
padding: -5px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
</style>
<script language="JavaScript" type="text/JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>do you mean that the margin between the elements of the menu are too big?do you mean that the margin between the elements of the menu are too big?
no i mean that the display: block; makes the spaces of team vv counterstrike and battlefield 2 too big.. here il take a screen shot.
this is with display: block;
<!-- m --><a class="postlink" href="http://www.vvclans.com/images/bad.JPG">http://www.vvclans.com/images/bad.JPG</a><!-- m -->
this is without any declared display
<!-- m --><a class="postlink" href="http://www.vvclans.com/images/bad%20still.JPG">http://www.vvclans.com/images/bad%20still.JPG</a><!-- m -->
please forgive the bad coloring, a result or ms paint and jpg.Hi,
The main options are:
display: block, inline, list-item or nonethank youthe whole list is
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-captionalrite thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?Could be height or line-height style for the a.try putting a 1px border around the links so you can see if it is the padding, the margins, or anything else... what are some other display types?
For future reference, you can always go straight to the source: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-displayalrite">http://www.w3.org/TR/CSS21/visuren.html ... playalrite</a><!-- m --> thats wat i was looking for.. unfortuneatly it didnt help... is there any way i can make the drop down have the block display, but have the categories with no display?
sorry i didnt see lilcrazyfuzzy's post only kelly's i still need to try fuzzy'sit wont do you any good, you really should try the advice in post #11it wont do you any good, you really should try the advice in post #11
i checked its not the padding or margins... its the display type... heres my only problem... i cant effect the link and menu seperately... lik for the drop down menu i need it to be block like, but for the links i need it to be like no display or something. however i still have not tried the other display tpyes you mentioned.did you try leaving it to default?did you try leaving it to default?
yes that is inline i believe.. if i dont declare anything then the drop down looks bad.... by looking at the style script is there any way to affect the drop down menu and the links seperately?alrite i think im looking for something like the opposite of table... cause display: table makes the links look the same as if it were block but the drop down menu looks inline... btw i rele appreciate all ur helpalrite its all good.. i just figured out how to fix the problem.. thanks for all your help...So what is your solution?1. the reason the extra spaces were there is because by declaring the display: block i no longer needed to have a <br> after the link. also i can directly affect the drop down menu by coding styles like so:
li ul a {
w/e code
}