Default layout help...

[capricieux]

Okay, I'm still a noob when it comes to making a default layout. I am working on a couple of freebie defaults before attempting to sale some & something minor is bothering me:

http://divergente.org/visitor/layouts/msp1.php

I want to make the portion at the bottom (where it contains the about links and copyright notice) have a specific width or make it transparent. I don't like how the white part at the bottom is much wider than the rest of the layout. IDK if I explained that right lol. If anyone knows what I can do to fix this problem, please let me know (Y). BTW, here's the coding I am using-


table {background-color: transparent; border:none; padding: 0px;}
tr {background-color: transparent; border:none; padding: 0px;}
td {background-color: ffffff; border:none; padding: 0px;}
table table table {background-color: ffffff; height:.01%;}
table table table table {border:none;}
td.text td.text table table td {padding:3px;}
td td td td {width: 1%; text-align:justify;}

body {
background-color: ffffff;
background-image: url(http://i273.photobucket.com/albums/jj212/salienticons/myspace/banner19bg.jpg);
background-repeat: repeat;
background-attachment: fixed;
}

b, strong {color: 009f00;}

i {font-size:11px; color: ff3387;font-family:georgia;}

u {text-decoration: none; border-bottom:1px solid; border-color: ffcc00;}

body, p, td, font, tr, th, li, table, br, .text, div, .redtext {font-family: Lucida Sans Unicode, Lucida Grande; font-size: 11px; line-height: 13px; color: 000000; text-transform: none;}

.blacktext10 {display: block; background: 00a000; color: ffffff; font-family: Arial; font-size: 11px; font-weight: bold; text-align: center; line-height: 14px;}

.nametext {color: ff3387; font-family: arial; font-weight: bold; font-size: 24px; letter-spacing: -2px; line-height: 26px; text-transform: lowercase; }

.orangetext15, .whitetext12, .btext { font-family:Arial; color: 009f00; font-size: 20px; letter-spacing:-2px; text-align: left; line-height: 20px; font-weight:bold; display:block; visibility:visible; text-transform:lowercase;
}

.redbtext {font-family:Arial; ff3387; font-size: 20px; letter-spacing:-2px; text-transform:lowercase;}

.lightbluetext8 {font-family:Arial; font-size: 12px; line-height: 14px; color: 000000; background-color: ffcc00; text-transform: lowercase; text-align: center; font-weight:bold; display: block;}

.blacktext12 {font-family: tahoma; font-size: 0px; line-height: 0px; color: ffffff; text-transform: none; text-align: center; background-color: transparent; border:0px; display: block;}

a:link, a:link font, a:active, a:active font, a:visited, a:visited font, a.navbar:link, a.navbar:active, a.navbar:visited, a.redlink:link, a.redlink:active, a.redlink:visited {
font-family:Lucida Sans Unicode, Lucida Grande; font-size: 11px; color: ff3387; font-weight: normal; text-decoration: none; letter-spacing: 0px; text-transform: none; line-height: 12px;}

a:hover, a.navbar:hover, a.redlink:hover {color: 000000;}

img {filter: none; border: 0px;}

a:link img {filter: none; border: 0px;}

a:hover img {filter: progid:DXImageTransform.Microsoft.Pixelate (maxsquare=8); border: 0px;}

.blacktext12 {
font-family: Lucida Sans Unicode, Lucida Grande; font-size:11px; line-height: 12px; color: ff3387; font-weight: normal;
}

span.blacktext12 {
background-color: transparent;
background-image: url('http://i273.photobucket.com/albums/jj212/salienticons/myspace/banner19.jpg');
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 117px;
display: block;
}

.contactTable {width:300px!important; height:150px!important; padding:0px!important; background-image:url("http://i273.photobucket.com/albums/jj212/salienticons/myspace/banner17contact2.jpg");background-repeat:no-repeat; background-color:transparent;}
.contactTable
table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}
.contacttable .whitetext12 {display: none;}
.contactTable a img {visibility:hidden; border:0px!important;}
.contactTable a {display:block; height:28px; width:115px;}
.contactTable .text {font-size:1px!important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none!important;}

[mrs brightside]

I don't think you can take that off I've tried countless times before.

