...

View Full Version : <Div> Can't get it in position



Tivie
10-29-2010, 03:41 AM
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)


</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:


/* 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.

DrDOS
10-29-2010, 04:08 AM
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.

teedoff
10-29-2010, 04:13 AM
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 (http://csscreator.com/divitis)to learn about divitis.

Tivie
10-29-2010, 04:29 AM
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!


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 (http://csscreator.com/divitis)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 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.

DrDOS
10-29-2010, 04:46 AM
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.

Tivie
10-29-2010, 05:05 AM
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?


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum