...

View Full Version : Fluid site problems



j1adobe
07-16-2008, 07:18 PM
The sites I have built up till now have been fixed, with no expansion at all. Now I have one that the customer wants to be fluid but I can't figure out how to do it. I have read some articles on the web on this, but they all have solid colors in the div backgrounds. This site has to have images instead.

Here is a link:
http://www.aaalandb.com/testfolder/aaasite.html

The sidebar has an image in the background. I have tried everything I can think of to get it to work, but it won't expand to fill the space.

The main text area goes over the top of the footer.

In the header we have one site where the background image is wider than the browser window. That way when the user expands the window to the right more of the background image is exposed. But that site uses tables for the layout and I want to avoid that.

The thing I don't understand, it's all valid (except for the IE workaround, min-height).

Here is the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheets/styleAAA.css">
</head>

<body>

<div><!-- site wrapper -->

<!-- header -->
<div id="header">
<img src="images/header_art_short.jpg" height="115px" width="808px" alt="">
</div> <!-- /header -->

<!-- top nav -->
<div id="menu">
<img src="images/menu_footer_art.jpg" height="30px" width="808px" alt="">
</div> <!-- /top nav -->

<!-- lower container -->
<div id="lowercontainer">
<div id="sidebar"></div> <!-- sidebar -->

<div id="textarea">
<h1>one piece or a million</h1><br><br>

Quality<br><br>

AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>
AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>
AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>
</div> <!-- textarea-->
</div><!-- /lower container -->

<!-- footer -->
<div id="footer">
<img src="images/menu_footer_art.jpg" height="30px" width="808px" alt="">
</div> <!-- /footer -->
</div><!-- /site wrapper -->

</body>
</html>

Here is the CSS:

/
* {
margin: 0;
padding: 0;
}

body {
font-size: 100%;
line-height: 1.125em; /* 16x1.125=18 */
font-family: verdana, helvetica, sana-serif;
}

.bodytext p {
font-size: 0.875em;
}

h1 {
font-size: 3em;
line-height: 1.125em;
color: #4b3c37;
}

p {
font-size: 1em;
}

#wrapper {
margin: 0;
height: 100%;
position: absolute;
}

#header {
top: 0;
left: 0;
height: 115px;
background-color: #c82832;
}

#footer {
height: 30px;
background-image: url('../images/menu_footer_art.jpg');
}

#menu {
height: 30px;
background-image: url('../images/menu_footer_art.jpg');
}

#sidebar {
float: left;
height: expression( this.scrollHeight < 406 ? "405px" : "auto" ); /* sets min-height for IE */
min-height: 405px; /* sets min-height value for all standards-compliant browsers */
width: 144px;
background-image: url('../images/sidebar_art.jpg');
background-repeat: repeat-y;
}

#textarea {
top:145px;
left: 144px;
height: 100%;
position: absolute;
background-image: url('../images/longshot.jpg');
background-repeat: no-repeat;
padding: 40px
}

jcdevelopment
07-16-2008, 07:38 PM
hope this helps

CSS (new)


* {
margin:0pt;
padding:0pt;
}
body {
font-family:verdana,helvetica,sana-serif;
font-size:100&#37;;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
h1 {
color:#4B3C37;
font-size:3em;
line-height:1.125em;
}
p {
font-size:1em;
}
#header {
background-color:#C82832;
background-image:url(../images/header_art_short.jpg);
background-repeat:repeat;
height:115px;
left:0pt;
top:0pt;
}
#footer {
background-image:url(../images/menu_footer_art.jpg);
height:30px;
padding-left:130px;
}
#menu {
background-image:url(../images/menu_footer_art.jpg);
height:30px;
}
#sidebar {
}
#textarea {
background-image:url(../images/longshot.jpg);
background-repeat:no-repeat;
margin-left:150px;
margin-top:30px;
padding:40px;
}
.bodyWrap {
background-image:url(../images/sidebar_art.jpg);
background-position:left top;
background-repeat:repeat-y;
float:left;
min-height:405px;
overflow:hidden;
}


