css page layout help

debrag · #1 Aug 30th, 2007, 09:44

I have a site designed with css here
The problem I am having is using a background div. I used one here but I don't know how to get it so it changes height when the sidebar & content div's do so they don't go outside the background div like the sidebar has done.
How do I fix this?

nate2099 · #2 Aug 30th, 2007, 11:19

links no go

debrag · #3 Aug 30th, 2007, 11:40

sorry to many w's links have been updated

karinne · #4 Aug 30th, 2007, 11:43

I'm confused ... what's it suppose to look like?

debrag · #5 Aug 30th, 2007, 11:47

in the second link i have placed a div behind the content and sidebar div.
This div label 'back' doesn't change it's height so the over div's don't go out side it as the sidebar has done.
How do I change this? are these 2 div's not inside the back div?

karinne · #6 Aug 30th, 2007, 11:51

It's not a div ... it's a span. Why are you using a span?

What is suppose to be the purpose of this span?

Do you have an end result you are trying to achieve ... like a mock-up or something?

karinne · #7 Aug 30th, 2007, 11:51

Quote:

Originally Posted by nate2099

can you post the css??

Just view the source!

nate2099 · #8 Aug 30th, 2007, 11:52

ummm. yeah, it's inline... or in the html at least...

anyways, im with you, confused.

my bed tim i think!!

debrag · #9 Aug 30th, 2007, 11:52

Quote:

Originally Posted by karinne

It's not a div ... it's a span. Why are you using a span?
*
What is suppose to be the purpose of this span?
*
Do you have an end result you are trying to achieve ... like a mock-up or something?

*
I set it up as a div I have no clue what a span is

karinne · #10 Aug 30th, 2007, 11:59

Quote:

Originally Posted by debrag

*
I set it up as a div I have no clue what a span is

This is the code you have .... way at the bottom of your document.

Code: Select all

<span id="back"></span>

So ... again ... what's suppose to be the purpose of that span? What are you trying to achieve?

debrag · #11 Aug 30th, 2007, 12:11

like this or this (many of these out there) though these use tables as well as divs are all designs like these done this way - div's inside tables?
Can't I have a 'container' div which houses all the divs - sidebar, content, header etc so this 'container' div exbands with the contents

debrag · #12 Aug 30th, 2007, 12:13

Quote:

Originally Posted by karinne

This is the code you have .... way at the bottom of your document.

Code: Select all

<span id="back"></span>

So ... again ... what's suppose to be the purpose of that span? What are you trying to achieve?

thats is mean to be div not span.

Acheive -
to not have the black behind the sidebar & content divs, to have it white, trying to place a div behind them but can't get one that expands with the contents to work.

karinne · #13 Aug 30th, 2007, 12:13

Well yeah ... it's just a 2 column layout

Look at the sticky Resources for how to do css layout up top. There's tons of examples of layouts. Pick one and run with it

Get you basic document (shell) done properly, then it's easy to add things to it.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
</head>

<body>

<div id="branding"> ... </div>

<div id="container">
    <div id="side"> ... </div>
    <div id="main"> ... </div>
</div>

<div id="siteinfo"> ... </div>

</body>
</html>

This would be the shell of a 2 column layout site.

debrag · #14 Aug 30th, 2007, 12:24

I take it 'branding' means header

karinne · #15 Aug 30th, 2007, 12:25

Quote:

Originally Posted by debrag

so the sidebar and content divs are next to each other with no space between them then?

Not sure what you mean by this.

Quote:

Originally Posted by debrag

I take it 'branding' means header

Yes ... branding is a much better word for header ... after all ... that is what you put in there

debrag · #16 Aug 30th, 2007, 12:40

Below is my code, the red parts are as follows:
'branding' = header
'container' = back
'side' = sidebar
'main' = contents

going to www.libbytanner.diva-host.com/index1.php shows no change the side bar is still over the back(container) div.
Have I closed the divs correctly?

Code: Select all

 
<body>
 
<div id="header"><img src="insomniacbg23a.jpg" alt="header" width="881" height="350" border="0" usemap="#Map" />
 
<map name="Map" id="Map"><area shape="rect" coords="15,187,63,207" href="index.php" alt="home" />
 
<area shape="rect" coords="79,189,127,207" href="libby.php" alt="libby" />
 
<area shape="rect" coords="143,187,218,211" href="interactive.php" alt="interact" />
 
<area shape="rect" coords="226,212,279,230" href="media.php" alt="media" />
 
<area shape="rect" coords="296,212,332,229" href="web.php" alt="web" />
 
