18 replies [Last post]
Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

After hundreds of hours and dozen of looked through samples on the net, I couldn't find a solution to migrate my frame design on kunst-kollegium to a proper xhtml/css design.

The problem is that with css solution it seems impossible to expand divisions to cover the whole screen and link two division horizontally together. There are a lot of samples on the net with a navigation bar on the left (floating division) and a content division on the right. At first glimpse these layouts seem to work, but they don’t.

All these samples have the cumbersome effect that a small screen leads to a break between the two div's. Assume the navigation bar on the left is 200px and the content 2000px (a image). The image (content div) appears below the navigation bar if there is not enough space horizontally. But breaking the two div's appart, does not help much, because the picture (2000px) is anyway too large and a horizontal scrollbar is necessary anyway. I know this, and would like to force the renderer to keep the div on 'one line'.

screenshot, break between div because lacking horizontal space
Please do not propose to position the div absolute, because this would lead to other problems such as horizontal and vertical scrollbars that are always present, thus to width:100%.

I would really appreciate your help.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

frames beats css solution

Put a wrapper on the page. Consider;

#wrapper {
    width: 2205px;  /*safety measure due to IE bug*/
    }

#nav {
    width: 200px;
    float: left;
    }
==========
<div id="wrapper">
  <div id="nav">
    ...
  </div> <!-- end nav -->
  <img src="some.png" alt="a big honking pic" width="2000">
</div> <!-- end wrapper -->

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

frames beats css solution

As kk5st points out the problem is due to IE expanding content "feature". Your layout is easy to do in more compliant browsers.

kk5st, wouldn't that wrapper would force scrollbars all the time - even when they weren't necessary?

Why not position the two menus absolutely, e.g.

body {
  margin:0; 
  padding: 4em 0 0 10em;   /* to match height and width of menu bars */
  background: gray;
}

#top {
  position: absolute;
  top: 0;
  left: 0;
  height: 4em;
}

#left {
  position: absolute;
  top: 4em;   /* to match height of #top */
  left: 0;
  width: 10em;
}

<body>
  <div id='top>top menu goes here</div>
  <div id='left'>left menu goes here</div>
  <div id='content'> put what you like here</div>
</body>

I get no odd scrollbar behaviour with this layout, at least not in IE6/Win, FF/Win or O/Win.

The top menu doesn't need to be placed absolutely, in which case body doesn't require any padding-top. If left absolute, you may want to specify a width on #top to prevent its content wrapping at narrow page widths.

Anonymous
Anonymous's picture
Guru

Re: frames beats css solution

Arkmanto wrote:
After hundreds of hours and dozen of looked through samples on the net...
I've told you a million times to stop exaggerating! Laughing out loud

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

no alternativ so long

kk5st's solution forces unnecessary horizontal scrollbar

The problem with Christ….S solution: as I mentioned above, absolute position is problematic because width and height can not be defined and therefore the divisions look strange thus to different background-colour see here

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 12 years 39 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

frames beats css solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Unbenanntes Dokument</title>

<style type="text/css">

html, body {padding:0; margin:0;}

#wrapper {
     border-left: 200px solid gray;
     float: left;
     }

#nav {
     margin: 0 0 0 -200px;
     float: left;
     width: 200px;
     }

</style>

<!--[if lte IE 6]>
<style> 
/* IE bugfixes */

#nav {
	position: relative; /* disappearing content */
	                           /*ed*/
 }

</style>
<![endif]-->

</head>
<body>

<div id="wrapper">

  <div id="nav">
    <p>bla bla bla bla bla bla bla bla bla</p>
  </div>

 <div id="content"><img src="1.gif" /></div>

</div>

</body>
</html>

This code should prevent the content to drop under the nav float. Only when the image is bigger than the viewport, there are scrollbars.

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

there can't be a good solution if one has to search so long

Sorry, your solution doesn’t work in ie (tested with ie6) despite the ie hack
see here

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 12 years 39 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

frames beats css solution

Have you tested
#content {float:left;}
?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

frames beats css solution

You can simulate frames by using an inner .scroller class that will handle the overflow in #content.

<!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">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />
    <title>
      Unbenanntes Dokument
    </title>
    <style type="text/css">
    /*<![CDATA[*/
html, body {padding:0; margin:0;}
#wrapper {
     border-left: 200px solid gray;
     float: left;
     }
#nav {
     margin: 0 0 0 -200px;
     float: left;
     width: 200px;
     }
.scroller {
     width:100%; 
     overflow:auto;/*alternatively use overflow-x:auto; for IE*/
     }
    /*]]>*/
    </style>
		<!--[if lte IE 6]>
    <style type="text/css">
    /*<![CDATA[*/
    /* IE bugfixes */

    #nav {
       position: relative; /* disappearing content */
                                  /*ed*/
     }
    /*]]>*/
    </style>
    <![endif]-->
  </head>
  <body>
    <div id="wrapper">
      <div id="nav">
        <p>
          bla bla bla bla bla bla bla bla bla
        </p>
      </div>
      <div id="content">
        <div class="scroller">
          <img
          src="http://kunst-kollegium.ch/Kunst-Kollegium/ArtistPict/Artist18/Pict/455Thumb.jpg"
          width="800" height="760" alt="foxie (8K)" /> 
        </div>
      </div>
    </div>
  </body>
</html>

I'm not sure if this is the behaviour you are wishing to emulate, but it works better than the other examples compared with your original site. IE does create double vertical scrollers, however, and you will have to decide on whether you want to live with it or use the IE proprietary overflow-x:auto; instead of overflow:auto; in the .scroller class. Overflow-x will create only a horizontal overflow scroller.

This is only one possible solution. If you are redoing a website, you may want to reconsider emulating the previous one - this is the opportunity for a clean start.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

Page activated but still not completely happy

Many Thanks to IChao and DCElliott. With this solution I can live. I’m not happy because there are still several ‘minor’ bugs to solve. The major problem is to fill always the whole screen (vertically and horizontally). I can’t use the background-pict solution because the online gallery is a kind of content management system that allows users to define the content (write own html code and stylesheets).

works in ie but not in netscape, firefox, opera (scroll down to see problem)

I don’t like the double vertical scrollbar, because the user must scroll horizontally to the end to discover that there is a vertical scrollbar.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 11 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

frames beats css solution

<?xml version="1.0" encoding="iso-8859-1"?>

That's why you think it works in IE. IE is rendering in Quirks Mode.

Verschwindende wrote:
  • CSS doesn't make pies

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

now consistent in all browsers, but still no solution

Thanks thepineapplehead, you are right. This explains the different behaviour. I have fixed it immediately. Now all browsers have div’s individual height problem.

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

cover all cases

Earlier solutions do cover the case for large pictures but as far as I can see, they neglect the case with small pictures. Probably I have not clearly described my problem. I thought I had a solution for small pict and I requested help to solve the big pict problem. Now I ended up with a big picture solution.

see this web page for problem description

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

frames beats css solution

Quick question:

For the too wide instances, should the whole page scroll, only the right hand portion or don't you care?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

frames beats css solution

The following document has a left-hand column stretching the height of the viewport or the page whichever is greater. Content in the right-hand column that exceeds either width or height of the column will cause the document as a whole to scroll.

The image used in the background is a block of color the desired width by 5, 10, or 15 pixels. It's maybe 3-500 bytes.

There is no sane reason to worry about reloading text. Text just has no appreciable bandwidth overhead. Even a couple of kB takes only a fraction of a second on a dialup connection.

The layout works in Firefox/Moz, IE/Win, and Opera7. It looks like it works in Opera8 (I'm not a happy camper with this version). It should seem to work on Safari and IE/Mac. There is some sleight of hand affecting all browsers. This should be a straight forward layout, but IE does not support css2.

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

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>Test</title>
<style type="text/css">
/*<![CDATA[*/

html, body, #wrapper {
    min-height: 100%; /*Sets the min height to the
                        height of the viewport.*/
    width: 100%;
    margin: 0;
    padding: 0;
    }

/* \*/
* html body,
* html #wrapper {
    height: 100%;
    }
/* */

body {
    background: white url(graybgcol.jpg) repeat-y;
    }

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    }

#sidebar {
    width: 160px;
    float: left;
    color: white;
    }

#main {
    margin-left: 170px;
    height: auto;
    padding: .5em;
    }

/*]]>*/
</style>
</head>

<body>
  <div id="wrapper">
    <div id="sidebar">
      <ul>
        <li>link item</li>

        <li>link item</li>

        <li>link item</li>
      </ul>
    </div><!-- end sidebar -->

    <div id="main">
      <p>Put your whole page here.</p>

      <p><img src="bullseye.jpg"
           width="750"
           height="500"
           alt="a bullseye" /></p>

    </div><!-- end main -->
  </div><!-- end wrapper -->
</body>
</html>

Note: I see Chris has slipped in a question. I have no desire to mess with scrolling only the right column while IE is in the game. Life is too short.Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

one step more

Christ S. I do not matter where the scrollbar is I prefer one common horizontal and one common vertical scrollbar per page. At least as long as we can not force to have each division to show its own scrollbars independently (!do not mix with the browser scrollbar). In my case sometimes the left div is longer than the right and vice versa. So I think one h-scroll and one v-scroll for the whole page would be the best solution. Best in the meaning of a solution that can be implemented and looks fine (! in all browsers).

kk5st thanks for your help. Is the #wrapper division necessary in your solution? I regret, that your solution doesn’t work for me. I allowed me to set the background color of your div #main - > see the result here The #main in your code is my clients area and beside other styles he likes to set its background-color.

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

easy TestPage

For all of you, who want to contribute I have written a php that allows to test your proposal before you post a solution.
HTML Page

Type the parameters in the addressbar as follows:
http://www.kunst-kollegium.ch/Test/NoFrameQuestTest.php?Menu=1&bild=1&Multiple=0&x=3&y=1&css=20.css
all parameters are optional

Menu
1 short menu
2 long menu

bild
21 small pict
22 wide pict
23 high pict
24 large pict

Multiple
0 do not repeate
1 repeate (creates table with x columns, y rows)

x
number specifying columns of pictures

y
number specifying rows of pictures

css
url of stylesheet

One next button allows to toggle between short and long menus. The next button in the content division loops from pict21..pict22.

The page seems to work fine. The problem starts as soon one would like to set the the background-color of the #Content division. This is my clients area and will be formated by him.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

frames beats css solution

Quote:
kk5st thanks for your help. Is the #wrapper division necessary in your solution? I regret, that your solution doesn’t work for me. I allowed me to set the background color of your div #main - > see the result here The #main in your code is my clients area and beside other styles he likes to set its background-color.

As I said, sleight of hand is involved. The #main is actually a transparent container, like #sidebar. The background should be applied to body (normally to #wrapper—see comment in re Opera). Do this;
body {
    background: red url(graybgcol.jpg) repeat-y;
    }
The #wrapper could possibly be removed. I adapted this from something I had already done and which I'm going to look at again because while it worked in Opera7, it fails in Opera8[1]. It was the Opera failure that caused me to move the bg column image to body.

Normally, you might set a footer at the bottom of #wrapper and let #main push it down as content increases, and set the pages bg there, and limit the width and center the page, which are the reasons for #wrapper.

As long as you want the page to appear to take the full height or more of the viewport, and as long as you must support IE, a certain amount of magic is involved.

cheers,

gary

[1] Opera needs to get its act together. It's giving me tired-head. Something will work in v.5, fail in v.6, work again in v.7, and who knows in v.8.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Arkmanto
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2005-08-26
Posts: 9
Points: 0

End of thread

Thank you all very much

As kk5st points out, the background-color must be applied to body. I implemented my page this way. It gives my client a little bit too much power over the page but who cares. The page looks fine. I have slightly hoped to find another solution.