CSS - Stretch Containing Div Vertically Around Absolute Pos Layers?

Not sure where to put this because it involves php, dhtml, css and layers?

But anyway I'll give it a shot here. I have a problem that I can't seem to tackle.

Basically what I need is:
I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page).

I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible)

Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ.

Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL):
PHP Code:
//get xy coordinates of primary position
$locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de ");
$locbasered = mysql_fetch_array($locbase);
$xred = $locbasered["lb_xcoord"];
$yred = $locbasered["lb_ycoord"];
//get xy coordinates of other positions on the same map
$locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de ");
 
//position the map at coordinates 0-0
echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>";
 
//position the primary position on the map in a layer on top of the map layer
echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>";
 
//create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer
$k = 3 ;
while( $locothers = mysql_fetch_array( $locotherbases ) ) {
$xgrey = $locothers["lb_xcoord"];
$ygrey = $locothers["lb_ycoord"];
echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; 
$k++ ;
} 




Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line.

Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?)

Anyone any idea how to do this?
(or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page)


Thanks for any feedback!
Cheers,
Gurt

Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it.

This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it.

Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

Is there any way to make divs stretch to fit the content of the div? I don't want to hear about how to make them stretch to the size of the page. How do you get them to streth to fit what is in them?

right....

i have two fixed width columns and i want them to be the same height - the height of whichever has the most content. so i figured i do something like:


+---------------------+
| +-----+ +----+ |
| | | | | |
| | | | b | |
| | a | | | |
| | | +----+ |
| | | |
| +-----+ |
+---------------------+


(OK - problems with spaces and non breaking thingy.. do you get the idea though? )

the container div will stretch to fit the content, divs a and b will increase in height depending on content. so i was thinking if i set divs a and b to be 100% height it would work. however, this will do nothing if i haven't defined the height of the parent (container). so i think, ok, i'll set that to 100% as well. however this does not work. when i say "does not work" i mean the following:

my container div fills the viewport. the column divs stretch from the bottom to the top of the page. -- all ok this far.

when i add a load of content, i the div (a or b) will stretch beyond the viewport BUT the other one doesn't.

now.. does anyone have any ideas of how i could do this? has anyone seen this anywhere? any help appreciated.

d

Hi,

I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them.

I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated,

Thanks in advance

Can someone please tell me what the font-stretch property within CSS does? I have been playing around with the following online example, but the way the text is rendered never changes.

[access the world wide web]w3schools.com/js/tryit.asp?filename=try_dom_style_fontstretch

Could someone please tell me how to use the font-stretch property? I am just trying to see what it does.

Thank you!

I feel so STUPID.

I have DIV[a]

inside DIV[a] is DIV[z]

DIV[z] is 200px high.

there is no height attribute et for DIV[a]

shouldnt DIV[a] stretch atleast to fit in DIV[z]

You can see here, in firefox, the dark background only comes
down 200px. That is because its height is at 200px, i did that
so you could see it. If I remove the height attribute, it
dissapears completley. The menu and such on the left are within this div, so it should stretch correct?

It works fine in IE.

If I need to explain more let me know.

Thanks

I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion?

Hello... I'm having some trouble. I have a container div set to 100% width. I have 2 small fixed width divs floated right and left and then a div between them that needs to stretch to fufill the 100% width while showing the background image of the container div. Works in Firefox, IE7... not so much. Any help is appreciated in advance

CSS

#container {
width: 100%;
background: url('images/topM.gif') repeat;
}

#leftFloat {
width: 30px;
float: left;
}

#rightFloat {
#width: 30px;
float: right;
}

#middleStretch {
height: 25px;
}
---------------------------
XHTML

<div id="container">

<div id="leftFloat"/>image goes here</div>

<div id="rightFloat">image goes here</div>

<div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div>

<!--end #container--></div>

Hello,

I have been playing with this for a few days now and I am completely frustrated.

The left side bar and the right side bar I need to auto stretch. I veiwed everything in several different browsers and screen resolutions. I orginally hade a body background picture and it worked perfectly except on firefox at 800x600. It was left aligned instead of centered.

So.. I made the backrounds and border colors instead. Now the problem is I cannot get them to auto strech - I am very frustrated. It seems to be all messed up in IE5.5 at 800x600.

Can anyone take a look and help me? Thanks in advance!
If you need the html - I would be glad to provide it.

Here is the css file:

body {
margin: 0px;
padding: 0px;
background: #666666 url(images/back.png) repeat-y center top;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #3399FF;
}

a {
font-weight: bold;
text-decoration: none;
color: #33CCFF;
}

a:hover {
text-decoration: underline;
color: #33CCFF;
}

/************* HEADER STUFF ************/

#header {
width: 995px;
height: 200px;
margin: 0px auto;
padding: 0px 0px;
background: yellow;
}

#header2 {
width: 995px;
height: 10px;
margin: 0px auto;
padding: 10px 0px;
background: yellow url(images/header.jpg);
}

#header h1 {
margin: 0px;
padding: 0px 0px 0px 10px;
text-align: left;
color: #3399FF;
font-size: 3em;
text-transform: uppercase;
}

#header h2 {
margin: 0px;
padding: 0px 0px 0px 20px;
text-align: left;
font-size: 1.5em;
text-transform: uppercase;
}


/************* MENU ************/

#menu {
width: 995px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background-color: #000000;
height: 28px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
margin-top: 12px;
}

#menu li {
display: inline;
}

#menu a {
padding: 5px 19px;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
background-color: #333333;
}

/************* CONTENT ************/

#content {
width: 995px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
font-weight: normal;
}

#content p, #content ul, #content ol {
line-height: 150%;
}

#left {
float: right;
width: 680px;
padding: 0px 20px 40px 20px;
}

#right {
float: left;
width: 230px;
padding: 0px 20px 40px 20px;
color: #99CCFF;
}

/************* FOOTER ************/

#footer {
clear: both;
width: 995px;
margin: 0px auto;
border-top: 1px solid #666666;
background: red repeat-y center top;
font-size: 9px;
text-align: center;
padding: 2px;
color: #333333;
}

#footer2 {
clear: both;
width: 995px;
margin: 0px auto;
border-top: 1px solid #666666;
background: blue repeat-y center bottom;
font-size: 9px;
text-align: center;
padding: 0px;
color: #333333;
height: auto;
}

Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally.


Heres what I have:
Code:

<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);

}
-->
</style>

Like that it will only display half of the gradient if the gradient is longer than 50% of the page.

I want it to stretch or shrink the image so that the whole gradient is displayed.

I tried using the background-size: 100% attribute but it diddnt do anything :-\

Thanks for any help.

The font-stretch property, for example: css Code:
Original - css Code font-stretch: condensed;

  

 font-stretch: condensed; 

doesn't seem to be adequately supported by most browsers, even though it has been part of CSS 2 for quite a while. Most references I checked seemed to point to system font dependency, i.e., if your system does not have a condensed or expanded version of that particular font installed, no change in font width will appear. Why is this? Microsoft Word has an algorithm to stretch and condense all fonts, not just those with special versions. Why can't the css standard use a similar display algorithm to implement font-stretch?

Hi there,

I'm having trouble (right now Im just trying to get firefox to work) getting my #content div to stretch completely vertically. The #main div is stretching correctly, I figured I'd be able to use the same code to get the #content div to stretch. TIA - Mark

HTML

Code:

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{$title}</title>

<link rel='stylesheet' href='/css/core2.css' type='text/css' />

</head>

<body>
	
	<div id="main" >
		<img src="/images/left_shad_top.png" id="left" alt="left shader" />
			<div id="content">
			
				test
			</div><!-- end of content -->
		
		<img src="/images/right_shad_top.png" id="right" alt="right shader" />
		<div style="clear:both;"></div>
		<img src="/images/bottom.jpg" id="bottom"/>
	</div> <!-- end of main div -->
	
</body>
</html>

My CSS

Code:

*{
margin: 0;
padding: 0;
}

html{
background-color: red;
}

body{
height: 100%;
background-color: blue;
margin: 0 auto;
}

#main{
min-height: 100%;
background-color: yellow;
width: 850px;
background-image: url( '/images/shad_repeat.png');
background-repeat: repeat-y;

}

#content{
width: 695px;
background-color: green;
min-height: 100%;
float: left;
background-image: url('/images/page.gif');
background-color: #dcdbdc;
background-repeat: repeat-x;
}

#left{
float: left;
}
#right{
float: right;
}

#bottom{
margin-left: 50px;
}

Hi,

Just wondering if anyone can tell me how i would go about stretching a background image for my website so as it stretches with different page sizes and resolutions an all the rest