Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    <Div> Can't get it in position

    hey there.

    First, let me say that although I'm not entirely new to web-design, I still feel like a newbie. This is just an hobby of mine which I find kind enjoyable until I stumble across these types of issues I currently running into.

    So, to try and make things as short as possible... I'm designing a template for a CMS. I've created the basic layout in pen-and-paper, put it in photoshop and started coding.

    These are the "source codes":

    index.php (stripped of PHP code)
    Code:
    </head>
    
    <body>
    
    <div class="body_wrapper">
        <!-- Header -->
        <div class="header_space">
          
          <div class="t_header">
            
            <div class="t_top">
              <div class="t_breadcrumbs"> home > test template > bla</div>
              <div class="t_topright">Login and stuff</div>
              </div>
            
            <div class="t_menu_bar">
              <div class="t_logo_hoover"><img src="images/logo.png" alt="Tivies Tools Logo Mark"/></div>
              <div class="t_logo"></div>
              <div class="t_menu_top">Menu items</div>
              </div>
            
            <div class="t_p_slideshow">Product Slideshow</div>
            
            </div>
          
          </div>
        <!-- Header end -->
        
        <!-- *Content Starts Here* -->
        
        <div class="c_content_space">
          <div class="c_content_area">
            <div class="c_left_space">
              <div class="c_menu_home">Menu Home</div>
              <div class="c_component">Articles and stuff</div>
              </div>
            <div class="c_right_space">
              <div class="c_right"></div>
              <div class="c_adverts">Google Adsense</div>
              </div>
            </div>
          </div>
        
    <!-- Footer Starts here -->
    	<div class="f_footer_space">
    		<div class="f_footer_area">
    			<div class="f_footer_left">Footer Left</div>
    			<div class="f_footer_middle">
            		<p id="f_copyright">.: Template Designed by Tivie :.<br /> Copyright (c) Tivie's Tools 2010. All rights reserved </p>
            	</div>
    			<div class="f_footer_right">Footer Right</div>
    		</div>
    	</div>
        
    </div>
    
    </body>
    </html>
    CSS:
    Code:
    /* CSS Document */
    /*body {
    	background-image: url("middle.jpg");
    	background-position: top center;
    	background-repeat: no-repeat;
    } */
    
    div.body_wrapper {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	height: 100%;
    }
    
    
    div.header_space {
    	background-image: url("images/header_tile_bg.jpg");
    	background-repeat: repeat-x;
    	width: 100%;
    }
     
    div.t_header {
    	background-image: url("images/header.jpg");
      	position: relative;
    	width: 960px ;
    	height: 495px;
      	margin-left: auto ;
      	margin-right: auto ;
    }
    
    div.t_top {
    	width: inherit;
    	height: 40px;
    }
    
    div.t_breadcrumbs {
    	width: 480px;
    	height: 40px;
    	line-height: 40px;
    	float: left;
    }
    
    div.t_topright {
    	width: 480px;
    	height: 40px;
    	float:left;
    	line-height:40px;
    	text-align: right;
    }
    
    div.t_menu_bar {
    	height: 100px;
    	width: 960px;
    }
    
    
    div.t_logo_hoover {
    	position: absolute;
    	top: 27px;
    	left: 0px;
    }
    
    div.t_logo {
    	width: 130px;
    	height: 100px;
    	float: left;
    }
    	
    
    div.t_menu_top {
    	width: 830px;
    	height: 100px;
    	line-height: 100px;
    	float: left;
    }
    
    div.t_p_slideshow {
    	width: inherit;
    	height: 340px;
    }
    
    
    /* Content Starts Here */
    
    div.c_content_space {
    	background-color: #eeeff0;
    	width: 100%;
    }
    
    div.c_content_area {
    	background-color: green;
    	position: relative;
    	width: 960px;
    	margin-left: auto;
      	margin-right: auto;
    }
    
    div.c_left_space {
    	background-color: #030;
    	width: auto;
    	float: left;
    }
    
    div.c_menu_home {
    	width: 800px;
    	height: 250px;
    	background-color: #e7e8e8;
    	border-style: solid;
    	border-color: #d9d9da;
    	border-width: 1px;
    }
    
    div.c_component {
    	background-color: #096;
    	width: 830px;
    	padding-right: 10px;
    }
    
    div.c_right_space {
    	float: left;
    	width: 120px;
    }
    
    div.c_adverts {
    	background-color: #FC0;
    	width: 120px;
    	height: auto;
    }
    
    /* FOOTER */
    
    div.f_footer_space {
    	width: 100%;
    	background-color: red;
    }
    
    div.f_footer_area {
    	position: relative;
    	width: 960px;
    	height: 100px;
    	margin-left: auto;
      	margin-right: auto;
    }
    
    div.f_footer_left {
    	width: 230px;
    	float: left;
    	}
    
    div.f_footer_middle {
    	width: 500px;
    	float: left; 
    }
    
    div.f_footer_right {
    	width: 230px;
    	float: right;
    }

    Problem:

    The footer Div (div.f_footer_space) instead of staying at the bottom of the page (under the content div) goes up and places itself behind the content div,. Any text I add to the f_footer_space div appears next to the advertisement div. I don't know how to work around this.

    Any input would be extremely hepful since this is driving me crazy.


    Edit: It seems that c_content_space div is out of place too.
    Last edited by Tivie; 10-29-2010 at 03:44 AM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    You need to put a period in front of the class names in CSS to identify them as classes, e.g. .f_footer_space, or div.f_footer_space. Actually elements that are unique are generally given IDs and not class names. Class names are for multiple elements. So that would look like id="f_footer_space" in the tag and #f_footer_space in the CSS.

  • Users who have thanked DrDOS for this post:

    Tivie (10-29-2010)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Wow thats alot of divs..lol You know you dont have to wrap everything in a div. You can use paragraph tags or unordered lists or lots of other html based tags for many of the divs you have defined.

    For example, you have a copyright in your footer. You give the paragraph tag a class, when you could simply style the p tag within the footer div and the style would only apply to that specific paragraph.

    Read here to learn about divitis.

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You need to put a period in front of the class names in CSS to identify them as classes, e.g. .f_footer_space, or div.f_footer_space. Actually elements that are unique are generally given IDs and not class names. Class names are for multiple elements. So that would look like id="f_footer_space" in the tag and #f_footer_space in the CSS.
    Oh blast. I can't believe I made such a newbie mistake. In copying from the HTML file to the CSS file I forgot to add the dot before. Blast!

    Quote Originally Posted by teedoff View Post
    Wow thats alot of divs..lol You know you dont have to wrap everything in a div. You can use paragraph tags or unordered lists or lots of other html based tags for many of the divs you have defined.

    For example, you have a copyright in your footer. You give the paragraph tag a class, when you could simply style the p tag within the footer div and the style would only apply to that specific paragraph.

    Read here to learn about divitis.
    Regarding classes and ID, I used classes because I plan to reuse them. The idea is to create a frontpage and content page differently via conditional PhP.
    Ex:
    PHP Code:
    <?php if (this->$page=="frontpage") : ?> 
    HTML code for frontpage 
    <?php else : ?> 
    HTML for other pages 
    <?php endif; ?>
    Since I wasn't sure if I could call IDs two times (via these conditional) I prefer to play save and use classes.

    regarding divs, It's not my personal taste to "div" everything, but since I'm using a CMS and the content of the page is pretty much unknown, I need to enclose stuff as much as possible to prevent stuff going out of place ^^ It's the way the CMS works.

    Oh and the copyright (as much as colors and pretty much everything written in the page is just for testing purposes.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    You can use the same ID on different pages with the same CSS file, but not multiple of the same ID on one page. You can have a hundred pages with the same ID formatting and one CSS file for them all. Using IDs also makes it easier to use javascript because you can use document.getElementById together with document.getElementsByTagName to access the elements inside each div.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You can use the same ID on different pages with the same CSS file, but not multiple of the same ID on one page. You can have a hundred pages with the same ID formatting and one CSS file for them all. Using IDs also makes it easier to use javascript because you can use document.getElementById together with document.getElementsByTagName to access the elements inside each div.
    So for instance, is this correct?
    PHP Code:
    <body>

    <?php if (this->$page=="frontpage") : ?> 
        
        <div id="menu">Menu</div> 
        <div id="articles">(Just show articles intro) </div>

    <?php else : ?> 

        <div id="articles">(Full Articles)</div>
     
    <?php endif; ?>
    I'm giving the same ID to 2 different divs, but since PhP is read first they will never appear at the same time.

    Since I didn't know if it was possible I played safe and used classes that can be repeated.


    As a side note, I still have the footer placement problem.


  •  

    Posting Permissions

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