I am redoing my menu for my site. My site is <!-- w --><a class="postlink" href="http://www.digitaleyesandears.com/testing/One">www.digitaleyesandears.com/testing/One</a><!-- w --> CSS is <!-- w --><a class="postlink" href="http://www.digitaleyesandears.com/testing/One/general.css">www.digitaleyesandears.com/testing/One/general.css</a><!-- w -->.
What I am trying to do is have that vertical list on the right of the black matte. (Going up and down) It will then allow users to see thumbnails on the right of it, and then of course clicking the number to go to that picture. But my question is for now how to position it on the right side of the black matte?
thanksFirst, try removing the 45 pixel right padding on #content.
Place #navlistside inside the #content DIV and before the IMG. Apply the styles below:
#navlistside {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
width: 45px;
}
This should put the top of the nav list flush with the top of the image. If you want the nav list higher than the top of the image, add a negative top margin to #navlistside.
Next, you want to ensure that the floated nav list will remain on the black background. Remove the 45 pixel bottom padding from the #content DIV. After the IMG tag, insert the following HTML tag:
<div id="#contentSpacer"> </div>
Then add the following CSS:
#contentSpacer {
clear: both;
height: 45px;
overflow: hidden;
}
That should be all you need. Let me know if you have any questions.First, try removing the 45 pixel right padding on #content.
Place #navlistside inside the #content DIV and before the IMG. Apply the styles below:
#navlistside {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
width: 45px;
}
This should put the top of the nav list flush with the top of the image. If you want the nav list higher than the top of the image, add a negative top margin to #navlistside.
Next, you want to ensure that the floated nav list will remain on the black background. Remove the 45 pixel bottom padding from the #content DIV. After the IMG tag, insert the following HTML tag:
<div id="#contentSpacer"> </div>
Then add the following CSS:
#contentSpacer {
clear: both;
height: 45px;
overflow: hidden;
}
That should be all you need. Let me know if you have any questions.
Hi thanks for your help. But I do want to keep the black matte. I want the vertical list on the edge of the black matte on the right and centered. Can I do that?Here is a picture of the way I want it to look. I did position:relative right:23% and of course it does not work in FF and when you resize the browser it gets messed up.Hey. Just replying to your P.M.
Now that I look at it, you should only need a slight tweak from the code I posted. My code should have placed the nav list on the black matte, which is what I thought you wanted. To get the navlist outside the black matte, using my code, just change the following propery in #navlistside, and add one more property:
#navlistside {
margin: 0 -45px 0 0;
...
text-align: center;
}
The negative 45 pixel right margin should pull the nav box outside the black matte. For Internet Explorer, you may want to add position: relative to the #navlistside declaration, as it might try to expand the black matte box because of the negative right margin.Hey. Just replying to your P.M.
Now that I look at it, you should only need a slight tweak from the code I posted. My code should have placed the nav list on the black matte, which is what I thought you wanted. To get the navlist outside the black matte, using my code, just change the following propery in #navlistside, and add one more property:
#navlistside {
margin: 0 -45px 0 0;
...
text-align: center;
}
The negative 45 pixel right margin should pull the nav box outside the black matte. For Internet Explorer, you may want to add position: relative to the #navlistside declaration, as it might try to expand the black matte box because of the negative right margin.
Hi there thanks for your help i got it finally.
What I am trying to do is have that vertical list on the right of the black matte. (Going up and down) It will then allow users to see thumbnails on the right of it, and then of course clicking the number to go to that picture. But my question is for now how to position it on the right side of the black matte?
thanksFirst, try removing the 45 pixel right padding on #content.
Place #navlistside inside the #content DIV and before the IMG. Apply the styles below:
#navlistside {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
width: 45px;
}
This should put the top of the nav list flush with the top of the image. If you want the nav list higher than the top of the image, add a negative top margin to #navlistside.
Next, you want to ensure that the floated nav list will remain on the black background. Remove the 45 pixel bottom padding from the #content DIV. After the IMG tag, insert the following HTML tag:
<div id="#contentSpacer"> </div>
Then add the following CSS:
#contentSpacer {
clear: both;
height: 45px;
overflow: hidden;
}
That should be all you need. Let me know if you have any questions.First, try removing the 45 pixel right padding on #content.
Place #navlistside inside the #content DIV and before the IMG. Apply the styles below:
#navlistside {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
width: 45px;
}
This should put the top of the nav list flush with the top of the image. If you want the nav list higher than the top of the image, add a negative top margin to #navlistside.
Next, you want to ensure that the floated nav list will remain on the black background. Remove the 45 pixel bottom padding from the #content DIV. After the IMG tag, insert the following HTML tag:
<div id="#contentSpacer"> </div>
Then add the following CSS:
#contentSpacer {
clear: both;
height: 45px;
overflow: hidden;
}
That should be all you need. Let me know if you have any questions.
Hi thanks for your help. But I do want to keep the black matte. I want the vertical list on the edge of the black matte on the right and centered. Can I do that?Here is a picture of the way I want it to look. I did position:relative right:23% and of course it does not work in FF and when you resize the browser it gets messed up.Hey. Just replying to your P.M.
Now that I look at it, you should only need a slight tweak from the code I posted. My code should have placed the nav list on the black matte, which is what I thought you wanted. To get the navlist outside the black matte, using my code, just change the following propery in #navlistside, and add one more property:
#navlistside {
margin: 0 -45px 0 0;
...
text-align: center;
}
The negative 45 pixel right margin should pull the nav box outside the black matte. For Internet Explorer, you may want to add position: relative to the #navlistside declaration, as it might try to expand the black matte box because of the negative right margin.Hey. Just replying to your P.M.
Now that I look at it, you should only need a slight tweak from the code I posted. My code should have placed the nav list on the black matte, which is what I thought you wanted. To get the navlist outside the black matte, using my code, just change the following propery in #navlistside, and add one more property:
#navlistside {
margin: 0 -45px 0 0;
...
text-align: center;
}
The negative 45 pixel right margin should pull the nav box outside the black matte. For Internet Explorer, you may want to add position: relative to the #navlistside declaration, as it might try to expand the black matte box because of the negative right margin.
Hi there thanks for your help i got it finally.