Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: numbro on July 09, 2013, 03:05:37 PM

Title: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 03:05:37 PM
This is my first attempt at completely customizing a theme, and everything is going great, but I ran into this issue. Does anyone know how to fix?

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2F64VzcIz.png&hash=aa038a6309b71afb4dd25d4fa7efd1155e5e3ad3)


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2Fo27baC9.png&hash=fe21fcad17d458a3b1ae7da3563ef7a144f5ce88)
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 03:09:20 PM
Looks like something that you changed in index.css.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 03:28:25 PM
Quote from: ARG on July 09, 2013, 03:09:20 PM
Looks like something that you changed in index.css.
Most likely. Do you have any clue what it could be?
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 03:32:44 PM
Not unless you attach your index.css file.  ;)
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 03:44:44 PM
Quote from: ARG on July 09, 2013, 03:32:44 PM
Not unless you attach your index.css file.  ;)
That would probably be a good start... here ya go

http://pastebin.com/1nRdhpML
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 03:53:44 PM
It says "This paste has been removed!"

Go start a topic here and reply to it six times and then you should be able to attach the file.   ;)

http://www.simplemachines.org/community/index.php?board=7.0
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: Mick. on July 09, 2013, 03:55:44 PM
It could be a missing ;
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 03:57:20 PM
Quote from: Mick. on July 09, 2013, 03:55:44 PM
It could be a missing ;

That's what I was thinking. A link to the site may be good enough.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 03:59:57 PM
Quote from: ARG on July 09, 2013, 03:53:44 PM
It says "This paste has been removed!"
pastebin. com/1nRdhpML

Remove the space.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:02:19 PM
You could just attach it here. When replying, look for "Attachments and other options" under the reply text box.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:03:58 PM
Quote from: ARG on July 09, 2013, 03:57:20 PM
Quote from: Mick. on July 09, 2013, 03:55:44 PM
It could be a missing ;

That's what I was thinking. A link to the site may be good enough.
Okay, now there's 3 minor issues. Register at http://pumpedmusic.com/forums/index.php and you'll see that when you hover over a menu, it freaks out and shows up on the side of the page. Go to edit your profile, and there are expanded menus all over the place.

Also, I didn't (intentionally) remove the copyright. Not sure why it's gone. Please tell me what the problems are.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:07:25 PM
OH. And my buttons for new threads and replying aren't there either.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:09:28 PM
Your index.css is fine. What other files have you altered?
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:11:58 PM
Quote from: ARG on July 09, 2013, 04:09:28 PM
Your index.css is fine. What other files have you altered?
That's the only file I've altered that I can think of, besides images. Can I PM you an admin account so you can check it out?
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: Mick. on July 09, 2013, 04:12:51 PM
Look for...

the hover effects on level2 and 3

Remove the '>a'

'>a' looks out of place?
I'm on my phone and I can't copy and paste
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:13:14 PM
Well did you attach the right one? I am using yours and I don't have any of the dark color changes as shown in your images.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:16:32 PM
Quote from: ARG on July 09, 2013, 04:13:14 PM
Well did you attach the right one? I am using yours and I don't have any of the dark color changes as shown in your images.
******! I pulled that one from the wrong directory. Sorry about that.

Here ya go.

Things messed up:
Nav menu dropdowns misplaced
Profile nav menu expanded
Missing copyright
Missing buttons
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:17:31 PM
Quote from: Mick. on July 09, 2013, 04:12:51 PM
Look for...

the hover effects on level2 and 3

Remove the '>a'

'>a' looks out of place?
I'm on my phone and I can't copy and paste

Nope, not it.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: Mick. on July 09, 2013, 04:28:28 PM
Dand you're right. It looked like it was after the {

Anywho, I haven't seen his site put if he uses a portal with a custom code somewhere, chances are whatever CSS code is oberwriting the menu CSS code
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:31:23 PM
Quote from: Mick. on July 09, 2013, 04:28:28 PM
Dand you're right. It looked like it was after the {

Anywho, I haven't seen his site put if he uses a portal with a custom code somewhere, chances are whatever CSS code is oberwriting the menu CSS code
I don't have a portal. The only mod I have installed is glowing usernames, and had these issues before I installed it.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:33:13 PM
There has to be something else wrong. I replaced the entire menu css with the original. It fixes the dropdown issue but  the main menu is still gone. This index.css is all kinds of messed up.

numbro, you may be better off starting from scratch and, saving your original files as you go.  ;)
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: Mick. on July 09, 2013, 04:35:22 PM
What theme is it?
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:37:35 PM
Going by the menus in his pics I am thinking default. But with the css that he supplied, there is no main nav at all. Only the navs in admin, profile, etc.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:38:35 PM
Quote from: Mick. on July 09, 2013, 04:35:22 PM
What theme is it?
It's called "epic".

http://custom.simplemachines.org/themes/index.php?lemma=2332
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:41:07 PM
If using a custom theme, why is the default menu showing?
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:42:27 PM
Quote from: ARG on July 09, 2013, 04:41:07 PM
If using a custom theme, why is the default menu showing?
Just log in. I created an account for you.

