29 replies [Last post]
mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Hi,
I'm working on a page which has a banner with a fixed position at the top 150 pixels tall, and a side bar menu with some Js scripting.

I've setup some anchors to go to various points based on the menu, but when you click on the 'link' to the anchor it loads the text at the top of the page. (As usual) anyway to change the loading position of the anchor? I even setup a margin-top on the text it loads but the anchors seem to 'bi-pass' it or something.

Otherwise, I'm just going to use... a frame.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Unfortunately the forum

Unfortunately the forum can't help those who won't help themselves :shrug:

Quote:

2. Link
Provide a link where possible, and try to make the page as clear as you can, so it's easier for people looking at the code to see what's going on. If you can, put the CSS into the head of the document and use full paths to any images. This way, we can download the page locally and still see it how we should, without having to change paths etc.

If you can't upload the page anywhere, then at the very least post your code between the [ code] tags, so we can see what you've tried. Please include all CSS and HTML code - you cannot hope to deem what is necessary to diagnose the problem.

If you are stripping your code to a bare minimum to show us the problem, you must still include a doctype.

Before posting please read this.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

DEL

Double post

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

No Code posted because it's just an anchor.

<li><a href="#3">Large Serving Plate</a></li> <-- Anchor link
 
<a name="2" id="2">  <--- Anchor code.

So the question is, can CSS make an Anchor load further down the page instead of being at the very top? I have no other code.

Ok, maybe the code for the banner might help.

#headerwrapper{
	position: fixed;
	top: 0px;
	width: 100%;
	height: 155px;
	background: #990000;
	text-align: center;
	z-index: 1;
	color: #FCFCFC;
	padding: 20px;
}

This code is for screen resolution and menu placement nothing wrong with it. Might be handy for new people.

 
<SCRIPT language="JavaScript">
<!--
if (screen.width<=1024){document.write('<style type="text/css" media="screen">#outofnormal{position:fixed;left: 0px;top: 155px;width: 150px;padding: 5px;}html, body {margin:0; padding:0; left:0; margin-top:0; padding-top:0;}body{background-color:#FFFFFF;}</style>');}else{document.write('<style type="text/css" media="screen">	#outofnormal{position:fixed;left: 0px;top: 150px;width: 150px;padding: 5px;}html, body {margin:0; padding:0; left:0; margin-top:0; padding-top:0;}body{background-color:#FFFFFF;}</style>');
}
//-->
</SCRIPT>

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Hmm.. Would CSS Dimension

Hmm.. Would CSS Dimension Properties help with this one? Like Max-hight: Some value?

haven't used it. Just learning more and more CSS. Wish I picked this stuff sooner!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:...at the very least

Quote:

...at the very least post your code between the [ code] tags, so we can see what you've tried. Please include all CSS and HTML code - you cannot hope to deem what is necessary to diagnose the problem.

Got a Doctype?
Validated?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Hmm.. Even if I have no CSS,

Hmm.. Even if I have no CSS, all I want to know is how to move an ANCHOR from the top of the page to roughly 165 pixels lower. Lets pretend, I have No banner, and want to load an Anchor 165 pixels lower then it would normally. Any suggestions?

I'd appreciate any help you can give, but I can't do the code tonight. (Going to miss my train).

Otherwise the entire page works as it should. It's just the anchors are acting as they normally do. you click it goes tot he very top of the IE page. I want to CHANGE that. If it's possible.

Thank you,

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Any

Quote:

Any suggestions?

Sorry, none whatsoever. :shrug:

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mgent wrote:Hmm.. Even if I

mgent wrote:

Hmm.. Even if I have no CSS, all I want to know is how to move an ANCHOR from the top of the page to roughly 165 pixels lower. Lets pretend, I have No banner, and want to load an Anchor 165 pixels lower then it would normally. Any suggestions

Suggestions? How about a fact: we can't read minds.

