CSS Being Annoying!!

[KittHaven]

Hello XD I've made it so that at different times on my site, an image is displayed above the user bit to signify what time of day it is... but I'm having a bit of trouble lining it up with my top menu >.> Could anyone have a solution? ;~; I've been trying for like 2 hours and I'm running out of time to work on it tonight, so want to get this posted today and continue work tomorrow XD

Anyway, here is a screenshot of the issue:

  Spoiler: Image 

And here is my CSS file:

/* Setting Up Basic Styles */

body {
background:url("Normal BG Image.png") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
background-size: cover;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
}

br {
   display: block;
   margin: 3px 0;
}

hr {
   display: block;
   margin:3px auto;
   background:rgba(255,255,255,0);
}

#wrapper {
width:1200px;
margin:0 auto;
}

table {
width:100%;
font-size:12px; 
}

/* Here's for the top most links */

th {
padding:10px;
}

/* Next is our background for the title box, just save your image to the media folder, and put it's name and type in the box. */

#image {
background:url("") no-repeat center;
height:150px;
}

#image span {
position:relative;
font-size:100px;
font-family:'Arial';
}

#timeofday {
background:rgba(255,255,255,0);	
padding-left:40px;
padding-bottom:10px;
}

/* Change the color of the link for your site title here */

#image a{
color:#08c4b9;
text-decoration:none;
font-weight:bold;
text-shadow: 0px 1px 1px #eee;
}
#image a:hover {
color:#2b8883;
text-shadow: 0px 1px 1px #fff;
}

/* Standard table cell definitions */

td {
background:rgba(255,255,255,1);
border:3px solid transparent;
border-radius:10px;
width:auto;
padding-left:4px;
padding-top:4px;
}

/* Let's fix up your menu */

#menu {
width:200px;
background:rgba(255,255,255,1);
vertical-align:top;
border-radius:10px;
}

#menu p{
margin:auto 10px;
padding:2px;
}

#menu h1 {
font-size: 12pt;
border-bottom: 3px solid #DDD;
margin:2px auto 3px 10px;
color: #000;
text-transform:none;
}

#menu a {
margin:auto 10px;
display: block;
border-bottom: 1px solid #CCC;
padding: 2px;
padding-left: 10px;
text-transform: none;
font-size: 8pt;
letter-spacing: 1px;
}
		
#menu a:hover {
background-color: #91C7F5;
border-bottom-color: #000;
color: #fff;
}
	
#content {
vertical-align:top;
font-size:12px; 
}

#footer {
font-size:10px;
text-align:center;
}

#content p {
padding:3px;
margin:auto 10px;
}


#content h1 {
font-size: 16pt;
text-transform:none;
border-bottom: 1px solid #DDD;
margin:10px;
color: #000;
}

a{
text-decoration:none;
color:#91C7F5;
}
a:hover {
color:#333;
}

/* Avatar Image */

.avatar {
	width: 100px;
	height: 100px;
	padding-left:10px;

	}

/* News Box */

.newsbox {
	width: 800px;
	height: 33px;
	text-align: center;
	line-height: 33px;
	background-color: #FFD9D9;
	border: 2px solid #F78484;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
	
/* Speech Bubbles */

p.speech {
  position: relative;
  width: 700px;
  height: 80px;
  text-align: center;
  font-size:16px;
  line-height: 75px;
  background-color: #fff;
  border: 3px solid #B6B6B4;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.news fieldset{
color:black;
border-radius:3px;
border-color: black;
background-color: #d8fffd;
/*border:2px dotted black;*/
border-top: 2px solid #5dd0cc;
border-bottom: 2px solid #5dd0cc;
border-right: 2px solid #5dd0cc;
border-left: 2px solid #5dd0cc;

}

.news .content .authorimg{
float:left;
width:20%;
height:20%;
border: 1px dotted black;
padding:2px;
margin-right:10px;
margin-bottom:4px;
}

.news fieldset .title:before{
content:'>> ';
font-size:11px;
}

.news{
	width:99.5%;
color:black;
}
.news fieldset .content{
text-align:justify;
color:black;
}

.news .date {
font-size:10px;
font-weight: bold;
color:black;
}

.news .author a{
color:orange;
}

.news .author a:hover{
color:brown;
}

.news .title {
font-size:25px;
font-weight:bold;
color:orange;

}

.news .author:before {
content: ' | ';
}
.news .author {
color:black;
font-size:10px;
}

.news .comment{
font-size:10px;
}

.news .comment:before{
content: ' | ';
}

.pages{
color:#359e9a;
}
.page{
color:white;
background-color:#359e9a;
border-radius:5px;
border:2px solid #359e9a;
}
.page:hover{
color:white;
background-color:#104947;
border:2px solid #104947;
}

.cdate{
font-size:10px;
font-weight: bold;
color:black;
}

.cauthor{
color:black;
font-size:10px;
}
.ccontent{
font-size:10px;
text-align:justify;
color:black;
}

.ccontent img{
float:left;
width:17%;
height:17%;
border: 1px dotted black;
padding:2px;
margin-right:10px;
margin-bottom:4px;
}  

/*Item Shops*/
.s_top {
overflow:hidden;
display: block;
}
                
.sc_npc_text{  
width: 300px;
float: left;
position: relative;
height: 70px;
padding: 15px;
margin: 10px;
margin-top: 180px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
overflow: auto;
}

.sc_npc_img{  
width: 40%;
float: left;
border-radius: 10px;
margin-left: 25px;
border: 2px solid #55d9d4;
}

.sc_item {
width:200px;
height:300px;
display: inline-table;
padding: 5px;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 3px;
margin-left: 10px;
}

.s_panel {
border-radius: 10px;
border: 2px solid #55d9d4;
background-color: #c8fffd;  
}

I gave all of it because I don't know what might be helpful and what isn't... just in case! XD

menu.css:

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.ddmenu {
width:100%; 
position:relative; 
z-index:100;
}

.ddmenu ul li a, 

.ddmenu ul li a:visited {
display:block; 
text-decoration:none;
font-size:16px; 
color:#000000;
width:180px; 
height:40px; 
text-align:center; 
color:#c8fffd; 
border:2px solid rgba(200, 255, 253); 
border-radius:15px;
background:#55d9d4; 
line-height:40px; 
}

.ddmenu ul {
padding:0px; 
margin:0; 
list-style: none;
}

.ddmenu ul li {
float:left; 
position:relative;
}

.ddmenu ul li ul {
display: none;
}

/* specific to non IE browsers */
.ddmenu ul li:hover a {
color:#0fa29d; 
background:#7dfffa;
}

.ddmenu ul li:hover ul {
display:block; 
position:absolute; 
top:inherit; 
left:0; 
width:182px;
}

.ddmenu ul li:hover ul li a.hides {
background:#7dfffa; 
color:#fff;
}

.ddmenu ul li:hover ul li:hover a.hides {
background:#222; 
color:#0fa29d;
}

.ddmenu ul li:hover ul li ul {
display: none;
}

.ddmenu ul li:hover ul li a {
display:block; 
background:#19cbc5; 
color:#7dfffa;
}

.ddmenu ul li:hover ul li a:hover {
background:#94fffb; 
color:#5dd0cc;
}

.ddmenu ul li:hover ul li:hover ul {
display:block; 
position:absolute; 
left:182px; 
top:0;
}

.ddmenu ul li:hover ul li:hover ul.left {
left:-182px;
}

The rest is posted in a second comment because it wouldn't let me post all of it lol​

 

[KittHaven]

More stuff

class_template.php assigning the images etc:

    private function assignTemplateVars(){
		$mysidia = Registry::get("mysidia");
        $this->assign("version", Mysidia::version);
        $this->assign("root", $this->scriptRoot);
        $this->assign("home", $this->tempRoot);
        $this->assign("temp", $this->temp);
        $this->assign("css", $this->css);
        $this->assign("js", $this->js);   
		$this->assign("logged_in",$mysidia->user->isloggedin);
		$this->assign("isAdmin",$mysidia->user instanceof Admin); 
		$this->assign("username",$mysidia->user->username); 
		$this->assign("cash",$mysidia->user->getcash());
		$this->assign("premium",$mysidia->user->premiumcurrency);  	
		$gemimg = "<img src='{$root}/templates/icons/diamond.png' width= '19px' alt = 'gems' title = 'Gems'>";
		$this->assign("gemicon",$gemimg);  
		$creditsimg = "<img src='{$root}/templates/icons/credits.png' alt = 'credits' title = 'Credits'>";
		$this->assign("creditsicon",$creditsimg);  
		$dotimg = "<img src='{$root}/templates/icons/dot.png'>";
		$this->assign("dot",$dotimg);
		$messages = $mysidia->db->select("messages", array(), "touser='{$mysidia->user->username}' and status='unread'")->rowCount(); 
		$this->assign("messages",$messages);  	
        $profile = $mysidia->db->select("users_profile", array("uid", "avatar"), "username = '{$mysidia->user->username}'")->fetchObject();
        $img = "<img src='../../".$profile->avatar."' class='avatar'>";
        $this->assign("avatar",$img);  		
		$online = $mysidia->db->select("online", array(), "username != 'Visitor'")->rowCount();
		$this->assign("online","{$online} User(s) Online");  
		$now = new DateTime();        
		$hrs = $now->format('I');
		if ($hrs > 0) $msg = "<img src='{$root}/templates/icons/moon.png' alt = 'moon' title = 'Sweet dreams!'>"; // After midnight
		if ($hrs >  5) $msg = "<img src='{$root}/templates/icons/sunrise.png' alt = 'sunrise' title = 'Good morning!'>"; // After 5am
		if ($hrs >  10) $msg = "<img src='{$root}/templates/icons/sun.png' alt = 'sun' title = 'Have a good day!'>"; // After 10am
		if ($hrs > 18) $msg = "<img src='{$root}/templates/icons/sunset.png' alt = 'sunset' title = 'Have a nice evening!'>"; // After 6pm
		if ($hrs > 22) $msg = "<img src='{$root}/templates/icons/moon.png' alt = 'moon' title = 'Sweet dreams!'>"; // After 10pm
		$this->assign("timemsg",$msg); 
    }

template.tpl:

   {include file="{$root}{$temp}{$theme}/header.tpl"}

<body>
<div id="wrapper">
<table cellspacing="3px" cellpadding="0px">
<tr><td colspan="2" id="image"><span><center><a href="{$path}index">{$site_name}</a></center></span></td></tr>
<tr><td id="timeofday">{$timemsg}</td><th colspan="2"><center>{$menu}</center></th></tr>
<tr><td id="menu">
<b><p><u>{$smarty.now|date_format:"%A, %B %e, %Y"}</u><br>
<font size='3'> &nbsp{$dot} {$smarty.now|date_format:"%I:%M %p"}</font></p></b>
{if $logged_in}
<br><br><br><br><p><b>You are logged in as:</b></p>
<a href="{$home}profile/view/{$username}"><font size="4"><b>{$username}</b></font></a>
<p>{$avatar}</p>
<br><p> &nbsp <font size="3">{$cash}</font> {$creditsicon} &nbsp &nbsp <font size="3">{$premium}</font> {$gemicon}</p><br>
<a href="{$home}messages">{$messages} Message(s)</a><br><br>
<a href="{$home}myadopts">My Pets</a>
<a href="{$home}inventory">Inventory</a><br><br>
<a href="{$home}pages/view/games">Games</a><br><br>
<a href="{$home}adopt">Adopt New Pets</a>
<a href="{$home}promo">Special Code</a><br><br>
<a href="{$home}login/logout">Log Out</a>
{if $isAdmin}<a href="{$home}admincp">Admin Control Panel</a>{/if}{/if}
<br><br>
{$sidebar}
<a href="{$home}online">{$online}</a><br><br>	 

</td><td id="content">
<h1>{$document_title}</h1>
<p>{$document_content}</p>

</td></tr>
<tr><td colspan="2" id="footer">{$footer}</td></tr>
</table>
</div>

</body>

</html>

Thanks ^_^

 

[Dinocanid]

So you're just trying to get rid of the space between the menu and the content (the box thing that the main site is in)? I can't really tell if the moon is part of the background or the image you're talking about.

 

[KittHaven]

Yeah, basically XD The moon is a completely separate image (and it is the same type of box as all the wrapper, menu, etc, I just made it a separate class so I could make the background of the image transparent). What seems to be happening is the top menu is centering itself along the moon image, so it appears halfway up it when really I'd like it appearing aligned with the bottom of the moon image, so the menu is back near the wrapper >.>

 

[Abronsyth]

Have you tried setting the menu's vertical-align to bottom?

So;

.ddmenu {
width:100%; 
position:relative; 
z-index:100;
vertical-align:bottom;
}

 

[Dinocanid]

Did you try changing the z-index of the picture? You could also make the time-specific images part of the background (like in an image-editing/art program) and just change the background according to the time of day if you wanted that. I can't test solutions right now since it's so late, but you can try out our solutions to see how they work for you.

 

[KittHaven]

Thanks for the help I managed to get it working by putting this:

/* Here's for the top most links */

th {
padding:10px;
vertical-align:bottom;
}

Took a lot of tinkering to figure it out >.>

 

[Abronsyth]

Nice, glad you got it figured out! Getting the theme to look juuuust right can be such a tedious thing

 

[KittHaven]

Yeah, I agree with that statement... XD