Hello All,

I am new to designing using custom codes in NING. I have found some great tutorials that have helped me along though.

I am currently stuck with extra space being inserted after the flash file I've used for the header and after the static png that I'm using under my navigation. I've tried to resize the image and animated banner to fill in the space but it hasn't worked. Not sure if there is a margin or padding around the elements that I am unable to affect.

Hope someone can help. Thanks in advance

NING Site:
http://rewardcity.ning.com

Javascript from custom code area for both image and swf file:

<script type="text/javascript">
/**
 * Tracking Code Hack: Replace the Header of the network with a swf
**/
 
var headerSwfUrl    = "http://stimulus.ws/images/bountycardbanner.swf";
var headerSwfWidth  = 955;
var headerSwfHeight = 280;
var newHeaderHtml   = '<embed src="'+headerSwfUrl+'" width="'+headerSwfWidth+'" height="'+headerSwfHeight+'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer a href="http://www.macromedia.com/go/getflashplayer>">http://www.macromedia.com/go/getflashplayer>; "> </embed>';
var headerElement   = document.getElementById('xg_masthead');
 
//replace the old header with the new one
headerElement.innerHTML = newHeaderHtml;
 
//change the id as a simple way to remove all css attached to it
headerElement.id    = 'newheader';

</script>

CSS for entire NING site:

#xg {
    background-image:();
}


/*----------------------------------------------------------------------
    Header & Navigation (#xg_head and descendants)
----------------------------------------------------------------------*/
#xn_bar /*Ning bar at top*/
{margin: auto; display: none;background-color:transparent; background-  
image:transparent;width:955px;height:0px;background-position:top center background-repeat: no-repeat; background-attachment: scrolls; color: black;
}

#xg_masthead /*Top Image*/
{margin: auto;
display: block;
height:192px;
width: 955px;
}

#xg_sitename{
display:none;
}
   
}
#xg_head > #xg_masthead {
    background-image: none;
    height: auto;
}
#xg_masthead p#xg_sitename {
    background-image: none;
    margin:.1;
    padding:.1px 0 0 955px;
    line-height:.1em;

}
#xg_masthead p#xg_sitedesc {
    font-size:.1em;
    padding:0pt 0pt 0em .1px;
    color:#000;

}

#xg_navigation {
  background-color:#3B83BD;
  padding:1px;
  font-size:2px;
  *margin-top:0;
}

#xg_navigation ul li  {
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin: 0 0 0 0px;

}
#xg_navigation ul li a {
    background-color:transparent;
    color:#FFFFFF;
    line-height: 30px;
    padding-bottom:5px;
}
#xg_navigation ul li a:hover {
    background: transparent none;
    color:#000000;
}
#xg_navigation ul li.this a {
    color:#ef0303;
}

#xg_masthead p#xg_sitedesc {
    font-size:2.2em;
    padding:0pt 0pt 0em 18px;
    color:#587f94;

}


/*----------------------------------------------------------------------
    Body (#xg_body and descendants)
----------------------------------------------------------------------*/
.xg_module {
    margin-bottom: 1.5em;
}
.xg_module_head {
    border-bottom:2px dotted #CFE9F3;
    margin-bottom:0pt;
    text-transform:uppercase;
}
.xg_module_body,
.xg_module_foot {
    border-top: 2px dotted #14a2ae;
}
.xg_module_body {
    background-color: #FFFFFF;
}
#xg #xg_body h1 {
    color: #1ea5de;
}
ul.pagination li.this span {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #FFFFFF;
}
.xg_module_body h3,
.xg_module_body caption {
    color: #1ea5de;
}
#xg_body ul.navigation {
    position: static;
    float: left;
    clear: both;
    border-bottom: 1px dotted #14a2ae;
}
ul.page_tabs {
    border-bottom-color: #ccc;
}
ul.page_tabs li a,
ul.page_tabs li.this span {
    border-color: #ccc;
}

/*----------------------------------------------------------------------
    Footer (#xg_foot and descendants)
----------------------------------------------------------------------*/
#xg_foot,
#xg_foot a {
    color:#333;
    background-color: #fffff;
}
#xg_foot {
    border-top:2px solid #c8e5f0;
}

Views: 102

Reply to This

Replies to This Discussion

Try this - - add to bottom of Advanced CSS:
#xg_navigation {margin-top: -10px!important;}
#xg_head {margin-bottom:-4px!important;}

Best,
Jen
Too Cool,

I know it had something to do with the margins, but I just couldn't figure out what I needed to change.

Love the site.

Keep up the good work.

Warmest,

Gene
Thanks!

The tweaks needed were specific/unique to your CSS. However, at least the classes I used will help you see how these class attributes adjust elements within your design.

Best,
Jen

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips