Jump to content

Positioning/Rendering Problem


Andrea

Recommended Posts

I was trying to find a solution for another board member (http://www.killersites.com/community/index.php?/topic/6445-text-on-wrapper/page__pid__29079__st__20&do=findComment&comment=29079) and thought I had nailed what he was asking for. I worked out this page: http://aandbwebdesign.com/KSforum/everglades2.html which I tested in FX, IE9, Chrome, and my iphone, and it looked just fine.

 

This is what I see (the text box with the rounded corners moves into or away from the picture depending on resolution)

: everglades.jpg

 

But I hear that on some views (have no detail on browser), both the text box and the "Purchase Info" link are out of place. One friend looked on her iPhone and first, only the text box was astray, but the second time she looked, it was fine.

 

Since I can't see any of it and my code looks good (tom me) - what am I doing wrong here?

Link to comment
Share on other sites

I don't care about IE 5.5 - and the box will slide into the image if the resolution is less. I don't see that as a problem, so. But what I hear is that the text box appears in the top right corner, and of the "Purchase Info" line, I only hear it's 'out of place'.

 

I just have no idea why these elements appear out of whack, under what circumstances, and what I'd to fix it. Maybe I'm missing some dimensions - don't know but would love to figure this.

Link to comment
Share on other sites

Yes, but that expands the wrapper which is not the effect want - I want exactly what's showing on the image I posted, but don't understand why some people see things out of whack and what can be done to make my idea work. (assuming it's possible)

Link to comment
Share on other sites

Yes, but that expands the wrapper which is not the effect want - I want exactly what's showing on the image I posted, but don't understand why some people see things out of whack and what can be done to make my idea work. (assuming it's possible)

 

 

Ok Try this from what I tested it seems to work ok in firefox v6.02 although I'll leave it up to see if it works in other major browsers.

 

 

This will stop the floating text box from overlapping your image when you resize the browser window. Which I think is what

you want. everthing else should look the same. This shouldn't expand your wrapper I think.

 

 

first try to restructure your html move the #floater HTML DIV inside <div id="wrapper"></div>

 

like this:

 

<div id="wrapper">
<div id="header">
		<h2> Artistic nature photography</h2>
</div>

<ul id="navlist">  
		<li id="active"><a href="index.html">home</a></li> 
	<li><a href="aboutus2.html">about</a></li>
	<li><a href="gallery2.html">everglades</a></li> 
	<li><a href="islandlife.html">shorelines</a></li> 
	<li><a href="maninnature.html">man in nature</a></li>
	<li><a href="contact2.html">contact</a></li> 
	<li><a href="prints2.html">prints</a></li>
	</ul>

<div id="post"> 
	<div id="pic"><img width="720" height="479" src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach"> 
		<h3>storm brews over barbados beach</h3>
		<div class="picnav">
			<div class="arrownav"><a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a>
			</div>
			<div class="arrownav2"><a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a>
			</div>
		</div>
	</div>
<div id="floater">
	<p>a magical display of light and color appeared at sunset in the moments prior to a rain storm. in more northern climates it rains and the day becomes grey, but in this delightful place the rains go away sometimes as quickly as they began and the sky resumes its pleasant state</p>
</div>
		<p class="purchase"><a href="prints2.html">Purchase Info</a></p>
</div>

	<div id="footer"><p>© All material and copyright by Wayne Willison. All rights reserved.</p>
</div>
</div>

 

2. In css make the #post position relative like below

 

#post {
   position: relative;
}

 

3. change your css #floater to below

 

#floater {
   position: absolute;
   width: 150px;
   background: #1b1b1b;
   top: 100px;
   color: #C0C0C0;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   border: 2px solid #C0C0C0;
   right: -90px;
}

 

 

See if that works :)

Link to comment
Share on other sites

- and the box will slide into the image if the resolution is less. I don't see that as a problem,

But what I hear is that the text box appears in the top right corner, and of the "Purchase Info" line, I only hear it's 'out of place'.

I just have no idea why these elements appear out of whack, under what circumstances, and what I'd to fix it. Maybe I'm missing some dimensions - don't know but would love to figure this.

 

I did try your suggestion: http://www.aandbwebd...everglades3.htm - and it appears to work - thank you for your help - but so did my way: http://www.aandbwebd...verglades2.html

 

Since I never saw the box in the upper right corner or the "Purchase Info" line out of place to begin with, I can't be sure it this works for whoever saw my stuff out of whack - and I still don't understand what the problem with the code is/was, that I see things just fine in Fx, IE9, Chrome, Opera on 2 different computers and my iPHone 3 (OS5 - Safari), and some other people see things out of place.

 

Does anybody have any insights?

 

 

What makes it even stranger, one friend checked the site for me on her iphone, and it was out of whack. But when she checked it again later that day - I had NOT touched it all day - it displayed fine. Same iPhone - how the heck????

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...