The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Help with some CSS code not displaying images.

View previous topic View next topic Go down

Solved Help with some CSS code not displaying images.

Post by RazielBach on 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://illiweb.com/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://illiweb.com/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 isTHIS

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

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 on 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
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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

Back to top Go down

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

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

Certainly.

Any help is appreciated.

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 on 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://illiweb.com/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://illiweb.com/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
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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

Back to top Go down

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

Post by RazielBach on 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.

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 on 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://illiweb.com/fa/empty.gif) repeat-x
}


Your are missing a semi-colon at the end of this line
Code:
 background:url(http://illiweb.com/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
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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

Back to top Go down

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

Post by APE on 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.





APE
Manager
Manager

Male Posts : 8631
Reputation : 756
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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