32 replies [Last post]
loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Hi. I am pretty new to CSS and have a question about layout. I currently have a 2 column site written in HTML with the header and footer as SSI files. I want to change my site to XHTML and CSS so I don't use tables anymore to make it easier to make updates. Do I need to create a layout in CSS including a header and footer or do I only create my 2 column layout and not worry about the header and footer since they are SSI.

I appreciate any advice anyone has for me.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi

Create your site in css/html as it you didn't have ssi's.

Then, when done, rename to php, asp or whatever, cut the html out and replce with includes as normal.

Please, please develop your site with a valid doctype. As it will be from scratch (will it?), perhaps use xhtml 1.0 strict. AND, use Firefox, checking IE as you go along.

Perhaps you could post a link of what you want to end up with, we can give hints as to the best way to get started.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Thank you for your advice! I'm a little confused about the doctype. I have the following as my Doctype:

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

I had it xhtml 1.0 strict but when I ran it through the html tidy it says:
"Document content looks like XHTML 1.0 Transitional"

I used the CSS generator to get the template for my layout.
After inputting my data I ran it through the HTML and CSS validators. I cleaned up what I could but there are still errors on the code for affiliate links. Is there a way to fix those?

I also wanted to make my header in 2 sections across - 1 smaller one for my logo and the other one for a banner but am having trouble centering the banner instead of lining up against my logo.

The footer I wanted in 3 sections - 2 outer sections smaller for small graphics and the center one for my copyright and contact infor. With the <div> tags I am having trouble doing that now.

The webpage I have been working on is:
www.christianwomensresources.com/xhtml2.htm

Thank you for any guidance you may have for me.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

I'll have a look later lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

I will give you some simple code to play with, if you give me some dimensions (in pixels):

Header

Width & height
Logo to the left or right? Width & height
Banner in middle. Width & height

Footer

Width & height
Graphic to the left? Width & height
Graphic to the right? Width & height
Text in middle.

It is simple really, but once you see the code you'll see that.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Thank you so much for getting back to me and helping me out. The following is approximate dimensions for my layout.

My total page width is 760 px

My logo should fit in:
width - 200 px
height - 175 px

Banner:
width - 560 px
height - 175 px

small graphics in footer on right and left should fit in:
width - 100 px each
height - 100 px

Middle section text area:
width - 560 px
height - 100 px

Is that what you were asking for?
Thanks again for your help.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

I gave the images obvious names!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>New document</title>
<style type="text/css">
html,body{
  margin:0;
  padding:0;
  border:0;
}
body{
  font-family:verdana,arial,sans-serif;
  font-size:101.1%;
}
div,p{margin:0}
#ob{
  margin-left:20px;
  width:760px; /* adjust this for width */
  overflow:hidden;
  margin-top:20px;
}
#spacer{height:100px}
#ulbg{background:url(images/logo.gif) no-repeat top left}
#urbg{
background:url(images/banner.gif) no-repeat top right;
height:175px;
overflow:hidden;
}
#llbg{background:url(images/left_image.gif) no-repeat top left;}
#lrbg{background:url(images/right_image.gif) no-repeat top right}
#lmbg{
margin:0 100px;
height:100px;
overflow:hidden;
text-align:center;
}
</style>
</head>
<body>
<div id="ob">
  <div id="ulbg">
    <div id="urbg">
    </div>
  </div>
  <div id="spacer">
    <p>Some Content</p>
  </div>
  <div id="llbg">
    <div id="lrbg">
      <div id="lmbg">
	    <p>FOOTER</p>
	  </div>
    </div>
  </div>
</div>
</body>
</html>

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Thank you so much for getting back to me so quickly. I will look at this and see if I can understand what all you did. It looks a little confusing but I am sure I will figure it out once I look at it more closely.

One question I do have: Is the CSS code supposed to stay inside the html document? or do I cut that code out and input it into my css document?

Thanks for your time!

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi

In an external file please.

I always put it 'inline' to make it easier to test.

Hopefully, if you have the images, just change the filenames accordingly (the naes suggest which one is which) and the paths to them. Then you will see what is going on.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I played around with the code you gave me and I guess I am not quite understanding it all or I must be doing something wrong.

The following are links to what I had prior to including your code:

HTML - www.christianwomensresources.com/xhtml2.htm
CSS used - same url with /xhtml2.css and /listmenu_h.css

The following are links to what I created with your code included:

HTML - www.christianwomensresources.com/xhtml3.htm
CSS used - same urls as prior webpage and /handf.css

Please take a look at the pages and you will see it didn't do what I wanted.
I ran them all through html and css validators. Am I completely doing something wrong that made my page layout even worse?

Thank you for your time and help with this.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

I will look at it tomorrow, I am v ++ tired tonite.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

I haven't forgotten you, just been v busy today.

I will post a re-worked version of your page on Sunday, after I come back from church.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

Not a problem. I know you have plenty of other things to do too.
I just appreciate the fact that you are willing to help me out.
Have a great weekend!

Blessings,
Lori

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I just wanted to send a quick post to make sure that I am not expecting too much from you. I know you must be busy and have plenty of other things to do so please let me know if I am.

Thanks,
Lori

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

loricwr wrote:
Hi Trevor,

I just wanted to send a quick post to make sure that I am not expecting too much from you. I know you must be busy and have plenty of other things to do so please let me know if I am.

Thanks,
Lori


Hi Lori

Wasn't feeling too well this weekend and I'm only just starting to feel better.

Whilst I do not wish to rebuild your page (that is too much for me, given your content) I can give you the bare bones.

By way of an explanation, you should know that I have directed a LOT of work towards making a stable page design that is:

# Centered in the page (ie NOT full width).
# Flexible to accommodate one main column, three columns (center is main), two columns (left is main) and two columns (right is main).
# Content order (to maximise Google listing) is Main, Left, Right, Footer, Header.
# html to be as low weight as possible, and css to have minimal use of hacks.
# Full height (ie with low page content or a user with large window size - like on the new big tft monitors) so that footer appears on the bottom, and columns will push this down regardless of which column is longest.
# Simple to add background images for additional drop shadow type effects.
# Cross browser friendly (although older and nearly dead browsers like MAC IE, older Gecko's and Opera's older versions may not correctly display, but won't be too bad). Works with IE5+ (PC), FF1+ (PC/MAC), Safari 1+ and Opera 6+ (PC/MAC) - as far as I know.

I made a tool to make this type of code, which is now hosted at www.positioniseverything.net . However, I had a brainwave last week and made much better, cleaner code. After a week of checking and playing, I have now settled on the stable versions. The tool will need modifying to make this new, better code.

In the meantime, I can make (just for you) the code to make what you want.

Can you give (in pixels) the:

# overall page width
# overall header height
# overall footer height

If the header and footers are divided into rows/columns, please list these also (e.g. row 1 height 20px, col one 50px col two 710px).

I will quickly make the code, into which you can paste your own code. Think of each discrete bit of your header/footer as a separate bit for me to code.

I'll try and paste your content in if it isn't to hard to do, else you will have to do that and iron out any problems, with help.





Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Sorry to hear you weren't feeling well. I truly appreciate all your help. Following is the information you requested for my header and footer.

760 px is my overall page width

Header:
Row 1 - links for home, about, sitemap height 20px
Row 2 - logo and banner height 150px - col one: 200px; col two: 560px
Row 3 - main drop down menu - height 20px
Row 4 - directory menu links - height 20px

Footer:
Row 1 - bookmark links height 20px
Row 2 - height 100px - col one: 100px; col two: 560px; col three: 100px

I am only guessing on the approximate height of these because I'm not really sure how to figure the height. Will it be able to be adjusted afterwards?

You don't need to worry about trying to paste my content in, I can do that.
Thanks again for all your help!

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

loricwr wrote:
I am only guessing on the approximate height of these because I'm not really sure how to figure the height. Will it be able to be adjusted afterwards?

Hi Lori

If you have a halfway decent imaging program (I use Paintshop Pro 10), you can take a screenshot (with either a screen shot utility, or by pressing PrtScrrn button on your keyboard).

Paste it into the paint program, zoom into the bit in question, select the bit your want. Some programs will tell you your select area dimensions, some you have to copy and paste as a new image and check out the image's dimension properties.

