#1
|
||||
|
||||
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: 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; } 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.
|
#2
|
||||
|
||||
More stuff
class_template.php assigning the images etc:
PHP Code:
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'>  {$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>   <font size="3">{$cash}</font> {$creditsicon}     <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>
__________________
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.
|
#3
|
||||
|
||||
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. |
#4
|
||||
|
||||
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.
|
#5
|
||||
|
||||
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) |
#6
|
||||
|
||||
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.
__________________
|
#7
|
||||
|
||||
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; }
__________________
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.
|
#8
|
||||
|
||||
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) |
#9
|
||||
|
||||
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.
|
Thread Tools | |
Display Modes | |
|
|
What's New? |
What's Hot? |
What's Popular? |