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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

simple positioning? 1

Status
Not open for further replies.
technoknow

technoknow

Technical User
Apr 19, 2002
121
US
I have an image, "nav_table.gif" that I'm trying to get the text link images "companyLink.gif" and "portfolioLink.gif" to line up on top of. The links should be on the first 2 lines. No big deal right? It looks right in FF but not in IE 6. Here is the HTML
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">[/URL]
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>PilgrimPage - Company Information</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
<!--
@import url("style1Working.css");
-->
</style>
</head>
<body>
<!-- This is the main container for the page-->
<div id="container">  

       <!--Navigation lines -->
       <div id="navLines"></div> 
  
       <!--navigation links -->
      <a href="company.html"><p class="company_link"></p></a> 
      <a href="portfolio.html"><p class="portfolio_link"></p></a> 
</div>
And here is the CSS:
Code: 
/* This is the main container */
#container	{
		position: relative;
		left: 25%;
		top: 0px;
		width: 670px;
		height: 900px;
		}
/* navigation */
#navLines	{
		background: url(images/nav_table.gif) no-repeat;
		position: relative; 
		left: 0px;
		top: 10px;
		width: 82px;
		height: 97px;
		z-index: 0;
/* Navigation Links */
p.company_link	{
		background: url(images/companyLink.gif) no-repeat;
		position: relative; 
		margin: 0;
		left: 10px;
		top: -82px;
		width: 57px;
		height: 9px;
		cursor: hand;
		z-index: 1;
		}  
p.portfolio_link
                {
		background: url(images/portfolioLink.gif) no-repeat;
		position: relative; 
		margin: 0;
		left: 10px;
                top: -75px;
		width: 64px;
		height: 9px;
		cursor: hand;
		z-index: 1;
		}
I guess I'm just not understanding this CSS stuff.
I've read about relative positioning keeping the document flow normal. But what is the normal flow? I can get this to work fine with absolute positioning but after I line up all of my images (about 12 or so) I start having trouble getting things to look right.
Why does IE put the "Company" link in the right place (in first place) but then put "Portfolio" down to the 3rd line?
Why does "top" have to be a negative number to get the links in the right place?

TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
Sort by date Sort by votes

You haven't closed your navLines CSS (missing the closing brace). This is probably why your CSS is failing.

Hope this helps,
Dan

 
Upvote 0 Downvote
Nope, thanks Billy, but I just didn't paste it correctly. Here is a link to the simple code, just 3 images. The "company" should be in the first box and "portfolio" in the second. It views correctly in FireFox1, Netscape7.2, Opera7.5 but not IE6. Can anyone tell me why?
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
Upvote 0 Downvote
Ok. Let's begin:

1. You cannot nest <p> tags in links(<a>). Paragraphs (<p>) are block level, while links are inline. Blocks do not fit in line.

2. You are overly complicating your life. I am too tired to give you the real thing, so how about some pseudo code:
Code: 
<div id="navcontainer">
 <a href="link1.html" class="portfolio_link"></a>
 <a href="link1.html" class="company_link"></a>
</div>

and CSS:
#navcontainer    {
        background: url(images/nav_table.gif) no-repeat;
        position: relative;
        width: 82px;
        height: 97px;
}

#navcontainer a {
        display: block;
        width: 57px;
        height: 9px;
}

.company_link {
        background: url(images/companyLink.gif) center center no-repeat;
}  

.portfolio_link {
        background: url(images/portfolioLink.gif) center center no-repeat;
}
Don't expect this to work out of the box. Let's just see what we did. We made a container for the lines (eventhough lines would be made even simpler with borders, but if you are looking for a more picturesque version). We put the links there, assuming they all have the same height and width (since they fill the spaces from navcontainer which has even spacing). That is why all links inside that container are treated as blocks and have fixed size. Now we only need to paste different images to every link and that's that.

There are many problems with this approach, one of the biggest is people not seeing anything if they don't see background graphics, etc. You might want to reconsider and make that kind of menu strictly out of text and borders, but if not, this should steer you on the right track to make the code render correctly.
 
Upvote 0 Downvote
Vragabond, thanks. I've tried what you said, I think, and it works in FF and NN but doesn't show the link in IE.
Code: 
the HTML
<div id="navLines"> 
	<a href="Link1.html" class="company_link"></a> 
 </div>

and the CSS:
#navLines	{
		background: url(images/nav_table.gif) no-repeat;
        position: relative;
        width: 82px;
        height: 97px;
	}
#navLines a {
        display: block;
        width: 57px;
        height: 9px;
			}
.company_link	{
		background:url(images/companyLink.gif)center center no-repeat;
		}
Thanks,
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
Upvote 0 Downvote
Check this:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">[/URL]

<style type="text/css">
#navLines    {
        background: url([URL unfurl="true"]http://jimsgotweb.com/images/nav_table.gif)[/URL] no-repeat;
        position: relative;
        width: 82px;
        height: 97px;
}

#navLines a {
        display: block;
        width: 82px;
        height: 16px;
	font-size: 0;
}

.company_link {
        background: url([URL unfurl="true"]http://jimsgotweb.com/images/companyLink.gif)[/URL] center center no-repeat;
}  

.portfolio_link {
	background: url([URL unfurl="true"]http://jimsgotweb.com/images/portfolioLink.gif)[/URL] center center no-repeat;
}
</style>
<div id="navLines">
    <a href="Link1.html" class="company_link"></a>
    <a href="Link1.html" class="portfolio_link"></a>
    <a href="Link1.html" class="company_link"></a>
    <a href="Link1.html" class="portfolio_link"></a>
    <a href="Link1.html" class="company_link"></a>
    <a href="Link1.html" class="portfolio_link"></a>
 </div>
IE6, Mozilla and Opera all produce the same thing.
 
Upvote 0 Downvote
Oh, so the font-size:0 gets IE to set the spacing right! Thanks Vragabond, for helping me out. I wish I could show my appreciation more, but here's a star.
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
99
vacunita
vacunita
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
80
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
98
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
103
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
65
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top