SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 30
Hybrid View
-
Oct 14, 2004, 15:19 #1
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS 2 column + header and footer Layout
Hey everyone ... I need a hand here please
I'm using the column wrapping trick taught in the css sitepoint book by Dan schafer. I'm having a few problems, all heeding different results in different browsers ... the notable one being the footer. This is supposed to be pushed down by the content as you'd expect, its not doing that if you look through the pages.
The other problems are:
2) Section headers (like "Dentists concerned with impact of pop on kids’ teeth" and "Test Your Dental IQ" are not showing right, they are supposed to be vertically centered over the images they are on top of now.
3) There are white spaces in the login box on the left ... shouldn't be, should be all that light orange colour in the BG.
4) Also the search box at top right, the text input is off ... iit and the 2 images on other side are supposed to be vertically centered together ...
What am I doing wrong here? The link is:
http://adsbc.bc.ca/dev/
The stylesheets are here:
http://adsbc.bc.ca/dev/css/contentElements.css
http://adsbc.bc.ca/dev/css/layoutElements.css
Thanks so much!Last edited by RamsayX; Oct 14, 2004 at 16:04.
Personal Portfolio
Paul O'B is the CSS god
-
Oct 14, 2004, 16:04 #2
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok I've fixed problem no.4 myself ... I was missing some attributes apparently that I thought were there.
1 down, 3 to go ...
Personal Portfolio
Paul O'B is the CSS god
-
Oct 14, 2004, 16:48 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The section headers alignment is prbably due to the default padding and margins on the p tag.
Try
Code:.main_headline p {margin-top:0;padding-top:2px;}
You need to put your footer back into the flow so it sits beneath the content. Of course this may mean changing other elements to suit also. You could place the footer absolutely in relation to the parent but you would need to add position:relative to the parent. You would then need to make provisions that the text doesn't overlap the footer by supplying padding-bottom to the element above so that the text is held clear. All in all it may be better just to put the footer back into the flow of the document.
Paul
Try to maintain a logical flow through the page and only absolutely place elements when necessary.
Paul
-
Oct 14, 2004, 18:14 #4
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok thanks for replying Paul ...
I got the section headers going nicely now. I am still unsure of the footer though ... I think I have the div's in the right order on the jsp page, and I tried a few changes in and around the stylesheets, but nothing was getting me the result I wanted. I tried changing the footer to relative but that put it near the top of the page ... I'm really confused here
Edit - I'm not able to figure out the white spaces in the local navigation either on the left sidePersonal Portfolio
Paul O'B is the CSS god
-
Oct 15, 2004, 08:49 #5
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok ... problems 2) 3) and 4) are all fixed now ... I'm still trying to grasp the first problem though. Anyone??
Personal Portfolio
Paul O'B is the CSS god
-
Oct 15, 2004, 08:57 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
What is problem 1 again
Is it the footer?
-
Oct 15, 2004, 09:07 #7
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thats right, about the footer,I've just uploaded the latest files. Thank you for your help Paul so far, I am starting to grasp the layouts concept with CSS (I've been using tables for years until I bought Dan Schafer's book) ... but I'm not 100% there yet. Lets see if we can get this page fixed first
Personal Portfolio
Paul O'B is the CSS god
-
Oct 15, 2004, 10:51 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The problem with your footer is as I explained earlier and will take a little bit of redesigning on your part I'm afraid
The content on your page is all absolutely placed and therefore takes up no space because it is removed from the flow of the document. This is fine when you are able to put everything exactly where you want it, however the problem arises when you have different size pages and you want your footer to remain below the content on other pages.
The only option in your design is for you to place the footer exactly where it needs to be on all the relevant pages.
What you should really do is to try and bring some flow back into the page as mentioned before. Elements that are statically placed (have no position set) will follow each other in a logical order and will exert pressure on those elements below.
Therefore, (if it were my page), I would use this method:
Create a static header element to contain all your header content and give it a height large enough to contain all the heading content. This will preserve the flow of the page and ensure that following content can follow on without positioning.
Create a left column that is floated to the side and is wide enough to hold all your left column content. All the left content elements can then be stacked in this float and should be placed one after the other without using absolute positioning (except where needed) but using margins etc to align elements.
Next create a content div that has a margin-left to clear the floated content and in this div put your existing centre content. However you will need to change the way that you have positioned things in this centre section. (This is where it gets complicated). The content div should have a position:relative defined (without co-ordinates) to gain a stacking context so that you can position within this element if necessary and not from the body as before.
The elements in the centre should be either floated or static so that they remain in the flow. The floted element comes first and then the static content follows and wraps around. You can of course change this to one absolutely placed element and make sure the other element to the side is kept clear with margins when both elements are the same height.
The boxes you have with images and arrows and text all absolutely placed should be contained in a wrapper that is not absolutely placed but has height and width equal to the content that goes inside. This will allow you to place the elements inside this wrapper absolutely so that you can position them where you want but the outer remains in the flow of the document. The wrapper of this (subpanel) boxes should have position relative defined so that you place the content relative to the immediate parent as mentioned previously.
The subpanel wrapper can now be floated alongside each other and still preserve the flow of the document. Remember that floated content will need to be cleared when you wwant content to follow on a new line.
This sequence of static or floated positioning should be carried through the page until the end of your content div preserving the flow of the epage all the way through.#
The footer can then be placed after the content and will need no positioning at all (except for margins etc) and will be pushed down by the content. The footer will also need to have a clear:both so that it clears the left column also. In this way your footer does not rely on any positioning and will be pushed down by any content on any page.
As you can see this is no simple change and will require a complete re-think of the way the design is handled. I have not offered any code or any quick fixes because I think you need to work through this at your own pace and also it would take me some time to work out all the sizes and where everything gets positioned and how big the wrappers should be etc.....
You may in this instance think it better just to place the footer absolutely where you want it on the relevant pages
Hope that all makes sense
Paul
-
Oct 15, 2004, 11:11 #9
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow, yikes ok thank you Paul ... for all that. I was afraid I was going to have to do that. I'll tackle this on the weekend then, and write back with the results here. Thanks again
Personal Portfolio
Paul O'B is the CSS god
-
Oct 17, 2004, 12:46 #10
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok could we take a look again? I'm getting the hang of it .. sorta. Most elements are relative now but its still not looking right ... the rightcolumn doesnt want to hang in the right place. I've just changed the right side to float left instead of right, but is that standard practice for a 2column layout? I'm guessing not ... anyway I'm getting the gyst of it but some things are still nagging me. Thanks in advance.
I'm actually working on this section now, has their own stylesheets:
http://adsbc.bc.ca/dev/members/members.jsp
http://adsbc.bc.ca/dev/css/members_contentElements.css
http://adsbc.bc.ca/dev/css/members_layoutElements.cssPersonal Portfolio
Paul O'B is the CSS god
-
Oct 17, 2004, 15:20 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You have some end tags missing or in the wrong place that need to be fixed. Also you don't need to use postion:relative to move things around you should be using margins instead. Position:relative is only used in special cases and is not generally used throughout a layout as it leaves gaps everywhere. (See FAQ on positioning).
I've managed to get your page to display but theres an awful lot of code to straighten out and it would probably be quicker for me to start again than fix your errors.
Heres the code so far, which you need to work on still.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>British Columbia Dental Association</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="../css/members_contentElements.css" rel="stylesheet" type="text/css" /> <link href="../css/members_layoutElements.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* Link Styles */ /* Normal Links */ A:link, A:visited, A:active { color:#000000; text-decoration:none; } A:hover { color:#000000; text-decoration:underline; } /* "Back to Top" Links on content pages */ A.topLink:link, A.topLink:visited, A.topLink:active { position:relative; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#552B64; float:right; text-decoration:none; } A.topLink:hover { position:relative; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#552B64; float:right; text-decoration:underline; } /* Main Content */ .main_headline { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FFFFFF; text-indent:15px; margin-top:15px; } .main_content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1C2777; line-height:16px; text-indent:0px; } .main_content-important { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#1C2777; line-height:16px; text-indent:0px; } .main_content-images { float:left; margin-right:15px; margin-bottom:5px; } .main_content-title { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1C2777; line-height:16px; text-indent:0px; } .main_content-clear { clear:left; } .main_content_list { list-style-type: decimal; } .main_content, ol { list-style-type: decimal; } .main_content, ol ol{ list-style-type: lower-alpha; } /* Extra Content */ .extra_content { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1C2777; line-height:16px; } .extra_content-important { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#1C2777; line-height:16px; } .extra_commentsContent { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#1C2777; line-height:16px; } /* Search Engine */ .searchEngine { background-color:#000000; } .searchEngine_searchImage { vertical-align:top; } .searchEngine_inputField { color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; font-weight:normal; text-align:left; vertical-align:top; padding-top:3px; } .searchEngine_submitButton { vertical-align:top; } /* Sponsors */ .sponsors { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; font-weight:normal; line-height:12px; text-align:center; } /* Footer */ .footer { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#000000; text-align:center; } .footer-important { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color:#000000; text-align:center; } /* : -- Attribute Selectors -- : */ html, body { margin:0; padding:0; border:0; /* Customized Scrollbar appearance, only present in IE */ /* scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#000033; scrollbar-shadow-color:#F3F3F3; scrollbar-face-color:#552B64; scrollbar-highlight-color:#F3F3F3; scrollbar-dark-shadow-color:#333333; scrollbar-3d-light-color:#000033;*/ } /* : -- Main Content Layouts -- : */ /* Main Content */ #allContent { position:relative; overflow:visible; margin-top:0px; } #content_sectionHeader { position:relative; background-color:#000000; height:23px; width:85%; padding-top:4px; max-width:658px; overflow:hidden; } #content_sectionText { position:relative; background-color:#FFFFFF; width:85%; margin-top:20px; padding-left:15px; overflow:visible; } #content_inlineImageContent { position:relative; width:70%; margin-left:225px; overflow:visible; } #extraColumn { position:relative; width:25%; right:25px; overflow:visible; } #extra_comments { position:relative; background-color:#ffc; margin-top:30px; width:85%; height:23px; padding-top:2px; padding-left:15px; overflow:hidden; clear:both; } #newSection_header { position:relative; margin-top:20px; width:85%; height:23px; overflow:visible; } #newSection_content { position:relative; margin-top:15px; width:85%; overflow:visible; } /* : -- Layout Elements -- : */ /* Column Wrappers */ #leftSide { position:relative; float:left; width:172px; overflow:visible; } #rightSide { position:relative; overflow:visible; margin-left:180px; } #columnClear { clear:both; } /* Header */ #header { position:relative; background:url(http://adsbc.bc.ca/dev/media/rightSi...er_members.gif) repeat-x; } /* Global Navigation */ #globalNav { width:100%; background-color:#E5E5E5; height:24px; } #globalNav_extra { position:absolute; top:133px; left:0px; width:100%; height:24px; background-color:#E5E5E5; z-index:-1; } /* Search Engine */ #searchEngine { position:absolute; right:14px; top:132px; height:22px; width:315px; overflow:hidden; } /* Local Navigation */ #membersLocalNav_leftSide { position:absolute; left:0px; top:0px; width:15px; height:119px; } #membersLocalNav_association { position:absolute; left:15px; top:0px; width:143px; height:27px; } #membersLocalNav_members { position:absolute; left:15px; top:27px; width:143px; height:22px; } #membersLocalNav_calendar { position:absolute; left:15px; top:71px; width:143px; height:22px; } #membersLocalNav_classifieds { position:absolute; left:15px; top:226px; width:143px; height:21px; } #membersLocalNav_links { position:absolute; left:15px; top:92px; width:143px; height:27px; } /* Members Panel */ #membersPanel_leftSide { position:absolute; left:0px; top:127px; width:12px; height:125px; } #membersPanel_top { position:absolute; left:12px; top:127px; width:139px; height:11px; } #membersPanel_rightSide { position:absolute; left:151px; top:127px; width:7px; height:125px; } #membersPanel_profile { position:absolute; left:12px; top:138px; width:139px; height:37px; } #membersPanel_rosterForm { position:absolute; left:12px; top:175px; width:139px; height:39px; } #membersPanel_privacyPolicy { position:absolute; left:12px; top:214px; width:139px; height:38px; } /* Sponsors */ #sponsorLinks { position:absolute; left:0px; top:275px; width:158px; height:432px; } /* Footer */ #upperFooter { position:relative; background:url(http://adsbc.bc.ca/dev/media/upperFooter.gif) repeat-x; margin-top:50px; height:16px; overflow:visible; } #footer { position:relative; padding-top:8px; } form {margin:0;padding:0} </style> <script type="text/javascript" src='../js/members_localNav.js'></script> <script type="text/javascript" src='../js/members_preloadImages.js'></script> </head> <body onload="members_preloadImages();"> <script type="text/javascript" language="JavaScript1.2">members_fwLoadMenus();</script> <div id="header"> <a href="<A href="http://www.adsbc.bc.ca"><img">http://www.adsbc.bc.ca"><img src="http://adsbc.bc.ca/dev/media/header_members.jpg" width="835" height="131" border="0" alt="British Columbia Dental Association" /></a></div> <div id="globalNav"> <a href="../members/members.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_home.gif" width="74" height="22" border="0" alt="BCDA Home" /></a><a href="../members/contact.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_contact.gif" width="75" height="22" border="0" alt="BCDA Contact" /></a><a href="../public/public.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_public.gif" width="83" height="22" border="0" alt="BCDA Public" /></a></div> <div id="globalNav_extra"> </div> <div id="searchEngine" class="searchEngine"> <form action="../servlet/Search" method="post"> <input name="indexName" type="hidden" value="index"> <img class="searchEngine_searchImage" src="http://adsbc.bc.ca/dev/media/searchEngine_text.gif" alt="Search"> <input class="searchEngine_inputField" name="query" type="text" size="41"> <input class="searchEngine_submitButton" name="submit" type="image" src="http://adsbc.bc.ca/dev/media/searchEngine_submit.gif" value="Search"> </form> </div> <div id="contentWrapper"> <div id="leftSide"> <div id="membersLocalNav_leftSide"><img src="http://adsbc.bc.ca/dev/media/members...v_leftSide.gif" width="15" height="119" alt="" /></div> <div id="membersLocalNav_association"> <a href="#" onmouseover="changeImages('membersLocalNav_association', '../media/membersLocalNav_assoc-over.gif'); window.FW_showMenu(window.fw_menu_0,159,161); return true;" onmouseout="changeImages('membersLocalNav_association', '../media/membersLocalNav_assoc.gif'); return true;"> <img name="membersLocalNav_association" src="http://adsbc.bc.ca/dev/media/membersLocalNav_assoc.gif" width="143" height="27" border="0" alt="Association News" /></a> </div> <div id="membersLocalNav_members"> <a href="#" onmouseover="changeImages('membersLocalNav_members', '../media/membersLocalNav_members-over.gif'); window.FW_showMenu(window.fw_menu_1,159,188); return true;" onmouseout="changeImages('membersLocalNav_members', '../media/membersLocalNav_members.gif'); return true;"> <img name="membersLocalNav_members" src="http://adsbc.bc.ca/dev/media/members...av_members.gif" width="143" height="22" border="0" alt="Member Resources" /></a> </div> <div id="membersLocalNav_calendar"> <a href="#" onmouseover="changeImages('membersLocalNav_calendar', '../media/membersLocalNav_cal-over.gif'); window.FW_showMenu(window.fw_menu_2,159,210); return true;" onmouseout="changeImages('membersLocalNav_calendar', '../media/membersLocalNav_cal.gif'); return true;"> <img name="membersLocalNav_calendar" src="http://adsbc.bc.ca/dev/media/membersLocalNav_cal.gif" width="143" height="22" border="0" alt="Calendar" /></a> </div> <div id="membersLocalNav_classifieds"> <a href="#" onmouseover="changeImages('membersLocalNav_classifieds', '../media/membersLocalNav_class-over.gif'); return true;" onmouseout="changeImages('membersLocalNav_classifieds', '../media/membersLocalNav_class.gif'); return true;"> <img name="membersLocalNav_classifieds" src="http://adsbc.bc.ca/dev/media/membersLocalNav_class.gif" width="143" height="21" border="0" alt="Classifieds" /></a> </div> <div id="membersLocalNav_links"> <a href="#" onmouseover="changeImages('membersLocalNav_links', '../media/membersLocalNav_links-over.gif'); return true;" onmouseout="changeImages('membersLocalNav_links', '../media/membersLocalNav_links.gif'); return true;"> <img name="membersLocalNav_links" src="http://adsbc.bc.ca/dev/media/membersLocalNav_links.gif" width="143" height="27" border="0" alt="Links" /></a> </div> <div id="membersPanel_leftSide"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_leftSide.gif" width="12" height="125" alt="" /> </div> <div id="membersPanel_top"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_top.gif" width="139" height="11" alt="" /> </div> <div id="membersPanel_rightSide"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_rightSide.gif" width="7" height="125" alt="" /> </div> <div id="membersPanel_profile"> <a href="members.jsp"><img src="http://adsbc.bc.ca/dev/media/membersPanel_profile.gif" alt="Member's Profile" width="139" height="37" border="0" id="memberPanel_profile" /></a> </div> <div id="membersPanel_rosterForm"> <a href="../pdf/ReferralRoster.pdf" target="_blank"><img src="http://adsbc.bc.ca/dev/media/members...rosterForm.gif" alt="Patient Referral Roster Form" width="139" height="39" border="0" id="memberPanel_rosterForm" /></a> </div> <div id="membersPanel_privacyPolicy"> <a href="../members/policy.jsp" target="_blank"><img src="http://adsbc.bc.ca/dev/media/members...vacyPolicy.gif" alt="Privacy Policy" width="139" height="38" border="0" id="memberPanel_privacyPolicy" /></a> </div> <div id="sponsorLinks" class="sponsors"> <a href="http://www.pacificdentalonline.com" target="_blank"><img src="http://adsbc.bc.ca/dev/media/sponsors_pdc.jpg" border="0" alt="Pacific Dental Conference Vancouver, March 10-12, 2005"><br /> <br /> March 10-12, 2005</a><br /> <br /> <a href="../pdf/Bell_dental_SEPT_04.pdf" target="_blank"><img src="http://adsbc.bc.ca/dev/media/sponsors_bell.gif" width="140" height="65" border="0" alt="Click here to view latest offer"> Click here to see Bell Mobility's latest offer</a><br /> </div> </div> <div id="rightSide"> <div id="allContent"> <div id="content_sectionHeader" class="main_headline"> Members Home Page </div> <div id="content_sectionText" class="main_content"> <div id="newSection_headline" class="secondary_headline"> Welcome <div id="newSection_content" class="main_content"> Welcome to the member home page of the British Columbia Dental Association. The site contains valuable practice management information, associaton information including our <i>Connections</i> newsletter, information on special offers for BC Dental Association members from our preferred suppliers, and continually updated classifieds and calendar sections. <br> <br> If you're accepting new patients, please complete our <a href="../pdf/ReferralRoster.pdf" target="_blank">Patient Referral Roster form</a> so that your name can be added to our telephone referral database and "Find a Dentist" feature on the public home page. <br> <br> If you would like to update your contact information, please complete our <a href="../pdf/ChangeOfInformation.pdf" target="_blank">Change of Information</a> form and send it back to the Association by fax or mail. <br> <div id="newSection_headline" class="secondary_headline"> October 2004 <i>Connections</i> <div id="newSection_content" class="main_content"> The latest issue of our newsletter contains the following: <br> <br> * name change for the Association <br> * hygiene college seeks exemption from the 365-day rule <br> * B3Dental forges relationship with the Association <br> <br> To view the PDF of the issue, please <a target="_blank" href="../pdf/309752.pdf">click here.</a> All other issues of <i>Connections</i> can be found under Association News/Newsletters. <div id="newSection_headline" class="secondary_headline"> Removal of the "365-Day" Rule a Danger to the Public <div id="newSection_content" class="main_content"> In our October newsletter the President's Message focuses on the College of Dental Hygienists of BC's recent submission to government for changes to the 365-Day Rule. To view the Association's response, please <a href="../pdf/HygieneSubmissionFinal.pdf">click here</a>. </div> </div> </div> </div> <script language="JavaScript1.2"> function getmURL(){ var murl = "postFeedback.jsp?mpage=" + document.title; window.open(murl); // return true; } </script> <div id="extra_comments" class="extra_commentsContent"> Please provide any comments on this page - Click <a href="#" onClick="javascript:getmURL()">here</a> for feedback form. </div> </div> </div> </div> <div id="columnClear"></div> </div> </div> </div> <div id="upperFooter"> <img src="http://adsbc.bc.ca/dev/media/upperFooter.gif" width="847" height="16" alt="" /> <div id="footer"> <p class="footer"><span class="footer-important">British Columbia Dental Association</span> Suite 400 - 1765 West 8th Avenue, Vancouver, BC V6J 5C6</p> <p class="footer">Tel: (604) 736-7202; (888) 396-9888, Fax: (604) 736-7588, e-mail: <a href="<A href="mailto:post@adsbc.com">post@adsbc.com</a></p">mailto:post@adsbc.com">post@adsbc.com</a></p> </div> </div> </body> </html>
I'm sorry I could not give you the full solution but it would take some time and I'm working on something myself right at this minute but I could look again tomorrow afternoon if you are still stuck.
Paul
You have about 44 errors in there that also need tidying up.
-
Oct 17, 2004, 15:58 #12
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul, that 44 XHTML errors you mean? If so ya I haven't bothered checking those yet, I always leave validation for last.
Plus some of the content is entered from a db which the client controls, of course they don't know XHTML
The biggest problem I am left with here is trying to figure out the footer problem ... it just won't clear the two columns. I can't figure out why!Personal Portfolio
Paul O'B is the CSS god
-
Oct 18, 2004, 16:19 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
The biggest problem I am left with here is trying to figure out the footer problem ... it just won't clear the two columns. I can't figure out why
Paul
-
Oct 19, 2004, 12:30 #14
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Due to undesirable circumstances I've had to switch to a "hybrid" design consisting of both CSS and tables ...
Anyway, new problem:
http://adsbc.bc.ca/dev/members/members.jsp
http://adsbc.bc.ca/dev/public/public.jsp
The footer is an include on both files ... yet I'm getting differing results ... I believe the structure is the same though I'm not sure. The footer on the members page is fine for now (even though its supposed to clear both sides) but the public page the footer is near the top of the page for some reason. What to do? Thanks!Personal Portfolio
Paul O'B is the CSS god
-
Oct 19, 2004, 14:03 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I get internal server error on both those links I'm afraid
Paul
-
Oct 19, 2004, 14:06 #16
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks ... back up now. It was a temporary problem.
Personal Portfolio
Paul O'B is the CSS god
-
Oct 19, 2004, 16:49 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The reason the foooter is above your right side content is as explained before. Your rightside content is all absolutely placed therefore it doesn't exist in the flow of the document.
You need to bring some flow back into the layout so that the footer has something to sit under. You need to float those boxes side by side or place one statically and then absolutely position the other one alongside (as long as they are going to be the same height).
You really need to grasp this concept before you move on as you are making quite an easy job seem difficultWhen you absolutely place an element its as if it doesn't exist except for its visual representation. To all intents and purposes there is nothing there so other elements will take no notice of it and pretend its not there.
Hope that sheds some light on it
Paul
-
Oct 19, 2004, 17:09 #18
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Paul, sorry but I have done all that ... I just didnt have the latest uploaded
Please have a look at this page:
http://adsbc.bc.ca/dev/public/public.jsp
It's much better now, but for some reason the footer won't clear the last div with the company partners in it ... do you know why?Last edited by RamsayX; Oct 20, 2004 at 10:30.
Personal Portfolio
Paul O'B is the CSS god
-
Oct 20, 2004, 10:30 #19
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've added a 150px height to #columnClear to make it look like it clears everything, but it doesn't truly clear the last div still, thats what I need to figure out how to fix. The footer itself also doesn't seem to be completely centered on the page ... thats weird as well. It's set to clear both left and right floats.
On this page I appear to have gotten everything working:
http://adsbc.bc.ca/dev/public/oralHealth.jsp
Though I need to get that extraColumn (near the bottom where it says "Oral Health" in bold) to sit alongside the right content, but within the allContent id. That might be a bit tricky...Personal Portfolio
Paul O'B is the CSS god
-
Oct 20, 2004, 14:17 #20
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Anyone??
Personal Portfolio
Paul O'B is the CSS god
-
Oct 20, 2004, 14:54 #21
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
The footer seems to be clearing the content above even without the 150px height in columnclear so I'm not quite sure what you mean.
If you want to float that extra column to the right of the centre content then the float must come before the content (in the html that is) you need it to float alongside. So the rightcolumn will need to be at the top of the html for that centre content (unless the centre content is also floated then it doesn't matter).
You will need to make sure there is enough room for the elements to fit etc but I wasn't exactly sure where you were trying to put it.
Your pages do seem to be improving on each revision so try to keep things simple and logical.
Paul
-
Oct 20, 2004, 15:22 #22
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Boy am I going to be glad when this is fixed.
Ok I've got the column up there now ... what a pain that was. Now is there a way to prevent the sections getting "pushed down" the screen when the window is resized smaller in width? It's quite annoying and I wonder if theres a way around this?
I'm using this page for the 3 column example to figure out:
http://adsbc.bc.ca/dev/public/careerInfo.jspLast edited by RamsayX; Oct 20, 2004 at 16:52.
Personal Portfolio
Paul O'B is the CSS god
-
Oct 21, 2004, 10:24 #23
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul or anyone else ... ?
Personal Portfolio
Paul O'B is the CSS god
-
Oct 21, 2004, 13:31 #24
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Sorry I haven't replied I've been busy
I've had a quick look and it seems that you need to adjust your widths more precisely. When using percentages for width try not to use pixels for padding and margins as they will never add up. If you need padding in pixels then you will need to nest the elements so that the outside width is consistent and the inner element has the padding.
You could change the css as follows and the element will not drop so soon and should be ok until about 800px wide.
Code:#allContent { position:relative; overflow:visible; top:30px; } #content_sectionHeader { background-image:url(http://adsbc.bc.ca/dev/media/topStory.gif); background-repeat:no-repeat; height:23px; padding-top:2px; overflow:hidden; } #content_sectionText { position:relative; background-color:#FFFFFF; top:8px; padding-left:15px; overflow:visible; } #content_inlineImageContent { position:relative; width:70%; overflow:visible; } /* : -- Layout Elements -- : */ /* Column Wrappers */ #leftSide { position:relative; float:left; width:172px; overflow:visible; z-index:3; } #rightSide { width:58%; overflow:visible; z-index:2; } #extraColumn { position:relative; float:right; width:14%; margin-right:2%; overflow:visible; z-index:1; display:inline;/* ie double margin-fix*/ }
Paul
-
Oct 26, 2004, 14:22 #25
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Could someone have a look at this page please? I have a few pages on the members side that for some reason the footer won't clear the content ... I dont really understand it. Could you take a look please? Thanks!
http://adsbc.bc.ca/dev/members/members.jsp
This is another one of the same problem:
http://adsbc.bc.ca/dev/members/constitutionBylaws.jspPersonal Portfolio
Paul O'B is the CSS god
Bookmarks