4 replies [Last post]
hlj71
hlj71's picture
Offline
Regular
Denver, CO
Last seen: 12 years 5 weeks ago
Denver, CO
Timezone: GMT-6
Joined: 2009-08-04
Posts: 20
Points: 15

Hi! I have just finished creating a new site that will replace one of our current sites.There is not any content yet, so I have added filler content where needed. All of these pages will eventually be developed in C#, so I have to keep the line of code that is in the first line of each page:
Code:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
I am aware this throws IE into quirks mode, but I have no choice but to develop around it.

The only working links on the page will be the main menu links (not the sub-nav links) which will take you to what the inner pages will look like.

I have validated the XHTML and the CSS code via W3C and I have tested the site in IE/FireFox/Google Chrome/Safari. This is the first website I have done using CSS layout, so I'm sure my code is bloated. Any tips on how to make it more efficient would be great! Actually, any comments/suggestion welcomed.

Site:
http://www.aahahealthypet.com/home_v1.aspx

Thank you!!

Harms

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi hlj71, Quite a complex

Hi hlj71,
Quite a complex page, you have done well to get this far with your first css layout.
I ran the home page through litmus browsers http://csscreator.litmusapp.com/pub/e93266c
Only one giving problems is IE6, which may be fixed by playing with widths and margins etc to calculate the correct column dimensions.

The only other thing to stand out for me was in Firefox the page height is double what it should be and there is a big space at the bottom of the page. I couldn't see what was causing it.

hlj71
hlj71's picture
Offline
Regular
Denver, CO
Last seen: 12 years 5 weeks ago
Denver, CO
Timezone: GMT-6
Joined: 2009-08-04
Posts: 20
Points: 15

Thanks for the feedback and

Thanks for the feedback and the info on the litmus site check. That's pretty cool! The reason the home page has that extra space at the bottom in FireFox is becasue the DIVs I have in the HeatlhyPet Community Tabs is really long and even though it's hidden from the users view, it still seems to make the online page long. I'll try to paste that part of the code only, maybe you have an idea on how to fix it in FireFox?

Also, I wound never been able to complete this without the help of these forums. You guys are life savers and teachers!

HTML:

        <div id="hp_comm">
            <div id="hp_comm_header"><span class="texthide">Healthy Pet Community</span></div>
            <div onclick="changeTabs(event)" id="content_main">
            <div id="hp_comm_tab_bkgd">
                <div id="t1" class="selTab">Ask a Vet</div>
                <div id="t2" class="tab">Vet Expert</div>
                <div id="t3" class="tab">Fun Stuff</div>
                <div id="t4" class="tab">Contests</div>
 
                <div id="t1base"></div>
                <div id="t2base"></div>
                <div id="t3base"></div>
                <div id="t4base"></div>
        <!-- Begin Content for default tab (1) -->       
                <div id="tabContents" class="tab_cont">
                    <div class="hp_comm_bkgd">
                        <div class="hp_comm_scroll_content">
                        <p class="tab_cont">tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet.</p>
                        <p class="tab_cont">tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Begin Content for all 4 tabs -->
        <!-- Tab 1 -->
        <div class="conts" id="t1Contents">
            <div class="hp_comm_bkgd">
                <div class="hp_comm_scroll_content">
                <p class="tab_cont"><a name="a" id="a"></a>tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet.</p>
                <p class="tab_cont">tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet. tab 1 content Ask a Vet.</p>
                </div>
            </div>
        </div>
        <!-- Tab 2 -->
        <div class="conts" id="t2Contents">
            <div class="hp_comm_bkgd">
                <div class="hp_comm_scroll_content">
                <p class="tab_cont">tab 2 content Vet Expert</p>
                </div>
            </div>
        </div>
        <!-- Tab 3-->
        <div class="conts" id="t3Contents">
            <div class="hp_comm_bkgd">
                <div class="hp_comm_scroll_content">
                <p class="tab_cont">tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff. tab 3 content Fun Stuff.</p>
                </div>
            </div>
        </div>

CSS:

#hp_comm {
	background-color:#108e69;
	float:left;
	clear:right;
	height:379px;
}
#hp_comm_header {
	background:url(../graphics/design/HP_community_header.gif) no-repeat top left;
	height:44px;
	width:100%;
}
/*HP Community Tabbed area*/
#content_main {
	/*width:422px;*/
	margin:0;
	float:left;
}
.conts { /*hides tabs not selected*/
	visibility:hidden;
	float:left;
	clear:both;
}
p.tab_cont { /*styles text in p tags in the tabcontents class*/
	font:normal 12px Helvetica, Arial, sans-serif;
	padding:0 5px;
}
.tab {
	text-align:center;
	font:bold 12px Helvetica, Arial, sans-serif;
	color:#11465a;
	width:103px;
	background-color:transparent;
	margin:5px 0 14px 0;
	float:left;
	clear:right;
	cursor:pointer;
}
.selTab	{
	text-align:center;
	font:bold 12px Helvetica, Arial, sans-serif;
	color:#11465a;
	width:103px;
	background-color:transparent;
	margin:5px 0 14px 0;
	float:left;
	clear:right;
	cursor:pointer;
}
.selTab a, .tab a {
	font:bold 12px Helvetica, Arial, sans-serif;
	color:#11465a;
	text-decoration:none;
}
 
.hp_comm_bkgd {
	width:422px;
	background:url(../graphics/design/hp_comm_bkgd.jpg) no-repeat top;
	margin-top:-5px;
	float:left;
	clear:both;
}
.hp_comm_scroll_content {
	font:normal 12px Helvetica, Arial, sans-serif;
	height:285px;
	padding:7px 5px;
	overflow:auto;
}
#hp_comm_tab_bkgd {
	background:url(../graphics/design/hp_comm_tab_bkgd.jpg) no-repeat top;
	margin:0;
	float:left;
}

Harms

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Instead of visibility:hidden;

Instead of visibility:hidden; try display:none;
Visibility still reserves the space for the content.

hlj71
hlj71's picture
Offline
Regular
Denver, CO
Last seen: 12 years 5 weeks ago
Denver, CO
Timezone: GMT-6
Joined: 2009-08-04
Posts: 20
Points: 15

OMG, I can't believe I didn't

OMG, I can't believe I didn't think of that Stare . Thank you, it worked great! Big smile

Harms