For blocks where only an image has to fit, you will know the dimensions anyway. If you don't leave enough room, bits may disappear or overflow to break the design.

As to how easy it is to change, it isn't too hard to follow where the dimensions are and which bits are the addition of others. I will put comments beside those bits for you.

I'll work on it today and post in around 12-16 hours.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

How long did that take? About 25 minutes I think. With my tool working, that would have taken about a minute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<style type="text/css" media="all">
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
  margin:0;
  padding:0;
  border:0;
  border-collapse:0;
  border-spacing:0;
}
/* \*/
html,body{height:100%}
/* Last height declaration hidden from Mac IE 5.x */
body{
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
  color:#000000;
}
body{
  background-color:#EEEEEE;
  min-width:760px;
  text-align:center;
}
input,select{
  margin:0;
  padding:0;
}
strong,b{
  font-weight:bold;
}
p{
  font-size:90%;
  line-height:1.1em;
}
.floatcontainer:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; font-size:0px}
.floatcontainer{display: inline-table;}  /* Mark Hadley's fix for IE Mac */  
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */ 
#fullheightcontainer{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  position:relative;
  width:760px; /* Total Page Width */
  display:table;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
  margin-bottom:-120px; /* Total Footer Height (negative) */
}
#wrapper{
  display:table-cell;
  background-color:#FFCCCC;
}
#outer{
  width:560px; /* Main body main content width */
  background-color:#ADD8E6;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
#float-wrap{
  width:560px; /* Main body main content width */
  float:left;
  display:inline;
}
#right{
  float:left;
  display:inline;
  width:200px; /* Right Col Width */
  margin-right:-200px; /* Right col width (negative) */
  position:relative;
  padding:210px 0px 120px 0px; /* Total Header Height : 0 : Total Footer Height : 0 */
}
#container-right{ /* Right Col Width, the next two comments are a hack! Do NOT remove! */
/* \*/
  width:200px;
/* Above hidden from IE-Mac */
}
#center{
  width:560px;
  float:right;
/* \*/
  height:100%;
/* Hidden from IE-mac */
  display:table;
  padding:210px 0px 120px 0px; /* Total Header Height : 0 : Total Footer Height : 0 */
}
#footer{
  z-index:1;
  position:relative;
  width:100%;
  height:120px; /* Total Footer Height */
  overflow:hidden;
}
#footer-inner{
  width:760px; /* Total Page Width */
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  height:120px; /* Total Footer Height */
}
#subfooter1{
  background-color:#FFFFCC;
  text-align:center;
  height:20px;
}
#subfooter2{
  background-color:red;
  text-align:center;
  height:100px;
}
#header{
  z-index:1;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:210px;
  overflow:hidden;
}
#header-inner{
  width:760px; /* Total Page Width */
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  height:210px;
  background:purple;
}
#subheader1{
  background-color:green;
  text-align:center;
  height:20px;
}
#subheader2{
  background-color:#FFFFCC;
  text-align:center;
  height:150px;
  margin-left:200px;
}
#subheader3{
  background-color:red;
  text-align:center;
  height:20px;
}
#subheader4{
  background-color:blue;
  text-align:center;
  height:20px;
}
#container-center{
}
</style>
<!--[if IE]>
<style type="text/css">
#outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div id="wrapper">
    <div id="outer" class="floatcontainer">
      <div id="float-wrap" class="floatcontainer">
        <div id="center">
          <div id="container-center">
            <p>
              This is the<br />Main Content<br />
            </p>
          </div>
        </div>
      </div>
      <div id="right">
        <div id="container-right">
          <p>
            This is the Right Sidebar<br />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="footer-inner">
    <div id="subfooter1">
      <p>
        This is Sub-Footer #1 (with Fixed Height)
      </p>
    </div>
    <div id="subfooter2">
      <p>
        This is Sub-Footer #2 (with Fixed Height)
      </p>
    </div>
  </div>