HTML(new)this is inside the body.




<div><!-- site wrapper -->

<!-- header -->
<div id="header">



</div> <!-- /header -->

<!-- top nav -->
<div id="menu">

<img alt="" src="images/menu_footer_art.jpg" width="808" height="30">

</div> <!-- /top nav -->

<!-- lower container -->

<div class="bodyWrap">


<!-- sidebar -->

<div id="textarea">

<h1>one piece or a million</h1><br><br>

Quality<br><br>

AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>
AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>
AAA Quality is a belief we carry throughout all our processes to add value for our customers. With 45 years of combined laminating and bindery experience, we have grown into experts in this field
<br><br>
We believe in competitive pricing, fast turnaround and on-time delivery. We believe in completing orders of any size from one piece to a million, we will produce the best quality product.
<br><br>
We believe in personable, quality conscious service to help fulfill your needs. No customer deserves less than A+ quality work.
<br><br>

</div> <!-- textarea-->
<!-- footer -->
<div id="footer">

<img alt="" src="images/menu_footer_art.jpg" width="808" height="30">

</div> <!-- /footer -->

</div><!-- /lower container -->



</div><!-- /site wrapper -->






let me know if that woorks

j1adobe
07-17-2008, 03:43 PM
It works but I'm not sure why.

The biggest change I see is the background image calls in the CSS are first. Or am I missing something?

(I'll always ask how/why things work. One day I hope to be able to do this without asking for help. Not that it's a bad thing to talk to you folks here, I just hope to become a helper instead of a helpee.)

jcdevelopment
07-17-2008, 03:54 PM
Well, i made the left hand sid image party of the body wrap. That way it will repeat along with the content. It just works a little better that way.

Then i included the footer inside of the body wrap and just positioned it with padding. Your main problem was your Position:absolute;. It will give you problems. Try to avoid positioning property at all costs. Use floats and margins and paddings. They work better across cross browser.

Your header was CSS and then an image placed in it. So i just placed it in the CSS so it would repeat, i didnt know if you needed that but i did it any ways.

If you are still confused on why it worked let me know and i will try to better explain it.

j1adobe
07-17-2008, 05:21 PM
jc;
Thanks. I understand most of what you are saying.

I don't get the problem with the position: absolute. Since people say it causes problems I don't use as much as I used to. Seems I should maybe stop all together? Do you know why there is a problem with it?

Does the order of the calls in the CSS matter?

The sidebar/textarea set up you did I think is a good idea. Just never thought of doing it like that. I thought the div containing the side and text would control them.

How do I add a menu to the sidebar now? I had it in it's own div because I thought that was best for adding the navigation.

jcdevelopment
07-17-2008, 05:27 PM
I don't get the problem with the position: absolute. Since people say it causes problems I don't use as much as I used to. Seems I should maybe stop all together? Do you know why there is a problem with it?


To me its only necassary on using it for javascript, or even a complicated CSS menu. I would avoid using it unless necassary.



Does the order of the calls in the CSS matter?


It can i believe if you are using the value:inherit;. It inherits the previous value for that property. Like if you had

body{
color:#000;
}
h1 {
color:inherit;
}

than the color for h1 would be black because of the body.



How do I add a menu to the sidebar now? I had it in it's own div because I thought that was best for adding the navigation.


Create a nested div and float it to the left, then place your css in that div for a side menu. The background image is there as a back ground. You will also have to reduce the padding on the text area to, or it will shoot more to the right.

If you have anymore questions let me know.

j1adobe
07-17-2008, 05:32 PM
I'm good, and the help is greatly appreciated.

abduraooft
07-17-2008, 05:33 PM
Have a look at a standard two column layout, http://bonrouge.com/2c-hf-fluid.php

j1adobe
07-17-2008, 07:57 PM
abduraooft;

Thanks, I have not seen that one before.

The problem I was having was not knowing what the things inside of the main divs were supposed to be doing.

Little by little, I'm learning.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum