Textpattern CMS

#1 2007-01-21 05:08:43

lvdvoo

New Member

Registered: 2007-01-21

Posts: 4

align my sidebar

I am using div tags to align images in my left sidebar but for some reason they will not display when I use position:absolute. Only the top image will position itself as an absolute. The images below it all take the position of the top item and stack below. If I use position:absolute they will not display. Also, there is a black box around this top image that is a total mystery to me. Any suggestions? I am pretty new at this. The site is at www.spjoregon.org/records.

#2 2007-01-22 23:48:56

dbulli

Member

Registered: 2004-11-22

Posts: 195

Website

Re: align my sidebar

they looked stacked so i assume you figured it out …

absolute takes things out of flow and they all start at “0/0” … so they will overlap eacj other … you will have to either add top: or margin-top: to bump them down

---

nuff-respec ::: dannyb

#3 2007-01-23 05:49:57

lvdvoo

New Member

Registered: 2007-01-21

Posts: 4

Re: align my sidebar

Thanks. I seem to be stacking okay but I want to be able to move right or left. Any ideas?

#4 2007-01-23 13:49:08

DigitalRealm

Member

From: Greenville, SC

Registered: 2006-07-22

Posts: 139

Website

Re: align my sidebar

You could either add margin to them to move them left or right or you can simply say left: 20px; in your css for the images to move them as well. Replace the 20 with however much you need to move them. Place this code where your absolute positioning is.

#yourelement {
position: absolute;
top: 10px;
left: 20px;
}

#5 2007-01-29 03:08:46

lvdvoo

New Member

Registered: 2007-01-21

Posts: 4

Re: align my sidebar

I tried this but I’m still having the same problem. Whenever I absolute position the images, they just drops from the sidebar, whether I do it in the CSS or in the div tags. Ideally, I’ll have all these images flush right, but I can’t seem to figure out what I’m doing wrong. Here’s the sidebar code below. When I tried adding the code you suggested to the CSS, I’ve dropped all the styles in the div tags:

<!— left —> <div id=“Layer2” style=“position:absolute; left:87px; top:286px; width:76px; height:33px”><a href=“http://www.spjoregon.org/index.html”><img src = “http://spjoregon.org/records/images/4.jpg”></a>
<div id=“Layer3” style=“left:58px; top:325px; width:113px; height:32px”><a href=“http://www.spjoregon.org/records”><img src=“http://spjoregon.org/records/images/22.jpg” width=“88” height=“34” border=“0”></a></div>
<div id=“Layer4” style=“left:76px; top:361px; width:87px; height:34px”><a href=“http://www.spjoregon.org/about.html”><img src=“http://spjoregon.org/records/images/10.jpg” width=“88” height=“34” border=“0”></a></div>
<div id=“Layer5” style=“left:89px; top:401px; width:80px; height:32px”><a href=“http://www.spjoregon.org/training.html”><img src=“http://spjoregon.org/records/images/5.jpg” width=“77” height=“28” border=“0”></a></div>
<div id=“Layer6” style=“left:80px; top:438px; width:86px; height:32px”><a href=“http://www.spjoregon.org/contests.html”><img src=“http://spjoregon.org/records/images/11.jpg” width=“91” height=“32” border=“0”></a></div>
<div id=“Layer7” style=“left:56px; top:474px; width:106px; height:32px”><a href=“http://www.spjoregon.org/membership.html”><img src=“http://spjoregon.org/records/images/12.jpg” width=“110” height=“34” border=“0”></a></div>
<div id=“Layer8” style=“left:55px; top:511px; width:91px; height:33px”><a href=“http://www.spj.org/” target=”_blank”><img src=“http://spjoregon.org/records/images/13.jpg” width=“111” height=“30” border=“0”></a></div>

#6 2007-02-12 00:45:29

lvdvoo

New Member

Registered: 2007-01-21

Posts: 4

Re: align my sidebar

Got it now, thanks.