2017-08-22 14 views
0

ポジション:アンカーに固定されていますか?

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>

つの質問:

  • 私は私がそれらをクリックすると意味、(ポートフォリオ、接触、約)私のアンカータグをブロックしている私のposition: fixedナビゲーションバーを持って、それがかかります私の所在地はわかりませんが、nav-barが開始を妨げています。上のリンクをクリックすると、どのようにしてナビゲーションバーの下から開始することができますか?

  • 私はCSS li:visited {text-decoration: none;}を使用していますが、紫色に変わり、下線が付いています。なぜそれが起こっているのですか?

+0

訪問する前にリンクの下線を付けていて、訪問した後に消えたいと思っていますか? – kmg

+0

クリックしても装飾がないようにしたいです! –

答えて

1

インページアンカーと固定ヘッダーの問題を解決するには、コンテンツセクションの上にアンカー要素を作成して相対的に配置する必要があります。あなたのヘッダーが背の高い50pxた場合https://jsbin.com/dosalajotu/edit?html,css,output

たとえば、::

フィドルの例では、:visited状態で

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

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

、これはli要素にない、a要素に適用されます。 CSSセレクタを更新して色をオーバーライドすると、問題が解決するはずです。

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

私はあなたが言ったことを行うことで、このように試しました。しかし、それはちょうどので、私はありません、それがどんなコンテンツをブロックしないように完全に分離し、空の要素である必要があり –

+0

より多くのホワイトスペースを持っているダウンより、「約」=自分のIDを移動します。私に5分を与えると、私はフィドルをまとめるでしょう。 – fubar

+0

@LawrenceYoon - 私の答えのフィドルリンクを参照してください。 – fubar

関連する問題