</div>
<div id="header">
  <div id="header-inner">
    <div id="subheader1">
      <p>
        This is Sub-Header #1 (with Fixed Height)
      </p>
    </div>
    <div id="subheader2">
      <p>
        This is Sub-Header #2 (with Fixed Height)
      </p>
    </div>
    <div id="subheader3">
      <p>
        This is Sub-Header #3 (with Fixed Height)
      </p>
    </div>
    <div id="subheader4">
      <p>
        This is Sub-Header #4 (with Fixed Height)
      </p>
    </div>
  </div>
</div>
</body>
</html>

Obviously, the backgrounds are grim! But they show where bits are. The page logo for the left of the 2nd header row sits in the background of the header-inner, appropriately postioned from the top and left as required.

I'l try and put your bits in later. Obviously, you don't want the background colors!

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

Here's your page with the headers and footers done. My server has changed the paths to the images. Also, I have deleted the css for p in your listmenu_h.css file, as it conflicts with my code (my code has new p code in). I have moved some inline styling into the css, but you should remove the rest (e.g. very little need for <br>'s <font> etc).

I haven't put the main body or sidebar code in. I have adjusted the widths/heights etc to match your page.

Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Your Page Title Here</title>
<link href="xhtml2_files/listmenu_h.css" rel="stylesheet" type="text/css">
<style type="text/css" media="all">
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
  margin:0;
  padding:0;
  border:0;
  border-collapse:0;
  border-spacing:0;
}
/* \*/
html,body{height:100%}
/* Last height declaration hidden from Mac IE 5.x */
body{
  font-family: arial, helvetica, sans-serif;
  font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
  color:#000000;
}
body{
  background-color:#FFF;
  min-width:761px;
  text-align:center;
}
input,select{
  margin:0;
  padding:0;
}
strong,b{
  font-weight:bold;
}
p{
  font-size:90%;
  line-height:1.1em;
}
.floatcontainer:after{ content: "."; display: block; height: 0; clear: both; visibility:hidden; font-size:0px}
.floatcontainer{display: inline-table;}  /* Mark Hadley's fix for IE Mac */  
/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */ 
#fullheightcontainer{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  position:relative;
  width:761px; /* Total Page Width */
  display:table;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
  margin-bottom:-140px; /* Total Footer Height (negative) */
}
#wrapper{
  display:table-cell;
  zbackground-color:#FFCCCC;
}
#outer{
  width:561px; /* Main body main content width */
  zbackground-color:#ADD8E6;
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
#float-wrap{
  width:561px; /* Main body main content width */
  float:left;
  display:inline;
}
#right{
  float:left;
  display:inline;
  width:200px; /* Right Col Width */
  margin-right:-200px; /* Right col width (negative) */
  position:relative;
  padding:227px 0px 140px 0px; /* Total Header Height : 0 : Total Footer Height : 0 */
}
#container-right{ /* Right Col Width, th enext two comments are a hack! Do NOT remove! */
/* \*/
  width:200px;
/* Above hidden from IE-Mac */
}
#center{
  width:561px;
  float:right;
/* \*/
  height:100%;
/* Hidden from IE-mac */
  display:table;
  padding:227px 0px 140px 0px; /* Total Header Height : 0 : Total Footer Height : 0 */
}
#footer{
  z-index:1;
  position:relative;
  width:100%;
  height:140px; /* Total Footer Height */
  overflow:hidden;
}
#footer-inner{
  width:761px; /* Total Page Width */
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  height:140px; /* Total Footer Height */
}
#subfooter1{
  background-color:#FFFFCC;
  text-align:center;
  height:20px;
}
#subfooter1 p {
  font-size:75%;
}
#subfooter2{
  text-align:center;
  height:120px;
  overflow:hidden;
}
#subfooter2 p{
  margin-top:10px;
  color:#90297D;
  font-size:75%;
  font-weight:bold;
}
#subfooter2 p.copy{
  margin:0px;
  color:#000;
  font-size:75%;
  font-weight:normal;
}
#subfooter2 p.contact{
  margin:0px 0px 10px 0px;
  color:#000;
  font-size:65%;
  font-weight:normal;
}
#header{
  z-index:1;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:227px;
  overflow:hidden;
}
#header-inner{
  width:761px; /* Total Page Width */
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  height:227px;
  background:#FFF url(xhtml2_files/christian-womens-resources-logo.gif) 0px 35px no-repeat;
}
#subheader1{
  overflow:hidden;
  text-align:center;
  height:21px;
  margin-top:10px;
}
#subheader1 p {
  font-size:75%;
}
#subheader2{
  background-color:#FFF;
  text-align:left;
  height:64px;
  margin-left:245px;
  margin-top:86px;
}
#subheader3{
  overflow:hidden;
  text-align:center;
  height:28px;
}
#subheader4{
  text-align:center;
  height:18px;
  overflow:hidden;
}
#subheader4 p{
  line-height:18px;
  font-size:80%;
}
#container-center{
}
a img {border: 0px none;}
</style>
<!--[if IE]>
<style type="text/css">
#outer{word-wrap:break-word;}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
  <div id="wrapper">
    <div id="outer" class="floatcontainer">
      <div id="float-wrap" class="floatcontainer">
        <div id="center">
          <div id="container-center">
            <p>
              This is the<br />Main Content<br />
            </p>
          </div>
        </div>
      </div>
      <div id="right">
        <div id="container-right">
          <p>
            This is the Right Sidebar<br />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="footer-inner">
    <div id="subfooter1">
<p class="menubox2"><b>Bookmark our </b>
<a href="http://www.christianwomensresources.com/moms-fun-page.html">Moms Fun Page</a> | or 
<a href="http://cwr-daily-devotionals.blogspot.com/">Devotionals</a> page!</p>
    </div>
    <div id="subfooter2">
<p>Please refer Christian Womens Resources to a friend!</p>
<p class="copy">&copy; 2005 <i>www.ChristianWomensResources.com</i></p>

<p class="contact">Contact:
<script language="JavaScript1.2" type="text/javascript">
<!--
// Courtesy of SimplytheBest.net http://simplythebest.net/info/dhtml_scripts.html
// hide script
var stb_domain = "christianwomensresources.com";
var stb_user = "cwr";
var stb_recipient = stb_user + "@" + stb_domain;
var stb_url = "mailto:" + stb_recipient;
var stb_visualName = "Lori Arriaga";
document.write(stb_visualName.link(stb_url));
// -->
</script><a href="mailto:[email protected]">Lori Arriaga</a> |

Hosted by: 
<a href="http://www.christcom.com.au/">Christian Communications</a></p>

<!-- START CROSSDAILY.COM HTML CODE -->
<a href="http://search.crossdaily.com/vote.php3?sid=43683" target="New"><img src="xhtml2_files/acsvote100.gif" alt="CrossDaily.com" height="60" width="100"></a>
<!-- END CROSSDAILY.COM HTML CODE -->


<!-- Christian Top 1000 code starts here -->
<a href="http://www.christiantop1000.com/cgi-bin/1000/show.cgi?id=lorisolutions" target="_blank">
<img src="xhtml2_files/counter.gif" alt="Christian Top 1000 graphic"></a>
<!-- Christian Top 1000 code ends here -->

    </div>
  </div>
</div>
<div id="header">
  <div id="header-inner">
    <div id="subheader1">
<p class="menubox1">
<a href="http://www.christianwomensresources.com/index.html">Home</a> | 
<a href="http://www.christianwomensresources.com/about.html">About</a> | 
<a href="http://www.christianwomensresources.com/sitemap.html">Sitemap</a> | 
<a href="http://www.christianwomensresources.com/advertise.html">Advertise</a> |
<a href="http://www.christianwomensresources.com/###.html">Member Login</a> |
<a href="http://www.christianwomensresources.com/###.html">New User?</a>
</p>
    </div>
    <div id="subheader2">
      <a href="http://www.clubmomlinks.com/b.asp?id=5431&amp;img=banner1.gif&amp;pg=28">
        <img src="xhtml2_files/banner1.gif" alt="Club Mom Banner" border="0"></a>
	</div>
    <div id="subheader3">
<ul class="menulist" id="listMenuRoot">

 <li> <a href="http://www.christianwomensresources.com/spiritual-growth.html">Spiritual Growth</a> 
<ul id="sg">
 <li> <a href="http://www.christianwomensresources.com/sg-bible-study.html">Bible Study</a> </li>
 <li> <a href="http://www.christianwomensresources.com/sg-bible-prophecy.html">Bible Prophecy</a> </li>
 <li> <a href="http://www.christianwomensresources.com/sg-power-of-prayer.html">Power of Prayer</a> </li>
 <li> <a href="http://www.christianwomensresources.com/sg-heart-of-worship.html">Heart of Worship</a> </li>
</ul>
</li>

 <li> <a href="http://www.christianwomensresources.com/marriage-builders.html">Marriage Builders</a> 
<ul style="visibility: hidden;" id="mb">
 <li> <a href="http://www.christianwomensresources.com/mb-christian-romance.html">Romance</a> </li>
 <li> <a href="http://www.christianwomensresources.com/mb-communication-and-respect.html">Communication</a> </li>
 <li> <a href="http://www.christianwomensresources.com/mbsuitable-helper.html">Suitable Helper</a> </li>
</ul>
</li>

 <li> <a href="http://www.christianwomensresources.com/heritage-builders.html">Heritage Builders</a> 
<ul style="visibility: hidden;" id="her">
 <li> <a href="http://www.christianwomensresources.com/her-godly-character.html">Godly Character</a> </li>
 <li> <a href="http://www.christianwomensresources.com/her-fun-and-creativity.html">Fun and Creativity</a> </li>
 <li> <a href="http://www.christianwomensresources.com/her-home-schooling.html">Home Schooling</a> </li>
</ul>
</li>

 <li> <a href="http://www.christianwomensresources.com/home-builders.html">Home Builders</a> 
<ul style="visibility: hidden;" id="hm">
 <li> <a href="http://www.christianwomensresources.com/hm-healthy-cooking.html">Healthy Cooking</a> </li>
 <li> <a href="http://www.christianwomensresources.com/hm-cleaning-and-organizing.html">Cleaning and Organizing</a> </li>
 <li> <a href="http://www.christianwomensresources.com/hm-household-budgeting.html">Household Budgeting</a> </li>
</ul>
</li>

 <li> <a href="http://www.christianwomensresources.com/kingdom-builders.html">Kingdom Builders</a> 
<ul id="kb">
 <li> <a href="http://www.christianwomensresources.com/kb-gifts-and-passions.html">Gifts and Passions</a> </li>
 <li> <a href="http://www.christianwomensresources.com/kb-sharing-our-faith.html">Sharing our Faith</a> </li>
 <li> <a href="http://www.christianwomensresources.com/kb-religion-and-politics.html">Religion and Politics</a> </li>
 <li> <a href="http://www.christianwomensresources.com/kb-cultural-diversity.html">Cultural Diversity</a> </li>
</ul>
</li>
</ul>
    </div>
    <div id="subheader4">
      <p>DIRECTORIES: <a href="http://www.christianwomensresources.com/work-at-home-resources.html">WAH Resources</a> | 
<a href="http://www.christianwomensresources.com/free-resources.html">Free Resources</a> | 
<a href="http://www.christianwomensresources.com/fw-family-websites.html">Family Websites</a> | 
<a href="http://www.christianwomensresources.com/articles/index.php">Christian Articles</a>
</p>
    </div>
  </div>
</div>
</body>
</html>

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Thank you so much! You are wonderful!
Hopefully I can get my content pasted in now without messing up
your layout. Please let me know how I can repay you.
I am more then happy to put a link up on my website for you.
Would you like a link to your tool you have to help create layout,
just let me know.

Thank you!

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

A simple thankyou is ALWAYS enough.

If you ever come to the UK, make a point to come up to Chipping Campden and come visit at the Baptist Church for Sunday morning service (10:30) for a genuinely lively and fun service! Then you can say 'Hi'.

Our town is a place most visitors agree is one of the prettiest places for a tourist to visit. Nestled high up in the Cotswold Hills in Central England, it is a well preserved 16th/17th Century Town, where the houses are of Cotswold Stone walls and (mostly) stone roof tiles. Very twee.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I believe I have pasted my content in successfully. I have run into a few problems though I was wondering if you could help me figure it out. The main thing I need to fix is my main drop down menu. It drops down in IE but is mostly hidden behind the content below it. It doesn't work in Firefox now, my submenus don't drop down at all. Do I need to do something with the z-index?

