relative positioning? (Full Version)

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



Message

c1sissy -> relative positioning? (5/10/2005 18:41:28)

http://csstest2.debsplace.org/relativeP_costarica.shtml
http://csstest2.debsplace.org/relativeP2_costarica.shtml

Ok, I have been playing with relative positioning trying to grasp it. These two pages are the same just different problems.

Any suggestions? I don't wish for code to be supplied for me please. Some guidance to what the problems are and suggestions. thanks.



jaybee -> RE: relative positioning? (5/10/2005 18:46:36)

Deb, position:relative

is relative to where the thing would normally be in the flow, i.e. if you did nothing with it.

so remove the position and see where it ends up then make it relative to that.

Blooming heck that's not easy to explain.



c1sissy -> RE: relative positioning? (5/10/2005 18:51:17)

quote:

is relative to where the thing would normally be in the flow, i.e. if you did nothing with it


right, got that part. And when you make position relative, you leave a space where it was by offsetting it. So I offset with minor amounts, but, In firefox, the border on the wrapper isn't going around the whole wrapper container? Why?




jaybee -> RE: relative positioning? (5/11/2005 4:43:49)

It is going all round it. The problem is that the containera div at the bottom with the two divs with all the links in are not being enclosed within the wrapper. They're displaying over the top of the bottom border. If you increase your border width temporarily to 5 or 10px you'll see where it goes.



c1sissy -> RE: relative positioning? (5/11/2005 7:49:57)

Ok, I have my answer to how to fix this. It needs the clearfix found here  http://www.positioniseverything.net/easyclearing.html
I had tried to use a clearing div, however that didn't seem to work. I have the above link printed out. and have seen it done to the page so I know it works. Now I need to read this and understand how to use it.

The container needs to be streched to hold the other divs. Usually the clearing div works, not sure why it didn't this time. Anyhow, this clearing fix mentioned above will make this work, also it has the holly hack in it for another bug that will appear as well. I highly suggest reading the above article. I only skimmed it so I might not be really saying things correctly that are within it. [;)]



c1sissy -> RE: relative positioning? (5/12/2005 9:13:47)

http://csstest2.debsplace.org/relativeP_costarica.shtml

Ok this should work out now. Let me know what you think.

One problem that i am having is that when I try to make the wrapper background color white it won't work. Not sure if its me, or something in the styles?



caz -> RE: relative positioning? (5/12/2005 11:20:43)

Using the EditCSS tool in FF adding the white backgound-color to the wrapper worked, except for the div containing the graphics,

div#hdrgrapha {
..
background-color: #F0F8FF;
}

Where it overides the wrapper.

I assume that this is what you are wanting? BTW that clearfix from PIE is amazing isn't it and so easy to use.[:D]

However, the caveat added that adding more floats can cause problems is true ( well, so far anyway until I work on it more).
Carol



c1sissy -> RE: relative positioning? (5/12/2005 12:20:54)

Hi Caz, thanks for the reply and testing the white on this. Not sure why it wasn't working for me?

The bugs that come up with the floats, if you read through his article, he gives you fixes to use. John mentions a few of the bugs within the article that this triggers. Other then that, usually if you plug a few things into google, you can usually find an article that will take care of the bug. Supposedly the Holly Hack, from what I have read anyhow, works great on a good deal of bugs as well as the one it was originated for.



jaybee -> RE: relative positioning? (5/12/2005 16:00:50)

Deb I posted a table thing for browser compatibility in the hints bit up the top.



c1sissy -> RE: relative positioning? (5/12/2005 16:54:04)

quote:

ORIGINAL: jaybee

Deb I posted a table thing for browser compatibility in the hints bit up the top.

Hints? I'm lost.
btw, I have several browser tables bookmarked.

Ok, how does it look now? I decreased the wrapper so that there isn't a bottom scroll bar. I knew there would be, but wanted to adjust other things first. Now that is adjusted.

Think the blue background looks ickish? should I just leave it white? lol, person its for might decide different anyhow, maybe I should just wait and see.



c1sissy -> RE: relative positioning? (5/14/2005 10:41:46)

Ok, I just viewed this in opera 7.54u2 and I dont' like how this looks. Any suggestion? Can someone view this in opera for me to see what its doing? Thanks in advance.



jaybee -> RE: relative positioning? (5/14/2005 17:57:49)

quote:

Hints? I'm lost.


Sorry CSS links. I was impressed with this one.

Can't help with Opera at the moment, don't have it loaded on the new machine yet. Will get round to it once I've finished this new design.



c1sissy -> RE: relative positioning? (5/14/2005 18:08:13)

No problem Jaybee, I figured someone might have that particular browser that might happen past this thread.

I'm not really sure what is going on with it. I should post a screen shot for viewing, maybe?

Good luck getting the new design [;)]



c1sissy -> RE: relative positioning? (5/15/2005 9:16:46)

Its actually the clearfix that is messing this up in Opera. Remove the clearfix and it works in opera, but not in firefox. hmm, whom to sacrifice? [;)]

Back, i have this working. What you need to do is remove the part of the hack that  says the following 
div.clearfix {display: inline-table;}

Once you remove that line of code from the styles then this works  in Opera. So, for now, I think, it is working pretty good. Unless someone finds out something different?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125