Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Dreamweaver General (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=168)
-   -   Layout Problem (http://www.dreamweaverclub.com/forum//showthread.php?t=29391)

hummer2001 11-11-2008 11:16 AM

Layout Problem
 
Hi,
I'm fairly new to dreamweaver and have been trying to figure out a layout problem I've been having.

Here is the code:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
 position:absolute;
 left:0px;
 top:0px;
 width:990px;
 height:112px;
 z-index:1;
 background-color: #009966;
}
#apDiv2 {
 position:absolute;
 left:0px;
 top:112px;
 width:990px;
 height:246px;
 z-index:2;
 background-color: #993333;
}
#apDiv3 {
 position:absolute;
 left:0px;
 top:358px;
 width:990px;
 height:35px;
 z-index:3;
 background-color: #009966;
}
#apDiv4 {
 top:0px;
 width:244px;
 height:56px;
 z-index:4;
 background-color: #006666;
 float: right;
}
#apDiv5 {
 width:746px;
 height:19px;
 z-index:5;
 background-color: #009999;
 float: left;
}
#apDiv6 {
 position:absolute;
 top:56px;
 width:244px;
 height:423px;
 z-index:6;
 background-color: #00CC33;
 float: right;
 overflow: auto;
}
#apDiv7 {
 width:746px;
 z-index:7;
 background-color: #0066FF;
 float: left;
 overflow: auto;
}
#apDiv8 {
 width:244px;
 z-index:8;
 background-color: #CC9933;
 clear: none;
 float: right;
 top: 423px;
 position: relative;
 overflow: visible;
}
#apDiv9 {
 position:relative;
 left:0px;
 width:990px;
 height:24px;
 z-index:9;
 background-color: #00CC99;
 clear: both;
 bottom: 100%;
}
#apDiv10 {
 width:990px;
 height:27px;
 z-index:10;
 background-color: #99CC00;
 clear: both;
 visibility: visible;
 top: auto;
 position: absolute;
}
#Master {
 width: 990px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 position: relative;
 left: 0px;
 top: 0px;
}
#apDiv11 {
 z-index:1;
 background-color: #CC0033;
 width: 990px;
 top: 392px;
 position: absolute;
}
-->
</style>
</head>
<body>
<p>&nbsp;</p>
<div id="Master">
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
 
 
<div id="apDiv11">
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7">
  <p align="justify" class="MainTextController">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nisl metus, congue ac, cursus malesuada, cursus nec, lacus. Vivamus felis justo, lobortis ac, aliquet sit amet, volutpat ac, quam. Donec a lacus. Sed sit amet tortor at turpis suscipit laoreet. Ut eleifend imperdiet odio. Donec porta ligula vel diam. Sed a leo. Sed id ligula. Nulla varius elit at eros. Aliquam vestibulum porttitor nisi. Nulla dictum neque at dolor. Nunc mi felis, bibendum in, pretium eget, blandit ac, ante. Aliquam non ligula at massa venenatis eleifend. In magna. </p>
  <p align="justify" class="MainTextController">Nunc quis enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis laoreet lacus. Ut feugiat ante at erat. Integer lobortis, sapien eu ultrices rutrum, mi lacus auctor orci, tempor placerat nisl eros quis justo. Fusce a est. Praesent vel risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque nec quam in purus mollis lobortis. Fusce varius mi quis dolor. Donec id ante ut nisl dapibus tempor. In scelerisque magna pellentesque nisl adipiscing sagittis. Nullam sed risus quis leo egestas aliquet. Donec ipsum. Nullam sed erat. </p>
  <p align="justify" class="MainTextController">Curabitur tempus massa sed pede laoreet commodo. Suspendisse sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a metus. Suspendisse potenti. Nam vel tellus sed libero porttitor viverra. Quisque bibendum nibh imperdiet sem. Vivamus facilisis mauris quis odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis molestie turpis. In augue lorem, hendrerit eget, euismod sed, posuere eu, felis. Donec leo nibh, porttitor id, eleifend et, ultrices ac, ligula. Vivamus tincidunt est at turpis. Aenean sit amet eros. Integer volutpat, magna eget dictum aliquam, dolor sapien malesuada Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nisl metus, congue ac, cursus malesuada, cursus nec, lacus. Vivamus felis justo, lobortis ac, aliquet sit amet, volutpat ac, quam. Donec a lacus. Sed sit amet tortor at turpis suscipit laoreet. Ut eleifend imperdiet odio. Donec porta ligula vel diam. Sed a leo. Sed id ligula. Nulla varius elit at eros. Aliquam vestibulum porttitor nisi. Nulla dictum neque at dolor. Nunc mi felis, bibendum in, pretium eget, blandit ac, ante. Aliquam non ligula at massa venenatis eleifend. In magna. </p>
  <p align="justify" class="MainTextController">Nunc quis enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis laoreet lacus. Ut feugiat ante at erat. Integer lobortis, sapien eu ultrices rutrum, mi lacus auctor orci, tempor placerat nisl eros quis justo. Fusce a est. Praesent vel risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque nec quam in purus mollis lobortis. Fusce varius mi quis dolor. Donec id ante ut nisl dapibus tempor. In scelerisque magna pellentesque nisl adipiscing sagittis. Nullam sed risus quis leo egestas aliquet. Donec ipsum. Nullam sed erat. </p>
  <p align="justify" class="MainTextController">Curabitur tempus massa sed pede laoreet commodo. Suspendisse sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a metus. Suspendisse potenti. Nam vel tellus sed libero porttitor viverra. Quisque bibendum nibh imperdiet sem. Vivamus facilisis mauris quis odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis molestie turpis. In augue lorem, hendrerit eget, euismod sed, posuere eu, felis. Donec leo nibh, porttitor id, eleifend et, ultrices ac, ligula. Vivamus tincidunt est at turpis. Aenean sit amet eros. Integer volutpat, magna eget dictum aliquam, dolor sapien malesuada hjhkghg gkk gkgk</p>
  <p align="justify" class="MainTextController">gkgk g</p>
  <p align="justify" class="MainTextController">gk </p>
  <p align="justify" class="MainTextController">hkjhl</p>
  <p align="justify" class="MainTextController">hvbjk</p>
  <p align="justify" class="MainTextController">jkhblkjh</p>
  <p align="justify" class="MainTextController">uihgpi9ughpiouhoo</p>
</div>
<div id="apDiv8"></div>
</div>
<div id="apDiv9"></div>
<div id="apDiv10"></div>
</div>
</body>
</html>

What im trying to achieve is to have div7 extend based on content and div8 extend to match div7.
Ive tried to enclose them in div11.

Then divs 9 and 10 should sit at the bottom of the div11 container.

Where am I going wrong? Someone please help.

coloeagle 11-11-2008 12:10 PM

First, are all the divs needed to achieve what you want?

Without taking your info and playing with it. Looks like you have a lot of styling you don't need.
Absolute positioning without relative settings.
z-indexes, are they needed as well.

If you have added a lot of this stuff trying to get what you want it might be better to start over from scratch. You may have some conflicting stuff going on.

Also a div won't expand unless something is placed inside it or a height is given to it.

hummer2001 11-11-2008 12:19 PM

I dont think z-indexs are needed really since there is nothing that is supposed to overlap. I think dreamweaver might have put them there by default. So I could definately check that. How could i use a height value to scale div 8 with div 7 tho, is this possible with dreamweaver?

coloeagle 11-11-2008 12:25 PM

To achieve an equal height for both divs is a little more complicated. Especially if the content placed in both is not equal.

You would need to add a height value to the div that is shorter making it match the longer div. This would be required on each page if things are different. Another option would be to do a faux height design that uses an image.

hummer2001 11-11-2008 12:36 PM

The problem is that on different pages the content for div7 would be different, and it seems that different browsers interpret the height differently, so it would be impossible to give an absolute height for div 8 as it would look different depending on which browser its view thru. Ill have to check the faux height design. Any other suggestions much appreciated.

hummer2001 11-11-2008 02:41 PM

Can anyone help me to figure this problem out?

edbr 11-12-2008 01:11 AM

im not sure what you want. are you looking for a three column design with content in the centre and two side bars filling the whole page?

hummer2001 11-12-2008 08:59 AM

Hi edbr,

