Log In · Register

 
 
Closed TopicStart new topic
Banner/header at the top of page, how do I lower the header down?
RoyalRiver
post Jan 14 2007, 07:12 PM
Post #1


Senior Member
***

Group: Member
Posts: 47
Joined: Jan 2006
Member No: 357,515



My livejournal: http://yucor.livejournal.com/

Can someone help me bring my banner/headyu a little bit lower? I want it directly on top of that box in the middle. It didn't used to be all the way at the top. I don't know what happened. Here's my layout code:

CODE
GLOBAL_HEAD<=
<title>Gimme Some Skin</title>
<style type="text/css">
<!--

.shadowed img{
display:none;
}

b {
color: #6ecadb;
}


td {
font-size: 7.5pt;
font-family: "Tahoma", sans-serif;
color: #a4a4a4;
text-align: justify;
background: #FFFFFF;
}

/* MOOD, MUSIC, BOTTOM NAVIGATION */
table table table td.meta {
font-size: 7.5pt;
font-family: "Arial", sans-serif;
color: #AAAAAA;
text-transform: normal;
background: #FFFFFF;
}

/* BACKGROUND IMAGE AND COLOR FOR THE PAGE */
/* MARGIN-TOP SHOULD BE AT LEAST THE HEIGHT OF YOUR HEADER */

body {
background-color:#e5e5e5;
background-image:url(http://img50.imageshack.us/img50/6999/bgimage7jc.png);
background-repeat:repeat;
background-attachment:fixed;
background-position:top left;
text-align:center;
margin:0;
margin-top:300px;
padding:0;
}


/*HEADER IMAGE WIDTH IS THE WIDTH OF THE HEADER, HEIGHT IS THE HEIGHT OF YOUR

HEADER, MARGIN LEFT IS THE NEGATIVE HALF WIDTH OF YOUR HEADER */

#header{
background-image:url(http://img.photobucket.com/albums/1003/Jchris34232/itsgoingdown2.png)

;
position:absolute;
visibility:visible;
top:0px;
width:550px;
left:50%;
margin-left:-275px;
height:300px;
text-align:center;
font-size:20pt;
}

p table table td.caption {
font-family: "Arial Narrow", sans-serif;
font-size: 10pt;
color: #999999;
text-transform: normal;
text-align: left;
font-weight: bold;
}

p {
margin:0;
padding:0;
}

.entrybox p{
margin: 1.2em 0;
}

.entrybox td.index, .index3{
display:none;
}

.index2{
width:100%;
text-align:right;
border-bottom:1px dotted; color:#999999;
display:block;
text-transform:uppercase;
letter-spacing:1.5;
font-size:8pt;
color:#dddddd
font-family: "Tahoma", sans-serif;
}

.comments{
text-align:center;
padding-bottom:50px;
}

.comments a{
color:#6ecadb;
}

.comments a:visited{
color:#dddddd;
}

.comments a:hover{
color:#dddddd; text-decoration: none; border-bottom: 2pt solid #c5eef8;
}

.comments img{
border:0;
}



/* TOP NAVIGATION YOU MIGHT HAVE TO CHANGE THE LEFT VALUE TO CENTER THE

NAVIGATION LINKS UNDER THE HEADER*/

.nav1, .nav2{
padding-top:2;
padding-bottom:2;
position:relative;
left:-0pt;
display:block;
}


.nav1{
background-color: #f4f4f4; text-transform:normal; center;
word-spacing:16px;
}


/* DO NOT CHANGE ANYTHING HERE */
table table td.shadowed table{
width:100%;
}
table td, .entrybox .meta{
padding:0;
}
.entrybox td{
padding:5px 10px;
}


.nav2 a{
color:#6ecadb;
}

.nav2 a:active{
color:#6ecadb;
}

.nav2 a:visited{
color:#dddddd;
}

.nav2 a:hover{
color:#dddddd;
}


a {
color: #6ecadb;
text-decoration:none;
}

a:visited {
color: #d6d6d6;
}

a:hover {
color:#dddddd;
text-decoration: none; border-bottom: 2pt solid #c5eef8;
}



/* SETS THE WIDTH AND BACKGROUND COLOR OF THE TABLE (CHOOSE THE SAME WIDTH AS

YOUR HEADER) */

div {
margin:0 auto;
width:550px;
background:#ffffff;
}
div div { background: none; width: auto; height: auto; padding: 0; }
div table { width: 98%; }
div table table { width: 100%; }
div table table table { width: auto; }
div table table table table { width: 100%; }



-->
</style>
<=GLOBAL_HEAD

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=
<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;
}

/*ALLOWS YOU TO PUT IMAGES IN THE NAVIGATION LINES*/

.shadowed span.nav1 img, .shadowed span.nav2 img{
display: inline;
visibility: visible;
position: relative;
}

-->
</style>
<!--DO NOT REMOVE THIS IF YOU WANT A HEADER-->

<div id="header">
<!--HEADER IMAGE, if you want to write something on top of it, do it here -->
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<!--END OF HEADER DIV-->

<!--START OF NEW NAVIGATION-->

<tr><td colspan="5" width="100%">
<table cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">

<!--FIRST ROW OF NEW NAVIGATION LINKS-->
<center><span class="nav1">
<a href="http://www.livejournal.com/users/yucor/info">userinfo</a>
<a href="http://www.livejournal.com/users/yucor">recent</a>
<a href="http://www.livejournal.com/users/yucor/friends">friends</a>
<a href="http://www.livejournal.com/friends/add.bml?user=yucor">add</a>
<br /></span><br />

