Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

relative positioning misshap

M

mufflon

macrumors 6502
Original poster
Sep 15, 2006
264
2
So after spending a couple of fruitless hours on the web browsing through a multitude of errors and misshaps that in the end left me wanting I realised that I won't be able to find my answer, so I might as well ask my question somewhere relevant.

To start of I might add that I am not overly knowledgeable as far as css goes, so the reason the answer eludes me might be obvious, alas not to me.

I have created a page for an interest my father is involved in which is basicly a single center column with a basic header and footer.
The main body has a picture as background with a set height and background-repeat set to no-repeat.

The problem is that on one of these pages I made small grey colored div-boxes with opacity (so some of the background picture shows through) and the text is then overlayed with another div with relative positioning.
However I try to squeeze the contacts on that page they won't fit on a single screen, so I use overflow-scroll and place the final content on the site.
The issue that still eludes me is that I have continously been forced to use higher and higher relative values on each consequent div and when I try it out in firefox as well as safari a very long scroll bar is shown instead of the much shorter scroll bar I had intended.

So my question is, how do I limit the length of the scrollbar so the only scrollable region is the region I had intended in the first place rather than a huge area of nothing.
 
To give you a real solution we'll need your code, either as a link to the page, or posting the relevant code here. If you post here please use the HTML code button in the above tool bar (hint: it's the one with <>). I could give you a vague answer, but likely wouldn't help you.
 
I should be able to post it tomorrow, managed to screw up the xserve server I use while upgrading it to 10.4.11 (stupid netinfo), should be up and running tomorrow though :)
 
Make sure you test all of this in IE, especially IE6. You mention "div-boxes with opacity". IE has serious issues with this entire area...
 
Okay the server finally went up - stupid apache related config file.

The issue can be seen clearly at clickety (all related css is in the source, but it's basicly overflow: scroll).

the issue is that i want the scroll bar to the right to correspond to the actual content on the site and not the way it is atm - a couple of lines too many of no content at all :confused:
 
If I understand what you want, which is to only have one scrollbar, just remove the overflow:scroll in this snippit of code:
HTML: 
<style type="text/css">
.oneColElsCtrHdr #mainContent {
	padding: 0 20px;
	overflow:scroll;
	max-height:600px;
	
}
</style>
 
I'd say the problem is with all of the div's and p's inline styles. All of the "top: -number" statements are messing with the overall calculated height which is resulting in the unwanted behavior. I wouldn't use "top" at all and just float, margin, and padding to get the desired effect. I don't have time to try anything right now, but maybe after I get home today I can take another look if the problem hasn't been resolved by then.

You also have some illegal tags (s1, s2) that you should fix (probably make them span tags with a class name). Also since you're using a XHTML DOCTYPE you should close you img tags (<img ... />) and for you link tag.
 
Wow, I thought someone else would have throw something else out there. Alright here's what I came up with as a solution.

For you CSS we got the below. I didn't change the CSS you already had present. the div.contact-l represents the "left" contact and the -r for the "right" contact. The span ones are for the s1 and s2 tags that I replaced for you in the XHTML below. The CSS may not match exactly what you had, but should be fairly easy to adjust. I wasn't able to test this in many browsers though, just Firefox and Safari. I also added filter after the opacity for it to work in IE. Can't remember if IE7 has support for opacity, but I know IE6 doesn't so needs filter set.

Code: 
div.contact-l, div.contact-r {
 position: relative; float: left;
 padding: 0 15px 0 5px;
 background-color: rgb(170, 170, 170);
 color: white;
 width: 300px;
 opacity: 0.7; filter: alpha(opacity=70);
}
div.contact-l {
 margin: 5px 12px 5px 0px;
}
div.contact-r {
 margin: 5px 0px 5px 12px;
}
div.contact-l p, div.contact-r p {
 position: relative;
 margin: 0; padding: 0;
 width: 300px;
 text-align: justify; color: black;
}
span.s1 { font-size: 12px; }
span.s2 { font-size: 14px; }

And for your XHTML here's a pair of contacts, which you have repeated a few times. You can repeat them as much as you need. I changed a few things. Got rid of the style attributes and put that info in the CSS. Got rid of your s1 and s2 tags and made them span tags as you can see. I also made the br and img tags XHTML compliant. This takes up less code as well.

HTML: 
	<div class="contact-l">
	<p>
		<img src="http://www.wochd.se/images/foto_christer.jpg" align="right" height="87" width="116" />
	 	<span class="s2">Christer Wallin</span><br />
	 	<span class="s1"><a class="black" href="http://www.wochd.se/">Wallin & Dalholmsboktryckeri</a><br /><br />
	 		mobil: 0708-350695<br /><br /></span>
	 		<span class="s2">Kontakta här!</span>
	</p></div>
	<div class="contact-r">
	<p>
		<img src="http://www.wochd.se/images/foto_annika.jpg" align="right" height="87" width="116" />
	 	<span class="s2">Annika Jalgén</span><br />
	 	<span class="s1"><a class="black" href="http://www.wochd.se/">Wallin & Dalholmsboktryckeri</a><br /><br />
	 		tfn: 046-211 31 38<br /><br /></span>
	 		<span class="s2">Kontakta här!</span>
	</p></div>

Hope this all makes sense. If not just let me know.
 
angelwatt said:
Wow, I thought someone else would have throw something else out there. Alright here's what I came up with as a solution.

For you CSS we got the below. I didn't change the CSS you already had present. the div.contact-l represents the "left" contact and the -r for the "right" contact. The span ones are for the s1 and s2 tags that I replaced for you in the XHTML below. The CSS may not match exactly what you had, but should be fairly easy to adjust. I wasn't able to test this in many browsers though, just Firefox and Safari. I also added filter after the opacity for it to work in IE. Can't remember if IE7 has support for opacity, but I know IE6 doesn't so needs filter set.

...
Click to expand...

yeah that's exactly what I was looking for but was unable to manage by myself - really thanks a lot! Or in other words a real life saver ;)
 
mufflon said:
yeah that's exactly what I was looking for but was unable to manage by myself - really thanks a lot! Or in other words a real life saver ;)
Click to expand...

Glad to hear. Part of me worried I took all that time to answer the wrong question, though it really only took about 20 minutes or so to put together. Hopefully it works in other browsers too like IE.
 
angelwatt said:
Glad to hear. Part of me worried I took all that time to answer the wrong question, though it really only took about 20 minutes or so to put together. Hopefully it works in other browsers too like IE.
Click to expand...

well it solves part of my problems - the reason why I did relative position and the text as relative position minus the correct position is that the text and the picture shouldn't have the same opacity as the background - looks odd where the background image changes from clear blue sky to in this case a field - but what I deduct from the comments and your answer is that it's somewhat hard to actually do, so I guess I'll have to play around with the opacity rather than relative positioning :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back