Username: ARG
Password: guest

The theme is titled "epic"
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 04:48:15 PM
This one fixes your dropdown issue but your main nav menu is a mess. Not sure what you did there.
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 04:58:57 PM
Quote from: ARG on July 09, 2013, 04:48:15 PM
This one fixes your dropdown issue but your main nav menu is a mess. Not sure what you did there.
I actually just figured this one out. I had removed a {display: none;} that the menu needed. And are you sure? :(
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 05:05:00 PM
This one (see attachment) fixes the main nav menu and the wrapper.

Btw, the min/max wrapper width should be altered in the css "wrapper" settings, not the "body".

Also, borders really don't belong in the toolbar unless you know what you are doing.

The main nave dropdown also has issues but I have to run so it's up to you to work on that. Also, borders really don't belong in the toolbar unless you know what you are doing. You can work on that as well.  ;)

Here's a hint: The problem is in this area.

#nav {
padding: 3px 0;
margin-left: 0;
margin-top: -10px;
margin-bottom: 7px;
list-style-type: none;
text-align: left;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
display: inline-block;
margin: 0;
}
#nav li a {
display: block;
line-height: 32px;
padding: 0 12px;
color: #cecece;
font-size: 12px;
}
#nav li a.active {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height:28px;
}
#nav li a.active span {
background: url(../images/id/nav_active.png) 100% 50% no-repeat;
}
#nav li a:hover, #nav li:hover a, #nav li.sfhover a {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height: 28px;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #ccc;
background: #E4620E;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #fff;
background: #E4620E;
}
#nav li li {
width: 200px;
height: auto;
padding: 0;
}
#nav li li a, #nav li li a:hover, #nav li li a, #nav a.active li a, #nav li:hover li a, #nav li.sfhover li a {
background: none;
height: 30px;
line-height: 30px;
margin: 0;
font-weight: normal;
text-transform: none;
font-size: 12px;
color: #FFF;
}
#nav li ul {
background: #202020;
position: absolute;
width: 200px;
left: -999em;
margin-left: -1px;
}
#nav li ul ul {
margin: -27px 0 0 195px;
}
#nav ul li li:hover, #nav ul li li.hover {
position: static;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: 3px;
}
#nav li li:hover ul, #nav li li li:hover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}


What a mess!  ;D
Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: numbro on July 09, 2013, 05:07:52 PM
Quote from: ARG on July 09, 2013, 05:05:00 PM
This one (see attachment) fixes the main nav menu and the wrapper.

Btw, the min/max wrapper width should be altered in the css "wrapper" settings, not the "body".

The main nave dropdown also has issues but I have to run so it's up to you to work on that.

Here's a hint: The problem is in this area.

#nav {
padding: 3px 0;
margin-left: 0;
margin-top: -10px;
margin-bottom: 7px;
list-style-type: none;
text-align: left;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
display: inline-block;
margin: 0;
}
#nav li a {
display: block;
line-height: 32px;
padding: 0 12px;
color: #cecece;
font-size: 12px;
}
#nav li a.active {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height:28px;
}
#nav li a.active span {
background: url(../images/id/nav_active.png) 100% 50% no-repeat;
}
#nav li a:hover, #nav li:hover a, #nav li.sfhover a {
position: relative;
z-index: 1;
margin-right: 3px;
-moz-box-shadow: inset 0px 0px 2px 0px rgb(15, 93, 109);
-webkit-box-shadow: inset 0px 0px 2px 0px rgb(70, 70, 70);
box-shadow: inset 0px 0px 2px 0px rgb(114, 114, 114);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #0c0c0c;
color: rgb(175, 175, 175);
font-size: 12px;
padding: 6px 12px;
text-decoration: none;
text-shadow: 0px 1px 1px #000000;
background: rgb(24, 24, 24);
border-bottom: 2px solid #0c0c0c;
height: 28px;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #ccc;
background: #E4620E;
}
#nav li:hover li a, #nav li ul li a:hover {
color: #fff;
background: #E4620E;
}
#nav li li {
width: 200px;
height: auto;
padding: 0;
}
#nav li li a, #nav li li a:hover, #nav li li a, #nav a.active li a, #nav li:hover li a, #nav li.sfhover li a {
background: none;
height: 30px;
line-height: 30px;
margin: 0;
font-weight: normal;
text-transform: none;
font-size: 12px;
color: #FFF;
}
#nav li ul {
background: #202020;
position: absolute;
width: 200px;
left: -999em;
margin-left: -1px;
}
#nav li ul ul {
margin: -27px 0 0 195px;
}
#nav ul li li:hover, #nav ul li li.hover {
position: static;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: 3px;
}
#nav li li:hover ul, #nav li li li:hover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}


What a mess!  ;D
Thanks man! Fixed it. ;)

Title: Re: My dropdowns aren't aligned the right way, and won't go away.
Post by: ARG01 on July 09, 2013, 05:15:43 PM
I am not sure if you caught this in my edit even though I mentioned it twice, purposely.

QuoteAlso, borders really don't belong in the toolbar unless you know what you are doing.
;)