Current location: Hot Scripts Forums » General Web Coding » HTML/XHTML/XML » Problem with layout


Problem with layout

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-22-07, 05:56 AM
bertrand bertrand is offline
Newbie Coder
  
Join Date: May 2006
Location: Bruges, Belgium
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Question Problem with layout
The problem: http://rodekruis-brugge.be/login.php.

The red bar at the bottom (with the Copyright notice) should stay under the sidebar on the left. But it won't, and I don't understand why.

Anybody who can help me out here?
__________________
Never do anything you wouldn't want to explain to the paramedics.
Reply With Quote
  #2 (permalink)  
Old 09-22-07, 10:25 PM
fmx fmx is offline
Newbie Coder
  
Join Date: Jun 2004
Posts: 24
Thanks: 0
Thanked 0 Times in 0 Posts
using "position:absolute" on the sidebar takes it out of the design flow. The footer does not know that the side bar exists.

It also make the sidebar inaccessible if the browser window is shorter than the sidebar itself.

The proper way would have been to float the sidebar.
Reply With Quote
  #3 (permalink)  
Old 09-23-07, 08:02 AM
omniman's Avatar
omniman omniman is offline
Coding Addict
  
Join Date: Aug 2006
Location: Baltimore, MD
Posts: 342
Thanks: 0
Thanked 1 Time in 1 Post
A quick fix (not ideal, but will work)...

- Give the left side-bar a bottom margin equal to the height of the footer (plus a extra pixels).
- Set the footer to position: absolute; and bottom: 0;
__________________
"Political Correctness is a doctrine, fostered by a delusionary, illogical, liberal minority and rabidly promoted by an unscrupulous mainstream media, which holds forth the proposition that it is entirely possible to pick up a turd by the clean end."
Reply With Quote
  #4 (permalink)  
Old 11-08-07, 04:57 AM
bertrand bertrand is offline
Newbie Coder
  
Join Date: May 2006
Location: Bruges, Belgium
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
I'm afraid that doesn't do the trick.

It puts the footer at the bottom of the browser window. If the text reaches below the browser window it just sits there on top of the text and it doesn't stay at the bottom when you scroll.
__________________
Never do anything you wouldn't want to explain to the paramedics.
Reply With Quote
  #5 (permalink)  
Old 11-08-07, 07:30 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
You don't need the section /* MAIN */.
Try it like this:

