Another Theme Problem - Please Help! [Archive] - Mysidia Adoptables Support Forum

View Full Version : Another Theme Problem - Please Help!

Abronsyth

02-21-2013, 08:45 AM

Okay, so due to some profile.php issues, I changed my theme and made it wider (plus I like the new colors more!). However, profile.php is still being a pain in my you-know-what and screwing up my theme.

It's messing with my footer, and it's killing me. I've tested all other pages and it works fine, it's just when viewing a user's profile that the footer gets moved about.
Here's my HTML
<!DOCTYPE html>
<head>
<title>:BROWSERTITLE:</title>
<link rel="stylesheet" href="templates/main/media/style.css" type="text/css" />
</head>

<center><body>

<div id="header"><br><h1>Belles Ombres</h1></div>
<div id="nav"><ul><li><a href="/">Home</a></li><li><a href="adopt.php">Adopt Center</a></li><li><a href="pound.php">Shelter</a></li><li><a href="breeding.php">Breed Pets</a></li><li><a href="pages.php?page=trivia">Trivia</a></li><li><a href="promo.php">Redeem Code</a></li><li><a href="shop.php">Market</a></li><li><a href="donate.php">Bank</a></li><li><a href="explore.php">Explore</a></li><li><a href="arcade.php">Arcade</a></li><li><a href="trade.php">Trade</a></li><li><a href="/forum">Forum</a></li><li><a href="shoutbox.php">Shout Box</a></li><li><a href="profile.php">Members</a></li><li><a href="stats.php">Stats</a></li><li><a href="search.php">Search</a></li></ul></div>
<div id="menu">:SIDEFEED:</div>

<div id="content">
<h2>:ARTICLETITLE:</h2>
:ARTICLECONTENT:</div>

<div id="footer"><p>All content © <a href="http://www.bellesombres.com/">BellesOmbres</a> 2013 :: Powered by <a href='http://www.mysidiaadoptables.com'>Mysidia Adoptables</a></p>
</div>

</body></center>

Here's my CSS
body {
background:#4D754B;background: rgb(222,239,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)), color-stop(100%,rgba

(152,190,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /*

IE6-9 */
font-family:Arial, Tahoma, sans-serif;
font-size:12px;
color:#000000;
}

a {
color:#0489B1;
text-decoration:none;
}

a:hover {
color:#6CC7DC;
text-decoration:none;
}

#header {
float:center;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop

(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0

); /* IE6-9 */
width:800px;
height:100px;
border-top-left-radius:15px;
border-top-right-radius:15px;
padding:10px;
}

#header h1 {
font-size:30px;
color:#ffffff;
font-family:Arial;
letter-spacing:8px;
}

#nav {
width:800px;
height:40px;
line-height:15px;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-

stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /*

IE6-9 */
padding:10px;
}

#nav li {
display:inline;
list-style-type:none;
padding:3px;
}

#nav ul {
list-style-type:none;
margin-top:-7px;
}
#nav li {
float:left;
}
#nav li a {
padding:0 5px;
display:block;
color:#ffffff;
}
#nav li a:hover {
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-

stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
}

#content {
float:center;
background:#ffffff;
text-align:center;
width:800px;
min-height:400px;
padding:10px;
}

#menu {
float:left;
background:#FAFAFA;
text-align:center;
width:150px;
height:300px;
padding:10px;
border-radius:15px;
}

#footer {
clear:both;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba

(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+

*/
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /*

IE6-9 */
color:#ffffff;
width:800px;
text-align:center;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
padding:10px;
}

#content h2 {
text-align:left;
font-size:20px;
color:#4AA4C7;
}

(CSS/Html Template (c) BellesOmbres.com)

Thanks in advance!
-Abron/Pero

Tequila

02-21-2013, 03:02 PM

I think the main issue is that there are conflicting <div> layers... I can't figure out where though...

Abronsyth

02-22-2013, 08:55 AM

Well, thanks for having a look...ugh, that blasted profile page keeps messing me up...

Tequila

02-22-2013, 01:08 PM

I'd say change out some of the divs for tables, see if that fixes it. ;3 I'm going to completely strip out what I want from the profile page when I get CH up and running...

Hall of Famer

02-23-2013, 06:00 AM

umm the profile? What are you referring to? Just curious.

Abronsyth

