HTML - CSS div's height

12-13-2004, 11:34 AM

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

12-13-2004, 04:46 PM

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

12-13-2004, 05:29 PM

"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

12-14-2004, 08:12 AM

> 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

12-14-2004, 09:36 AM

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

12-14-2004, 10:50 AM

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/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

Xavier Perseguers

12-14-2004, 11:45 AM

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

12-14-2004, 12:22 PM

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

12-17-2004, 07:02 AM

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

12-17-2004, 10:14 AM

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

12-13-2004, 04:46 PM	#2
Richard Posts: n/a	Re: CSS div's height 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

12-13-2004, 05:29 PM	#3
Steve Pugh Posts: n/a	Re: CSS div's height "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

12-14-2004, 08:12 AM	#4
Xavier Perseguers Posts: n/a	Re: CSS div's height > 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

12-14-2004, 09:36 AM	#5
Spartanicus Posts: n/a	Re: CSS div's height 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

12-14-2004, 10:50 AM	#6
Xavier Perseguers Posts: n/a	Re: CSS div's height 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/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 Xavier Perseguers

12-13-2004, 11:34 AM	#1
	CSS div's height 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

12-14-2004, 11:45 AM	#7
Spartanicus Posts: n/a	Re: CSS div's height 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

12-14-2004, 12:22 PM	#8
Xavier Perseguers Posts: n/a	Re: CSS div's height 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

12-17-2004, 07:02 AM	#9
Xavier Perseguers Posts: n/a	Re: CSS div's height 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

12-17-2004, 10:14 AM	#10
rf Posts: n/a	Re: CSS div's height 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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to control the height of a Drop down control	Siri_y	Software	1	05-17-2009 06:19 AM
Centering and scaling divs to fit any browser	tcarone07	General Help Related Topics	0	02-06-2009 07:36 AM
vb.net 2003 help	cutekiller28	Software	3	09-23-2008 08:32 PM
For Your Height Only DVD	tvs	DVD Video	0	11-18-2004 08:38 AM
Half height PCI LAN cards	FredG	A+ Certification	2	09-25-2003 12:04 AM