473,386 Members | 1,752 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Box with Image + Footer; how to avoid max-width, max-height?

Hello,

the html below displays a box (#container) with a #footer and
an #image inside. Is there any way how I could get rid of
declaring max-width and max-height for the #image?
The #image should fill up all the space left in the #container.

<html><head></head><body><style type="text/css">
#image { max-width: 200px; max-height: 90px; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
<div id='container'>
<img id='image' src="http://www.google.com/intl/en_ALL/images/
logo.gif"/>
<div id='footer'>footer</div>
</div>

I'd be very thankful for any help with this issue.

Best,

Sven

Apr 11 '07 #1
3 3513
In article
<11*********************@d57g2000hsg.googlegroups. com>,
"Sven C. Koehler" <sk******@gmail.comwrote:
Hello,

the html below displays a box (#container) with a #footer and
an #image inside. Is there any way how I could get rid of
declaring max-width and max-height for the #image?
The #image should fill up all the space left in the #container.

<html><head></head><body><style type="text/css">
#image { max-width: 200px; max-height: 90px; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
<div id='container'>
<img id='image' src="http://www.google.com/intl/en_ALL/images/
logo.gif"/>
<div id='footer'>footer</div>
</div>

I'd be very thankful for any help with this issue.

Best,

Sven
Why are you putting the footer in the container? Or the style
below the head? If you want to get rid of the max-width, what is
stopping you? Nothing is stopping you from using width instead.

Is this what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cats in sinks</title>

<style type="text/css">
#image {width: 100%; height: 100%; }
#container { position: fixed; width: 200px;
height: 100px; background-color: gray; }
#footer { position: absolute; bottom: 5px; }
</style>
</head>

<body>
<div id="container">
<img id='image'
src="http://www.google.com/intl/en_all/images/logo.gif"
alt="google logo"></div>
<div id="footer">footer</div>

</body>
</html>

?

Oops... I forgot, John Hosking is dealing with the case of cats
in sinks.

--
dorayme
Apr 11 '07 #2
dorayme wrote:
Why are you putting the footer in the container? Or the style
below the head? If you want to get rid of the max-width, what is
stopping you? Nothing is stopping you from using width instead.

Is this what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cats in sinks</title>
....
>
<body>
<div id="container">
<img id='image'
src="http://www.google.com/intl/en_all/images/logo.gif"
alt="google logo"></div>
<div id="footer">footer</div>
</body>
</html>
?

Oops... I forgot, John Hosking is dealing with the case of cats
in sinks.
LOL

Actually, I ended up deciding to put the cats on the <tableand let the
chips fall where they may.

You are welcome to put any footers under the container and the cat under
the sink, as you feel appropriate.

--
John
Apr 11 '07 #3
On Apr 11, 11:49 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
#image {width: 100%; height: 100%; }
Heh.

#image {max-width: 100%; max-height: 100%}

That's what I wanted to do. Thanks for pointing out the obvious!

-S.

Apr 12 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: Eric Lindsay | last post by:
I've seen a page using display, and especially display table that did some neat things with boxes, but basically it only worked with Mozilla browsers. Fell over fairly badly with Opera and Safari...
2
by: Paul Copeland | last post by:
Hi, I have a form with buttons (Ok, Close etc) on the form footer. As the user tabs through the form controls focus will not move to the footer controls. Am I missing something here? Do I have...
7
by: madhu2845 | last post by:
I want to know if any style or tag is available to avoid printing footer on a web page. I know that we can have two style sheets, one for print media and other for screen and in the stylesheet for...
5
by: Richard Shewmaker | last post by:
Hi. I've been using CSS for basic stuff, mostly concerning fonts. I want to get going with using CSS fully. Two days ago I purchased O'Reilly's "Cascading Style Sheets" and "CSS Cookbook." I've...
4
by: Seefor | last post by:
Hi, I want my text hyperlinks to have a dotted border underneath, so I did this which works fine: a, a:link, a:visited, a:hover, a:active { color: #000; text-decoration: none;
3
by: roN | last post by:
Hi, if you go to http://www.dvdnowkiosks.com/new/faq.php you can see that if you click on one of the FAQs, it's extending them and making the image on the right-hand side being too short. Is...
2
by: nick | last post by:
Is it possible to use the print css (in css2) to make sure that a small image is printed on the top right corner (with background- position) of each printed page of the same document? Thanks.
1
by: Cartoper | last post by:
I am a seasoned application programmer that is playing around in the world of web development. I found this web site that has nice fluid image galleries and I am wondering how they are doing it: ...
2
by: zimsurfa | last post by:
Hi guys, Hope you're doing well. I know a little bit about CSS but not that much so I haven't been able to solve a CSS issue that I'm having in the IE6 browser. The code is nice and neat because I...
1
by: gnewsgroup | last post by:
I have a user control called Footer.ascx, in which a background image is inserted like so: <div id="footerdiv" style="background-image:url('Images/ mybackground.jpg');...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.