CSS Code:
  1. /*    HEADER    */
  2.  
  3. #headercont {
  4.     position: realitive;
  5.     top: 0px;
  6.     left: 0px;
  7.     width: 100%;
  8.     height: 120px;
  9.     z-index: 1;
  10. }
  11. #headertop {
  12.    height: 90px;
  13.    cursor: pointer;
  14.  }
  15. #headermenu {
  16.    height: 14px;
  17.    border-top: 1px solid #cc2300;
  18.    border-bottom: 1px solid #cc2300;
  19.    background: #e07b7f;
  20. }
  21. #menu {
  22.    position: absolute;
  23.    margin-left: 14px;
  24.    text-align: center;
  25.    font: bold 11px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  26. }
  27. #menu a , #menu a:link , #menu a:active , #menu a:visited {
  28.    text-decoration: none;
  29. }
  30. #menu a:hover {
  31.    text-decoration: none;
  32. }
  33. #menu a.noscript, #menu a.noscript:link, #menu a.noscript:active, #menu a.noscript:visited {
  34.    color: #000000;
  35.    background: #e07b7f;
  36. }
  37. #menu a.noscript:hover {
  38.    background: #cc2300;
  39. }
  40. #headerloc {
  41.    padding-left: 2em;
  42.    text-transform: lowercase;
  43.    border-bottom: 1px solid #cc2300;
  44.    font: 11px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  45.    background: #ffffff;
  46. }
  47. #headerloc a, #headerloc a:link, #headerloc a:active, #headerloc a:visited, #headerloc a:hover {
  48.    color: #a01c22;
  49.    text-decoration: none;
  50. }
  51.  
  52. /*    SIDEBAR    */
  53.  
  54. #sidebar {
  55.     float:left;
  56.     width: 162px;
  57.     padding: 14px;
  58. }
  59. #helpen, #geholpen, #quiz, #leftcal, #foto {
  60.    border: 1px solid #cc2300;
  61.    padding: 10px;
  62.    width: 140px;
  63.    background: white;
  64.    border-collapse: collapse;
  65.    font: bold 11px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  66.    text-align: center;
  67.    margin-bottom: 10px;
  68. }
  69. #helpen a, #helpen a:link, #helpen a:active, #helpen a:visited, #helpen a:hover, #geholpen a, #geholpen a:link, #geholpen a:active, #geholpen a:visited, #geholpen a:hover, #quiz a, #quiz a:link, #quiz a:active, #quiz a:visited, #quiz a:hover {
  70.    color: #000000;
  71.    text-decoration: none;
  72. }
  73. #leftcal, #foto {
  74.    font-weight: normal;
  75. }
  76. #leftcal a, #leftcal a:link, #leftcal a:active, #leftcal a:visited, #foto a, #foto a:link, #foto a:active, #foto a:visited {
  77.    color: #a01c22;
  78.    text-decoration: none;
  79. }
  80. #leftcal a:hover, #foto a:hover {
  81.    text-decoration: underline;
  82. }
  83.  
  84. /*    CONTENT    */
  85.  
  86. #content {
  87.     width: 700px;
  88.     height: 100%;
  89.     font: 12px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  90.     float:left;
  91. }
  92. #content a, #content a:link, #content a:active, #content a:visited {
  93.    color: #a01c22;
  94.    text-decoration: none;
  95. }
  96. #content a:hover {
  97.    text-decoration: underline;
  98. }
  99. #content h1 {
  100.    font: 22px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  101.    margin: 0px;
  102.    padding-top: 0.5em;
  103.    border-bottom: 1px solid #cc2300;
  104. }
  105. #content h2 {
  106.    font: 18px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  107.    margin: 0px;
  108.    padding-top: 0.5em;
  109.    border-bottom: 1px solid #cc2300;
  110. }
  111. #content h3 {
  112.    font: bold 16px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  113.    margin: 0px;
  114.    padding-top: 0.5em;
  115. }
  116. #content h3 a, #content h3 a:link, #content h3 a:active, #content h3 a:visited, #content h3 a:hover {
  117.    color: black;
  118.    text-decoration: none;
  119. }
  120. #content ul {
  121.    margin-top: 10px;
  122.    margin-left: 0px;
  123.    padding: 0px;
  124.    list-style: none;
  125. }
  126. #content div.totop {
  127.    text-align: right;
  128. }
  129. #content ul.sitemap {
  130.    margin-top: 0px;
  131.    margin-left: 15px;
  132.    list-style: square;
  133. }
  134. #content ul.links li {
  135.    padding-top: 5px;
  136. }
  137. #content a.mainlink, #content a.mainlink:link, #content a.mainlink:active, #content a.mainlink:visited, #content a.mainlink:hover {
  138.    color: #000000;
  139.    text-decoration: none;
  140.    font: 11px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  141. }
  142. #content div.pict {
  143.    text-align: center;
  144. }
  145. #content table.simtable {
  146.    width: 100%;
  147.    border-top: 1px solid #cc2300;
  148.    border-left: 1px solid #cc2300;
  149. }
  150. #content td.simtabletd {
  151.    padding: 0.5em;
  152.    border-bottom: 1px solid #cc2300;
  153.    border-right: 1px solid #cc2300;
  154. }
  155.  
  156. /*    FOOTER    */
  157.  
  158. #footer {
  159.    clear:both;
  160.    width: 100%;
  161.     height: 40px;
  162.     text-align: center;
  163.     background: #e07b7f;
  164.     border-top: 1px solid #cc2300;
  165.     border-bottom: 1px solid #cc2300;
  166.     margin-top: 50px;
  167.     padding-top: 0.5em;
  168.     padding-bottom: 0.5em;
  169.     font: 11px "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  170. }
  171. #footer a, #footer a:link, #footer a:active, #footer a:visited {
  172.    color: #a01c22;
  173.    text-decoration: none;
  174. }
  175. #footer a:hover {
  176.    text-decoration: underline;
  177. }
  178.  
  179. /*    TICKER    */
  180.  
  181. #TICKER {
  182.     display: none;
  183.     border-top: 1px solid #cccccc;
  184.     border-bottom: 1px solid #cccccc;
  185.     overflow: hidden;
  186.     font-weight: bold;
  187. }
  188.  
  189. /*    MISC    */
  190.  
  191. .error {
  192.     color: #c30;
  193.     font-weight: bold;
  194. }
  195. td.vr_menu {
  196.     text-align: center;
  197.     vertical-align: middle;
  198.     padding: 5px;
  199. }
  200. .sidecal {
  201.     font-weight: bold;
  202.     vertical-align: top;
  203. }
  204. hr {
  205.     color: #cc2300;
  206.     height: 1px;
  207. }
  208. td.imagetable {
  209.     width: 140px;
  210.     height: 140px;
  211.     text-align: center;
  212.     vertical-align: middle;
  213. }
  214. .nowrap {
  215.     white-space: nowrap;
  216. }
  217. img.menu {
  218.     cursor: pointer;
  219. }
  220.  
  221. /*    DIENSTEN    */
  222.  
  223. .dienstentable {
  224.     border: 1px solid #cc2300;
  225.     width: 100%;
  226. }
  227. th.dienstenheader {
  228.     font-weight: bold;
  229.     text-align: center;
  230.     white-space: nowrap;
  231. }
  232. td.dienstenrow {
  233.     padding: 1px;
  234.     white-space: nowrap;
  235. }
  236. td.pending {
  237.     font-style: italic;
  238.     background: #efefef;
  239.     font-weight: bold;
  240. }
  241. td.accepted {
  242.     font-style: italic;
  243.     background: #efefef;
  244.     font-weight: bold;
  245.     color: green;
  246. }
  247. td.rejected {
  248.     font-style: italic;
  249.     background: #efefef;
  250.     font-weight: bold;
  251.     color: red;
  252. }
  253.  
  254. /*    CALENDAR    */
  255.  
  256. .calendarheading {
  257.     text-align: center;
  258.     font-weight: bold;
  259. }
  260. .calendarcell {
  261.     text-align: right;
  262.     vertical-align: top;
  263.     padding: 5px;
  264.     cursor: pointer;
  265. }
  266. #content a.cal:hover {
  267.     text-decoration: none;
  268. }

And you don't need this in your HTML:
HTML Code:
<div id="menu">
            <script type="text/javascript">
                var str = navigator.appVersion;
                
                if (str.match ("MSIE 6.0") == "MSIE 6.0") {
                    document.write ("<a href='af_home.php' style='position: absolute; top: 0px; left: 0px; width: 120px; height: 14px; z-index: 1;' class='noscript'>de afdeling</a>");
                    document.write ("<a href='fw_home.php' style='position: absolute; top: 0px; left: 120px; width: 120px; height: 14px; z-index: 1;' class='noscript'>fondsenwerving</a>");
                    document.write ("<a href='hd_home.php' style='position: absolute; top: 0px; left: 240px; width: 120px; height: 14px; z-index: 1;' class='noscript'>hulpdienst</a>");
                    document.write ("<a href='lg_home.php' style='position: absolute; top: 0px; left: 360px; width: 120px; height: 14px; z-index: 1;' class='noscript'>leergangen</a>");
                    document.write ("<a href='shv_home.php' style='position: absolute; top: 0px; left: 480px; width: 120px; height: 14px; z-index: 1;' class='noscript'>sociale hv</a>");
                    document.write ("<a href='jrk_home.php' style='position: absolute; top: 0px; left: 600px; width: 120px; height: 14px; z-index: 1;' class='noscript'>jeugd rode kruis</a>");
                    document.write ("<a href='varia.php' style='position: absolute; top: 0px; left: 720px; width: 120px; height: 14px; z-index: 1;' class='noscript'>varia</a>");
                } else {
                    new menu (MENU_ITEMS, MENU_POS, MENU_STYLES);
                }
            </script>
            <noscript>
                <a href="af_home.php" style="position: absolute; top: 0px; left: 0px; width: 120px; height: 14px; z-index: 1;" class="noscript">de afdeling</a>
                <a href="fw_home.php" style="position: absolute; top: 0px; left: 120px; width: 120px; height: 14px; z-index: 1;" class="noscript">fondsenwerving</a>
                <a href="hd_home.php" style="position: absolute; top: 0px; left: 240px; width: 120px; height: 14px; z-index: 1;" class="noscript">hulpdienst</a>
                <a href="lg_home.php" style="position: absolute; top: 0px; left: 360px; width: 120px; height: 14px; z-index: 1;" class="noscript">leergangen</a>
                <a href="shv_home.php" style="position: absolute; top: 0px; left: 480px; width: 120px; height: 14px; z-index: 1;" class="noscript">sociale hv</a>
                <a href="jrk_home.php" style="position: absolute; top: 0px; left: 600px; width: 120px; height: 14px; z-index: 1;" class="noscript">jeugd rode kruis</a>
                <a href="varia.php" style="position: absolute; top: 0px; left: 720px; width: 120px; height: 14px; z-index: 1;" class="noscript">varia</a>
            </noscript>

        </div>
