Anybody here good with CSS Coding? Need some help.

so authentic

so authentic

Banned
1,375
10
Joined
Dec 2, 2009
PM me.
nerd.gif
 
yo, i have a soundclick page which is basically a music producers placeto upload his tracks. mines look pretty messed up right now.

http://www.soundclick.com...ew=true&content=main

I'm trying to get my page to look something like this guys:
http://vybebeatz.com/

ialready have a background with the music player and things lined upperfect. but the problem is that i cant for the life of me figure outhow the hell to get the music player to move to that certain spot, etc.

here's some css that i have on my page now:

 /*********  SoundClick CSS Template (based on custom version Thu, Apr 22 2010)  ***********/

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

/*  general */
   body {background:#333333url(http://cdn2.soundclick.co...7420_115.jpg?version115)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;}  /* hardlyused, 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_70.png);color:#999999; width:683px; float:left; overflow:hidden; margin:10px0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible
frown.gif
*/
   
/*  left navigation  */
    .navigation{background:url(/images/siteNav/transbgblocks/black/bg_70.png);color:#666666; width:300px; float:left; overflow:hidden; margin:10px0px 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:#000000; 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 rightside 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:tongue:ointer;}
   
    /*  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 solid1px; 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:tongue:ointer;}
       

   
    /*  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:0px20px 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_headerli.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:#232323dashed 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:centercenter; 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 solid1px;}
    .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:tongue:ointer; 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 0px10px 0px; overflow:hidden; cursor:tongue:ointer; 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:tongue:ointer;}
    .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:tongue:ointer;}



           
would be great if you could at least give me a start.
Click to expand...
 
im guessing you're trying to move the
Code: 
.embeddedPlayer {margin:50px auto; width:620px;}
correct?
 
ok, there are 3 things that are affecting the layout.
1) .navigation

Code: 
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_70.png); color:#666666; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}

change float to none, add postion:absolute if you want it to be within the main contents, otherwise it will float above the main contents.

2) mainContent

Code: 
.mainContent{background:url(/images/siteNav/transbgblocks/black/bg_70.png);color:#999999; width:683px; float:left; overflow:hidden; margin:10px0px 20px 5px;}

change float to none, expand the width to whatever you like (you're bg image's size probably)

3) .embeddedPlayer

move it around as you like.
 
basically you just have to play with:

{margin: ___ ;}

&

{float:___;}

For reference, check out vybebeats code: (right click-viewpagesource-click link for CSS)
Code: 
http://www.soundclick.com/vybebeatz
Hope this helps..
 
 
also, you probably want to use your "layout" bg in the .maintable div instead of the body.
I'd also resize it to the standard 1000px instead of 1444.
 
Good info in here. I still got a lot of work to do though. cant quite get the mp3 player to move on top of the banner and in place. same with the plays #...
 
Originally Posted by Mo Matik

Do people still play? I might reinstall.
Click to expand...

laugh.gif
man its still the most played first person shooter game....and i miss it sometimes...but its gets annoying fast...i might install it tomorrow...the steam platform really makes it easy to reinstall etc.
 
You must log in or register to reply here.

Similar threads

F
Help with archiving heaps of old files
Replies
4
Views
674
fluid hips
fluid hips
4
Need help
Replies
3
Views
475
4RunnerTac
4
c-gravy
Fake check - kobe iv protro draft day
Replies
0
Views
663
c-gravy
c-gravy
D
Help identify this shoe by description
Replies
5
Views
1K
midnitegreen
midnitegreen
fdub
Do anyone here have issues with Hyperpigmentation(Dark spots) on their face?
Replies
1
Views
493
youngwolf
youngwolf

The ultimate sneaker enthusiast community.

NikeTalk was created as a way of giving back to both the sneaker enthusiast community and to the greater global community of which we are all a part.

NikeTalk is NOT affiliated with Nike Inc. in any way, shape, or form. All opinions expressed herein do not necessarily reflect those of Nike, Inc.

© 1999-2024 NikeTalk.com

Share this page

Back
Top Bottom