Other suggestions? How about you start actually listening to us...we ain't just talking to hear ourselves you know.

As you've stated it above, the problem is unsolvable. There is insufficient data for a meaningful response. You are asking "how high is up?" and then getting mad when we refuse to answer an unanswerable question.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Sorry I figured an anchor

Sorry I figured an anchor would be self explanatory. Like if I made a page with no CSS and put several anchors in and wanted it to change the load position from the top of the IE page. (IE when you click a link it positions the anchor at the very top of the page. Pixel 0.

So I'm trying to find a way to move it down from the 'top' Pixel 0 to pixel 165.

I'll post the code in a moment.

Here is the CSS code

#mainwrapper {
	position: relative;
	width: 100%;
	height: 100%;
	padding-top: 155px
	padding-bottom: 20px;
	background: #FCFCFC;
	text-align: left;
	border: 0px solid black;
}
 
#headerwrapper{
	position: fixed;
	top: 0px;
	width: 100%;
	height: 155px;
	background: #990000;
	text-align: center;
	z-index: 1;
	color: #FCFCFC;
	padding: 20px;
}
 
 
#headertext {
	float: right;
	position: relative;
	text-align: center;
	color: #FCFCFC;
	border: 3px solid black;
	}
 
 
#sidewrap {
	position: fixed;
	top: 220px;
	left: 10%;
	width: auto;
	height: auto;
	background: clear;
	text-align: left;
	}
 
 
#cataloguewrap {
	position: absolute;
	top: 140px;
	padding-top: 50px; 
	padding-right: 50px;
	padding-left: 50px;
	width: 40%;
	height: auto;
	background: #FCFCFC;
	text-align: center;
	}
 
 
#headertext {
 
	position: absolute;
	top: 0px;
	width: 200px;
	height: 150px;
	background: #990000;
}
 
 
#mainbody {
	position: relative;
	left: 580px;
	top: 170px;
	width: 600px;
	height: auto;
	background-color: #FCFCFC;
	text-align: left;
}
 
.title {
	text-align: center;
	font-size: 48px;
	color: #203758;
	font-weight: 600;
}
 
.subtitle {
	text-align: center;
	font-size: 48px;
	color: #203758;
	font-weight: 600;
	padding-top: 100px;
	padding-bottom: 80px;
}
 
.space {
	height: 400px;
	background: clear;
}
 
 
h2 {
	text-align: center;
	color: black;
	font-size: 28px;
}
 
 
h3 {
	text-align: center;
	color: black;
	font-size: 36px;
}
 
 
h4 {
	text-align: center;
	color: black;
}
 
h5 {
	text-align: center;
	color: #A3A3A3;
	font-size: 30px;
	font-style: italic;
}
 
 
 
h6 {
	text-align: center;
	color: #A3A3A3;
	font-size: 18px;
	font-style: italic;
	border: 1px solid black;
	padding-top: 185px;
	padding-bottom: 185px;
}
 
 
#Title {
	position:fixed;
	left:0px;top: 0px;
	width: 100%;
	padding: 0px;
}
 
 
#CenterText {
 
	margin-top: 160px;
	margin-left: 35%;
	margin-right: 35%
}
 
 
#outofnormal{
	position:fixed;
	left: 0px;
	top: 155px;
	width: 150px;
	padding: 5px;}
 
 
.pindent {
	margin-left: 45%;
	margin-right: 25%;
}
 
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 195px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid #990000;
}
 
.glossymenu li{
position: relative;
top: 1px;
margin-top: 1px;
}
 
.glossymenu li a{
background-color: #203758;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 10px;
text-decoration: none;
border: 1px solid #203758;
}
 
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
 
.glossymenu li ul li{
float: left;
}
 
.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
 
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}
 
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
 
.glossymenu li a:hover{
background-color: #FCFCFC;
color: #203758;
border: 1px solid #203758;
}
 
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

And the majority of the main page html. I'm posting the majority because the rest just a repeat of each item with the ending being the closing of the div's and body and html tags.

Thank you any help would be appreciated.

</title>
</head>
 
<body>
<div id="Title">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td width="150" height="150" bgcolor="990000" border="0"><div align="right"><img src="img/ORlogo.gif" /></div></td>
    <td width=100% bgcolor="990000" align="center" border="0">
<!---Web Page Title in Banner--->    
        <h1 align="center"><font color="white">Ogilvy Renault LLP<br />
        United Way<br />
        Silent Auction 2008</font></h1>    </td>
    <td width="150" border="0" bgcolor="990000"><div align="right"><img src="img/uwlogo.gif" /></div></td>    
  </tr>
</table></div>
 
<div id="outofnormal">
      <ul id="verticalmenu" class="glossymenu">
<!--Sidebar Menu Area-->
 
<!--- Ticket & events area, 
==================================================================
Instructions
==================================================================
Look for <!--- Those are comments which will help you pin point the area you need to change for it to show up online.
Save your document as VersionB (Auction08b.html and test it to make sure your changes did not alter the webpage.
 
==================================================================
A HREF=" section is the link, remains the same
#test is the anchor. Change test to the item it relates to (see anchor comment), must have # to work.
">NAME</a> where NAME is the text shown on the screen. Change NAME only.
 
NOTE: Anchor values must Uniquely identify an item. Make sure they do not repeat.
---->
 
 
 
<!--
 
		// **************** FOR LEFT MENU -- REPLACE # AND UPDATE ITEM NAME **************** //
 
 
            <li><a href="#1">Item Name</a></li>
 
-->
 
 
<!--
 
		// **************** FOR CATEGORIES WITH NO ITEMS YET.  POST ONCE ONLY **************** //
 
		<h5>
	Items will be posted soon. </br> 
	Thank you for your patience!</h5>		<p align="center">
 
 
-->
 
 
 
<!--
 
 
		// **************** COPY ALL THE FOLLOWING CODE WHEN ADDING A NEW LOT **************** //
 
	<a name="#" id="#">
 
	<h2>Lot # ##</h2>		</a>
 
					<h3>
	Object Title			</h3>		<p align="center">
 
 
		<h6>
	Photo will be posted soon. </h6>		<p align="center">
 
 --OR--
	<img src="images/NAME.jpg"/>	</p>
 
					<p  align="justify">
	Detailed Description
					<p align="center">
 
					Donated by:<br />
	SOMEONE				</p>
					<p align="center">
 
	Starting Bid: $25		</p>
					<p align="center">
 
 
	<a href="mailto:[email protected]?subject=Lot # - - My bid is $">Click here to bid</a></p>
	<hr size=2 width=400 />
 
		<!-- Next Auction item -->
 
 
 
<!--			// **************** END OF CODE **************** //  	-->
 
 
 
 
 
<!--			// **************** LEFT MENU CODE **************** //  	-->
 
 
      <li><a href="#Tickets">Tickets &amp; Events</a></li>
            <ul> 
 
          </ul>
 
 
 
     <li><a href="#Electronics">Electronics</a></li>
            <ul>
            <li><a href="#11">Desktop #1</a></li>
            <li><a href="#12">Desktop #2</a></li>
            <li><a href="#13">Desktop #3</a></li>
            <li><a href="#14">Desktop #4</a></li>
            <li><a href="#15">LCD Computer Monitor #1</a></li>
            <li><a href="#16">LCD Computer Monitor #2</a></li>
            <li><a href="#17">LCD Computer Monitor #3</a></li>
            <li><a href="#18">LCD Computer Monitor #4</a></li>
            <li><a href="#8">Laptop Bag</a></li>
 
           </ul>
 
 
 
     <li><a href="#Music">Music &amp; Movies</a></li>
            <ul>
 
            </ul>
 
 
 
          <li><a href="#Certificates">Gift Certificates</a>
	    <ul>
            <li><a href="#21">Coles</a></li>
            <li><a href="#20">Acqua Ristorante</a></li>
            <li><a href="#9">Day Off</a></li>
            <li><a href="#19">Harveys</a></li>
           </ul>
 
 
 
      <li><a href="#Jewellery">Jewellery &amp; Clothing</a></li>
            <ul>
 
          </ul>
 
 
 
      <li><a href="#Home">For the Home</a></li>
            <ul>
            <li><a href="#1">Small Serving Plate</a></li>
            <li><a href="#2">Large Serving Plate</a></li>
            <li><a href="#3">Large Serving Plate</a></li>
            <li><a href="#5">Coffee Brewer</a></li>
            <li><a href="#10">Large Serving Plate</a></li>
             </ul>
 
 
 
      <li><a href="#Art">Art</a></li>
            <ul>
 
           </ul>
 
 
 
   <li><a href="#Food">Food</a></li>
            <ul>
           <li><a href="#4">Smoked Salmon</a></li>
          </ul>
 
      <li><a href="#Baskets">Baskets &amp; Bundles</a></li>
            <ul>
 
           </ul>
 
 
 
      <li><a href="#Misc">Miscellaneous</a></li>
            <ul>
            <li><a href="#6">Tinker Toy</a></li>
            <li><a href="#7">U of T Portfolio</a></li>
            </ul>
</div>
 
 
 
 
 
<!--- Anchors start with <a name="VALUE" id="VALUE"> Value is the number or name you give the product, 
this must be exactly the same as the MENU ANCHOR VALUE.--->
<!--- ANCHOR --->
 
 
 
 
<!--			// **************** TITLE **************** //  	-->
 
 
<div id="CenterText">
    <a name="toppage" id="toppage">
 
<div class="title">
 
</br>
 
		Welcome to the new </br>
		Ogilvy Renault ~ </br>
		United Way </br>
		Auction Web Site! </br> </br>
</div>
 
<p align="left"> <font size="5" color="#203758">
		Use the left side bar to easily navigate through the site.  </br></br>
		Click on the "Click here to bid" link to submit your bid. </br></br>
		<center> Vote Early! Vote Often! </center></br>
	<hr size=2 width=400 />
 
</font></p>
 
 
 
 
<!--			// **************** ITEMS TO BID ON **************** //  	-->
 
 
<!--			// **************** TICKETS **************** //  	-->
 
 
<div class="subtitle">
 
	<a name="Tickets" id="Tickets">
		Tickets &amp; Events
	</a>
</div>
 
 
	<h5>Items will be posted soon. </br> Thank you for your patience!</h5>		<p align="center">
 
 
 
 
 
 
 
<!--			// **************** ELECTRONICS **************** //  	-->
 
 
<div class="subtitle">
 
	<a name="Electronics" id="Electronics">
		Electronics
	</a>
</div>
 
	<a name="11" id="11">
 
	<h2>Lot # 11</h2>		</a>
 
					<h3>
	Desktop Computer #1			</h3>		<p align="center">
 
 
 
	<img src="images/Lot#11.jpg"/>		</p>
 
					<p  align="center">
 
	<i>item not exactly as shown</i></br></br></br>
	<b>Specs Include:</b> </br></br>
	Small form Factor Desktop </br>
	P4 3.0 GHZ Processor </br>
	40GB Hard Drive </br>
	1GB RAM and Windows XP Pro </br>
 
					<p align="center">
 
					Donated by:<br />
	OGILVY RENAULT IT DEPARTMENT				</p>
					<p align="center">
 
 

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Solved: Used the following

Solved:

Used the following to fix it. I just adjusted the text.
Used relative and z-index to push it behind the banner. and TOP worked perfectly for what I wanted.

#CenterText {
	position:relative;
	z-index:-1;
	top: 165px;
	margin-left: 35%;
	margin-right: 35%
}

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

