Logged Out
Create an Account
Login:
Password:

Forgot your password?
Help with CSS file

Help with CSS file
[Back to Index]
Thread Tags
Primary: [Advanced Layout]
Secondary: None

Iam using the Renewal Drop in template and have made some minor adjustments to the CSS.. The problem Iam having is that the top menu is inaccessible.. When you hover over where the link should be you can not click on it.. If I use any other template the site works fine..

Please take a look.. Site is at http://chaostheoryguild.dkpsystem.com/news.php

----------------
CSS File:

/* CSS Document */

/* hidden text lol */
.hiddentext {
display: none;
} /* */

/* This is the body, pretty straightforward */
html {
background-attachment: scroll;
background-image: url(http://dkpfiles.com/chaostheoryguild/background);
background-repeat: repeat;
background-position: left top;
}

BODY,.body {
cursor: default;
font-family: Arial, sans-serif;
font-size: 9pt;
color: #3E3F43;
margin: 0px;
padding: 0px;
}


/* main container */
#wrapper {
padding: 0px;
width: 900px;
top: 0px;
margin: 0px auto;
}

/* banner container */
#banner {
padding: 0px;
height: 200px;
width: 900px;
border-top: none;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
margin-bottom: 2px;
display: block;
}

/* menu container */
#menubar{
display: block;
padding: 0px;
height: 25px;
width: 900px;
margin-bottom: 2px;
border: 1px solid #000000;
background-image: url(http://dkpfiles.com/dkp-templates/renewal/content-bg.gif);
position: relative;
}
#menutext{
z-index:20
}

/* menu bar and rollover methods */
#menubar a, #menubar div {
float: left;
margin-top:3px;
}

#menubar div{ background-position: 0 -25px; }

#menubar a:link, #menubar a:visited {font-size:12pt;font-weight:bold;display:block;padding-left:8px;padding-right:8px;color:#888888;text-decoration:none}
#menubar a:hover, #menubar a:active {color:#000000;text-decoration: underline; }



/* for the guild logo image */
#guildname {
position: absolute;
display: block;
margin-left: 515px;
top: -75px;
z-index: 5;
}


/* main information container */
#main{
background-image: url(http://dkpfiles.com/dkp-templates/renewal/content-bg.gif);
padding: 0px;
width: 900px;
margin: 2px auto;
border: 1px solid #000000;
position: relative;
}

/* content container */
#content{
display: block;
width: 890px;
margin: 5px;
padding: 0px;
}

/* toggle switch for menu */
#toggle{
position: absolute;
visibility: visible;
margin-left: 892px;
margin-top: 9px;
width: 10px;
height: 71px;
background-image: url(http://dkpfiles.com/dkp-templates/renewal/content-bg.gif);
border: 1px solid #000000;
padding: 2px;
}

/* Content Area definition */
#ContentArea {
display: block;
width: 685px;
}

/* menu area container */
#MenuArea{
display: block;
width: 200px;
position: absolute;
margin-left: 690px;
margin-top: 9px;
z-index: 1;
}


/* Used in the default base as the Title table. Even with custom layouts, it's used in the Add/Edit Post and other popups that have a title */
div.Subject, td.Subject{
font-size: 9pt;
text-align: left;
margin-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
}

/* The Row of the "Title Table" */
#PageTitle {
font-size: 14pt;
font-weight: bold;
color: #000000;
}

/* This is the "Page Description" row of the "Title Table" */
#SubSubject{
font-size: 9pt;
color: #000000;
}


/* used to define the Menus */
.Menu {
background-color: #FFFFFF;
border: 1px solid #000000;
margin-bottom: 5px;
width: 198px;
padding: 0px;
}

table.Menu { width: 200px; }

/* The menu header (Menu, Resources, etc) as well as the Calendar Header, and the current date on the calendar */
.MenuCat {
font-weight: bold;
color: #393939;
text-align: center;
background: #EEEEEE;
}

/* The Menu option contents, as well as the body for the calendar */
.MenuChoice {
margin: 4px;
text-align: left;
padding: 0px;
}

.MenuChoice ul { text-indent: 0; }
.MenuChoice li {
list-style-type: square;
}

#mainmenu {
/*position: absolute;*/
/*display: none;*/
}

/* #dkpmenu { display: block; } */

/* TopStats container */
#stats{
background-color: #FFFFFF;
border: 1px solid #000000;
margin: 5px auto;
display: block;
text-align: center;
position: relative;
padding-top:10px;
padding-bottom:10px;
}

/* In the default layout, is the style of the "Top Stats" */
.TopStats{
font-size: 7.5pt;
vertical-align: top;
margin: 5px auto;
padding: 0px 5px;
position: relative;
}

.TopStats#left {
right: 50%;
top: 0px;
text-align: right;
position: absolute;
}
.TopStats#right {
left: 50%;
top: 0px;
text-align: left;
position: absolute;
}
.TopStats#invisible { visibility: hidden; z-index: 0; }


/* for the TopStats, is the color of the Statistic itself */
.StatCount{
color: #293D4F;
}

/* for the TopStats, is the color of a Statistic designed to get the user's attention */
.StatAlert{
color: #FB421E;
}


/* footer container */
#footer{
font-size: 10px;
color: #FFFFFF;
background-image: url(http://dkpfiles.com/dkp-templates/renewal/footer-bg.gif);
text-align: center;
width: 100%;
letter-spacing: 0.1em;
word-spacing: 0.3em;
border-top: 1px solid #000000;
padding: 5px 0px;
margin: 0px;
line-height: 16px;
clear: both;
}

#footer img {
margin: 0px auto;
}

/* used in the copyright notice */
#copyright{
font-size: 8pt;
color: #121212;
font-weight: bold;
text-align: center;
margin: 15px auto;
}

#copyright a:visited {color: #343434;}
#copyright a:link {color: #343434;}
#copyright a:active {color: #787878;}
#copyright a:hover {color: #787878;}


/* Custom horizontal rule */
.hr{
height: 1px;
width: 95%;
background-color: #000000;
margin: 5px auto;
clear: both;
overflow: hidden;
}


/* Basic Link Definition */
a:link, a:visited {
color: #F25F02;
text-decoration: none;
}

a:active, a:hover {
color: #F3AF01;
text-decoration: underline;
}


/* for any list rows that must show up to get the user's attention, this is the link for them */
A.inred:visited {color:#000000;}
A.inred:link {color:#000000;}
A.inred:active {color:#444444;}
A.inred:hover {color:#444444;}
/* CSS Document */

/* Title image, to be changed per style sheet to match the desired theme */
#titleimage {
display: block;
height: 200px;
width: 900px;
background-image: url(http://dkpfiles.com/dkp-templates/renewal/lordaeron.jpg);
}/* CSS Document */

/* used when [quote] tags are used in posts */
.quote{
font-size: 7.5pt;
}

/* Most tables use this type */
.List, .list{
border-collapse: collapse;
margin-top: 10px;
text-align: left;
background: #FFFFFF;
border: 1px solid #000000;
}

/* The header bar of tables that act as lists */
.listlabel{
font-size: 9pt;
font-weight: bold;
color: #393939;
background: #EEEEEE;
padding: 5px;
}

/* used on almost every page, is the style of one of the row-types in a table with alternating row types */
.list1,.l1{
font-size: 9pt;
padding: 5px;
background: #FFFFFF;
}

/* used on almost every page, is the style of the other of the row-types in a table with alternating row types */
.list2,.l2{
font-size: 9pt;
padding: 5px;
background: #FFFFFF;
}

/* used commonly, is for rows that want to "Get Your attention" in a table. IE, Missing Raids on your member profile. */
.listred,.lr{
background: #FF9999;
color: #000000;
padding: 5px;
font-size: 9pt;
}

/* used to mark a "new or recently posted" thread. */
.newlist1,.newl1{
background: #FFECB5;
font-weight:bold;
padding: 5px;
font-size: 9pt;
}

.newlist2,.newl2{
background: #FFECB5;
font-weight:bold;
padding: 5px;
font-size: 9pt;
}


/* used for the newsletter table */
table.newsletter{
border: 1px solid #000000;
font-family: monospace;
font-size: 9pt;
}

/* This is used with [title] tags in guides and posts */
.GuideTitle{
font-weight:bold;
font-size: 16pt;
color: #000000;
}


/* used with [subtitle] tags in guides and posts */
.GuideSubTitle{
font-weight:bold;
font-size: 11pt;
color: #3E3F43;
}


/* Error box description */
table.error{
border: 1px solid #FFFFFF;
}

/* Error box description */
td.error,.missing,div.error{
font-size: 9pt;
background: #771111;
color: #FFFFFF;
}

/* Error box title */
.errorlistlabel{
background:#BB1111;
font-weight:bold;
color:#FFFFFF;
font-size: 11pt;
}


/* used in a few places to just define a normal place to put simple kinda-small text */
.plain{
font-size: 9pt;
}

/* to define small text in random places */
.xsmall{
font-size: 7.5pt;
}


/* Calendar Header, and the current date on the calendar */
.calheader{ /* extends from .MenuCat */
font-size: 9pt;
font-weight: bold;
color: #393939;
text-align: center;
background: #EEEEEE;

}

a.calheader {
border: none;
}

/* The body for the calendar */
.calbody{
font-size: 9pt;
}

/* Current day in the calendar */
.calcurrent {
font-size: 7.5pt;
color: #FFFFFF;
background: #DFDFDF;
border: 1px solid #AEB7C8;
}

.calcurrent a:link, .calcurrent a:visited {
color: #F25F02;
text-decoration: none;
}

.calcurrent a:active, .calcurrent a:hover {
color: #F3AF01;
text-decoration: underline;
}


/* The cell record on the calendar for if there is something scheduled this day */
.calsomething{}

.calsomething a:link, .calsomething a:visited {
color: #F25F02;
text-decoration: none;
}

.calsomething a:active, .calsomething a:hover {
color: #F3AF01;
text-decoration: underline;
}



/* is the information about the poster on the forum. The left-most pane on each post */
.PostInfo{
font-size: 9pt;
background: #FFFFFF;
width: 150px;
border: 1px solid #000000;
border-collapse: collapse;
}

.PostText{
font-size: 9pt;
background: #FFFFFF;
border: 1px solid #000000;
border-collapse: collapse;
}


/* While rather rarely used, this is the "color picker" popup. Probably shouldn't ever change */
.cp{
width: 10px;
height: 10px;
}

/* On the forum, this is the little blurb at the top that gives statistic info "Total Posts" "Total Threads" "Deepest Thread" */
.ThreadHeader{
font-size: 11pt;
}

/* The style associated with the "Add a Post to this thread" link on the forum */
.MakeAPost{
font-weight: bold;
font-size: 11pt;
}

/* The style associated with the pane in the layout containing the body of each post */

/* used on the [pre] tags in posts and stuff */
pre{
font-size: 11pt;
}

/* used in on most pages as the buttom class */
input.button{
background: #FFFFFF;
color: #000000;
}

/* used in the default layout as any list items */
li{
list-style-type:disc;
list-style-position: inside;
}


/* The next rules (all preceded with bigcal) are for the 'Big Calendar' (bigcalendar.php) */

/* this is the table that displays the calendar info */
.bigcal {width:100%;border-style:inset;border-width:1px;border-color:black}

/* This is the header of the calendar, displaying the month and year, and the links to the next months */
.bigcalheader{font-size:16pt;font-weight:bold;background: #ffffff;}

/* Day Labels 'Sunday' 'Monday' etc */
.bigcaldayheader{font-size:10pt;font-weight:bold;background: #ffffff;color:#000000}

/* This is the class for each day */
.bigcalday {width:14%;border-style:solid;border-color:#3DE34D;border-width:1px;height:100px;background:#ffffff;}

/* This is a class that is displayed on event labels (8:00pm - Gruul's Lair) */
.bigcallabel{font-size:8pt;cursor:pointer}

/* This is the div containing the day of the month */
.bigcaldaylabel{font-size:8pt;background:#191919;text-align:center;color:#dddddd}

/* The class when a day on the calendar is being hovered over */
.bigcalday_hover{border-color:white}

/* One of the classes displayed on today */
.bigcalcurrent{border-color:#000000;background:#dddddd}

/* One of the classes to display is something is scheduled on that day */
.bigcalsomething{}

/* This is going to be the Arrows to the right and left */
.bigcalheader a{background:transparent}

/* This is the div that gets clicked to add a new item. The default image is a plus. The Overflow:hidden is because IE, for whatever reason, wants to make it higher than the height attribute */
.bigcalplus{ position:relative;
top:2px;
float:right;
width:10px;
height:10px;
overflow:hidden;
line-height:1px;
background-image:url(http://www.dkpsystem.com/plus.gif);
cursor:pointer;}

/* A day that's not in the current month (at the beginning and end of the calendar display) */
.bigcalblank {}


/* The following are the rules for tabs */
div.tabrow{float:left;width:100%;padding-top:5px;}
ul.tabrow, ul.tabrow li{list-style-type:none;margin:0;padding:0}
ul.tabrow{margin-left:10px;}
ul.tabrow li{list-style-image:none;float:left;margin-right: 3px;text-align:center;font-size:inherit}
ul.tabrow a{float:left;width:8em;padding: 5px 0;background-color:#293d4f;}
ul.tabrow a:hover {background:#444444;}
ul.tabrow li.selected a,ul.tabrow li.selected a:hover {background-color:#eeeeee;color:#393939}

------------

Thanks
I think i figured this out.. I reduced the size of the Logo.. My one remaining question is... Can I raise the postion of the logo since I made it smaller so its higher on the banner?

Thanks
This is the rule you'll want to tinker with:

#guildname {
position: absolute;
display: block;
margin-left: 515px;
top: -75px;
z-index: 5;
}



You can move the top or the margin-left settings to move the logo around. If you were to do, say top: -150px, it'll move the logo up 75 pixels.

Right now, your site is lookin pretty good to me though, did you tweak it since then?


--
It's all in the reflexes.
Thanks! I moved it up just a little and I like it! One more silly question all the menus listed on the right side make the page appear very long on that side.. What section do I look at if I want to shift some of thoses menus below or to the left side.. Since Iam using the custom CSS it won't let me move then in the layout mode.

Thanks!
You're welcome!

That particular template only has menus on the right side, and you would have to dive into the HTML of the Advanced Layout Options to change that up. It's definitely not as easy as moving around objects in the CSS.

Because this particular kind of change requires some design changes, I can't particularly give you the step-by-step on what to do. So the best I can offer for this is to direct you to the documentation for the Advanced Layout Options: http://www.dkpsystem.com/guide/AdvancedLayoutOptions

Look out for the command: <!--System:Menus:Left--> and you'd want to change the <!--System:Menus:All--> command to say "right" instead of "all".

Does that help at all?


--
It's all in the reflexes.
That is a big help.. Thank you Chops!


[Back to Index]