|
CSS - Container Does Not Expand For Image
Hello,
i'm trying to make a tableless image gallery, each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side) while the div container expands fine, the span container does not expand to fit the image, and i also don't know how to vertically center it. i can't use <div> because images can be in the same row. Code:
body {
margin:0px
padding:10px;
background-color: #ffffff
}
body, div,span {
font-family: Arial; font-size: 12px; color: #000000
}
a {
color:#000099
}
a:hover {
color:#0000ff
}
div.paging {
padding:10px;
border:1px solid red;
}
div.paging span {
padding-left:10px;
border:1px solid red
}
div.gallery {
padding:10px;
border:1px solid red
}
div.gallery span {
margin:20px;
border:1px solid green;
}
div.gallery img {
border:1px solid black
}
this is the result http://addf.net/tests/m_g/gallery.php is float the only option? must i float every element on the page? what if it's a module for another not floated website? i'd rather not use float or a table. if you could help thank you Similar TutorialsHi, what I'm trying to do is get two divs next to each other. That much I can do if I give them both a style of 'float:left;', but the problem with that is that they will overflow out of the div that they both sit in. Is there anyway to get two divs to sit next to each other, but to also expand the parent div if necessary? Thanks! I have a site with a fixed width, but a few pages on the site are reports with wide tables that overflow that fixed width. Per the spec, they overflow their containers instead of expanding the containers (as happened in the old table layout). Is there a way to get the old table behavior out of the styled div tags? This is a short example of what the site uses for layout. The first block is normal content. The second has content overflowing and I would like all containers to expand (Main expands for the content, Page expands b/c Main expanded, Header* and Footer expand b/c their container (Page) expanded). The third is what it'd look like after that expansion (table rendered). Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body { background-color: green }
.Page {
width: 200px;
margin: 50px auto;
}
.Header1 {
}
.Header2 {
background-color: red;
border: 1px solid Black;
border-width: 1px 1px 0;
}
.Footer {
background-color: blue;
border: 1px solid Black;
border-width: 0 1px 1px;
}
.Main {
background-color: white;
border: 1px solid Black;
border-width: 0 1px;
}
-->
</style>
</head>
<body>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
Main
</div>
<div class="Footer">Footer</div>
</div>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
MainMainMainMainMainMainMainMainMainMainMainMain
</div>
<div class="Footer">Footer</div>
</div>
<table class="Page" cellpadding="0" cellspacing="0">
<tr><td class="Header1">Header1</td></tr>
<tr><td class="Header2">Header2</td></tr>
<tr><td class="Main">MainMainMainMainMainMainMainMainMainMainMainMain</td></tr>
<tr><td class="Footer">Footer</td></tr>
</table>
</body>
</html>
I won't go back to tables, but I'd really like a general solution that can be applied to all pages, instead of doctoring widths and margins on the pages in question to get tolerable results. The page should be the set fixed width unless the content demands otherwise, then the entire page should stretch to flow. Any ideas? A screenshot for viewing sans personal test file. I 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 Hi all I'm building a photo gallery and have a problem. The main images have what looks like a dotted container box surrounding them when you click them. This box has padding either side which I want to either reduce to the size of the image or eliminate all together but don't know how to do this. The link is below. Click a thumbnail then click the larger image to see the dotted line. Thanks for any help. bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm Hi, I'm trying to position an image in the bottom right of a containing block, but the only way I can get to align perfect all the time, is by using "background-image: url('image.jpg')" attribute. This would be perfect, except I need the image to be a hyperlink. I have a test page up here and the css is here. That's how I want it to look, but can't get the "check me out" image to display in that spot without using the background property. I've tried using a class attribute in an img tag and setting up the css with a position relative, tried removing the p tags, various floats and positions, and a bunch of other things. No matter what I try, the image won't stay in that one spot. Any ideas? I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue... Thanx in advance Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this? The HTML Code:
<div id="footer">
<div id="box1">Content</div>
<div id="box2">Content</div>
<div id="box3">Content</div>
</div>
The CSS Code:
#footer {
min-height:150px
height:auto;
}
#box1 {
float:left;
min-height:150px
height:auto;
}
#box2 {
float:left;
min-height:150px
height:auto;
}
#box3 {
float:left;
min-height:150px
height:auto;
}
I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
God, this is really simple but I have forgotten how to get the containing box to expand Basically the text div expands but the containing div doesn't PHP Code: <div style="width: 300px; min-height: 200px; border: 1px dashed red;"> <div style="border: 0; width: 110px; height: 110px; float: left;"> <img src="#" width="100" height="80" border="0" align="left" /> </div> <div style="border: 0; width: 190px; min-height: 200px; float: right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio nibh, interdum eget, mollis quis, imperdiet non, risus. Curabitur laoreet vehicula massa. Curabitur consequat dui vitae lectus. Nam rutrum sapien id quam. Pellentesque aliquet nulla dignissim ante. Fusce metus libero, vehicula hendrerit, condimentum id, malesuada in, elit. Nam fermentum, metus in varius scelerisque, diam purus tristique tortor, vitae suscipit elit ipsum eu dolor. Ut dictum porttitor velit. Pellentesque cursus purus elementum dui. Phasellus aliquet ante vitae pede. </div> </div> Hi, Is there any way to set a DIV that starts at 500px height but can grow if the content inside is longer than that? Thanks. So probably my topic title explains my problem pretty clearly, but basically I've got this div and I'd like it to expand downward as I fill a div contained within with content. Can anyone explain how I can do this? I tried placing a fairly tall picture in my inner div and right now it extends past the bottom of the outer div and looks really weird. Actually if there was even just a way I could tell the outer div exactly how tall the inner div is, that would also be fine, but I can't find a way to do this. I've tried the height: 253px; tag, but it hasn't changed anything. My outer div still doesn't go as far down the page as the inner one, so I'm left with an image thats halfway sticking out my content box. Any help would be great, thanks! I have an absolutely position <div> with some content positioned within it. I do not always know the size of the inner content so my problem is getting the outer div to expand to the height of the inner div. Is there a solution for this with absolutely positioned items that wil work in IE/Firefox/Safari? I'm attaching a simple html file which mimics what i am trying to accomplish and the code is below: Code: <div id="detailBlock" style="position: absolute; width: 250px; height: 35px; z-index: 3; border: 1px solid #000; overflow: visible; background-color: #fff5d9; font-size: 8pt; top: 50px; left: 100px;"> <div id="closeBlock" style="position: absolute; width: 40px; height: 8px; left: 210px; top: 3px; font-size: 7pt;"><a href="javascript: closeDetail();">CLOSE</a></div> <div id="detailContent" style="position: relative; width: 240px; top: 15px; left: 5px; border: 1px solid #F00;">Content whose size i do not know...So if I write anything substantial in here it will go over the edge</div> Thanks in advance for your help. Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari. HTML CSS Potentially relevant CSS: Code: body {
margin: 0;
padding: 0;
min-height:0;
}
div.container {
width:100px;
}
div.outerBody {
width:100%;
min-height:0;
}
div.innerBody {
width:100%;
background-image:url("../../images/artist_center/body_bg.jpg");
background-repeat:repeat-x;
min-height:0px;
height:auto !important;
background-color:#cedce5;
text-align:center;
margin: 0;
position:absolute;
}
div.tabContent {
width:945px;
min-height:596px;
border:solid 1px #cccccc;
float:left;
position:relative;
margin-left:14px;
padding-bottom:14px;
margin-bottom:14px;
}
I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on. Thanks for any help! I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> hi... if you look here - http://www.outlawz.frihost.net/fula/test2.php you can see i have written to much text... here is my code Quote: <?php require("header.php"); ?> <div id="content"> <br><br> <b>Welcome to Kadafi Legacy.</b><br><br> <img src="image/yaki1.jpg" alt="Yaki Kadafi" align="left"> Here at Kadafi Legacy we aim to bring you the latest and most in depth information on Yaki Kadafi, such information will include the family and friends of Yaki Kadafi, Kadafi's childhood years, the records Kadafi featured upon and all this and much more can be found in our <a href="/history.php" alt="Yaki Kadafi History">Kadafi history</a> section.<br><br> The latest news and information regarding projects from the official Kadafi site - <a href="http://www.yakikadafi.com" target="_blank" alt="YakiKadafi.com">YakiKadafi.com</a>, will also be reported and updated daily in our <a href="/news.php" alt="Yaki Kadafi News">Kadafi News</a> section.<br><br> Also available on Kadafi Legacy is the <a href="/music.php" alt="Yaki Kadafi Music">music</a> section, you will find information, images and lyrics about previous releases such as 'Son Rize: Volume 1'.<br><br> In our <a href="/links.php" alt="Yaki Kadafi Links">links</a> section you will be able to find direct links to official sites that are related to Yaki Kadafi in one way or another also in our links section is a 'support the real' area of links which will link to sites we support, i.e - Sekou Odinga, Assata Shakur.<br><br> Our ultimate goal is to honour Yaki Kadafi, his family and his music in the correct way, this means there will be no illegal downloads available on this site and nothing will be used without permission from Yaasmyn Fula.<br><br> Last and not least, Kadafi Legacy would like to thank the following people -<br><br> Yaasmyn Fula<br> Cory Caudill<br><br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> and heres the css - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head img { display: block; } #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #box1{ position: relative; top: 7px; left: 140px; width: 345px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; height: 500px; font-family: verdana; font-size: 12px; color:white; text-aligh: justify; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } on the page the text goes out side the blue box.. how do i make it so the when it does that the blue box stretches down... thanks! also it works in IE but not in FIREFOX! |
|||||||