position: absolute (pain in my...) (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

indiewriter -> position: absolute (pain in my...) (11/11/2003 21:25:03)

hi all,
kinda new to CSS so excuse me if this is a lame brain question, but i've got an issue where i've created a chart in css and using position:absolute to place the chart where i want it. i was pretty stoked about it until i resized my browser and the think went pbthhhhh. anyways, how can you make something stay in one place. should you use something other than position:absolute or do i need to fix it to an image, or what. kinda lost yet hopeful someone here can help.



Nancy -> RE: position: absolute (pain in my...) (11/12/2003 2:45:05)

Actually your chart may have stayed right where you told it to stay (absolute position) and everything else moved. It also might depend on which browser you were using at the time. Some browsers do have resizing issues.

But in order to try to help you out, a URL would be helpful.

Nancy



c1sissy -> RE: position: absolute (pain in my...) (11/12/2003 7:23:42)

I'll be anxious to see your link.

I know what you mean about placing something somewhere and then it goes how it wants. Pretty frustrating.

But, think of the feeling that you'll get when it does work![;)]



indiewriter -> RE: position: absolute (pain in my...) (11/12/2003 21:05:24)

nancy, you're right. it does go where i want it to and everything else moves. is there a way to use css where you lock items to something so it moves along with everything else when you resize the browser. i'm using ie as my broswer. i haven't checked it out on opera, netscape or mozilla yet - worry about that when i have to. but here is the code i've been using that's been driving me nuts. sorry i don't have my site published yet. it will be up in a week or so, but maybe this can help me help you help me.

this part goes in the head between style tags:
<!-- the main green square -->
#pulloutInterface {position:absolute; left:174; top:340; width:400; height:250; clip:rect(0,400,250,0); background-color:#81AC81; layer-background-color:#000000; border-style: solid;
border-width: 1px}

<!-- the buttons on the left -->
#pullout0Sidebar {position:absolute; left:5; top:5; width:98; height:35; clip:rect(0,98,35,0); background-color:#e2ebe2; layer-background-color:#e2ebe2;border-style: solid;
border-width: 1px}
#pullout1Sidebar {position:absolute; left:5; top:45; width:98; height:35; clip:rect(0,98,35,0); background-color:#e2ebe2; layer-background-color:#e2ebe2;border-style: solid;
border-width: 1px}
#pullout2Sidebar {position:absolute; left:5; top:85; width:98; height:35; clip:rect(0,98,35,0); background-color:#e2ebe2; layer-background-color:#e2ebe2;border-style: solid;
border-width: 1px}
#pullout3Sidebar {position:absolute; left:5; top:125; width:98; height:35; clip:rect(0,98,35,0); background-color:#e2ebe2; layer-background-color:#e2ebe2;border-style: solid;
border-width: 1px}

#pulloutUpDown {position:absolute; left:5; top:200;}

<!-- the big square where the contents are shown -->
#pulloutViewArea {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,283,240,0); background-color:#000000; layer-background-color:#000000;border-style: solid;
border-width: 1px}

<!-- Windows are the grey squares, Contents are the text in each -->
<!-- all these except #0 are are positioned offscreen -285 and -->
<!-- must slide to 0 to be seen -->
#pullout0Window {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,281,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE;border-style: solid;
border-width: 1px}
#pullout0Content {position:absolute; left:5; top:0; width:275;}
#pullout1Window {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,281,240,0); background-color:#C5C5C5; layer-background-color:#C5C5C5;border-style: solid;
border-width: 1px}
#pullout1Content {position:absolute; left:5; top:0; width:275;}
#pullout2Window {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,281,240,0); background-color:#A2A2A2; layer-background-color:#A2A2A2;border-style: solid;
border-width: 1px}
#pullout2Content {position:absolute; left:5; top:0; width:275;}
#pullout3Window {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,281,240,0); background-color:#7E7E7E; layer-background-color:#7E7E7E;border-style: solid;
border-width: 1px}
#pullout3Content {position:absolute; left:5; top:0; width:275;}
#pullout4Window {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,281,240,0); background-color:#7E7E7E; layer-background-color:#7E7E7E;border-style: solid;
border-width: 1px}
#pullout4Content {position:absolute; left:5; top:0; width:275;}

//-->

this is the part i'm using in the body to make this chart work.

<div id="pulloutInterface">

<div id="pullout0Sidebar"><p align="center"><a href="javascript:pulloutStart(0)">Driving from Chicago</a></p></div>
<div id="pullout1Sidebar"><p align="center"><a href="javascript:pulloutStart(1)">Driving from West Suburbs</a></p></div>
<div id="pullout2Sidebar"><p align="center"><a href="javascript:pulloutStart(2)">Driving from North Suburbs</a></p></div>
<div id="pullout3Sidebar"><p align="center"><a href="javascript:pulloutStart(3)">Driving from South Suburbs</a></p></div>


<div id="pulloutUpDown">
<a class="scroll" href="javascript:// Scroll Up" onMouseDown="pulloutScroll[pulloutShown].up()" onMouseUp="pulloutScroll[pulloutShown].stop()" onMouseOut="pulloutScroll[pulloutShown].stop()">Scroll Up</a>
<br><a class="scroll" href="javascript:// Scroll Down" onMouseDown="pulloutScroll[pulloutShown].down()" onMouseUp="pulloutScroll[pulloutShown].stop()" onMouseOut="pulloutScroll[pulloutShown].stop()">Scroll Down</a>
</div>

<div id="pulloutViewArea">

<div id="pullout0Window">
<div id="pullout0Content">
<div align="left"><p>Driving distance (approx): 20 miles, Time: 35 minutes</p>
<p>Driving direction (from Loop): ....</p>
</div>
<table border=0 width=275><td>
<div align="left">
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td width="1%"></td>
<td width="75%"><b>Driving Directions</b></td>
<td width="23%"><b>Distance</b></td>
<td width="1%"></td>
</tr>
</table>
</div>
</td></table>
</div>
</div>

the table is acutally a lot longer, but i'm trying to conserve some space here. hopefully this will make a little more sense. thanks again



c1sissy -> RE: position: absolute (pain in my...) (11/12/2003 22:43:40)

Indiewriter:
I don't think you can use position absolute left.

Here is a tutorial that you can look at, I think that this might be your problem, but read about it a tad as I am only learning as well.

I think that position is only used for absolute and relative.

When you use float you use left and right.

I hope that this helps you out.



Nancy -> RE: position: absolute (pain in my...) (11/13/2003 2:21:44)

Not to discourage you, but your styles are going to need to have some work done.

First, there is no such style as layer-background-color - so all those ID's will need to have that removed.

For any unit of measure, you'll need to designate what unit. For example if you tell a person to go and run 5 they will need to know 5 of what? Did you mean yards, or meters, or miles? So your numbers that designate an amount also need a unit. For a stylesheet you can use one of several, such as px for pixel, em, pt, along with several others. So for all those places such as left top width height clip, they need to have a unit assigned. The only one that can be left alone is 0. Zero is zero no matter what, so it doesn't need a unit of measure.

Since you've stated you are pretty new to CSS, you might want to reconsider starting with something that is going to be a little simpler - or as Deb suggested, be prepared to do a lot of reading.

Several of the posts in this section of the forum have some good links to material. I've found myself reading a lot of things from http://www.htmldog.com/ as well as many other places online. If the above styles are something you've created in FrontPage, you should be aware that it doesn't write very good CSS at all.

Nancy



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625