CODEWITHSUNDEEP
htmlcss
Lawrence Yoon
Lawrence Yoon

Reputation: 13

position: fixed gets in way of anchor?

body {
  margin: 0px;
  background-color: rgba(195, 246, 255, 0.48);
}

.nav {
  background-color: rgba(190, 190, 190, 0.72);
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  text-align: center;
  height: 85px;
  border: 1px solid black;
}

ul {
  position: relative;
  top: 6px;
  left: 360px;
  width: 450px;
  height: 60px;
  margin: 0px auto;
  font-family: "Cairo";
  padding: 5px;
}

li {
  position: relative;
  top: 6px;
  display: inline;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

li.spacing1 {
  margin-right: 25px;
}

li.spacing2 {
  margin-left: 25px;
}

li:hover {
  border: 1px solid red;
  padding: 5px;
}

.content {
  background-color: white;
  width: 1100px;
  margin: 87px auto 0px auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../css/example.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
  <title>My Portfolio</title>
</head>

<body>

  <div class="nav">
    <ul>
      <li class="spacing1"><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li class="spacing2"><a href="#contact">Contact</a></li>
    </ul>
  </div>

  <div class="content">

    <p id="about">My name is Lawrence Yoon and I graduated from Cal Poly Pomona with a degree in Hospitality Management and minor in Business Marketing. After working in the hospitality industry for 5+ years, I wanted to expand my knowledge by trying out different
      career paths and happened to find out about computer programming. I've been self-learning for 3+ months, and hope to become a front-end web developer soon! I am proficient with HTML and CSS, and have some knowledge of JavaScript. Once I get my first
      job, I hope to continue studying and eventually learn back-end. My goal is to one day become a full-stack developer!</p>
    <p>So far, I have knowledge of HTML, CSS, Bootstrap, JavaScript, and jQuery. I have used StackOverflow a couple times, and although I don't rely on this, it's great to ask questions and receive answers promptly from a loving community. Jon Duckett's
      Introduction to HTML and CSS has been a great teacher to me thus far; although it's a bit dated, it contains detailed images and helped me greatly step foot into the world of web development. Following this book, I got his second book for JavaScript
      and jQuery and have started to read through that. While I'm doing this, I'm learning from FreeCodeCamp, which immensely helped because through their projects, I'm able to make this file on Codepen, which will become my portfolio! I will definitely
      try to finish all FCC challenges, and make a couple of apps to showcase my skills!</p>
    <p>As of right now, I'm not looking for a job because I lack the skills necessary to get my first job in web development. In a couple of months, I hope to polish what I know so far as well as learn new skills to get my first job. In time, I will showcase
      my skills by demonstrating my abilities through the makings of small apps. Thanks for reading! Please don't hesitate to reach out to me to provide tips, or if you want to talk about anything I'm all ears!</p>

    <p id="portfolio">Portfolio:</p>
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299864/01_30_16_2_d1ntei.jpg" alt="Gray day in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503299922/02_01_16_wbmyow.jpg" alt="Water in Redondo Beach" width="300" height="300">
    <img src="http://res.cloudinary.com/lyoon/image/upload/v1503300012/06_10_16_buqi65.jpg" alt="Beautiful sunset" width="300" height="300">
    <p>Contact me here:</p>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="text">
    <br>
    <input type="submit" value="Send">

    <p id="contact">Here's where you can get in touch with me! Here, you can request for my resume, get more details on my experience, or learn more about my favorite hobbies! I will reply as soon as I am able, thanks!

  </div>
</body>

</html>

Two questions:

Upvotes: 0

Views: 925

Answers (1)

fubar
fubar

Reputation: 17398

To resolve the issue with in-page anchors and a fixed header, what you need to do is to create and relatively position an anchor element above the content section.

Fiddle example: https://jsbin.com/dosalajotu/edit?html,css,output

For example, if your header was 50px tall:

header { height: 50px; }
.anchor { position: relative; top: -50px; }

<section>
    <div id="about" class="anchor"></div>
</section>

With the :visited state, this would apply to a elements, not to li elements. If you update your CSS selector and also override the colour, that should resolve the issue.

li a:active, li a:visited { color: red; text-decoration: none; }

Upvotes: 1

Related Questions