Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning problems 1

Status
Not open for further replies.
richcleverley

richcleverley

MIS
Jul 28, 2005
358
FR
Hi all,

I'm just trying something out for future use with transparent layers and have run into a few problems with teh positioning.

Have a look at
The problems I have are these:

the blue vaertical bars should be aligned to the top of the background image, but in both FF and IE they aren't quite - FF has a much bigger gap at the top.

Also, the horizontal bar should span the width of the browser window, it does in IE, but not in FF.

I also would like the text in the blue bars to not have the transparency applied to it.

I knwo the image is resized by the browser, this is only a test at an idea, in a proper page it would be resized before I upload it.

Any one any ideas?

Thanks

Richard
 
Sort by date Sort by votes
1. The gap at the top of the blue bars (at least in FF) is due to the collapsing margins applied by the <ul> element.
2. The horizontal bar does not span the entire width because it is inside maincontent, which is floated (and as such has a width of auto). If you remove the float, the bar extends.
3. The text transparency is not really possible because transparencies are inherited. That is, your text is on a transparent canvas, so it cannot be fully opaque anymore.

That should be it. Things were tested to work in FF.
 
Upvote 0 Downvote
Thanks Vragabond,

Yep, that works in FF now. I still get what looks like a 2px gap at the top of the bars in IE though.

I've also managed to get the text to have no transparency by taking out of the transparent div and positioning it on top.


Just the IE problem to sort out now.

Richard
 
Upvote 0 Downvote
actually, no it hasn't.

I noticed that the horizontal bar dissapeard, so changed things about a bit and now the text is gone.

Richard
 
Upvote 0 Downvote
Maybe rather than dealing with margins in your situation, you should have relative positioning and top/left settings. I guess it brings its own array of problems, but using that, the text and the bar do show up on FF.
 
Upvote 0 Downvote
yes, that seems to work nicely, still have the gap at the top in IE though, just can't seem to work out where it is being caused.

Thanks Vragabond, here's a star for your time and help.

Richard
 
Upvote 0 Downvote
hmm, also using the relative positioning causes teh height of the page to be huge, any way round this or have I made a fundamental mistake?

Richard

 
Upvote 0 Downvote
Got it finally, just used the relative poitioning on the ul and it works.

I'll post the code in case others might be interested.

css
Code: 
body{
margin:0;
padding:0;
background-color:#CECC84;
}

.horopa{
filter:alpha(opacity=25);
opacity: 0.25;
width:100px;
height:100%;
background-color:#6699FF;
margin-top:-600px;
margin-left:20px;
padding:;
}

.horopa2{
filter:alpha(opacity=25);
opacity: 0.25;
width:50px;
height:100%;
background-color:#6699FF;
margin-top:-600px;
margin-left:150px;
}
.horopa1{
filter:alpha(opacity=25);
opacity: 0.25;
width:100%;
height:100px;
background-color:#FF6633;
margin-top:-550px;
}
.menu{
position:relative;
top:20px;
left:25px;
float:left;
}
.maincontent{
padding:0;
margin:0;
height:600px;
}

The horopa parts are the three bars (I know the names are a bit rubbish, just a test though).

HTML
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="images/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="maincontent">
		<img src="images/cannes_croisette.jpg" width="800" />
		
		<div class="horopa">
		</div>
		<div class="horopa2">
		</div>
		<div class="horopa1">
		</div>
		<div class="menu">
			<ul>
			<li>
			test
			</li>
			<li>
			test2
			</li>
			</ul>
		</div>
	</div>
</body>
</html>

I've seen sites that do this type of think before but they tend to use tables and sliced images, so having a css version that works (hopefully in safari too) could be very useful for future projects.
Richard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
136
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
173
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
177
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
107
c0deM0nK424
c0deM0nK424
h2mhd
  • Locked
  • Question
problems with accent (spécialisé Ã)
Replies
3
Views
143
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top