Anchors and CSS

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

Before posting please read this.

Double post

<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>

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!

Got a Doctype?
Validated?

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,

Sorry, none whatsoever. :shrug:

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.

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">
 
 

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%
}

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,

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.

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.

...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.

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>

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.

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.

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.

Thank you, Thank you! :thumbsup:

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

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

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.

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.

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?

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.

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!)

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.

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?

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.

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>*/
  }

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

cheers,

gary

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.)

*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.

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.