Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Questions and Supports

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 06-24-2017, 02:07 PM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 342
Gender: Female
Credits: 16,088
parayna is on a distinguished road
Default CSS Being Annoying!!

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:

Code:
/* 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:
Code:
/* ================================================================ 
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
__________________
It's been a long time. I had so much fun making a site back in 2016 that recently, when I started thinking about it again, I decided to come back and work on something small. It'll probably just be a personal project but who knows? We'll see, anyway.

Reply With Quote
  #2  
Old 06-24-2017, 03:43 PM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 342
Gender: Female
Credits: 16,088
parayna is on a distinguished road
Default More stuff

class_template.php assigning the images etc:
PHP Code:
    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:
Code:
   {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 ^_^
__________________
It's been a long time. I had so much fun making a site back in 2016 that recently, when I started thinking about it again, I decided to come back and work on something small. It'll probably just be a personal project but who knows? We'll see, anyway.

Reply With Quote
  #3  
Old 06-24-2017, 04:45 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
 
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 63,627
Dinocanid is on a distinguished road
Default

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.
__________________

Last edited by Dinocanid; 06-24-2017 at 04:50 PM.
Reply With Quote
  #4  
Old 06-24-2017, 05:00 PM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 342
Gender: Female
Credits: 16,088
parayna is on a distinguished road
Default

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 >.>
__________________
It's been a long time. I had so much fun making a site back in 2016 that recently, when I started thinking about it again, I decided to come back and work on something small. It'll probably just be a personal project but who knows? We'll see, anyway.

Reply With Quote
  #5  
Old 06-24-2017, 05:31 PM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
 
Join Date: Aug 2011
Location: NY
Posts: 1,011
Gender: Male
Credits: 111,671
Abronsyth is on a distinguished road
Default

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

So;
HTML Code:
.ddmenu {
width:100%; 
position:relative; 
z-index:100;
vertical-align:bottom;
}
__________________
My Mods Site (1.3.4, 2020 Mods)
Reply With Quote
  #6  
Old 06-24-2017, 10:03 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
 
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 63,627
Dinocanid is on a distinguished road
Default

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.
__________________
Reply With Quote
  #7  
Old 06-25-2017, 08:05 AM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 342
Gender: Female
Credits: 16,088
parayna is on a distinguished road
Default

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

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

th {
padding:10px;
vertical-align:bottom;
}
Took a lot of tinkering to figure it out >.>
__________________
It's been a long time. I had so much fun making a site back in 2016 that recently, when I started thinking about it again, I decided to come back and work on something small. It'll probably just be a personal project but who knows? We'll see, anyway.

Reply With Quote
  #8  
Old 06-25-2017, 08:56 AM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
 
Join Date: Aug 2011
Location: NY
Posts: 1,011
Gender: Male
Credits: 111,671
Abronsyth is on a distinguished road
Default

Nice, glad you got it figured out! Getting the theme to look juuuust right can be such a tedious thing
__________________
My Mods Site (1.3.4, 2020 Mods)
Reply With Quote
  #9  
Old 06-25-2017, 09:11 AM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 342
Gender: Female
Credits: 16,088
parayna is on a distinguished road
Default

Yeah, I agree with that statement... XD
__________________
It's been a long time. I had so much fun making a site back in 2016 that recently, when I started thinking about it again, I decided to come back and work on something small. It'll probably just be a personal project but who knows? We'll see, anyway.

Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 10:11 AM.

Currently Active Users: 332 (0 members and 332 guests)
Threads: 4,080, Posts: 32,024, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636