- This topic is empty.
-
AuthorPosts
-
December 26, 2009 at 5:57 pm #27343hornjMember
I am having some problems with css positions. (An example page is here:http://reformingtoscripture.com/resources/articles/002%20Patrick%20Hamilton.html.)
For the drop down menu the position needs to be absolute otherwise it will move when the drop down is hovered over (like it does now). But if I do set it do this, then the page will not auto lengthen. What do I have messed up?
Here is some of the code:
Drop downCode:.file #navigation {
position:relative;
z-index:2;
width:780px;
background:#EAE7DF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat;
height:41px;
border-top:1px solid #996
}.file #navigation ul {
z-index:2;
padding:0;
margin:0;
background-color:#F66;
}.file #navigation li {
float:left;
list-style:none
}.file #navigation li a{
z-index:2;
background:#FFF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat-x;
border-right:1px solid #C9C6B3;
color:#553;
display:block;
line-height:41px;
padding:0 14px;
text-align:center;
text-decoration:none;
font-size: 11pt;
font-weight:bold;
font-family: Tahoma, Geneva, sans-serif;
width:100px;
}.file #navigation li ul {
z-index:2;
display: none;
}.file #navigation ul li a {
z-index:2;
display: block;
}.file #navigation li:hover ul {
z-index:2;
display: block;
}.file #navigation a:hover{
z-index:2;
background-position:left bottom;
color:#221;
}.file #navigation .current_page_item a{
z-index:2;
color:#331
}Content
Code:.file #mainContent {
margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
height:100%;
}.file #text {
width:530px;
padding: 0 20px;
line-height: 130%;
position:inherit;
}Thanks
December 26, 2009 at 9:21 pm #68696ryanMoultrupMemberI don’t understand what you mean by it will not auto-lengthen. when I add an absolute position to this bit of code like this
.file #navigation li ul {
position:absolute;
z-index:2;
display: none;
}It works fine for me viewing it from my computer. You need to be more specific and I will be able to help you further.
try removing the height:100% from this bit of code
.file #mainContent {
margin: 0 250px 0 0;
padding: 0 0px;
height:100%;
}The height will automatically be 100% of whatever content you have in the element.
December 28, 2009 at 12:47 pm #68723hornjMemberThat fixed it. Thanks!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.