As you can see in this SS:
http://img233.imageshack.us/img233/7278/blahkz2.jpg
the only "td" (in red) part of the css ( td {background-color: ffffff; border:none; padding: 0px;} ) changes the color of the whole thing.. so if you made it transparent the white behind the layout would be transparent as well.

The only thing I found that worked was making a background image like this:
http://img393.imageshack.us/img393/3531/bgqw9.gif

Basically you just make a new image in your program, I make mine 1600px and the height of the background for the layout (in this case the image would be 200px X 1600px). I used the bucket tool and flood filled the whole image with the background, then I made a new image w800px and h200px. And pasted the white image as a new layer onto the 1600x200 image. I pasted it as a new layer because when you do that it goes directly in the center so you don't have to do it yourself ;P

The code you use for that type of background would be:
body {background-image:url(bg.gif); background-attachment:fixed; background-position:center; background-repeat:repeat-y; background-color:ffffff;}
Make sure you position the background in the center, repeat-y, and make it a fixed bg so it doesn't scroll for people with smaller resolutions than 1600px.

:]
http://img119.imageshack.us/img119/3914/newli9.gif

Whole Layout code:
<style type="text/css">

body {background-image:url(http://img393.imageshack.us/img393/3531/bgqw9.gif); background-attachment:fixed; background-position:center; background-repeat:repeat-y; background-color:ffffff;}

b, strong {color: 009f00;}

i {font-size:11px; color: ff3387;font-family:georgia;}

u {text-decoration: none; border-bottom:1px solid; border-color: ffcc00;}

body, p, td, font, tr, th, li, table, br, .text, div, .redtext {font-family: Lucida Sans Unicode, Lucida Grande; font-size: 11px; line-height: 13px; color: 000000; text-transform: none;}

.blacktext10 {display: block; background: 00a000; color: ffffff; font-family: Arial; font-size: 11px; font-weight: bold; text-align: center; line-height: 14px;}

.nametext {color: ff3387; font-family: arial; font-weight: bold; font-size: 24px; letter-spacing: -2px; line-height: 26px; text-transform: lowercase; }

.orangetext15, .whitetext12, .btext { font-family:Arial; color: 009f00; font-size: 20px; letter-spacing:-2px; text-align: left; line-height: 20px; font-weight:bold; display:block; visibility:visible; text-transform:lowercase;
}

.redbtext {font-family:Arial; ff3387; font-size: 20px; letter-spacing:-2px; text-transform:lowercase;}

.lightbluetext8 {font-family:Arial; font-size: 12px; line-height: 14px; color: 000000; background-color: ffcc00; text-transform: lowercase; text-align: center; font-weight:bold; display: block;}

.blacktext12 {font-family: tahoma; font-size: 0px; line-height: 0px; color: ffffff; text-transform: none; text-align: center; background-color: transparent; border:0px; display: block;}

a:link, a:link font, a:active, a:active font, a:visited, a:visited font, a.navbar:link, a.navbar:active, a.navbar:visited, a.redlink:link, a.redlink:active, a.redlink:visited {
font-family:Lucida Sans Unicode, Lucida Grande; font-size: 11px; color: ff3387; font-weight: normal; text-decoration: none; letter-spacing: 0px; text-transform: none; line-height: 12px;}

a:hover, a.navbar:hover, a.redlink:hover {color: 000000;}

img {filter: none; border: 0px;}

a:link img {filter: none; border: 0px;}

a:hover img {filter: progid:DXImageTransform.Microsoft.Pixelate (maxsquare=8); border: 0px;}

.blacktext12 {
font-family: Lucida Sans Unicode, Lucida Grande; font-size:11px; line-height: 12px; color: ff3387; font-weight: normal;
}

span.blacktext12 {
background-color: transparent;
background-image: url('http://i273.photobucket.com/albums/jj212/salienticons/myspace/banner19.jpg');
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 117px;
display: block;
}

.contactTable {width:300px!important; height:150px!important; padding:0px!important; background-image:url("http://i273.photobucket.com/albums/jj212/salienticons/myspace/banner17contact2.jpg");background-repeat:no-repeat; background-color:transparent;}
.contactTable
table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}
.contacttable .whitetext12 {display: none;}
.contactTable a img {visibility:hidden; border:0px!important;}
.contactTable a {display:block; height:28px; width:115px;}
.contactTable .text {font-size:1px!important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none!important;}

div.header {position: absolute; top: 0; left: 50%; margin-left: -500px; width: 1000px; height: 425px;}
table, tr, td {background:none; border:0;}
table table {border:0;}
table table table table {border:0; background-image:none;
background-color:transparent;}
table table table {width:100%; max-width:437px;
background:none; border:0;}</style>

I basically just removed this part of the code you had:
table {background-color: transparent; border:none; padding: 0px;}
tr {background-color: transparent; border:none; padding: 0px;}
td {background-color: ffffff; border:none; padding: 0px;}
table table table {background-color: ffffff; height:.01%;}
table table table table {border:none;}
td.text td.text table table td {padding:3px;}
td td td td {width: 1%; text-align:justify;}

And put a new code for the tables at the bottom:
div.header {position: absolute; top: 0; left: 50%; margin-left: -500px; width: 1000px; height: 425px;}
table, tr, td {background:none; border:0;}
table table {border:0;}
table table table table {border:0; background-image:none;
background-color:transparent;}
table table table {width:100%; max-width:437px;
background:none; border:0;}

And then the new background style. If you need anymore help you can PM meee.
I hope you understand this. :sweatdrop:

[spokenforxx]

me too, the bottom footer just can't be removed.

[jvuonger]

Thanks Tonya, for the novel. (Y)

[capricieux]

I understand it and will give it a shot, thanks so much Tonya <3! I tried the transparency w/ the td before and you're right, everything did go transparent. I'll still continue to see if there's an alternative way so I won't have to go and do that to all my layouts haha.

^^ & yeah, I was looking at other myspace resource sites and saw that theirs did the same thing so I was ugh, I can't ask them if they don't know lol.

[capricieux]

Does the bottom portion show up as transparent here for you guys? http://divergente.org/visitor/layouts/msp.php

I hope it does, then I won't have to do too much editing 'cause all I did was look at the myspace layout coding and add the following to my css:

#footerWarpper {background: transparent;}

[mrs brightside]

Does the bottom portion show up as transparent here for you guys? http://divergente.org/visitor/layouts/msp.php

I hope it does, then I won't have to do too much editing 'cause all I did was look at the myspace layout coding and add the following to my css:

#footerWarpper {background: transparent;}



Yep. :clap:

[capricieux]

Yep. :clap:

Yesssssss! Thank you lawd. :clap:

The problem has been resolved everyone ;).

