Another Theme Problem - Please Help!

Forum
Last Post
Threads / Messages
Abronsyth

Abronsyth

A Headache Embodied
Member
Joined
Aug 25, 2011
Messages
1,012
Points
36
Location
NY
Mysidian Dollar
73,285
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
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
Code: 
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
 
Well, thanks for having a look...ugh, that blasted profile page keeps messing me up...
 
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...
 
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.
 
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

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.
 
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.
 
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 ;-;))​
 
Abronsyth said:
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 ;-;))​
Click to expand...

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

Here's my updated template.html:
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:
HTML: 
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;
}
 
I'm guessing table.content is the place where your content and sidefeed end up?

Try this:
PHP: 
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
 
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!
 
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 :/
 
You must log in or register to reply here.
Similar threads
Thread starter Title Forum Replies Date
B Another Fatal error message... Questions and Supports 8
NobodysHero Another Puzzle to Solve: User Profiles Display As Blank Questions and Supports 4
tahbikat Item function to turn an adopt into another species? Questions and Supports 6
Pear Yet another problem.. Questions and Supports 1
F Another new person with a question. Welcome Center 4

Similar threads

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,277
Messages
33,118
Members
1,602
Latest member
BerrieMilk
BETA

Latest Threads

Latest Posts

Share

Top