</map></div>
<div id="back">
 
<div id="sidebar">
 
  <div class="headline">LATEST Projects </div>
 
  <div align="left">
 
    <div align="left">
 
      <div align="center">
 
        <div align="left">
 
          <p align="center"><img 
 
            src="6i.jpg" alt="1" 
 
            width="55" height="77" align="left" /> <b>BlackJack: At the Gates<br />
 
            </b>As: Stephanie Turner<br />
 
            Release: 24 September 2006 (Australia)<br />
 
            Format: TV<br />
 
            Info: <a 
 
            href="http://www.blackchristmas.com/">official site</a> <br />
 
          </p>
 
          <p align="right">[Past projects]<br />
 
          </p>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
  <div class="headline">SCHEDULE</div>
 
  <div align="center"><br />
 
      <div align="center"><img 
 
            src="flayguk.jpg" alt="1" 
 
            width="60" height="43" align="left" /> <b><U>All Saints</U><br />
 
        </b>As: Bronwyn Craig <br />
 
        Channel: BBC1 (mon-fri)<br />
 
        Times: 2:35pm - 3:20pm <br />
 
        <br />
 
        &nbsp; </div>
 
  </div>
 
  <div class="headline">LATEST  IMAGES</div>
 
  <p align="center"><?php
 
  include "./gallery/cpmfetch/cpmfetch.php";
 
  $objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
 
  $objCpm->cpm_viewLastAddedMedia(1,2);
 
  $objCpm->cpm_close();
 
?>
 
<br />
 
    &nbsp;
 
    <!-- BEGIN CBOX - http://www.cbox.ws -->
 
  </p>
 
  <div class="headline">RANDOM IMAGES</div><br />
 
  <!-- END CBOX -->
 
  </p>
 
  </p>
 
  </p>
 
  <div class="headline">SITE DETAILS</div>
 
  <div align="center">Owned by:Debra<br />
 
    Host: diva-host.com<br />
 
    Opened Since: 2007<br />
 
    <!--WEBBOT bot="Script" startspan PREVIEW="Site Meter" -->
 
    <br />
 
    </p>
 
  </div>
 
  <div class="headline">SISTER SITES</div>
 
  <p align="center">Helen Dallimore<a target="_blank" href="http://sarah-fan.com"><br />
 
    </a>Emily Symons<br />
 
    Maura Tierney<br />
 
    Julianna margulies<br />
 
    daphne zuniga</p>
 
  <div class="headline">SHOP FOR libby</div>
 
  <div align="center"><a href="http://www.qksrv.net/click-479223-5463217?loc=http%3A//search-desc.ebay.com/search/search.dll?MfcISAPICommand=GetResult&amp;SortProperty=Metahttp://search-desc.ebay.com/search/search.dll?sofocus=bs&amp;sbrftog=1&amp;from=R10&amp;_trksid=m37&amp;satitle=libby+tanner&amp;sacat=-1%26catref%3DC6&amp;fts=2&amp;sargn=-1%26saslc%3D2&amp;sadis=200&amp;fpos=ZIP%2FPostal&amp;sabfmts=1&amp;saobfmts=insif&amp;ftrt=1&amp;ftrv=1&amp;saprclo=&amp;saprchi=&amp;fsop=1&amp;fsoo=1" target="_blank">EBAY</a><br />
 
    &nbsp;<a/></a></a></a> </div>
 
  <div class="headline">Design &amp; Coding</div>
 
  <div align="center">Designed and coded by me</div>
 
</div>
 
<div id="content">
 
  <div class="headline">
 
    <div align="center">NEWS</div>
 
  </div>
 
  <div align="center">
 
    <p><?PHP
 
$number=10;
 
include("/home/divatcom/public_html/libbytanner/news/show_news.php");
 
?>&nbsp;</p>
 
  </div>
 
</div>
 
</div>
 
</body>

css for id back:

#back {
position:absolute;
width:880px;
height

x;
z-index:0;
left: 11px;
top: 23px;
background-color: #FFFFFF;

karinne · #17 Aug 30th, 2007, 12:51

If you want to use positioning, position: relative; is the one you should be using for this ... not absolute.

z-index here is not needed.

So ... if I have this straight, you want the black background around your content. And the content should be white.

debrag · #18 Aug 30th, 2007, 13:00

Code: Select all

#back {
 position:relative;
 width:880px;
 height:px;
 left: 11px;
 top: 23px;
 background-color: #FFFFFF;

results - whole section has moved!
www.libbytanner.diva-host.com/index1.php

and no I want 'container' to be white which it currently is.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css page layout help