View Full Version : CSS Coding Hielp

Oct 7th, 2009, 01:13 AM
I have a soundclick page (http://www.soundclick.com/julkeyzbeatz) that I am trying to post a banner to the top of. In the Band Administration it gives you options to set-up your header, but every time I do this, it resizes my image. So it must be in the CSS coding for the page, that has to be where I edit to add the banner. I want to add something like this soundclick page (http://www.soundclick.com/superstaro) has, although, mine is a seperate image than his. If you think you could code the CSS, or if you could tell me what I would need to add to the CSS to accomplish this, please let me know..

Many thanks.

P.S. I have posted the current CSS/HTML coding for my soundclick page as well so you can see exactly what's going on, hopefully that will make it easier for you guys to help me out.

/********* SoundClick CSS Template (based on custom version Mon, Oct 05 2009) ***********/

/* general */
body {background:#333333 url(http://cdn2.soundclick.com/20/pro/backgrounds/5/993855_0.jpg?version0) top center fixed no-repeat; margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:12px;}
a, a:link, a:visited {color:#ececec; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:30px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {; color:#999999; width:990px; margin-left:auto; margin-right:auto; text-align:left;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_100.png); color:#999999; width:683px; float:left; overflow:hidden; margin:10px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible :( */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_100.png); color:#666666; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:#000000; color:#cccccc; font-weight:bold; border-bottom:#4b4b4b dashed 1px; border-top:#4b4b4b solid 1px; padding:3px 0px 3px 6px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:10px 5px 0px 0px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:#ff0000; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:14px; color:#cccccc; padding:12px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:35px;}
.mainContent .newsBox {clear:both; background:; color:#cccccc; border:#4b4b4b solid 2px; margin:0px 20px 20px 20px; padding:20px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:11px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursor:pointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:15px 0px 3px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:11px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:11px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursor:pointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:20px auto; width:620px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:14px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:14px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:12px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:11px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:11px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:12px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursor:pointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:14px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:12px;}
.reviewsBox .rev_source {text-align:right; font-size:11px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursor:pointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursor:pointer;}

Oct 7th, 2009, 06:07 AM
33 views and no one can help? please respond as soon as possible, I would really appreciate it..

Oct 7th, 2009, 06:37 AM
You have very many errors to correct before anything can be done.

Check here. (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.soundclick.com%2Fbands%2Fdefault.cfm%3FbandID%3D993855&charset=%28detect+automatically%29&doctype=Inline&group=0)

and here. (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.soundclick.com%2Fbands%2Fdefault.cfm%3FbandID%3D993855&profile=css21&usermedium=all&warning=1&lang=en)


Oct 7th, 2009, 08:01 AM
Those errors are on Soundclick's behalf, as I have rebooted the page to the original soundclick and revalidated and they are still showing up with the same number of errors, meaning it is something I have no hope in fixing, so if someone could please give me the coding to apply an image of 800 width and 600 height to the top of the page, that would be great, thank you for taking the time to reply though, I appreciate it.

Oct 7th, 2009, 10:15 AM
I am not by any means a super coder but I have had a go.
First, I moved


Then I hijacked an existing <div> and altered the image to
"http://www.exitfegs.co.uk/23moss.jpg" which you will see on screen. Here. (http://exitfegs.co.uk/soundclick.html)

I used the
<style> - These tags must be in the <head> section.
to add an additional property - z-index, to put the image on top of the existing one.
View source to see what I have done.
The <base href=" "> part is to pick up the images from your site.
Do you want the fresh image in place of, above the existing or on top of (like a postage stamp stuck on)
Perhaps you would give us the name of the image that you have to add. You could put this in place of the 23moss.jpg that I have used.
Hope you get some help from all this. With any luck you will get a better coder than I to carry on.
Get back to us if you need.


Oct 7th, 2009, 08:09 PM
Thank you very much for your help.

I would like the image to sit on "Julkeyz (http://www.soundclick.com/julkeyzbeatz)" page exactly where it sits on "SuperStar O's (http://www.soundclick.com/superstaro)" page (in the top middle, right below the nav bar) . I will provide a link to the image, and if there is anyway you could put the coding in your post that would be awesome...

Thanks again.


Oct 7th, 2009, 08:15 PM

Oct 7th, 2009, 09:53 PM
I have managed to get the image on the page, but I am still hazy as to where exactly you want it.


Another go - which you will see on screen. Here. (http://exitfegs.co.uk/soundclick.html)

Oct 7th, 2009, 10:00 PM
I understand you have placed the image, but if you look at this image (http://img27.imageshack.us/img27/3572/topbannercopycopy.png) on this page (http://www.soundclick.com/superstaro), my banner image (http://img202.imageshack.us/img202/4055/bannerblueprint1.jpg) is the exact same dimensions and I would like it placed in the exact same place on this page (http://www.soundclick.com/julkeyzbeatz).

Thank You.

Oct 7th, 2009, 10:22 PM
effpeetee If you have some sort of instant messenger and don't mind lending help to others when it comes to coding, it'd be great if I could have your username, I would love to use you as a resource in case I need help in future projects.

Oct 7th, 2009, 11:07 PM
Just look at this (http://exitfegs.co.uk/993855b.html) and tell me where it needs moving to, etc.

Just off to bed.
Passed my bedtime.


Oct 7th, 2009, 11:20 PM
it needs to sit just below the nav bar where you see
"Home > Instrumentals > Charts > Julkeyz"
"Place Banner Here In Center Of Page."

Oct 7th, 2009, 11:58 PM
I've figured it out! thanks for all your help Frank, you guys can mark this threat as resolved.