Results 1 to 6 of 6

Thread: CSS layout Container problems..

  1. #1
    Join Date
    Mar 2007

    Question CSS layout Container problems..

    Hi Guys,

    Im trying to layout a page using CSS rather than the old way I was taught at college using tables many moons ago...

    So I have my layout in mind its very simple I want to make a container that resembles a table layout of 1 column and 3 rows..

    So I have done this on my main page...

    <div class="Mainbox">
     <div class="Maintop">
        <!--#include virtual="/Templates/TopMain.asp" --> 
     <div style="padding-left:30px;"> 
       <p>Any Content Here</p>
    <div class="Mainbottom">
      <!--#include virtual="/Templates/BottomMain.asp" -->
    As you see the top and bottom of this container include external html files that show my header and footer as I want..this seems to be working.

    My problem lies in the CSS as I cant seem to get the image for the ceneter of the container to show and repeat properly, It seems to show and cover the whole page until i set the body colour of the page then I have problems..The code I used is below : "background: url(/Templates/MainCenterSlice.jpg) repeat-y; this worked as I say but covered the whole page and not just the section where my content goes.

    I also want the bottom Div "Mainbottom" in my container to stick to the bottom of the main box container and I cant seem to get it to do this either.

    Here is a cut down of my style sheet to show you what im trying..

    I also want to set the height of the container as you see Ive commented it out in the code as it wasnt working..

    /* My CSS Document */
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	font-size: 10px;
    	color: #586BB7;
    	font-family: tahoma;
    	min-width: 800px;
    	text-align: center;
    /* Main Box 1 */
    .Mainbox {
      width: 800px;
     /* height:800px; */
      padding: 0 0px;
      background: url(/Templates/MainCenterSlice.jpg) repeat-y;
      margin:0 auto;
      text-align: left;
    .Mainbox .Maintop {
      height: 171px;
      margin: 0 -0px;
    .Mainbox .Mainbottom {
      height: 183px;
      margin: 0 -0px;
    Thoughts are very welcome as Id like to do this with CSS instead of my old tables..

    Kind Regards

  2. #2
    Join Date
    Mar 2007
    I seem to have solved most of this except my CSS for this background: url(/Templates/MainCenterSlice.jpg) repeat-y; Is still covering the whole page instead of just the center section of my container... Ive tried a few things and am juts getting no where... If I set the body tage to have a white background it also makes my center dive background white.. If I remove the bodys CSS for the BG colour my repeating image shows again but fills the whole page again...

    I hope that all makes sence..
    Thoughts appreciated.

  3. #3
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    Is this hosted somewhere that it can be tested live? I don't want to re-create your page and still, without the image, won't work for me locally.

    I am thinking that you want to position your background image as well as repeat-y but maybe I misunderstand the request..
    I build for: Firefox and tweak for IE

  4. #4
    Join Date
    Mar 2007
    There is a link to the page im testing with here.. http://tropical.staffdata.co.uk/Templates/Main1.asp

    As you see the page seems white and the content area should have the image set in CSS to repeat to make it a pale blue to match the header and footer section..

    Thanks again..

  5. #5
    Join Date
    Mar 2007
    Im making the page using DW as my editor and in the editor the page shows the image repeated correctly so I have my 3 sections and the image seems to be repeating there its when i view in any browser that the image is not showing? Its very odd but then im not too hot with CSS so i must have something wrong?????

  6. #6
    Join Date
    Mar 2007
    Oh My!!!!
    Ive figured this out and am so ashamed !!!!
    Its funny the things you over look when tired eh!!
    It might have helped if id uploaded my image to the server so it could be seen ... but with not recieving a missing image display or error I just overlooked that possibility.. Doh!!!
    Thanks again for your reply.. :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.38298 seconds
  • Memory Usage 2,886KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates