Help - Search - Members - Calendar
Full Version: Header & Table Alignment
Forums > Resource Center > Support Center > Livejournal Support > Livejournal Resolved Topics
diav
Hey there, I'm having difficulty with my header and table alignment. This is the first layout I've coded for Firefox (I used to do everything in IE but I switched over to FF now). I'm currently using the Generator style (S1) on a free account.

I'm trying to center my header (to no avail) and trying to move my entries down by 625px (under the header). My codes aren't working (see http://chewy-cc.livejournal.com).

Here are my codes below:

CODE
GLOBAL_HEAD<=
<title>1+1=2 | イチ タス イチ ハ 二</title>

<meta content="revealTrans(transition=6, duration=1.0)" http-equiv="Page-Enter">
<meta content="revealTrans(transition=7, duration=1.0)" http-equiv="Page-Exit">

<style type="text/css">
<!--
body {
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #CDCDCD;
scrollbar-face-color: #CDCDCD;
scrollbar-highlight-color: #CDCDCD;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
-->
</style>

<style type="text/css">
<!--

body {
background:#B7B7B7 url('') repeat-y;!important
background-position: center;!important
position: absolute;!important
margin-top: 625px;!important
margin-left: 0px;!important
overflow-x: hidden;!important
overflow: -moz-scrollbars-vertical;!important
color: #000000;
}

table {
width: 445px;!important
left: 50%;!important
margin-left: 22px;!important
margin-top: 625px;!important
z-index: 80;
}
table table {
width: 100%;!important
margin:0;
}
table table table {
width: auto;
}
html>body table{
position: relative;
}
img.header {
position: absolute;!important
top: 50px;!important
z-index: -10;
}

html>body img.header  {
z-index: 1;
}
html>body div{
z-index: 2;
}
.shadowed img {
display:none;
}
.shadowed img.x{
z-index: 1!important;
z-index: -10;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}
table, .shadowed div{
z-index: 80;
}
.shadowed span#navigation img {
display: inline;
visibility: visible;
position: relative;
}
p .index {
color: #000000;
}

p table table td.caption {
font-size:12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
color: #000000;
font-family: Trebuchet MS, sans-serif;
background-color: #FFFFFF;
padding-top:1px;
padding-right: 0px;
padding-bottom: 1px;
text-align: left;
border:0px dotted #DADADA;
width:342px;
}
.comments {
font-size: 10px;
font-family: Trebuchet MS, sans-serif;
color: #B3B3B3;

}
a:link, a:visited, a:active {
text-decoration: none;
font-weight: none;
color: #737373;
}
a:hover{
cursor: crosshair;
text-decoration: bold;
background-color: #B0BDBE;
text-transform:uppercase;
color: #FFFFFF;
}
.entrybox td{
text-align: justify;
font-family: Trebuchet MS, sans-serif;
font-size: 10px;
font-color: #595959;
}
.entrybox td.index {
text-align: left;
font-size:10px;
text-weight: bold;
background-color: #;
color: #B3B3B3;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 1px;

}
.head {
background-position: 0% 0%; !important
font-weight: bold;
text-transform:uppercase;
COLOR: #B3D7E6;
font-family: gerogia;
letter-spacing: 2px;
text-align: right;
border:1px dotted #A4A9C0;
}
.entrybox td.index, .index3{
display: none;
}
#sidebar{
position:absolute;
top:450px;
left: 50%; !important
margin-left:-295px !important;
margin-left:-295px;
width: 600px;
height: 20px;
visibility: visible;
z-index:2;
font-size:16px;
font-family: Myriad, sans-serif;
letter-spacing: 8px;
text-align:center;
}
#sidebar img{
display:inline;
}
#x{
position:absolute;
visibility: visible;
top:0px!important;
width: 449px!important
left:50% !important;
margin-left:-224px !important;
margin-left:-224px;
height: 625px!important;
}
#x img{
display:inline;
}
<!--
body, td, font, p {
font-family: Trebuchet MS, sans-serif;
color: #000000;
font-size: 11px;
}
div {
font-family: Trebuchet MS, sans-serif;
color: #B3D7E6;
font-size: 11px;
}
h4{
   font-size:small;
   border-bottom:1px dotted #B4B4B4;
}
hr{
    width: 50%;
    border: 1px dotted #B4B4B4;
    text-align: center;
}
-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=

<div id="#x"><img src="http://invoke.slipping-halo.net/MISC/zwei112.jpg" style="display:inline;visibility: visible; position:absolute; border:0 none;"
usemap="#imgmap" width="449" height="625" class="header">
<MAP NAME="imgmap">
<AREA SHAPE="rect" ALT="journal" COORDS="294,594,343,608" HREF="http://diav.livejournal.com">
<AREA SHAPE="rect" ALT="archive" COORDS="213,594,262,608" HREF="http://diav.livejournal.com/calendar">
<AREA SHAPE="rect" ALT="friends" COORDS="132,594,181,608" HREF="http://diav.livejournal.com/friends">
<AREA SHAPE="rect" ALT="info" COORDS="60,594,109,609" HREF="http://diav.livejournal.com/info">
</MAP>

</div>
<div> </div>

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
.shadowed img.x{
z-index: 1!important;
z-index: -10;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}
-->

</style>

<=LASTN_WEBSITE

FRIENDS_OPT_ITEMS=>20
LASTN_OPT_ITEMS=>20



LASTN_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments" style="text-align: right">
%%readlink%%<a href="%%urlpost%%">love?</a> <br /><br />
</td>
</tr>
<=LASTN_TALK_LINKS

DAY_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments" style="text-align: right">
%%readlink%%<a href="%%urlpost%%">love?</a> <br /><br />
</td>
</tr>
<=DAY_TALK_LINKS

FRIENDS_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments" style="text-align: right">
%%readlink%%<a href="%%urlpost%%">love?</a> <br /><br />
</td>
</tr>
<=FRIENDS_TALK_LINKS

LASTN_DATE_FORMAT<=
</td></tr><tr><td class="index2">
<p align="left"><b><sup>%%daylong%%, %%monlong%% %%dth%% %%yyyy%% ♥ %%24h%%:%%min%%%%ampm%%</sup></b></p>
</td></tr><tr><td class="index3">
<=LASTN_DATE_FORMAT


FRIENDS_DATE_FORMAT<=
</td></tr><tr><td class="index2">
<p align="left"><b><sup><sup>%%daylong%%, %%monlong%% %%dth%% %%yyyy%% ♥ %%24h%%:%%min%%%%ampm%%</sup></sup></b></p>
</td></tr><tr><td class="index3">
<=FRIENDS_DATE_FORMAT

DAY_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% ♥%%mc-plural-s%%</b></a> <b>-</b>

LASTN_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% ♥%%mc-plural-s%%</b></a> <b>-</b>

FRIENDS_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% ♥%%mc-plural-s%%</b></a> <b>-</b>
Mulder
CODE
top:0px!important;

that's whats causing your header to not move down 625px. change it to
CODE
top: 625px;


oh, delete the margin-top line.


and as for centering the header, its just trial and error.
diav
I did what you told me to, but it's still not working...

Oh, and yeah, I want to move my entries down by 625 px, not the header.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.