Just looking for a two column design With the main content div (div7) determining the height of its neighbouring column(div 8 ). both divs should scale with the content in div7. Ive made another stab at the code to try and get the footers working. Im nearly there I think, just need to figure out the scaling issue. Have tried to implement a faux system but dont have it quite right.

Heres the latest code:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
 
#apDiv1 {
 position:absolute;
 left:0px;
 top:0px;
 width:990px;
 height:112px;
 background-color: #009966;
}
#apDiv2 {
 position:absolute;
 left:0px;
 top:112px;
 width:990px;
 height:246px;
 background-color: #993333;
}
#apDiv3 {
 position:absolute;
 left:0px;
 top:358px;
 width:990px;
 height:35px;
 background-color: #009966;
}
#apDiv4 {
 top:0px;
 width:244px;
 height:56px;
 background-color: #006666;
 float: right;
 clear: right;
 position: relative;
}
#apDiv5 {
 width:746px;
 height:19px;
 background-color: #009999;
 float: left;
 clear: left;
 position: relative;
}
#apDiv6 {
 position:relative;
 top:0px;
 width:244px;
 height:423px;
 background-color: #00CC33;
 float: right;
 overflow: auto;
 clear: right;
}
#apDiv7 {
 width:746px;
 background-color: #0066FF;
 float: left;
 overflow: hidden;
 position: relative;
 clear: left;
 top: -37px;
}
#apDiv8 {
 width:244px;
 background-color: #CC9933;
 float: right;
 top: 0px;
 background-image: url(../Main%20Images/Other%20Main%20Images/Student01.jpg);
 background-repeat: repeat-y;
 position: relative;
 clear: right;
 padding-top: 100px;
}
#apDiv9 {
 left:0px;
 width:100%;
 height:24px;
 background-color: #00CC99;
 position: relative;
 clear: both;
}
#apDiv10 {
 width:990px;
 height:27px;
 background-color: #99CC00;
 clear: both;
 position: relative;
 top: auto;
}
#Master {
 width: 990px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 position: relative;
 left: 0px;
 top: 0px;
 height: auto;
}
#apDiv11 {
 background-color: #CC0033;
 width: 990px;
 top: 392px;
 position: absolute;
 overflow: auto;
 height: auto;
}
-->
</style>
</head>
<body>
 
 
<p>&nbsp;</p>
<div id="Master">
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
 
 
<div id="apDiv11">
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7">
  <p align="justify" class="MainTextController">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nisl metus, congue ac, cursus malesuada, cursus nec, lacus. Vivamus felis justo, lobortis ac, aliquet sit amet, volutpat ac, quam. Donec a lacus. Sed sit amet tortor at turpis suscipit laoreet. Ut eleifend imperdiet odio. Donec porta ligula vel diam. Sed a leo. Sed id ligula. Nulla varius elit at eros. Aliquam vestibulum porttitor nisi. Nulla dictum neque at dolor. Nunc mi felis, bibendum in, pretium eget, blandit ac, ante. Aliquam non ligula at massa venenatis eleifend. In magna. </p>
  <p align="justify" class="MainTextController">Nunc quis enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis laoreet lacus. Ut feugiat ante at erat. Integer lobortis, sapien eu ultrices rutrum, mi lacus auctor orci, tempor placerat nisl eros quis justo. Fusce a est. Praesent vel risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque nec quam in purus mollis lobortis. Fusce varius mi quis dolor. Donec id ante ut nisl dapibus tempor. In scelerisque magna pellentesque nisl adipiscing sagittis. Nullam sed risus quis leo egestas aliquet. Donec ipsum. Nullam sed erat. </p>
  <p align="justify" class="MainTextController">Curabitur tempus massa sed pede laoreet commodo. Suspendisse sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a metus. Suspendisse potenti. Nam vel tellus sed libero porttitor viverra. Quisque bibendum nibh imperdiet sem. Vivamus facilisis mauris quis odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis molestie turpis. In augue lorem, hendrerit eget, euismod sed, posuere eu, felis. Donec leo nibh, porttitor id, eleifend et, ultrices ac, ligula. Vivamus tincidunt est at turpis. Aenean sit amet eros. Integer volutpat, magna eget dictum aliquam, dolor sapien malesuada Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nisl metus, congue ac, cursus malesuada, cursus nec, lacus. Vivamus felis justo, lobortis ac, aliquet sit amet, volutpat ac, quam. Donec a lacus. Sed sit amet tortor at turpis suscipit laoreet. Ut eleifend imperdiet odio. Donec porta ligula vel diam. Sed a leo. Sed id ligula. Nulla varius elit at eros. Aliquam vestibulum porttitor nisi. Nulla dictum neque at dolor. Nunc mi felis, bibendum in, pretium eget, blandit ac, ante. Aliquam non ligula at massa venenatis eleifend. In magna. </p>
  <p align="justify" class="MainTextController">Nunc quis enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sagittis laoreet lacus. Ut feugiat ante at erat. Integer lobortis, sapien eu ultrices rutrum, mi lacus auctor orci, tempor placerat nisl eros quis justo. Fusce a est. Praesent vel risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque nec quam in purus mollis lobortis. Fusce varius mi quis dolor. Donec id ante ut nisl dapibus tempor. In scelerisque magna pellentesque nisl adipiscing sagittis. Nullam sed risus quis leo egestas aliquet. Donec ipsum. Nullam sed erat. </p>
  <p align="justify" class="MainTextController">Curabitur tempus massa sed pede laoreet commodo. Suspendisse sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a metus. Suspendisse potenti. Nam vel tellus sed libero porttitor viverra. Quisque bibendum nibh imperdiet sem. Vivamus facilisis mauris quis odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis molestie turpis. In augue lorem, hendrerit eget, euismod sed, posuere eu, felis. Donec leo nibh, porttitor id, eleifend et, ultrices ac, ligula. Vivamus tincidunt est at turpis. Aenean sit amet eros. Integer volutpat, magna eget dictum aliquam, dolor sapien malesuada hjhkghg gkk gkgk</p>
  <p align="justify" class="MainTextController">gkgk g</p>
  <p align="justify" class="MainTextController">gk </p>
  <p align="justify" class="MainTextController">ypoyoiy</p>
  <p align="justify" class="MainTextController">yuio</p>
  <p align="justify" class="MainTextController">fdsgdfsg</p>
  <p align="justify" class="MainTextController">dfsgs</p>
  </div>
 
