The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Help with some CSS code not displaying images.

3 posters

Go down

Solved Help with some CSS code not displaying images.

Post by RazielBach May 25th 2015, 12:28 am

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:

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
avatar
RazielBach
Forumember

Posts : 25
Reputation : 1
Language : English

http://eriviyn.forumotion.com

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by Sir. Mayo May 25th 2015, 12:36 am

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.
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by RazielBach May 25th 2015, 12:48 am

Certainly.

Any help is appreciated.
avatar
RazielBach
Forumember

Posts : 25
Reputation : 1
Language : English

http://eriviyn.forumotion.com

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by Sir. Mayo May 25th 2015, 12:52 am

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;
}
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by RazielBach May 25th 2015, 1:00 am

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.
avatar
RazielBach
Forumember

Posts : 25
Reputation : 1
Language : English

http://eriviyn.forumotion.com

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by Sir. Mayo May 25th 2015, 1:10 am


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
as well as several more i just added them.

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.
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 978
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Help with some CSS code not displaying images.

Post by Ape May 28th 2015, 3:36 pm

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.


Help with some CSS code not displaying images. Left1212Help with some CSS code not displaying images. Center11Help with some CSS code not displaying images. Right112
Help with some CSS code not displaying images. Ape_b110
Help with some CSS code not displaying images. Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19454
Reputation : 2012
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum