QUIT MOVING MY STUFF!

Discussion in 'HTML' started by 1995 Cobra, Oct 5, 2006.

  1. 1995 Cobra

    1995 Cobra Guest

    Hello all, CSS new guy here. I've been adapting well to this, but have
    hit a snag. My pages look pretty good when the window is fully
    expanded, but if you begin to collapse it or have it sized small (the
    browser window), all the content starts to "stack" itself - making the
    page look aweful. For instance, I float a div to the left and then have
    another div that should display to the right of it. Full window, looks
    great. Start to collapse the window and it puts the div that should be
    to the right below the height floated div (essentially moving it out of
    viewable space and creating a void to the right of what is viewable).
    Here is an example of the code i'm using... any thoughts:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>BOUGHTON ARCHITECTS, INC. | Creativity to Build On</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <style type="text/css">

    body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 9px;
    background-color: black;}

    body a:link {
    color: white;
    text-decoration: none;}

    body a:hover {
    color: #FFCC66;
    text-decoration: none;}

    body a:visited {
    color: white;
    text-decoration: none;}

    ..holder {
    margin: 0px 0px 0px 225px;
    padding: 0px;
    text-align: left;
    width: 100%;}

    #header {
    background-color: #FFCC66;
    margin: 0px;
    padding: 0px;}

    #links {
    margin: 0px;
    background-color: black;
    padding-left: 5px;
    height: 25px;}

    ..lineheight {
    line-height: 250%;}

    iframe {
    background-color: #336699;
    padding: 0px;
    width: 675px;
    height: 490px;
    float: left;
    border: 0px;
    frameborder: 0;
    scrolling: auto;}

    #biglogo {
    margin: 0px 0px 0px 675px;
    height: 490px;
    background-color: #FFCC66;
    background-image: url(images/index/background_logo.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    border-left: 1px solid black;
    padding: 0px;}

    #flash {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;}

    body p {
    text-align: center;}

    ..colortext {
    color: #FFCC66;}

    /* Hide from IE5-mac. Only IE-win sees this. \*/

    * html #holder {
    position: relative;
    left: -3px;
    }

    * html #links {
    position: relative;
    top: -3px;}

    * html #biglogo {
    position: relative;
    left: -3px;}

    /* End hide from IE5/mac */

    </style>
    <script language="javascript">
    function show_hide_text(divID){
    var divArea = document.getElementById(divID)
    var divAreaImg = document.getElementById(divID+"_img")
    var divAreaVisible = divArea.style.display != "none"

    if(divAreaVisible){
    divArea.style.display = "none"
    divAreaImg.innerHTML = "[+]"
    }else{
    divArea.style.display = ""
    divAreaImg.innerHTML = "[&minus;]"
    }
    }
    </script>
    </head>

    <body>
    <div id="flash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
    width="225" height="600">
    <param name="movie" value="ba_nav.swf">
    <param name="quality" value="high">
    <embed src="ba_nav.swf" quality="high"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    type="application/x-shockwave-flash" width="225" height="600"></embed>
    </object>
    </div>
    <div class="holder">
    <div id="header">
    <a href="home.htm" target="container">
    <img src="images/index/top_text_2.jpg" alt="Boughton Architects,
    Inc." border="0"></a>
    </div>
    </div>
    <div class="holder">
    <div id="links">
    <span class="lineheight">
    <span class="colortext">PROJECTS (</span>COMMERCIAL
    <a href="javascript:void(0);"
    onClick="show_hide_text('info_3');"><span
    id="info_3_img">[+]</span></a>
    <span id="info_3" style="display:none;"><span class="colortext">|
    </span>
    <a href="view_list.asp?tNo=1001" target="container">Office</a> -
    <a href="view_list.asp?tNo=1002" target="container">Medical</a> -
    <a href="view_list.asp?tNo=1003"
    target="container">Hospitality</a> -
    <a href="view_list.asp?tNo=1004" target="container">Retail</a> -
    <a href="view_list.asp?tNo=1005" target="container">Financial</a>
    -
    <a href="view_list.asp?tNo=1010" target="container">Religious</a>
    <span class="colortext"> |</span>
    </span>
    - RESIDENTIAL
    <a href="javascript:void(0);" onClick="show_hide_text('info_4');"
    ><span id="info_4_img">[+]</span></a>

    <span id="info_4" style="display:none;"><span class="colortext">|
    </span>
    <a href="view_list.asp?tNo=1006" target="container">Single
    Family</a> -
    <a href="view_list.asp?tNo=1007" target="container">Multi
    Family</a>
    <span class="colortext"> |</span>
    </span>
    - <a href="view_list.asp?tNo=1008" target="container">OTHER</a> -
    <a href="view_list.asp?tNo=1009" target="container">FUTURE</a>
    <span class="colortext">)</span> -
    <a href="container/about.htm" target="container">ABOUT US</a> -
    <a href="contact.htm" target="container">CONTACT</a> -
    <a href="container/employment.htm"
    target="container">EMPLOYMENT</a>
    </span>
    </div>
    </div>
    <div class="holder">
    <iframe src="home.htm" name="container"></iframe>
    <div id="biglogo">
    </div>
    </div>
    </body>
    </html>
     
    1995 Cobra, Oct 5, 2006
    #1
    1. Advertising

  2. Hello,

    1995 Cobra wrote:

    > Hello all, CSS new guy here. I've been adapting well to this, but have
    > hit a snag. My pages look pretty good when the window is fully
    > expanded, but if you begin to collapse it or have it sized small (the
    > browser window), all the content starts to "stack" itself - making the
    > page look aweful. For instance, I float a div to the left and then have
    > another div that should display to the right of it. Full window, looks
    > great. Start to collapse the window and it puts the div that should be
    > to the right below the height floated div (essentially moving it out of
    > viewable space and creating a void to the right of what is viewable).
    > Here is an example of the code i'm using... any thoughts:


    I would consider this behaviour (based on your description, not the code,
    because I'm too lazy to save it to a file and open it in a browser) as
    good. If the content does not fit into the browser side by side, it is
    rearranged, so the user does not have to scroll horizontally, which would
    be bad (my mouse has a scroll wheel for vertical scrolling, which makes it
    very easy - I don't think, mice with a second horizontal scroll wheel are
    very common).
    It is not really trivial to construct a page which 'degrades gracefully'
    (and has a non-trivial layout). You'll have to also consider the 'small
    window' case, and arrange your floats and stuff in a way that the document
    is still usable in this case (correct or at least sensible order of
    content).

    It is infact much easier to get this effect with CSS than
    with 'table-layout', so you are already on the right track.

    > [snip HTML code]


    Please upload your code to a website and post the URL - this way we can see
    much easier whats going on. Most of us do not have a CSS capable HTML
    rendering engine built into the brain.


    HTH

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://pink.odahoda.de/
     
    Benjamin Niemann, Oct 5, 2006
    #2
    1. Advertising

  3. 1995 Cobra

    Ben C Guest

    On 2006-10-05, 1995 Cobra <> wrote:
    > Hello all, CSS new guy here. I've been adapting well to this, but have
    > hit a snag. My pages look pretty good when the window is fully
    > expanded, but if you begin to collapse it or have it sized small (the
    > browser window), all the content starts to "stack" itself - making the
    > page look aweful. For instance, I float a div to the left and then have
    > another div that should display to the right of it. Full window, looks
    > great. Start to collapse the window and it puts the div that should be
    > to the right below the height floated div (essentially moving it out of
    > viewable space and creating a void to the right of what is viewable).
    > Here is an example of the code i'm using... any thoughts:


    You can give the container the floats are in a width set in pixels. Then
    if the viewport is smaller than that, you'll get a horizontal scrollbar,
    but the floats won't jump underneath each other.

    Alternatively (perhaps preferably as horizontal scrollbars are
    unappealing) give the floats percentage widths so they get narrower
    together with the viewport.

    Floats jumping underneath each other when there isn't enough horizontal
    space available is correct behaviour; so however you decide to fix it,
    you basically have to make sure there's going to be enough room for them
    to fit at the side.
     
    Ben C, Oct 5, 2006
    #3
  4. 1995 Cobra

    1995 Cobra Guest

    Ben C wrote:
    > On 2006-10-05, 1995 Cobra <> wrote:
    > > Hello all, CSS new guy here. I've been adapting well to this, but have
    > > hit a snag. My pages look pretty good when the window is fully
    > > expanded, but if you begin to collapse it or have it sized small (the
    > > browser window), all the content starts to "stack" itself - making the
    > > page look aweful. For instance, I float a div to the left and then have
    > > another div that should display to the right of it. Full window, looks
    > > great. Start to collapse the window and it puts the div that should be
    > > to the right below the height floated div (essentially moving it out of
    > > viewable space and creating a void to the right of what is viewable).
    > > Here is an example of the code i'm using... any thoughts:

    >
    > You can give the container the floats are in a width set in pixels. Then
    > if the viewport is smaller than that, you'll get a horizontal scrollbar,
    > but the floats won't jump underneath each other.
    >
    > Alternatively (perhaps preferably as horizontal scrollbars are
    > unappealing) give the floats percentage widths so they get narrower
    > together with the viewport.
    >
    > Floats jumping underneath each other when there isn't enough horizontal
    > space available is correct behaviour; so however you decide to fix it,
    > you basically have to make sure there's going to be enough room for them
    > to fit at the side.


    Wow, good stuff. Setting that width gives me the desired affect with,
    of course, one minor challenge. My first floated <div> (the flash) has
    a specific width of 225px. The "holder" <div> will vary based on how
    big someone's window is, but it's essential that it be the full width,
    no more no less, regardless. I can't set it to 100% right, because then
    it will still push itself under? Any thoughts?
     
    1995 Cobra, Oct 5, 2006
    #4
  5. 1995 Cobra

    John Salerno Guest

    1995 Cobra wrote:
    > Ben C wrote:
    >> On 2006-10-05, 1995 Cobra <> wrote:
    >>> Hello all, CSS new guy here. I've been adapting well to this, but have
    >>> hit a snag. My pages look pretty good when the window is fully
    >>> expanded, but if you begin to collapse it or have it sized small (the
    >>> browser window), all the content starts to "stack" itself - making the
    >>> page look aweful. For instance, I float a div to the left and then have
    >>> another div that should display to the right of it. Full window, looks
    >>> great. Start to collapse the window and it puts the div that should be
    >>> to the right below the height floated div (essentially moving it out of
    >>> viewable space and creating a void to the right of what is viewable).
    >>> Here is an example of the code i'm using... any thoughts:

    >> You can give the container the floats are in a width set in pixels. Then
    >> if the viewport is smaller than that, you'll get a horizontal scrollbar,
    >> but the floats won't jump underneath each other.
    >>
    >> Alternatively (perhaps preferably as horizontal scrollbars are
    >> unappealing) give the floats percentage widths so they get narrower
    >> together with the viewport.
    >>
    >> Floats jumping underneath each other when there isn't enough horizontal
    >> space available is correct behaviour; so however you decide to fix it,
    >> you basically have to make sure there's going to be enough room for them
    >> to fit at the side.

    >
    > Wow, good stuff. Setting that width gives me the desired affect with,
    > of course, one minor challenge. My first floated <div> (the flash) has
    > a specific width of 225px. The "holder" <div> will vary based on how
    > big someone's window is, but it's essential that it be the full width,
    > no more no less, regardless. I can't set it to 100% right, because then
    > it will still push itself under? Any thoughts?
    >


    This is a strange newsgroup for me. I don't seem to be getting all the
    posts. I don't see the post by "Ben C" that is being responded to above.
    Are there multiple ways of posting to the group that might cause this?
     
    John Salerno, Oct 5, 2006
    #5
  6. 1995 Cobra

    Ben C Guest

    On 2006-10-05, 1995 Cobra <> wrote:
    >
    > Ben C wrote:
    >> On 2006-10-05, 1995 Cobra <> wrote:
    >> > Hello all, CSS new guy here. I've been adapting well to this, but have
    >> > hit a snag. My pages look pretty good when the window is fully
    >> > expanded, but if you begin to collapse it or have it sized small (the
    >> > browser window), all the content starts to "stack" itself - making the
    >> > page look aweful. For instance, I float a div to the left and then have
    >> > another div that should display to the right of it. Full window, looks
    >> > great. Start to collapse the window and it puts the div that should be
    >> > to the right below the height floated div (essentially moving it out of
    >> > viewable space and creating a void to the right of what is viewable).
    >> > Here is an example of the code i'm using... any thoughts:

    >>
    >> You can give the container the floats are in a width set in pixels. Then
    >> if the viewport is smaller than that, you'll get a horizontal scrollbar,
    >> but the floats won't jump underneath each other.
    >>
    >> Alternatively (perhaps preferably as horizontal scrollbars are
    >> unappealing) give the floats percentage widths so they get narrower
    >> together with the viewport.
    >>
    >> Floats jumping underneath each other when there isn't enough horizontal
    >> space available is correct behaviour; so however you decide to fix it,
    >> you basically have to make sure there's going to be enough room for them
    >> to fit at the side.

    >
    > Wow, good stuff. Setting that width gives me the desired affect with,
    > of course, one minor challenge. My first floated <div> (the flash) has
    > a specific width of 225px. The "holder" <div> will vary based on how
    > big someone's window is, but it's essential that it be the full width,
    > no more no less, regardless. I can't set it to 100% right, because then
    > it will still push itself under? Any thoughts?


    Not sure I understand. You have two left floats in a set-width
    container, one that's 225px wide, and the other that you want to butt up
    against it filling the remaining space?

    You will just have to set the width manually-- there's no way to say
    "100% - 225px" on a float unless you resort to scripting.

    But if you've set the width on the container, it doesn't depend on the
    viewport width, so I'm a bit confused.
     
    Ben C, Oct 5, 2006
    #6
  7. 1995 Cobra

    Els Guest

    Ben C wrote:

    > On 2006-10-05, 1995 Cobra <> wrote:
    >>
    >> My first floated <div> (the flash) has
    >> a specific width of 225px. The "holder" <div> will vary based on how
    >> big someone's window is, but it's essential that it be the full width,
    >> no more no less, regardless. I can't set it to 100% right, because then
    >> it will still push itself under? Any thoughts?

    >
    > Not sure I understand. You have two left floats in a set-width
    > container, one that's 225px wide, and the other that you want to butt up
    > against it filling the remaining space?
    >
    > You will just have to set the width manually-- there's no way to say
    > "100% - 225px" on a float unless you resort to scripting.


    Or if you give it a margin instead of float it.
    If the left floated div is 225px wide, just set the second div to have
    a left margin of 225px, don't float it. Then it will only drop below
    the left floated div is there is content inside the right div that is
    too wide.


    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: The Rolling Stones - Shake Your Hips
     
    Els, Oct 5, 2006
    #7
  8. 1995 Cobra

    Ben C Guest

    On 2006-10-05, Els <> wrote:
    > Ben C wrote:
    >
    >> On 2006-10-05, 1995 Cobra <> wrote:
    >>>
    >>> My first floated <div> (the flash) has
    >>> a specific width of 225px. The "holder" <div> will vary based on how
    >>> big someone's window is, but it's essential that it be the full width,
    >>> no more no less, regardless. I can't set it to 100% right, because then
    >>> it will still push itself under? Any thoughts?

    >>
    >> Not sure I understand. You have two left floats in a set-width
    >> container, one that's 225px wide, and the other that you want to butt up
    >> against it filling the remaining space?
    >>
    >> You will just have to set the width manually-- there's no way to say
    >> "100% - 225px" on a float unless you resort to scripting.

    >
    > Or if you give it a margin instead of float it.
    > If the left floated div is 225px wide, just set the second div to have
    > a left margin of 225px, don't float it.


    Good suggestion, that way it will take up the rest of the available
    width, whatever that might me.
     
    Ben C, Oct 5, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. M. Duijkers
    Replies:
    2
    Views:
    500
    Joe Smith
    Dec 12, 2004
  2. linkswanted
    Replies:
    0
    Views:
    1,269
    linkswanted
    Dec 21, 2007
  3. linkswanted
    Replies:
    0
    Views:
    1,601
    linkswanted
    Jan 6, 2008
  4. linkswanted
    Replies:
    0
    Views:
    468
    linkswanted
    Jan 23, 2008
  5. linkswanted
    Replies:
    0
    Views:
    660
    linkswanted
    Jan 24, 2008
Loading...

Share This Page