NOTE: While it works, it

NOTE: While it works, it does not let the user 'select' text properly. Instead when you click and drag, it thinks your mouse is 165 pixels lower.

While this isn't really an issue for this type of site, I'm wondering if their is another way to do this?

Thank you,

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Not Solved

Ok on top of the select issue I now cannot click in the links that are setup. So now Anchors are at least 165 pixels lower, but the cursor doesn't register the link.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mgent wrote:Sorry I figured

mgent wrote:

Sorry I figured an anchor would be self explanatory.

Your thinking has shown evidence of not being very good in this thread. Maybe you should let us think and give us what we asked for.

Quote:

And the majority of the main page html. I'm posting the majority because

...you don't think very well.

You came to us for advice, we told you what we need to help you, and you refuse to give it to us.

I wonder if this site has an "ignore" list I can put you in.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Hmm.. Hi Ed, Not meaning to

Hmm.. Hi Ed, Not meaning to be mean or anything, but I did post the entire site, I'll go back and edit it for you.

All I excluded was the following code. I'm not sure what else you want? The Java Script? I cannot post a link. I cannot post a 'link' to it because it's confidential at the moment.

If you cannot help, I understand.

I've solved the problem by using frames. Sadly.

I will at a later time post a link to my own site, after I copy the contents (excluding images) and edit all the email links. Then you'll have your link

</div>    
</body>
</html>

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mgent wrote:Hmm.. Hi Ed, Not

mgent wrote:

Hmm.. Hi Ed, Not meaning to be mean or anything, but I did post the entire site, I'll go back and edit it for you.

What you posted shows totally invalid html, in fact it doesn't qualify as being html at all with no doctype, no HTML element, no HEAD element. If that's your site then it's a miracle any browser shows it at all!

And I just noticed you are using FONT tags!!! Good grief.

Stop!! Go to the HTML Dog site. Go through the tutorials. Learn how to write a web page - you have no idea how to do it now, based on the available evidence at least.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Considering this board is

Considering this board is meant to help people and I'm working on a chartiy website out of my free time. And you've been less then friendly. I don't appreciate your comments.

Also, while I did read the 'we need a link' I believe that anybody who's been doing HTML for any amount of time, Knows how an Anchor works. Even if I hadn't made a webpage and asked if it was posible to change the position, the right thing to say may have been to ask me to make a page, etc. Not scold me.

While I was frustrated by the lack of understanding, their is no reason to belittle me, If anything the code I posted clearly shows a closing HEADER tags. Obviously they were left out.

Also this site is a 'mod' of my design, another preson who's learning set it up like that. And I removed the top part of the doc for this page.

Regardless, I'll still post a link to a test site with the problem I was having. Surely your still here to help people and not try to be little them. Because if we could find a solution to having anchors load in different locations on the screen, I'm sure that would handy for at least a few people.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What you are asking is not

What you are asking is not possible, an anchors purpose is to either direct to an off page link/external http or to link to a named or IDed element on the page or another page, but it links to that named element at it's stated position on the page.What it sounds like you are after are includes, where a section of page is called in via a link, these are similar to the concept of frames but they are in fact full page refreshes. frames are considered pretty much obsolete and not many will still be using them, includes are the approach you want to take and if page refresh is a problem then look into making the call an Ajax one.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Thank you, Thank you! I

Thank you, Thank you! :thumbsup:

I ended up using a frameset.. not what wanted, but given the deadlines.. it's all I could do. Smile

I'll look up more info on those includes and will look into those 'dog html' links what's his name mentioned. Smile The more reference material on CSS I get the better.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is really a markup

Smile

This is really a markup backend issue rather than a css one; css simply styles or adds a presentation layer.

'Includes' are a backend issue as they are processed server side either through SSI or PHP includes - to name but two methods - if you want to call elements in without the whole page reloading - which isn't really an issue especially not from a speed point of view - then Ajax will do that simplest way of implementing is to use a scrip library such as jQuery to provide an easy in to stuff like Ajax calls.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mgent wrote:While I was

