473,795 Members | 2,667 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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><sty le 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'>foo ter</div>
</div>

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

Best,

Sven

Apr 11 '07 #1
3 3535
In article
<11************ *********@d57g2 000hsg.googlegr oups.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><sty le 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'>foo ter</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">foo ter</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">foo ter</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.a uwrote:
#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
3136
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 (I don't have IE, but I have my suspicions that wouldn't work either). I'd like to use CSS to put some boxes down the middle of a page. The page is intended to be fluid, but the boxes all need to be the same width, which can be variable...
2
6322
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 to trap the Tab key on the last control (keydown, keypress) in the tab order and move focus to the first control in the footer. Paul Copeland --
7
1977
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 print media, we can provide a style {display:none} to the footer to avoid it getting printed. What is the best way to achieve this?
5
1931
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 been reading them and have tried some really basic stuff and am not having a very good time (lol). I'm feeling really stupid, to be honest. I was able to center an image on a page by mucking about with code primarily from the Cookbook. I only...
4
4253
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
1318
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 there a possibility that i can get by how many pixels it got extended and resize my image on the right-hand side? Thanks for suggestions!
2
3422
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
1702
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: http://pahountis.zenfolio.com/p925877948 I know they are putting each thumbnail in div and letting them just flow. When the page is resized, the number of div changes. What I don't understand what exactly are they doing to determine how many...
2
1247
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 used a PSD-to-XHTML service originally - but I've made a fair number of changes since then. Recently I tried to do a drop-shadow footer image (footer.gif) and was told to add this code to the CSS: #wrapper img{margin-left:1px;} This fix works in...
1
2871
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'); background-position:center; background-repeat:no- repeat;" <!-- My footer content goes here. --</div> This Footer.ascx is under a folder called /UserControls (the leading forward slash indicates the root of the web application, same below).
0
9672
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10436
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10213
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10163
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9040
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6780
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5563
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4113
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.