CSS div's height

Discussion in 'HTML' started by Xavier Perseguers, Dec 13, 2004.

  1. Hello,

    I would like to know if there is a way specifying that a div section's
    height *must* be a multiple of some pixel size. Eg. I include an image
    as background and I would like the container to be a multiple of it to
    get a /nice/ design.

    Something like that

    #height_constraint {
    background-image: url('my_background.gif');
    }

    <div id="something">
    <div class="height_constraint">
    [lots of garbage]
    </div>
    <div>
    foo
    </div>
    </div>

    and hence the div "something" needs to be resized too...

    --
    Xavier Perseguers
    xavier arobe perseguers point ch
    latex.perseguers.ch
     
    Xavier Perseguers, Dec 13, 2004
    #1
    1. Advertising

  2. Xavier Perseguers

    Richard Guest

    Xavier Perseguers wrote:

    > Hello,


    > I would like to know if there is a way specifying that a div section's
    > height *must* be a multiple of some pixel size. Eg. I include an image
    > as background and I would like the container to be a multiple of it to
    > get a /nice/ design.



    height:150%;

    practically any variable that uses numbers can also use %.
    just remember that jpg's generally degrade a bit if you expand the size to
    much.
    better to use gif or png.
     
    Richard, Dec 13, 2004
    #2
    1. Advertising

  3. Xavier Perseguers

    Steve Pugh Guest

    "Richard" <Anonymous@127.001> wrote:
    > Xavier Perseguers wrote:
    >
    > > I would like to know if there is a way specifying that a div section's
    > > height *must* be a multiple of some pixel size. Eg. I include an image
    > > as background and I would like the container to be a multiple of it to
    > > get a /nice/ design.


    This can't be done with HTML or CSS alone. I can be done with
    JavaScript - find the natural height of the div and increase it to the
    next multiple of the image size.

    >height:150%;
    >
    >practically any variable that uses numbers can also use %.


    ????

    How does this help the OP?

    He has a div with a background image. He wants the height of the div
    to be a multiple of the height of the background image. Setting the
    height of the div to 150% will not make the div a multiple of the
    background image's height.

    Steve
     
    Steve Pugh, Dec 13, 2004
    #3
  4. > How does this help the OP?
    >
    > He has a div with a background image. He wants the height of the div
    > to be a multiple of the height of the background image. Setting the
    > height of the div to 150% will not make the div a multiple of the
    > background image's height.
    >
    > Steve
    >


    Yes, that's right! I do not want the image to be stretched. I know its
    size I could do it myself. Here's another description to help all of you
    understanding:

    I have a background image that should be tiled vertically within a div
    section. I need a trick to put another pattern at top and bottom as the
    pattern is cool when it's repeated but not so nice at the beginning and
    the end. It's really easy to put another image at the beginning but
    doing the same at the end is not feasible unless you *know* what is
    *always* the pattern at the end. And to know that, you need to say that
    the div will always have its height being X times the height of the
    tilling image (X being an integer of course).

    Xavier Perseguers
     
    Xavier Perseguers, Dec 14, 2004
    #4
  5. Xavier Perseguers

    Spartanicus Guest

    Xavier Perseguers <> wrote:

    >I would like to know if there is a way specifying that a div section's
    >height *must* be a multiple of some pixel size. Eg. I include an image
    >as background and I would like the container to be a multiple of it to
    >get a /nice/ design.


    Set the div's line-height to the natural height of the background image.

    --
    Spartanicus
     
    Spartanicus, Dec 14, 2004
    #5
  6. Spartanicus wrote:
    > Xavier Perseguers <> wrote:
    >
    >
    >>I would like to know if there is a way specifying that a div section's
    >>height *must* be a multiple of some pixel size. Eg. I include an image
    >>as background and I would like the container to be a multiple of it to
    >>get a /nice/ design.

    >
    >
    > Set the div's line-height to the natural height of the background image.
    >


    Good idea but when I do this, my text content is to much spaced of
    course. I tried creating another div within the div containing the
    background-image property and setting its line-height to something
    standard but then the outer div (with the background-image) does not set
    its height correctly anymore, as if I did not specifiy any line-height
    property. Small example showwing the problem:


    <html>
    <head>
    <style>
    #outer {
    background-image:
    url(http://www.mozilla.org/images/product-thunderbird-screen.png);
    background-repeat: repeat-y;
    line-height: 180px;
    }
    #inner {
    /* line-height: 1em; */
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="inner">
    This is a small test<br />
    to see if it works<br />
    well...
    </div>
    </div>
    </body>
    </html>

    Try to comment out the #inner definition...

    Xavier Perseguers
     
    Xavier Perseguers, Dec 14, 2004
    #6
  7. Xavier Perseguers

    Spartanicus Guest

    Xavier Perseguers <> wrote:

    >> Set the div's line-height to the natural height of the background image.

    >
    >Good idea but when I do this, my text content is to much spaced of
    >course. I tried creating another div within the div containing the
    >background-image property and setting its line-height to something
    >standard but then the outer div (with the background-image) does not set
    >its height correctly anymore, as if I did not specifiy any line-height
    >property. Small example showwing the problem:


    We can't provide further help until you show us what you are actually
    trying to do. Upload a real example that demonstrates the context using
    real content.

    --
    Spartanicus
     
    Spartanicus, Dec 14, 2004
    #7
  8. Spartanicus wrote:
    > Xavier Perseguers <> wrote:
    >
    >
    >>>Set the div's line-height to the natural height of the background image.

    >>
    >>Good idea but when I do this, my text content is to much spaced of
    >>course. I tried creating another div within the div containing the
    >>background-image property and setting its line-height to something
    >>standard but then the outer div (with the background-image) does not set
    >>its height correctly anymore, as if I did not specifiy any line-height
    >>property. Small example showwing the problem:

    >
    >
    > We can't provide further help until you show us what you are actually
    > trying to do. Upload a real example that demonstrates the context using
    > real content.
    >


    Actually the previous example was an example but if you really want to
    see what I want to achieve, go to

    http://test.perseguers.ch/photos/

    for what I was able to do (problem is the spiral on the bottom left that
    I fixed on top using another image). I did it using tables as it was
    easier but as I won't be able to fix the bottom problem, I am working on
    a CSS version on

    http://test.perseguers.ch/photos/index2.php (I have other problems such
    as space between my divs, ...)

    Xavier Perseguers
     
    Xavier Perseguers, Dec 14, 2004
    #8
  9. Is there really nobody here able to help me on this interesting :)
    problem? Should I figure out that this is not feasible in CSS?

    Xavier Perseguers
     
    Xavier Perseguers, Dec 17, 2004
    #9
  10. Xavier Perseguers

    rf Guest

    Xavier Perseguers wrote:

    > Is there really nobody here able to help me on this interesting :)
    > problem? Should I figure out that this is not feasible in CSS?


    It is not feasible.

    --
    Cheers
    Richard.
     
    rf, Dec 17, 2004
    #10
  11. rf wrote:
    > Xavier Perseguers wrote:
    >
    >
    >>Is there really nobody here able to help me on this interesting :)
    >>problem? Should I figure out that this is not feasible in CSS?

    >
    >
    > It is not feasible.


    :-( It would have been so great...
     
    Xavier Perseguers, Dec 17, 2004
    #11
    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. kurt sune

    HowTo set DIV height in CSS

    kurt sune, Mar 21, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    27,402
    Karl Seguin
    Mar 21, 2005
  2. HJ
    Replies:
    5
    Views:
    849
    Jonathan N. Little
    Sep 1, 2006
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    866
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    146
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    123
Loading...

Share This Page