Instead do this:
HTML Code:
<div id="menu">
                <a href="af_home.php" style="position: absolute; top: 0px; left: 0px; width: 120px; height: 14px; z-index: 1;" class="noscript">de afdeling</a>
                <a href="fw_home.php" style="position: absolute; top: 0px; left: 120px; width: 120px; height: 14px; z-index: 1;" class="noscript">fondsenwerving</a>
                <a href="hd_home.php" style="position: absolute; top: 0px; left: 240px; width: 120px; height: 14px; z-index: 1;" class="noscript">hulpdienst</a>
                <a href="lg_home.php" style="position: absolute; top: 0px; left: 360px; width: 120px; height: 14px; z-index: 1;" class="noscript">leergangen</a>
                <a href="shv_home.php" style="position: absolute; top: 0px; left: 480px; width: 120px; height: 14px; z-index: 1;" class="noscript">sociale hv</a>
                <a href="jrk_home.php" style="position: absolute; top: 0px; left: 600px; width: 120px; height: 14px; z-index: 1;" class="noscript">jeugd rode kruis</a>
                <a href="varia.php" style="position: absolute; top: 0px; left: 720px; width: 120px; height: 14px; z-index: 1;" class="noscript">varia</a>
        </div>
If this is as complex as your layout gets, you could have easily positioned everything in a two column table.
Then use CSS to perform magic on the contents in the table.
__________________
Jerry Broughton
Last edited by job0107; 11-08-07 at 07:47 AM.
Reply With Quote
Reply

Bookmarks

« html content to word document | Images in select boxes? »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS layout in Firefox problem macu CSS 1 08-22-07 08:30 AM
3 Column CSS Fluid Layout (IE 6 Problem) Heidenreich12 CSS 9 10-04-06 03:22 PM
layout problem mcrob CSS 4 09-17-06 07:00 PM
fluid website layout problem ste CSS 2 08-25-06 10:10 AM
CSS Layout problem Torbinsky CSS 2 06-10-05 10:50 AM


All times are GMT -5. The time now is 09:00 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.