The other main thing I'm not sure how to fix is my "Scripture Box" It is a <div> item inside my "sidebar" column. It is aligned how I want it to be in IE but not in Firefox. Is it just the difference in the font between the browsers that makes it line up differently in the two browsers?

Thank you once again for all that you have helped me with. Hopefully I won't have to bug you too much more. If our family ever gets a chance to vacation out of the country, I'd love to visit, it sounds like a beautiful place. I'd love to visit a Baptist church that is lively too. We attend a Baptist church ourselves and we love it but couldn't characterize it as too lively.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

On the design front, I would suggest you start a new thread just to fix the menu issue. I am no good at those, and I am sure that someone will quickly spot the error. As you say, probably a z-index problem. As the header has a z-index of 1, just make sure your code is matching this.

As to the other bit, I would need to see a live link.

The main problem with copying and pasting code is that you often bring in redundant or broken code.

One observation I might make is that much of your page is in text and the layout relies on that text being a certain size. Increase the browser font-size and the bits start to move about.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I see you saw my other post about my menu. Here is the link for you to
look at to see the font size or spacing I was talking about between the two browsers IE and Firefox.

www.christianwomensresources.com/xhtml4.htm

My css code is:
www.christianwomensresources.com/layout_styles.css
www.christianwomensresources.com/menulist_h.css

I css is validated now with no errors and my html file still has errors that I posted in my other thread to get help with those. I like how my webpage shows up in IE but in Firefox my main content has moved up under my header and the "scripture box isn't located as far to the right as it is in IE.
How do I adjust my font-size to fix this in Firefox?

Thank you for your patience with me in helping me figure these things out.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

I'm not sure what you have done, but you have broken the code I gave you, probably by deleting a div ending or two.

I suggest you take my code again and put the content in tiny bit by bit and check as you go along.

That's why FF isn't happy, and that's why the validator doesn't like it either!

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I started over with your code you gave me and pasted each piece in over again. There were no missing divs but I did change back the border-collapse to 0. I changed it to say collapse since it came up with an error about it in the CSS validator. The main content is now showing properly in Firefox again. The only thing I am still wondering is how to move my scripture box over to the right more in Firefox like it is in IE. Is there a better way to do that rather then inside a div tag of it's own.

Thanks!

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

It's getting easier now there isn't so much to fix!

In your layout_styles.css file you have the css for scripturebox, just add margin:0px auto to center the box in FF.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I hope you are having a good weekend. Sorry to bother you again but I just have once more question. Am I able to put the header and footer in SSI files? I cut and pasted them into my SSI files but the submenus aren't working now.

Thanks for all your time.

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi Lori

You should be able to, it rather depends what server side language you are using and how you are doing it. But that moves out of the realm of thsi forum, unless you post what you are doing in the Off Topic forum.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

Thanks, thats all I wanted to know before I posted to the off topic thread.
I truly appreciate all you have helped me with!

Blessings,
Lori

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Hi Trevor,

I have just a few other questions regarding the layout you did for me.
I have been trying to adjust my main content with margin and padding to be in a few pixels from the side border I put on my website but it tends to mess the whole layout that you made for me. Is there a way to do this?

Also, am I able to add content above the banner in my header? I was just thinking all that white space is a bit much and I wanted to be able to utilize that space. I tried to play around with adding information but again I messed up the whole layout trying to do it. Will I need to add another div section for that in my header?

Thanks for your help.
Lori

Blessings,
Lori

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Question on Layout

Hi

I will be away for the holidays and it will be some time before I can look at it.

Suggest you start a new post and ask for help for one item at a time.

Trevor

loricwr
Offline
Regular
Last seen: 14 years 36 weeks ago
Timezone: GMT+4
Joined: 2005-11-29
Posts: 33
Points: 0

Question on Layout

Thanks Trevor. I'll do that!
Have a Merry Christmas and Happy New Year!

Blessings,
Lori