Thread: CSS Being Annoying!!
View Single Post
  #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,524
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