Help with some CSS code not displaying images.
3 posters
Page 1 of 1
Help with some CSS code not displaying images.
Hey there, my forum is using a navbar that has a dropdown menu function. To access the dropdown menu, there used to be arrows that you could press that would drop down the menu.
However, it seems that those images aren't hosted anymore, so there is nothing there. I have tried to update the images with some of my own arrows, but it won't display on the forum.
Here is the CSS code:
Yes, I realize that some of those are using the "empty.gif", I did that myself after images I had tried weren't working.
The link to my forum, if needed is THIS
Basically I want to know why my own images won't display when I put them into that CSS, and how I can fix that so they do display.
However, it seems that those images aren't hosted anymore, so there is nothing there. I have tried to update the images with some of my own arrows, but it won't display on the forum.
Here is the CSS code:
- Code:
ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x
}
ul.topnav li {
float:left;
margin:0;
padding:0 15px 0 0;
position:relative;
}
ul.topnav li a {
padding:10px 5px;
color:#CEC7A9;
display:block;
text-decoration:strong;
float:left
}
ul.topnav li a:hover {
background:url(http://2img.net/i/fa/empty.gif) no-repeat center top
}
ul.topnav li span {
width:17px;
height:35px;
float:left;
background:url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top
}
ul.topnav li span.subhover {
background-position:center bottom;
cursor:pointer
}
ul.topnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:35px;
background:#333;
margin:0;
padding:0;
display:none;
float:left;
text-shadow:0 0 15px #93F;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border:1px solid #111
}
ul.topnav li ul.subnav li {
margin:0;
padding:0;
border-top:1px solid #252525;
border-bottom:1px solid #444;
clear:both;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px
}
html ul.topnav li ul.subnav li a {
float:left;
width:145px;
background:#333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left:20px
}
html ul.topnav li ul.subnav li a:hover {
background:#222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
text-shadow:0 0 15px #93F
}
Yes, I realize that some of those are using the "empty.gif", I did that myself after images I had tried weren't working.
The link to my forum, if needed is THIS
Basically I want to know why my own images won't display when I put them into that CSS, and how I can fix that so they do display.
Last edited by RazielBach on May 25th 2015, 1:08 am; edited 1 time in total
Re: Help with some CSS code not displaying images.
At a quick glance i can see several Errors in your CSS, I will edit it for you if you can give me like 5-9 minutes to do so.
Re: Help with some CSS code not displaying images.
Replace your CSS with this, it should be working now.
- Code:
ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x;
}
ul.topnav li {
float:left;
margin:0;
padding:0 15px 0 0;
position:relative;
}
ul.topnav li a {
padding:10px 5px;
color:#CEC7A9;
display:block;
text-decoration:strong;
float:left;
}
ul.topnav li a:hover {
background:url(http://2img.net/i/fa/empty.gif) no-repeat center top;
}
ul.topnav li span {
width:17px;
height:35px;
float:left;
background:url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position:center bottom;
cursor:pointer;
}
ul.topnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:35px;
background:#333;
margin:0;
padding:0;
display:none;
float:left;
text-shadow:0 0 15px #93F;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border:1px solid #111;
}
ul.topnav li ul.subnav li {
margin:0;
padding:0;
border-top:1px solid #252525;
border-bottom:1px solid #444;
clear:both;
width:170px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
html ul.topnav li ul.subnav li a {
float:left;
width:145px;
background:#333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
padding-left:20px;
}
html ul.topnav li ul.subnav li a:hover {
background:#222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
text-shadow:0 0 15px #93F;
}
Re: Help with some CSS code not displaying images.
This did not help me accomplish what I'm trying to do.
I've added my arrows as I was trying to do before, and here are the issues I'm encountering:
1. The drop down arrow isn't displaying at all times. It only displays when I hover.
2. When the arrow displays over what I'm hovering on, the arrow is showing up on things it isn't supposed to.
3. The arrow is in the improper position, it's appearing over the text when it was supposed to appear level to it and to the right.
I never had these kinds of issues until the images it was originally using were no longer hosted. Even with the old CSS I had before your rework, it still had initially worked.
Edit: Fiddling around with it, I have solved my issue.
I've added my arrows as I was trying to do before, and here are the issues I'm encountering:
1. The drop down arrow isn't displaying at all times. It only displays when I hover.
2. When the arrow displays over what I'm hovering on, the arrow is showing up on things it isn't supposed to.
3. The arrow is in the improper position, it's appearing over the text when it was supposed to appear level to it and to the right.
I never had these kinds of issues until the images it was originally using were no longer hosted. Even with the old CSS I had before your rework, it still had initially worked.
Edit: Fiddling around with it, I have solved my issue.
Re: Help with some CSS code not displaying images.
I only fixed the lines in your css that where not closed off with a ;
for example:
- Code:
ul.topnav {
position:relative;
list-style:none;
padding:0 20px;
margin:0;
float:relative;
width:920px;
background:#222;
text-align:right;
font-size:1.2em;
background:url(http://2img.net/i/fa/empty.gif) repeat-x
}
Your are missing a semi-colon at the end of this line
- Code:
background:url(http://2img.net/i/fa/empty.gif) repeat-x
Now their may be more issues in your css then i noticed at first,
Is the style sheet active on your forum still so i can see these issues you are seeing?
Also can you provide screen shots for the issues you listed.
You may also need to post the java script you used to create this nav bar as the issue may lie in there
I just saw your edit, if this is solved you should go ahead and edit the first post and add the topic solved icon so the staff can take care of it.
Re: Help with some CSS code not displaying images.
I take it this thread is now solved as marked as so
Topic solved and archived
Any problems please pm me this link and i will open it again.
Similar topics
» When i paste a long code via [code][/code] the page expands
» Images in private messages not displaying
» like showing images in mobile version is possible to active the links in images
» Forum images change to Font Awesome images
» some wierd code showing next to images in mobile theme
» Images in private messages not displaying
» like showing images in mobile version is possible to active the links in images
» Forum images change to Font Awesome images
» some wierd code showing next to images in mobile theme
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum