Anchoring to <div>

HTML & CSS
1

Hi

I need to create an anchor in the header to a div that stays display:none in css (.back) until late in the media queries, and is supposed to appear and function when the div is brought into life. I’ve tried countless formulas including this one, but…

      <div id="logo">

<img id="#att0"><div class="img-container"><img title="Logo" alt="Logo" src="/Pinto/images/tinyLogo.png" width="80" height="55"></div>
                   </div>

and (the logo is also display:none in the main css)

@media screen and (max-width:500px) {
#logo {
        position:absolute;
        left:auto;
        right:50px;
        top:50px;
    }
    .back {
        display:inline-block;
    }

My problem is that I cannot get the anchor to work:

<div class="back"><a href="#att0">BACK TO TOP</a></div>

All anchors to other parts of the page work well. It’s marrying the anchors with divs that had been display:none until late that does not work

2
  1. Why do you have img, div, img all nested like that?
  2. Your image doesn’t have id=“logo”. Nothing in your above code has id=“logo” so how can you expect a media query using #logo to hide anything?

Fix your invalid code first.

3

You are linking to this ID.

<img id="#att0">

You meant:

<img id="att0">

Remove the hash (#).

However why add that silly extra image element when you have good target with the logo.

e.g.

<div class="back"><a href="#logo">BACK TO TOP</a></div>
4

Hi Both

Marvellous! It does not go to the very top, but it’ll do for now.

Many thanks

I have one final (promise…) little teaser on this page: In earlier posts with Ryan to sort out the appearance of the little logo in the header he suggested and it worked well

#logo {
    position:absolute;
    left:auto;
    right:50px;
    top:50px;
}

Now, I’ve tried to do the same to the title at @710px to keep it in view but the moment it kicks in the clock disappears. I came to the conclusion that this has to do with padding of either the titla or the logo )which is “garaged” out of sight until it is needed.

I’ve played with all the paddings ana marginsa nd No good.!

many thanks again

PS - the page is here now http://pintotours.net/Americas/DomRepublic/sightsStoDom.html#logo

5

The header seems to be working ok and I don’t see a 710px on the title so I must have misunderstood what you wanted :smile:

Can you clarify what’s wrong or what you wanted to happen?

6

I am soory Paul, I gave you the wrong link. The problem is on the second page that you acn see at

http://pintotours.net/Work/Punta/paul.html

7

The clock never disappears for me no matter what resolution I do.

8

It’s not my day. I gave you the right html but the wrong css.

if you narrow the screen the title at around @710 starts getting covered by the right edge. So I tried to apply

   #header #section1 #title {
    padding-left:235px;
    white-space: nowrap;
     position:absolute;
    left:auto;
    right:50px;
}

to #title (it’s there now). The title now works beautifully, but the clock disappears!

http://pintotours.net/Work/Punta/paul.html#att9

9

It’s becuase of the left padding on “#header #section1 #title”. You can do something like this. Not the best but it gets the job done. You know I don’t like this page :wink: .

#header #section1 #title {
padding-left: 0;
margin-left: 400px;
}
10

There’s nothing like an honest man…

So, I put this now in the @710 and It’s still the same:

#header #section1 #title {
    padding-left:0;
    white-space: nowrap;
    position:absolute;
    left:auto;
    right:50px;
    margin-left: 400px;
}
11

I mean this rule needs to be changed to padding-left:0;margi-left:400px;. It’s in your HTML. Undo what you did.

<link rel="stylesheet" href="sights.css">
<script src="/Pinto/scripts/clock.js"></script>
<link rel="icon" href="/favicon.ico">
<style type="text/css" media="all"></style>

<style>
#header #section1 #title {  
   padding-left:360px;   
}
12

Magic!

Many thanks.

Now, I’ll give you some time off…

Regards

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.