Log In · Register

 
Almost there ... but only almost., Trouble positioning tables on MySpace website.
MrPutty
post Jul 15 2007, 04:11 AM
Post #1


Newbie
*

Group: Member
Posts: 4
Joined: Jul 2007
Member No: 545,910



Hello everyone!

For the last days I've been wrestling with CSS trying to get the Layout to work properly. There are two open matters I just can't get solved.

Link to my MySpace

The tasks are simple per se - but I just cant figure out how it's done on MySpace:

1: I'd like the tables to align on the lefthand side with the header, while keeping the alignment on the right side. From what I understand, a clear.gif is spanned between the tables. I have no idea where I can adjust the alignment.

2: The tables dont have the same height below the header. (The right one starts lower). There are two <br> above the blog table, and just one above the name-table. Although I can change the line height of the <br>, I cant get both sides to line up properly of course. (1 left / 2 right)

Having spent complete nights till 4:30 am on these, I'm all out of luck. Your help is greatly appreciated.


Monokoi
 
 
Start new topic
Replies
MrPutty
post Jul 15 2007, 05:59 PM
Post #2


Newbie
*

Group: Member
Posts: 4
Joined: Jul 2007
Member No: 545,910



whistling.gif Maybe I should have include the css used. Sorry!


CODE
<div class="kopf"><span></span></div>

<style type="text/css">

NOTE{hide}
span form { display:none; }


NOTE {reduce}
body {background:000000 url('http://www.anro-media.com/images/monokoi_music.jpg') no-repeat fixed center center; font-size: 1px; line-height: 1px;font-family: Helvetica, Verdana, Arial, sans-serif; }

NOTE {apply}

p {margin: 0px 0px 1em 0px; font-family: Helvetica, Verdana, Arial, sans-serif, !important}

NOTE {set}

a, a:link, a:visited {color:808080; text-decoration: none;}

a:hover {color:2F4F4F; text-decoration: none}

NOTE {brought}

img {border: none}

NOTE {set}

br {line-height: 20px;}

NOTE {apply}

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

NOTE {shifts}

body>div {margin-left: 10px;}

NOTE {zeros}

table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}

table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}

NOTE {these}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: url('none');}

table table table table td {padding:0px;margin:0px;}

table table table {margin:0px; background-color:transparent; background-image: url('http://www.anro-media.com/images/monokoi_trans.png'); width: 100% !important; border-width: 3px; border-style: double; border-color: ffffff;}

NOTE {this}

.kopf {width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 158px; background-image: url('http://www.anro-media.com/images/monokoi_bar.png');}

NOTE {pushes}

body table {margin-top:104px;}

body td table, body div table {margin-top: 0;}

NOTE {sets}

font {color:342815;font-size:10px}

a font:hover {color:ff0000}

a.navbar:link, a.navbar:visited {color:808080}

a.navbar:hover {color:808080}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

NOTE {sets}

.text {color:000000;font-size:11px}

a.text:link, a.text:visited {color:342815}

a.text:hover {color:000000}

NOTE {how}

.nametext {border-left:0px solid ffffff; border-right:0px solid ffffff; border-top:0px solid ffffff; border-bottom:3px solid ffffff; background-image: url('http://www.anro-media.com/images/monokoi_name.gif'); background-repeat: no-repeat; overflow: hidden; height: 40px; width: 270px; font-size: 1px; text-align: left; color: d9d9d9; display: block; margin-left:0px; margin-right:0px; margin-top:14px; margin-bottom:8px;
-left:0px; padding-right:0px; padding-top:0px; padding-bottom:3px; background-position-y:center;}

NOTE {your}

.contactTable {width: 328px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 {position: relative; left: 10px;}

.contactTable td table {background-color: transparent; background-image: url('http://www.anro-media.com/images/monokoi_contact.gif'); background-position:  center 50%; background-repeat: no-repeat}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}

NOTE {stretches}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

NOTE {these}

.whitetext12 {color:000000; font-size: 18px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 270px}

NOTE {this}

.blacktext12 {color:000000;font-size:18px; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px}

NOTE {why}

.blacktext12:before {content: "OMFG!";}

NOTE {"Latest Blog Entry" and}

.btext {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; text-align: center; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff}

NOTE {all}

.orangetext15 {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 372px}

NOTE {bold}

.lightbluetext8 {color:660000}

NOTE {span}

.redtext, .redbtext {color:000000; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold}

.redbtext:after {content: "billion";}

NOTE {text}

a.redlink:link {color:437538; display: block; text-align: center; border-width: 3px 0px 0px 0px; border-style: double; border-color: ffffff; padding-top: 3px;}

a.redlink:visited {color:437538}

a.redlink:hover {color:76996e}

NOTE {removes}

u {text-decoration: none; font-size: 10px;}

</style>

<comment>
<style type="text/css">

NOTE {here}

.whitetext12{width: auto}

.contactTable {
    width: auto !important;
}

.contactTable span.whitetext12 {
    left: 0;
}

.orangetext15 {width: auto;}

table table table td{padding: 0;}

table table table {
padding: 0 14px 14px 14px;
border-color: ffffff;
}

table table table {max-width: 423px;}

.nametext {
height: 35px;
width: auto;
}

table tr td table tr td table tr td div strong {
    display: inline;
    width: auto;
}


</style>
</comment>

<p style="font-size: 10px;">monokoi - under construction!</p>


blink.gif I still havn't solved the matter... any pointers, please?
 

Posts in this topic


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: