Chunk with in a Div?

Quote from: rossco at Oct 30, 2007, 06:33 AM

Sure

http://www.rossco-designs.com/main/main/index.php

Ok, let me see if I understand it. You wan to add navigation menu on the left on the above site correct?

Looking at your source code, I am afraid you don’t have a structural layout set up yet, and this is one of the reason you couldn’t get your AP works.
What you are looking at is a simple two column layout like this one: http://blog.html.it/layoutgala/LayoutGala36.html

You can do something like this:

<body>
<div id="container">

<div id="header"> your header here </div>

<div id="left"> this is where your menu stays </div>

<div id="right"> all your main div content here </div>

<div id="footer"> footer here </div>

<div> <!-- end /container -->

#container {
width: 900px;
margin: 0 auto /* make the layout stays center */
}

#left {
float: left; width: 250px
}

#right {
float: right; width: 650px }

#footer {clear: both; }

important note: IE is very unforgiving and full of bug, therefore you need to make sure whatever margin/padding for left and right, add up to the total of 900px (left + right ). With floated layout, it’s best to have the total width of the columns few pixel less than the container.

Hope this helps!

yes that layout template is roughly what i want... i’ll work on it a little and see how it goes. Thanks a lot buddy. I’ll check back shortly.

Ok nearly there! The flot css instruction is causeing the block and news box to go right to the ends of the container so it’s over lapping the actual background image of the main container.

here is my css info

#maincontainer { background-image:url(../images/background.png);
width: 836px;
margin: 0 auto /* make the layout stays center */
}
#header {clear: both;
}

#left {
float: left; width: 180px
}

#right {
float: right; width: 570px }

#footer {clear: both; }

and the template code

<body>
<div id="maincontainer">

<div id="header">{{header}}</div>

<div id="left">{{block}}</div>

<div id="right"> {{news}}</div>

<div id="footer"> {{footer}}</div>

<div> <!-- end /container -->
</body>

Quote from: rossco at Oct 30, 2007, 07:57 AM

Ok nearly there! The flot css instruction is causeing the block and news box to go right to the ends of the container so it’s over lapping the actual background image of the main container.

Your #maincontainer is 836px yet the total of #left and #right is 756, that means you have plenty of pixel left.
The #left is also touching the left edge, what you can do is, give a margin-left for #left, and margin-right for #right.
alternatively, you can have the #right floated left so that you don’t need to declare margin-right.

Your idea didn’t work... but i came up with something and it works... however i dono how correct it is lol.

my css looks like this

#maincontainer {
background-image:url(../images/background.png);
width: 836px;
margin: 0 auto /* make the layout stays center */
}
/*container for everything between the header and footer*/
#subcontainer {
width: 768px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/*header div*/
#header {
width:836px;
}
/*left div for menu block*/
#left {
float:left;
width: 180px;
}
/*right div for news div*/
#right {
float: none;
width: 578px;
position: relative;
left: 190px;
bottom: 50%;
top: -148px;
}


I’m using tables for my menu and news areas. I would like to use div and css instead but the results in IE and FF are a little different.

I want to have an image that is fixed width and height for the top of my news box... the body image to be fixed width but dynamic in height and the bottom image to be fixed width and height again.

I tried using 3 divs in css but it really didnt work well.

I used this code for the news block in the chunks area.

<table width="585" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="585" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img height="39" src="assets/images/news/news_01.png" width="585" /></td>
</tr>
<tr>

<td background="assets/images/news/news_02.png"><div align="center">
[*content*]
</div>
<tr>
<td><img height="39" src="assets/images/news/news_03.png" width="585" /></td>
</tr>
</table></tr>
</table>


Is there away to get the same results as this table but using div tags instead? I am trying to stop using tables and start using div tags more.

Quote from: rossco at Oct 30, 2007, 12:39 PM

Your idea didn’t work... but i came up with something and it works... however i dono how correct it is lol.

Probably the clear:both in your header causing it. I was not study your code to the detail.
With CSS, when thing doesn’t work as it supposes to in CSS well-supported browsers, sometimes can be caused by the adjacent div, depending on what elements you have declared.

My suggestion was sound, but you really have to play with it, try different ways to see what brings up, especially if you are new to CSS.


Quote from: rossco at Oct 30, 2007, 12:39 PM

Is there away to get the same results as this table but using div tags instead? I am trying to stop using tables and start using div tags more.

Many things are possible with CSS, I suggest you start with getting the basic from these sites.
http://css-discuss.incutio.com/
https://addons.mozilla.org/en-US/firefox/addon/1843 (can’t live without for website developement)
http://css.maxdesign.com.au/

It also help to study others’ code. For instance, you want to do something for your left menu, and the best is to find a site that does something similar, then use Firebug to study the CSS and html markup.

http://lotusseeds.com
I think The left menu I did for the above site, can help you. You are welcome to copy the menu code, and modify it to suit your need.