- This topic is empty.
-
AuthorPosts
-
May 3, 2014 at 11:54 am #169156
aprobert
ParticipantFirst of all I love your site! I’m just starting out learning how to code and your site has been immeasurably helpful. So I have a site I’m playing around with testing things out and I’m having trouble getting a fixed header. When the header isn’t fixed the layout looks ok. But you’ll see when I have the header fixed the main section div below it moves up underneath the header. I’m assuming it has something to do with the floats I have, but I really can’t figure out. Thanks for any help and please forgive the sloppy code. Remember, I’m just starting.
html
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<title>Me practicing coding</title>
<link rel=”stylesheet” type=”text/css” href=”css/normalize.css”>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700′ rel=’stylesheet’ type=’text/css’>
</head><body>
<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
About Me<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Learning<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Sandbox<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Resources<div> <div> <h1 class="heading">About Me</h1> <img src="img/intro-icon.png" alt="intro icon" /> </div> <div> I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration. </div> </div> <div> <div> <h1 class="heading">How I'm Learning</h1> <object type="image/svg+xml" data="img/about-me.svg" id="icon2"></object> </div> <div> I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration. </div> </div> <div></div> <div></div> <div></div>
</body>
</html>
\
\css- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}p, h1, h2, h3 {
margin-top: 0;
}div {
min-height: 10%;
}p {
font-family: “Open Sans Condensed” , sans-serif;
font-size: 1.5em;
}h1 {
font-family: “Open Sans Condensed” , sans-serif;
font-size: 3em;
}
img,
object {
max-width: 100%;
}.nav-right {
float: right;
border: 2px dotted black;
width: 43%;
padding-top: 1%;
margin-top: 1%;
margin-right: 3%;
}
.nav1 {
display: inline-block;
margin-right: 5%;
}.small {
font-size: 1.25em;
color: #474747;
display: inline-block;
vertical-align: middle;
}
.icon-nav {
width: 25px;
display: inline-block;
opacity: 0.5;
}
.nav1:hover .icon-nav {
opacity: 1;
}
.nav1:hover .small {
color: black;
}.top {
background: #CDD5DD;
position: fixed;
width: 100%;
height: 90px;
top: 0;
}
.intro {
background: #FFC266;
border: 2px dotted black;
}
.learn {
background: #3366CC;
}
.layout {
background: #FF4747;
}
.resources {
background: #33D685;
}
.bottom {
background: #4E545A;
}
.heading {
display: block;
border: 1px dotted black;
margin-top: 2%;
}
.col-right , .col-left {
border: 2px dotted black;
margin-top: 5%;
min-height: 100px;
}
.col-left {
width: 43%;
float: left;
margin-left: 5%;
margin-right: 3%;
}
#icon1 {
width: 45%;
padding: 0;
margin: 0;
}
#icon2 {
width: 45%;
padding: 0;
margin: 0;
}
.col-right {
width: 43%;
float: right;
margin-right: 5%;
margin-bottom: 5%;
}
#me {
color: white;
}/Clearfix/
.group:after {
content: “”;
display: table;
clear: both;
}
\May 3, 2014 at 8:06 pm #169170Alen
ParticipantWhen you set the position of an element to
fixed
the window (the visible area) essentially becomes its frame. The element is taken out of document flow. Think of it as a soda machine, what happens when you put in $1.35 and press D2, soda pops out and another one slides in its place. Basically same thing happens with the element, so whatever was underneath it now moves up. To get around this you would set the margin on the content that follows your header to the height of the header.This example might be helpful as well. It shows the difference between
fixed
andabsolute
position and further explains the idea of a frame.Hope that helps,
-AlenMay 5, 2014 at 12:39 am #169223aprobert
ParticipantGreat! Thanks for the help. I knew absolute positioning took the element out of the flow, but didn’t know fixed did also. Relative positioning does not take it out of the doc flow though, right?
May 5, 2014 at 1:08 am #169225Scott
ParticipantNo relative still keeps the elements in the natural flow of the document.
- {
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.