mgent wrote:

While I was frustrated by the lack of understanding, their is no reason to belittle me,

No need, and I didn't do that. But you seem determined to not follow good advice and I felt the need to do something to get you thinking. However if you are going to persist in using FONT tags ten years after they became both unnecessary and also generally recognized as bad, well you musn't be surprised if people react rather strongly.

Quote:

If anything the code I posted clearly shows a closing HEADER tags. Obviously they were left out.

We asked you to show us ALL your code and you said that you had done that. You hadn't.

We ask for all your code for a reason. It's not just a whim on our part, but we know that there are still, alas, many many pages out there without doctype declarations. If you don't have one you can just forget about standards compliance. Do you have one? If so is it a STRICT one? You haven't shown us enough so that we can know one way or the other, but it is vitally important.

Something so seemingly harmless as putting a comment before your doctype declaration messes up standards rendering in IE. Without seeing all your code we'll never know and you might never find out your error.

We ask to see ALL your code because we know from experience that that's what we need if we are to help. We asked politely and you ignored us. What are we to make of that? That you aren't really ready to be helped, perhaps?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

While I can appreciate what

While I can appreciate what your saying.
Clearly you did not need my code to tell me Anchors positions cannot be altered. The Moderated cleary saw what I was asking for. That was why I resisted doing a additional work on a limited time frame. I was frustrated that I could be asking about a webpage that wasn't even designed.
That was why I posted some of the sections of code. Just related to anchors.

dkrasne
Offline
newbie
Last seen: 11 years 12 hours ago
Joined: 2008-10-16
Posts: 3
Points: 0

There is actually a way -- in some browsers

I've been attempting to do the exact same thing, mgent, and there is a way that I discovered. However, it only works in Firefox and IE, not in Safari or Chrome. If anyone can think of a reason why and how to make it work in those browsers as well, I'd be very appreciative.