[Alex]

doesn't work on myspace. check it out....

http://i190.photobucket.com/albums/z110/mylays_album/code.gif

[capricieux]

doesn't work on myspace. check it out....

http://i190.photobucket.com/albums/z110/mylays_album/code.gif

Oh yeah, I so forgot that we can't use the "#" sign. Eh, I guess it hasn't been resolved. I'll continue to look into an alternative solution but if I am unable to find one, I will quit being lazy and follow Tonya's suggestion ;p.

[capricieux]

Okay, I kind of have it how I want now. I moved the bottom links up so that table doesn't show. I used this code:

table div {margin-top:-65px;}
div table div, table table div {margin-top:0px; background-color: transparent;}

Which version do you guys think I should stick with? :?

http://divergente.org/visitor/layouts/msp.php
http://divergente.org/visitor/layouts/msp1.php

[itbejake]

I like the msp.php one because the footer of the page is equaled out, good work!

[capricieux]

^ Thanks! I continued to search because I hate for people to have to adjust the margin. Now I've found an ever better code and it should work, hopefully it will work perfectly for everyone. I found it on some site but still couldn't get it to work and edited a few things:

table {width:auto !important; height:auto !important; margin-right:auto; margin-left:auto;}
div table {width:800px !important;}
table div div {width:800px !important;}
body {text-align:center;}

& I tested those codes here: http://divergente.org/visitor/layouts/msp.php & http://divergente.org/visitor/layouts/msp2.php

Now I just have to break the layout up and create the .zips so I can offer them xD.