PDA

View Full Version : Header alignment using .div CSS


ChU v2
12-02-2007, 05:06 PM
I'm having trouble aligning the header template the way I want. I used a .div defined in Main CSS to locate my "login box" image. but when I try to right align next to my logo it goes all crazy.

Here is my header code.


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center"><img src="$stylevar[imgdir_misc]/xbox_header.png" border="0"></td>

<td align="right">
<div class="div13" align="center">
<br><br>
<if condition="$show['member']">

<strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase><br />
<if condition="$show['pmstats']"><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if><br />
<if condition="$show['pmwarning']"><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></if>

<if condition="$show['member']">
<a href="http://www.xboxinformer.net/forum/login.php?do=logout&amp;logouthash=0aa8481865a81b92733 81ebc87d7966c" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></td>
</if>
</div>
</div>
<else />

<!-- login form -->
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont"><label for="navbar_username">$vbphrase[username]</label></td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" colspan="2" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<a href="http://xboxinformer.net/forum/register.php">Click Here to Register!</a>
</if>
<!-- / login form -->

</td>

</div>

</tr>
</td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output
.div13


.div13 {
background-image:url(http://www.xboxinformer.net/forum/images/xbox/misc/loginbox.png);
background-repeat:none;
border:0px solid; border-color:black;
width:300px; height:124px; overflow:none;}


Thanks for any help

actone
12-02-2007, 06:53 PM
it looks like there wasnt enough room at the right side of the image so it went to the next line

ChU v2
12-02-2007, 10:50 PM
the page width is 900px the logo is 550px and the login box 300px so it should fit just fine.

actone
12-02-2007, 11:02 PM
i see

well, it looks like you fixed it

ChU v2
12-03-2007, 11:47 PM
Now I'm having this problem... see screen

actone
12-04-2007, 03:33 AM
maybe add a padding to the left of the logo and the right of the div

ChU v2
12-05-2007, 06:55 PM
maybe add a padding to the left of the logo and the right of the div

Can you add it to the code so I can see what you mean?