|
CSS - Any Way To Center, Bottom And Height-limit An Image (e.g. Inside A Div) ?
It seems I get one or the other, but not all.
Similar TutorialsI attached an image with an exemple of my problem, left side is from Internet explorer and right side is from Opera and Firefox. The div in which I inserted that image does not expand in height as much as the image height .. only on how much text I insert in that div. How can I fix this in opera and firefox ? PHP Code: .bggrad{ background-image:url(images/bg-gradient-b-w.gif); width:486px; text-align:left; height:auto; /* INITIALY I DID NOT USED HEIGHT BUT IT WAS THE SAME */ } img.img_event{ padding:4px; border:1px solid #FFC91B; background-color:#FFF4CB; margin:10px; } <div class="bggrad"> <img src="images/test.gif" width="117" height="148" border="0" class="img_event" align="left"> text text text text </div> 10x in advance I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Can I put my BAR in your FOO?</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div#contents
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black; /* visual aid */
}
div#thumbnails
{
border: 1px solid red; /* visual aid */
}
div#thumb
{
float: left;
}
</style>
</head>
<body>
<div id="contents">
<div id="thumbnails">
<div id="thumb"><img src="image1.jpg" /></div>
<div id="thumb"><img src="image2.jpg" /></div>
<div id="thumb"><img src="image3.jpg" /></div>
<div id="thumb"><img src="image4.jpg" /></div>
</div>
</div>
</body>
</html>
What I am trying to do is have the collection of "thumb" divs align in the center of the "contents". The number of "thumb"s will vary and I want them to fill the width of the screen no matter what width that may be, and change when the size of the window is changed. I realize that the float: left is pushing them to the left, but it's my understand that is how you get divs to appear side-by-side. So I figured I could enclose them in another div ("thumbnails") and then center it inside "contents", but "thumbnails" doesn't even seem to enclose the "thumb"s unless I specify a width, which I can't do because the number of thumbnails changes, and if I specify a width that is too big, the thumbs float back to the left and the extra containing div "thumbnails" is pointless. So, how do I get the "thumb"s to be side-by-side and have that collection of "thumbnail"s centered on the page, while still keeping things liquid? Currently working in IE6, but looking for support in IE5x, Opera, and Gecko based browsers. I have a fixed-width site and the content is enclosed inside a 750px div. I need to center a div inside that main container. I know I can use margin and text-align but then all of the divs in the main container will be centered where I only want one div to be centered. Any help would be much appreciated. Thanks! Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks Hello, I've created a wrapper div for my main content and I center it on the page by setting margin left and right to auto. I add some content to it but the height of the wrapper never grows larger than the content. How can I make it so the background color of the wrapper, for example, goes to the bottom of the browser regardless of the amount of content inside of it? Thanks in advance. I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page. Is there a simple fix for this or would I need to redo it completely ? The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either. Can anyone suggest what I could change to make it the same or suggest how I redo this so it is. Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }
.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em; border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.menu { background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.clearfloat { clear: both; }
.leftSidePanel { background-color: blue; float: left; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }
.mainContent { background-color: lightblue; margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.rightSidePanel { background-color: blue; float: right; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }
.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }
--></style>
</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">
<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->
<div class="leftSidePanel">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br><br>
</div>
</div>
<!-- mainContent end -->
<div class="rightSidePanel">
</div>
<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>
</div>
<!-- body container end -->
</body>
</html>
I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css. The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page. I have uploaded the code to here When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer. When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer. I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage? Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage). Again does anyone have any idea how I would be able to get it to do this. I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this? Hey there! First off, take a look he http://apollomix.com As you can see, I have that little chat box on the sidebar. However, for the life of me, I can't figure out how to make it 100% tall! I've tried giving the main content div a height of 100%, the body a height of 100%... everything. It just won't go! What gives? Based on what I read, the parent DIV should be 100% tall, and it should work. I guess not. Any help would be really, really appreciated! Thanks! How do I make a div go to 100% height cross browser? I have a layout like this: ----------HEADER------------- NAVHOLDER | NAV(div inside holder) | NAV(div inside holder) | | | | ----------FOOTER------------- cheers. Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div. can someone tell me how to do this? thanks Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> <div height = 100% doesn't work inside <table> but if i change height = 900px, it works. anyone know how to fix it? see example code below. thx so much <table border = 1> <tr> <td> mesg </td> </tr> <tr> <td> <div style='HEIGHT:100%; WIDTH:100%; OVERFLOW:auto'> <table border=1 width=100%> <tr><td>stuff</td> <td>more stuff</td></tr> <tr><td>stuff</td> <td>msg </div></td></tr> </table> </div> </td></tr> </table> I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text |
|||||||