<!--END OF FIRST ROW OF NEW NAVIGATION LINKS-->

<!--SECOND ROW OF NEW NAVIGATION LINKS-->

<span class="nav2">
Xanga: <a href="http://www.xanga.com/royalriver">yourlink</a> »
Wentworth Miller : <a href="http://wentworthmilleronline.com/">fansite</a> »
J&B: <a href="http://www.jackieandbender.com/">KISS 106.1</a>
</span></center>
<!--END OF SECOND ROW OF NEW NAVIGATION LINKS-->

<br /><br />
</td></tr></table></td></tr>
<=FRIENDS_WEBSITE

LASTN_TALK_READLINK<=
<a
href="%%urlread%%"><b>%%messagecount%%</b>
<img
src="http://img485.imageshack.us/img485/2118/read9oc.gif"
alt="read" title="Read"></a>
<=LASTN_TALK_READLINK

LASTN_OPT_ITEMS=>10

LASTN_DATE_FORMAT<=
</td></tr>
<span class="index2">%%monlong%% %%dth%%,
%%yyyy%%  %%12h%%:%%min%% %%ampm%%</span>
<tr><td class="index3">
<=LASTN_DATE_FORMAT

LASTN_WEBSITE<=
<style type="text/css">
<!--
/*HIDES THE ORIGINAL NAVIGATION*/
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 span.nav1 img, .shadowed span.nav2 img{
display: inline;
visibility: visible;
position: relative;
}

-->
</style>
<!--DO NOT REMOVE THIS IF YOU WANT A HEADER-->

<div id="header">
<!--HEADER IMAGE, if you want to write something on top of it, do it here -->
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<!--END OF HEADER DIV-->

<!--START OF NEW NAVIGATION-->

<tr><td colspan="5" width="100%">
<table cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">

<!--FIRST ROW OF NEW NAVIGATION LINKS-->
<center><span class="nav1">
<a href="http://www.livejournal.com/users/yucor/info">userinfo</a>
<a href="http://www.livejournal.com/users/yucor">recent</a>
<a href="http://www.livejournal.com/users/yucor/friends">friends</a>
<a href="http://www.livejournal.com/friends/add.bml?user=yucor">add</a>
<br /></span><br />

<!--END OF FIRST ROW OF NEW NAVIGATION LINKS-->

<!--SECOND ROW OF NEW NAVIGATION LINKS-->

<span class="nav2">
<center>Xanga: <a href="http://www.xanga.com/royalriver">RoyalRiver</a> »
Wentworth Miller : <a href="http://wentworthmilleronline.com/">fansite</a> »
J&B: <a href="http://www.jackieandbender.com/">KISS 106.1</a>
</span></center>
<!--END OF SECOND ROW OF NEW NAVIGATION LINKS-->

<br /><br />
</td></tr></table></td></tr>

<=LASTN_WEBSITE

LASTN_TALK_LINKS<=
<tr><td align="right" colspan="2" width="100%"
bgcolor="%%color:weak_back%%" class="comments">
%%readlink%%    <a
href="%%urlpost%%"><img
src="http://img210.imageshack.us/img210/402/comment3wm.gif"
alt="comment"
title="Comment"></a>  
<a
href=http://www.livejournal.com/tools/memadd.bml?%%itemargs%%><img
src="http://img210.imageshack.us/img210/5619/mem0pc.gif" alt="add
to memories" title="Add to
memories"></a>  
<a
href=http://www.livejournal.com/editjournal_do.bml?%%itemargs%%><img
src="http://img485.imageshack.us/img485/6686/editpost7wu.gif"
alt="edit post" title="Edit post"></a>
</td>
</tr>
<=LASTN_TALK_LINKS
 
*Azarel*
post Jan 14 2007, 07:44 PM
Post #2





Guest






I'm not entirely sure how much further down you want it, but a quick skim of your coding makes me think that you should adjust the red to move it up/down (I'm not entirely sure, though, let me know how it goes).

#header{
background-image:url(http://img.photobucket.com/albums/1003/Jchris34232/itsgoingdown2.png)

;
position:absolute;
visibility:visible;
top:0px;
width:550px;
left:50%;
margin-left:-275px;
height:300px;
text-align:center;
font-size:20pt;
}
 
Mulder
post Jan 14 2007, 07:54 PM
Post #3


i lost weight with Mulder!
*******

Group: Official Designer
Posts: 4,070
Joined: Jan 2005
Member No: 79,019



body {
background-color:#e5e5e5;
background-image:url(http://img50.imageshack.us/img50/6999/bgimage7jc.png);
background-repeat:repeat;
background-attachment:fixed;
background-position:top left;
text-align:center;
margin:0;
margin-top:300px;
padding:0;
}
i think this is actually where you would edit it. 300px is the height of your header, and you should (i hope) just be able to increase it. try anna's first. she actually uses S1.
 
RoyalRiver
post Jan 14 2007, 08:24 PM
Post #4


Senior Member
***

Group: Member
Posts: 47
Joined: Jan 2006
Member No: 357,515



Azarel: Your advice worked. Thanks to both of you guys for replying and helping me out.

I'm glad things worked out. Please PM me if you have any other questions and I'll reopen this thread for you.

This post has been edited by Azarel: Jan 15 2007, 06:03 PM
 

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