I will just say (given that I've seen some incredibly rude and pointless flames in this forum): I am not going to post links or full code. I don't have time and I'm posting the necessary pieces.

Anyway:

#topat150 {padding-top: 150px;}

Then will jump your anchor to to 150px down the page -- IF you are using Firefox or IE. (Amazing, something actually works in IE!)

mgent
Offline
Regular
Toronto
Last seen: 11 years 2 days ago
Toronto
Timezone: GMT-4
Joined: 2008-10-09
Posts: 14
Points: 0

Very nice, thanks for the

Very nice, thanks for the post.
Did you have any issues with links or text selection? I used margin-top I believe and while it positioned text perfectly it did not 'sync' with were the cursor was.

Thanks, I'll test that code out later. Sites already done, but I've got another one to work on.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I must be dumb. I've read

I must be dumb. I've read and re-read and re-read this thread like 3 times now, and I still haven't figured out what you guys are talking about. At first I thought it was about in-page (skip) links-- that's usually what you'd use to move the focus further down the page (the purpose of which is to bring a long page's specific area to the top of the visitor's screen so they don't have to scroll all day to get there, or worse, Tab all day to get the keyboard focus there) but then Hugo said something about frames which is something completely different so I'm totally confuzled.

I also kept waiting for a page link or something to get posted cause I want to see what this is supposed to do. I've made plenty of skip links (and there WAS an issue with IE not bringing the visitor down, but back to the top of the page, if the link didn't have Haslayout triggered... but didn't think that was what you meant) but nothing that sounds quite like this.

I did also once make a bunch of skip links but they didn't move the actual (keyboard) focus around the page, except in IE. So, this sucked for keyboarders (the page jumped fine visually) so I had all these skip link destinations hidden inside all sorts of weird things like h2's n things. IE kept the focus where the visual focus was while the other browsers said, You can't focus on that element! What I haven't figured out yet was why they didn't work on the one page but DID work on an older page I'd made like a year ago.
Is there a hair-pulling smiley?

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The post (with respect to

The post (with respect to OP) was not clear in the first instance, when clarity is not forthcoming then people tend to read into it what they think is the issue, my reference to frames was due to the issue sounding as though the nature of frames was required but without the actual encumbrance, hence my path led to includes :shrug: I may well have got the wrong end of the stick completely, but regardless the matter seems to have run it's course? and I move on.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Immediately after the

Immediately after the banner, add your target anchor. The anchor must be a block element for the margin-top have any effect.

<div id="banner">...</div>
<a id="top"></a>  <!-- cannot be the child of body use <p> 
                       and set font size and margins to zero
                       in that case -->
===============
#target {
  margin-top: 150px;
  display: block;      /*not required if using <p>*/
  }
If you use

, it should not be empty. An empty comment is good enough.<p id="top"><!----></p>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dkrasne
Offline
newbie
Last seen: 11 years 12 hours ago
Joined: 2008-10-16
Posts: 3
Points: 0

Here's a link

At this point, I can post a link. I couldn't before because the pages weren't up in the first place.

A demonstration of what *I'm* talking about, at any rate, can be found here: http://classics.berkeley.edu/news/events/identityconf/abstracts.html

(And yes, I know, a lot of the code is totally unclean and undoubtedly doesn't validate. I didn't have time for niceties. Sorry.)

In any case, the implementation works one way ("properly") in Firefox and IE, and differently in Chrome and Safari. I wasn't clear whether one of the previous posters was attempting to explain that difference or not. (Thanks if you were, but I'm possibly being obtuse.)

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

OH! Skip links in a Fixes-Header page!!!!

*posted earlier...*Oh, wait, so you didn't want anchors to do anything special, you wanted a fixed header with padding on the content?

Now I feel extra stupid. My virtual box died cause I had a kernel update so I can't look in Chrome, Saffy or IE, only Opera and FF, but in FF is sure looks like fixed-header setup : )

In which case, you might want to read this page: http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm
There are like a bunch of other versions of this, however none of them have the sidebar at the right but I'm sure you can figure it out.**

*edit2 OH Oh oh oh o o o o ohhhhh....

You have skip links in a fixed-header page! Aha!!!

Heh, what you do then is you set your destination id on something ABOVE the part you want the focus to move to. Meaning:
if you want the paragraph id="foomanchoo" to be at the top, you move that id of "foomanchoo" to the next paragraph up. This way, the real "foomanchoo" paragraph isn't hidden by the header.

There's prolly a Javascript way to do this more smoothly...

Or one of the Crusties here knows a better way...

ah you could also not actually have your main content slide under the fixed header like that. You could absolutely position that section to be x-px down (as far down as where the fixed header ends).

I did that here: http://stommepoes.nl/fakeframes.html
If you scroll down after the photos there's a link called Here's a link! If you click, the desination is the red text. I can stop it from going under the header section (pink) however if I wanted it to also not go under the abso-po'd name "stomme poes" then I'd need to set that #later destination id to something a few lines above where I really wanted the link to go. Otherwise you see the red is partially hidden.

If I'd added some top-padding or a taller line-height to the p id="later" then I could prolly also stop the very tops of the letters from getting clipped.

I'm no expert, but I fake one on teh Internets

dkrasne
Offline
newbie
Last seen: 11 years 12 hours ago
Joined: 2008-10-16
Posts: 3
Points: 0

Fake-frames is totally the answer. :)

AHHHHH. Thank you! The fake-frames version is, essentially, what I was looking for. I don't know if I'll rewrite my pages now (I have other work I should be doing!), but it's good to know.

(Putting the skip-link destination higher than where I wanted it to move to wouldn't work because different size windows would obviously have different distances between the anchor and where I want it to end up.)

I do still wonder why padding-top works differently in Chrome and Safari. Smile