02-23-2013, 02:48 PM

Profile referring to viewing a user's profile :) I'm not sure where to go to alter the size of the tab/panel thing, so it's been messing up my CSS.

Hall of Famer

02-23-2013, 03:26 PM

Well did you look into the file css/tab.css?

Abronsyth

02-23-2013, 03:44 PM

Well, HoF, I went through and had a look at it, even changed a few things, but to no avail. Here's a screen shot of the problem:
here (http://i1217.photobucket.com/albums/dd382/Iris-red-knee/problem_zpscc2b6677.png)

Notice how the footer is being moved around..? The footer should actually be at the bottom of the content, but instead it's kind of floating over it and then conflicting with the user profile page.

Hall of Famer

02-23-2013, 03:52 PM

I see, thats weird, I believe there's a way to move the profile tab box around on a certain page. You really sure this cannot be achieved by editing any items in the css file for tabs?

And btw, I am surprised that you just changed your gender from female to male lol.

Abronsyth

02-23-2013, 04:00 PM

Hall of Famer

02-23-2013, 11:22 PM

Hm, I'll just have to continue messing with it...I'm not familiar with using tables to set up a site theme, as Tequila suggested, so I'll have to test that out to see if that could possibly fix it.

((Mehp, I'm just a young person doing what young people do: coming to terms with myself...I be a trans*man. Now go feel uncomfortable ;-;))

I see, good luck playing with the css, I will probably look into it too since I believe I used to manipulate the position of profile tabs before. Its definitely doable.

lol you sound energetic, now I miss the days when I was young. Come to think of it, I see lots of gender benders on bigger forums, its rare to have one for a support forum of this scale though. XD

Abronsyth

02-24-2013, 12:32 PM

Yeah, I'll have to see if I have the time today...last day of Mid-Winter break and I've a bit to do for school...

Gender bender is different from transsexual, but yeah, there are a lot of gender queers on the bigger forums. Now I feel special XD

Abronsyth

02-28-2013, 04:43 PM

Okay, time for an update!

I have VERY LITTLE experience working with tables, so please bear with me in this.

I set up the content and footer as tables...and it turned out quite well except for one little problemo...for some reason my table.content class have been shoved way down...and I'm not sure what I could have accidentally done to have moved down so far.

Screen Shot (http://i1217.photobucket.com/albums/dd382/Iris-red-knee/MoreLayoutProblems_zps6fbbb135.jpg)

Here's my updated template.html:
<!DOCTYPE html>
<head>
<title>:BROWSERTITLE:</title>
<link rel="stylesheet" href="media/style.css" type="text/css" />
</head>

<center><body>

<div id="header"><br><h1>Belles Ombres</h1></div>
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>World</span></a>
<ul>
<li><a href='explore.php'><span>Explore</span></a></li>
<li><a href='shop.php'><span>Market</span></a></li>
<li><a href='arcade.php'><span>Arcade</span></a></li>
<li><a href='trade.php'><span>Trade</span></a></li>
<li class='last'><a href='donate.php'><span>Bank</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Adopt</span></a>
<ul>
<li><a href='adopt.php'><span>Adoption Center</span></a></li>
<li><a href='pound.php'><span>Shelter</span></a></li>
<li><a href='pages.php?page=trivia'><span>Trivia</span></a></li>
<li class='last'><a href='promo.php'><span>Redeem Code</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Community</span></a>
<ul>
<li><a href='/forum'><span>Forum</span></a></li>
<li><a href='shoutbox.php'><span>Shout Box</span></a></li>
<li><a href='profile.php'><span>Members</span></a></li>
<li class='last'><a href='stats.php'><span>Stats</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Help</span></a>
<ul>
<li><a href='pages.php?page=guide'><span>Newbie Guide</span></a></li>
<li><a href='pages.php?page=archives'><span>Archives</span></a></li>
<li class='last'><a href='pages.php?page=catalog'><span>Items</span></a></li>
</ul>
</li>
<li class='last'><a href='search.php'><span>Search</span></a></li>
</ul>
</div>
<div id="content">
<table class="content" align="center">
<tr><td>
<h2>:ARTICLETITLE:</h2>
:ARTICLECONTENT:</td><td class="menu">:SIDEFEED:</td></tr></table></div>

<div id="footer"><table class="footer"><tr><td><p>All content © <a

href="http://www.bellesombres.com/">BellesOmbres</a> 2013 :: Powered by <a

href='http://www.mysidiaadoptables.com'>Mysidia Adoptables</a></p></td></tr>
</div>

</body></center>

Here's my updated style.css:
body {
background:#4D754B;background: rgb(222,239,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); /*

FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)),

color-stop(100%,rgba(152,190,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*

Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*

IE10+ */
background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); /*

W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff',

endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
font-family:Arial, Tahoma, sans-serif;
font-size:12px;
color:#000000;
}

a {
color:#0489B1;
text-decoration:none;
}

a:hover {
color:#6CC7DC;
text-decoration:none;
}

#header {
float:center;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);

/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba

(167,207,223,1)), color-stop (100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1)

100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*

Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*

IE10+ */
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);

/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf',

endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
width:800px;
height:100px;
border-top-left-radius:15px;
border-top-right-radius:15px;
padding:10px;
}

#header h1 {
font-size:30px;
color:#ffffff;
font-family:Arial;
letter-spacing:8px;
}

#cssmenu {width:820px;}

#cssmenu ul {margin: 0; padding: 7px 6px 0; background: #4C9ACE url(overlay.png) repeat-x 0

-110px; line-height: 100%; font: normal 12px Arial, Helvetica, sans-serif; -webkit-box-shadow: 0

1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#cssmenu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#cssmenu a,
#cssmenu a:link {font-weight: bold; color: #ffffff; text-decoration: none; display: block; padding:

8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;

text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#cssmenu a:hover {background: #000; color: #fff;}
#cssmenu .active a,
#cssmenu li:hover > a {background: #89BFE3 url(overlay.png) repeat-x 0 -40px; color: #444; -

webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow:

none; -moz-box-shadow: none;}
#cssmenu ul ul a:hover {background: #8f8f8f url(overlay.png) repeat-x 0 -100px !important;

color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#cssmenu li:hover > ul {display: block;}
#cssmenu ul ul {display: none; font-size: 10px; margin: 0; padding: 0; width: 185px; position:

absolute; top: 40px; left: 0; background: #ddd url(overlay.png) repeat-x 0 0; border: solid 1px

#b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-

box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-

shadow: 0 1px 3px rgba(0,0,0, .3);}
#cssmenu ul ul li {float: none; margin: 0; padding: 3px; }
#cssmenu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
#cssmenu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height:

0;}
* html #cssmenu ul {height: 1%;}

#content {
background:#ffffff;
width:800px;

padding:10px;
}

table.content {
background:#ffffff;
text-align:center;
width:800px;
}

td.menu {
background:#DCEFF7;
text-align:center;
width:150px;
height:300px;
padding:10px;
border-radius:15px;
}

#footer {
clear:both;
background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /*

FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)),

color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera

11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+

*/
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /*

W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf',

endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
color:#ffffff;
width:800px;
text-align:center;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
padding:10px;
}

table.footer {
color:#ffffff;
width:800px;
text-align:center;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
padding:10px;
}

#footer a {
color:#ffffff;
text-decoration:none;
}

h2 {
text-align:left;
font-size:20px;
color:#4AA4C7;
}

Tequila

02-28-2013, 07:29 PM

I'm guessing table.content is the place where your content and sidefeed end up?

Try this:
table.content {
background:#ffffff;
text-align:center;
vertical-align:top;
width:800px;
}

By telling it to align vertically at the top is the best way to work with tables. Unless you want them vertical middle and centered. ;3

Abronsyth

03-01-2013, 06:52 PM

Thank you for the tip...but unfortunatley it's still not working properly :(
http://www.bellesombres.com/

Also now I'm getting a problem where on my online.php and my profile.php the text is enlarged, which makes for formatting problems.

At any rate, my footer problem is fixed!

Tequila

03-01-2013, 10:00 PM

Odd... and it's too late now for me to look it over... (has to work at 7am EST... it's now 11pm est).

I'll take a look tomorrow after work.

Abronsyth

03-03-2013, 04:22 PM

Thanks Tequila ;_; I'm sorry I'm such a pain in the butt to all you guys! I wish I had the money to pay someone to code a layout for me XD

Or at least find a website with free blank html layouts...I've been looking but can't seem to find any :/