<div id="apDiv8"></div>
<div id="apDiv9"></div>
<div id="apDiv10"></div>
</div>
 
 
</div>
</body>
</html>


Thanks for any help

edbr 11-12-2008 09:16 AM

ok bit pressed for time so here. This will give header two columns and a footer. basic but it might help.To get left col to appear to go all the way the full legnth of the content dic ,add an image as a bakground image 120 px wide (same as the col width and repeat it X so it will repeat the fully as long as the content streches as it were
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#content {
    position: relative;
    float: left;
    width: 800 px;
    height: auto;
   
}
#leftcol {
    position: relative;
    float: left;
    width: 120px;
    background-color:#0000FF;
    float: left;
}

#rightcol {
    position: relative;
    float: left;
    width: 780px;
    background-color: #FFFFFF;

   
}

#header{
    width:100%;
    height: 90 px;

    background-color : #FF0000;
    border: 1px solid #999999;

}

#footer{
    width:100%;
    height: 90 px;
    clear:left;

    background-color : #FF0000;
    border: 1px solid #999999;
   
}
-->
</style>
</head>

<body>
<div id="content">
  <div id="header">Content for  id "header" Goes Here</div>
 
 
 
 
 
  <div id="leftcol">Content for  id "leftcol" Goes Here</div>
 
  <div id="rightcol">
    <p >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
    Content for  id &quot;rightcol&quot; Goes Here </div>
   
    <div id="footer">Content for  id "footer" Goes Here</div>
</div>
</body>
</html>


hummer2001 11-12-2008 12:38 PM

Hi Edbr,

First of all thanks for the response. Ive taken a look at you code, and its close to what i need. Theres a few things i dont understand tho.

why is everthing floated to the left?
in left col, is there a reason its floated left twice?

The header and footer seem to span horizontally to 100% of the containing div perfectly in firefox, opera, safari, but in iexplorer are only spanning as far as the text, is there a way to fix this?

Could you give me a little more info on the repeating image, you say repeat-x , but in order for it to scale downwards wouldnt i need to be using repeat-y ?

Thanks v much.


All times are GMT. The time now is 03:07 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com