Flexi CSS Layouts for Dreamweaver Forum


box Flexi CSS Layouts for Dreamweaver
Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Find out more about Flexi CSS Layouts for Dreamweaver

Thread: Wrapper about whole height in the browser window

title left
User Details
message
title right
Rene Arlt

post date:
2010-09-29 02:59:00
Which setting must I make, so that the Wrapper about the whole height goes?
Regards
Cristian Dorobantescu [Extend Studio]

post date:
2010-09-29 11:48:33
Hi Rene,

The wrapper won't go to the full height on his own (that's one of the classics with CSS - there is no 100% height. What you could do is set the min height to something bigger so it covers most of the screen resolutions.

Cristian
Rene Arlt

post date:
2010-09-29 14:33:17
Wrapper about the whole height in the browser window with different window height. Example: The Wrapper has a width of 800px, is centred and should always go from browser top to browser bottom.Besides, it should make no difference of course whether one with 19" or 24" monitors looked. (The Wrapper has no contents.)
Andrei Rinciog [Extend Studio]

post date:
2010-09-30 05:58:20
Hello Rene,

One of the ways of making a div cover 100% the page it's to set "height:100%" on the html and body elements and then use 100% on the div that you want.

Try that out. You can set inline CSS on the divs created by the extension to set 'min-height:100%'. Place it on the outermost div of the layout.

Tell me if that helps.

Regards,
Andrei Rinciog
Rene Arlt

post date:
2010-09-30 11:22:32
Hello Andrei,

Here is the Code, and he works perfectly.

<style type="text/css">
<!--
html,body {
margin:0;
padding:0;
height:100%;
background:#d5d5d5;
}

div#wrapper {
position:relative;
margin:0 auto;
width:780px;
min-height:100%; /* Least height in modern Browser */
height:auto !important; /* !important
height:100%; /* Least height in IE <7 */
background:#fff;
}

div#wrapper p {
margin:0;
padding:10px;
}
-->
</style>

Try here already a few hours with different Templates, but I do not get it on the row.Can one not integrate as a presentation into FlexiCSS layout, or have I overlooked this?

Regards
Andrei Rinciog [Extend Studio]

post date:
2010-10-01 04:30:49
Hello again,

I don't understand exactly the current problem. You can't integrate the CSS that you wrote above on a layout? Or you managed that and now you have a new problem?

Regards,
Andrei Rinciog
Rene Arlt

post date:
2010-10-01 08:11:16
Hello,
I do not know where I integrated the CSS into the layout. Have you a hint?
Regards
Andrei Rinciog [Extend Studio]

post date:
2010-10-01 08:54:44
Hello again,

You can place it in the header of your HTML file. I used this code:


<style type="text/css">
<!--
html {
height:100%;
}
div #wrapper {
min-height:100%; /* Least height in modern Browser */
height:auto !important; /* !important
height:100%; /* Least height in IE <7 */
}
-->

</style>


Its based on your code but I removed the extra elements that can be set from the interface of the extension. After all, you need to overwrite only the height behavior. Place that CSS inside your <head> tag.

As you can see I've removed the "body" element from the first rule as it will not apply on your body because it has a class. So you'll have to put that rule inside the body tag. And the last thing is to give the first div the id "wrapper".

This is how the two tags should look like:

<body class="YourLayoutName_body_design" style="height:100%;">
<div id="wrapper" class="YourLayoutName">

I tried this and its working.

Attention: If you edit the layout after you make these changes you'll have to place the id "wrapper" on the first div again. As that element is a div that shouldn't be edited, the extension will overwrite it.

Regards,
Andrei Rinciog
Rene Arlt

post date:
2010-10-05 09:31:29
Hello,
I have kept to the instructions, however, try after repeated ones, this did not understand yet like I should insert the 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>tets</title>
<link href="../includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../includes/CSSLayouts/debug_plus.js"></script>
<link href="../includes/CSSLayouts/tets.css" rel="stylesheet" type="text/css" />
<link href="../includes/CSSLayouts/tets_user.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html {
height:100%;
}
div #wrapper {
min-height:100%; /* Least height in modern Browser */
height:auto !important; /* !important*/
height:100%; /* Least height in IE <7 */
}

</style>
</head>
<body class="tets_body_design" style="height:100%;">
<div id="wrapper" class="tets_body_design">

Is the code wrong used, or is absent here still what? Can you point me with the help of the code scrap where he is correctly used?
Regards
PS: Sorry, I use promt Translator
Andrei Rinciog [Extend Studio]

post date:
2010-10-05 09:44:20
Hello again Rene,

The code seems correct to me.

If it still doesn't work please send me an archive with your site at support at extendstudio.com and I will try to make it work.

Regards,
Andrei Rinciog
Rene Arlt

post date:
2010-10-05 10:21:14
Hello Andrei,
The File is on the way.
Regards
Rene
Rene Arlt

post date:
2010-10-06 08:48:26
Hello Andrei,
Were you able to find the error?
Regards
Rene
Rene Arlt

post date:
2010-10-06 08:50:50
Hello Andrei,
Were you able to find the error?
Regards
Rene
Andrei Rinciog [Extend Studio]

post date:
2010-10-06 08:50:58
Hello Rene,

I've sent you an email a couple of minutes ago. Received it?

Regards,
Andrei Rinciog
Rene Arlt

post date:
2010-10-06 13:56:26
Hello Andrei,
The page does not help me any further. Have so far found no solution. Would be Great, if you could set this update. Especially if one has little content, it looks better if the wrapper over the entire height goes.
Regards
Rene