Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS div's height

Reply
Thread Tools

CSS div's height

 
 
Xavier Perseguers
Guest
Posts: n/a
 
      12-13-2004
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
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      12-13-2004
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.


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-13-2004
"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

 
Reply With Quote
 
Xavier Perseguers
Guest
Posts: n/a
 
      12-14-2004
> 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
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      12-14-2004
Xavier Perseguers <(E-Mail Removed)> 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
 
Reply With Quote
 
Xavier Perseguers
Guest
Posts: n/a
 
      12-14-2004
Spartanicus wrote:
> Xavier Perseguers <(E-Mail Removed)> 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/produc...d-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
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      12-14-2004
Xavier Perseguers <(E-Mail Removed)> 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
 
Reply With Quote
 
Xavier Perseguers
Guest
Posts: n/a
 
      12-14-2004
Spartanicus wrote:
> Xavier Perseguers <(E-Mail Removed)> 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
 
Reply With Quote
 
Xavier Perseguers
Guest
Posts: n/a
 
      12-17-2004
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
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      12-17-2004
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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
getting exact height of a panel with a height="100%" samer ASP .Net 3 09-28-2009 05:21 PM
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
textbox height different than input height tshad ASP .Net 1 03-08-2007 10:04 PM
measuring web controls height at runtime (or converting .height % to px) Wotney ASP .Net 1 10-25-2006 01:39 PM
how to get specific cell height without hard-coding a height value laredotornado@zipmail.com HTML 0 08-19-2006 08:13 PM



Advertisments