View Full Version : major css problem. need some guidence asap

Jan 29th, 2010, 05:43 PM
i am trying to design a soundclick vip page. i have no idea where to start. i know enough css and html to place things in i just can't seem to figure out where to take that first step.


the above link is a site layout that i am trying to accomplish.

like i said i know a little css. i've done numerous myspace div overlay layouts so i just need a little head start.
i got this code from a posting on this site but have no idea how to go about putting them in. every time i try and place an image into the css template coding section the page doesn't change except for the background image. the page stays with the page views and plays on the left side, with the songs on the right side i need them all in line vertically. here is the code i got from another posting

/********* SoundClick CSS Template (based on custom version Sat, Dec 26 2009) ***********/

/* general */
body {background:#333333 url(http://i707.photobucket.com/albums/ww75/bumbeats/4010539646_a615e8f7e2_o.jpg) fixed center; margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Tahoma,Geneva; font-size:13px;}
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:#222222 dashed 1px; font-style:italic; padding:10px; background:#000000;}

/* main containers */
.mainTable {; color:#999999; width:990px; margin-left:auto; margin-right:auto; text-align:left;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_20.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_20.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:#222222 dashed 1px; border-top:#222222 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:#000000; color:#cccccc; border:#222222 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:#222222 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:15px; 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:#000000; color:#cccccc; border:#222222 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:#222222 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:12px; 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:#222222 solid 1px; border-bottom:#222222 solid 1px; text-align:right; font-size:12px; 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:#222222 solid 1px; width:330px; padding:3px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:12px; 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:#222222 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:15px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#222222 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:15px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:13px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:12px;}

/* comments page */
.commentsWelcome {background:#000000; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#222222 solid 1px;}
.commentsBox {border-bottom:#222222 dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#222222 dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:12px; 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:13px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#222222 dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#222222 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:#222222 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:#222222 dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:15px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:13px;}
.reviewsBox .rev_source {text-align:right; font-size:12px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:#000000; color:#cccccc; border:#222222 solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#222222 solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#222222 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;}

if there's anything you can give me to start out or a site that has a tutorial on doing a layout would be greatly appreciated.

Jan 29th, 2010, 07:34 PM
anybody have any way of getting the top banner up and putting in the divs as the page goes down? i'm really in a bind right now and any help/tips would be greatly appreciated.

Jan 29th, 2010, 08:54 PM
Ok, I'll give this a shot.

Take it step by step. There are three elements you are trying to create here: the background, the navigation links, and the main content. So I'll go through these three (any other elements you should be able to figure out after understanding these)

0. CSS Reset.

To avoid any problems with automatic browser styles, make sure to include a css reset. Google it, you'll find one pretty quick.

1. Background.

You can define the background using the "body". In this case, we have a repeating image. As you can see, this one repeats horizontally and vertically. Many times people will have an image they want to repeat only horizontally (like a gradient) or only vertically (like the background of a content box). Luckily, it is easy to define any of these using css.

Repeat both: "repeat"
Repeat horizontal: "repeat-x"
Repeat vertical: "repeat-y"

In the example below, I have the fictional background image repeat both ways.

body {
background: url(bg.jpg) repeat;

If you create a style like this along with your basic html structure (doctype, head, body), you should see whatever image you defined tile across the entire page.

2. Navigation.

There are a number of ways to create this section. Let's start with the basics. When I start making a site, I like to make boxes to represent the content and make sure they are all placed correctly, then put the content inside them.

So lets start with the navigation bar box. You want to have your graphics made beforehand. So if you made a nice nav bar graphic, cut it out of photoshop and export it, then check its dimensions (height specifically).

Let's say that, for example, you wanted to create a nav bar that was 850px wide and 50px tall. Here's what I would do.

First add the div into the html.

<div id="nav"></div>

Now go into your css, and turn this div into a box with the correct dimensions

#nav {
width: 850px;
height: 50px;
border: 1px solid;

If you preview your page now, you should see an outlined box with the dimensions you specified in the top left of the page. Good so far, right?

Now we need to make it automatically center on the page, and maybe move it down a bit from the top. To do this, let's add the following code:

#nav {
width: 850px;
height: 50px;
border: 1px solid;
margin-left: auto;
margin-right: auto;
margin-top: 30px;

Now if you look again, your box should be centered, and have a bit of breathing room at the top. The next step is put an unordered list inside this box which can contain navigation links. First, we'll add this to the html.

<div id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Bands</a></li>

Now let's style it a bit using css. We want the links to go next to each other nice and snug, so we will float them left. We also want to eliminate any list style type (bullets), have them display as inline blocks, and eliminate the annoying little outline that firefox applies to links.

#nav li {
list-style-type: none;
display: inline;
float: left;
#nav ul li a {
display: block;
height: 50px;
background-position: 0 0;
outline: 0;

This should look good so far. If you want to add hover and pulldown effects... ask me later because that would take forever to explain, and this is already taking me a long time. If the links are too close to each other, toss in some margins. If you want to add images, add a class to each <li> in the html, and toss in some simple css like this (this would be for <li class="home">)

#nav .home a {
background: url(home.png) no-repeat;
width: 84px;

Phew. This took a little while. Luckily, content should be easier. Make another div below the navigation one in your html. Using css, define the same width and centering as you did to the navigation - this way they will line up correctly. Type some text into the content div, and you'll notice it will appear when you preview.

You will also want to add a background image to this div. The background image they have is a transparent png including the main are and a drop shadow. They also likely used a repeat-y so that it could expand indefinitely.

Now, for content inside the box, if you want this to center, you'll need to do the same thing you did to the larger divs, but inside the content div. So create a "music" div inside the content one, set a width and height, and apply the auto margins. This is pretty much the entire page. The main content div will expand to fit the number

Hope this helps! It's all about understanding. Sometimes its possible to toss something together without knowing what you are doing at all, but it always takes longer and is much more frustrating.