StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBody overlaps fixed, horizontal nav bar up top - CSS/HTML
primarykey
Id
16110064
data
AcceptedAnswerId
16110235
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-04-19T17:12:55.767
FavoriteCount
1
LastActivityDate
2015-11-06T23:17:22.250
LastEditDate
2013-04-19T17:19:00.813
LastEditorUserId
1213036
OwnerUserId
1213036
ParentId
0
PostTypeId
1
Score
0
ViewCount
3434
LastEditorDisplayName
text
Body
<p>I have to make a website for an assignment, and I'm having a bit of trouble. I've created a navbar up the top, and it's in a fixed position. However, when I scroll, everything shows through it. What I want, is essentially for the webpage to start under the navbar, so it's there at the top, and when I click 'About Me', it doesn't have the title under the navbar, like in the second image. </p> <p><a href="http://i.imgur.com/oTkXlWx.png" rel="nofollow">http://i.imgur.com/oTkXlWx.png</a></p> <p>Does anyone know how to do this? Thanks.</p> <pre><code>#top-bar { border-top:#fff dashed 1px; width:100%; height:32px; background:black; opacity:0.8; text-align:center; position:fixed; top:0; padding-bottom:12px; } #top-nav li { display: inline-block; line-height: 49px; padding: 0px 14px; } #top-nav li a { display:block; color: #ddd; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } #top-nav li:hover, #top-nav li:hover a { background-color:#333; color:#fff; } </code></pre> <p>and the html:</p> <pre><code> <nav id="top-bar"> <ul id="top-nav"> <li> <a href="#about-text">About Me</a> </li> <li> <a href="#programming-text">Programming</a> </li> <li> <a href="#home-text">Hometown</a> </li> <li> <a href="#swinburne-text">Swinburne</a> </li> <li> <a href="#achievement-text">Acheivements</a> </li> </ul> </nav> </code></pre> <p>Basically, I don't want the webpage to 'scroll through' the nav bar. Also, my class hasn't done javascript yet, so if there is a solution not using javascript that would be great.</p> <p>Thanks guys. </p> <p>P.S. Here is the code for the div for the about:</p> <pre><code><div id="about-text" class="box"> <h3>About Me</h3> <p>My name is , I'm 18 years old, and a Computer Science student at Swinburne University of Technology, Hawthorn. I've always been interested in computers, there is something beautiful about technology working to do so many things the human brain cannot possibly do.</p> </div> </code></pre> <p>and the css:</p> <pre><code>#about-text, #programming-text, #home-text, #achievement-text { border-style : solid; border-width:0.2em; opacity:0.5; width : 70%; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; } </code></pre>
Tags
<html><css><overlap><nav>
Title
Body overlaps fixed, horizontal nav bar up top - CSS/HTML
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USAnteara
UserOwnerUserId
1. USAnteara
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.