I need my header and side bar to stay in place, but I also need to scroll down on the page.
I'm using fixed positioning, is there another way to do this?
Add this position:fixed; to your style of parts which you want to stay in fix !
Or
Reference this link !
You can put your content in an iframe and the header and sidebar can be in the top. In this way. You can set the overflow for the iframe element. Probably this could help you out with your requirement
It looks like your problem was in your HTML, not your CSS. The <body> tag should encompass all of your content. and don't forget to close your <div></div>. I also moved your body background into the css, try to avoid using inline styles unless you really have to.
<head>
<Title>About Me!</title>
<link type="text/css" rel="stylesheet" href="aboutme.css" />
</head>
<body>
<div id="header"></div>
<div class="left"></div>
</body>
</html>
Updated Working Example
Related
I'm trying to use an image of my logo on the webpage and put it into the top-left of my webpage but it seems to have a space on the top and left side of the image and I want it flush just like dropbox.com does it
Here's the html:
`
<body>
<nav>
<div class="logo">
<img src="img/pd3-1.jpg">
</div>
</nav>
</body>
`
I've tried many things such as remove padding/margin, change position, float, I'm new to coding so I can't seem to fix it or find an answer
Remove the default margin of the body element:
body {margin:0;}
using position relative and position absolute may be your answer.
we position the container relative, allowing our absolute positioning to be relative to this container.
I added a background so you can see the position of the logo better.
nav{width:100%;position:relative;}
.logo{position:absolute;top:0;left:0;width:150px;height:150px;background:#ededed;}
<body>
<nav>
<div class="logo">
<img src="img/pd3-1.jpg">
</div>
</nav>
</body>
Also make sure your css is being linked in the head of your index file as without this no styles will pass through to the page.
Final Result
After reviewing the issue with Jacob on jsfiddle we established that he was not including the css in the head. Adding the css to the head of the site fixed the issue and the custom styles are now styling the image correctly.
You should remove the space of the parent elements. Did you remove all of them?
for example:
body, body * {
margin: 0;
padding: 0;
}
I am trying to keep a fixed header in place on a web page and for the main content, when scrolled, does not move over the main header.
I am failing to understand why inline CSS works as expected but when switching the same CSS properties to an external style sheet, it fails to work. The external style sheet is being found as the first <div> has its properties set correctly. I have tried using both id and class on the second div but neither seem to work. This is the code using ids rather than classes.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style="height:100%; width:100%">
<div id="fixed-header">
<h1>Page Heading</h1>
</div>
<div id="main-content">
<!-- a number of articles and sections -->
</div>
</body>
</html>
css/style.css:
#fixed-header {
position:fixed;
height:100px;
top:0px;
overflow:hidden;
}
#main-content {
position:absolute;
top:100px;
left:0px;
right:0px;
overflow:auto;
}
There is no other CSS code.
If I change <div id="main-content"> to <div style="position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto;"> it works.
What am I doing wrong?
This boils down to a basic understanding of CSS.
If you only specify the top of an absolutely positioned element, the rest of that element will size normally (its height will be the height of the content inside the element). When an absolutely positioned element is tall enough to go off the bottom of the screen, that creates a scroll bar in the body/html.
Putting the bottom property on your content limits the height of your content so the content container element itself can scroll individually of the body.
https://css-tricks.com/almanac/properties/p/position/
I think you are missing a big point here. This is the way a browser gives preference to the styles attached to a web page:
INLINE > ON-PAGE > EXTERNAL
So, you have to remove the inline css when you apply the external one.
And if you want to say get 100px as the result then in the external css file put height and width as 100px after height and width as 100%.
why??
it is because you fix the div with the 100px in the botton and you close the box if you want you gave to the div the width 0px left and 0px right nowyou can say to width 100% so you gaved him(the div) an width nov for the height you say stay 100px from the top of the view height and then you say stay 100px from the bottom so you "closed" the box and now your overflow can work correctly i hope that explained a little bit the why because of what
You must put the height to html tag too!
Look this jsfiddle
html, body {height:100%}
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
I have been working on a website for my self recently and ran into an odd problem. Whenever I would move a to the left the page would expand by the amount of pixels I had moved it left from the center. It doesn't hinder functionality but it's really annoying to have this 300-400 pixel space that you can scroll off to the side with. Maybe I'm doing something wrong but any help would be appreciated.
This is an example of what I am doing:
<html>
<body style="background-image: url('Background-Large.jpg'); text-align: center">
<div style="position:relative;top: -605px; left: 295px;"></div>
</body>
</html>
I'm not quite sure what you're trying to achieve here but if you put an 'overflow:hidden' on the body, it should allow you to position your div off the page without adding a scroll bar.
It's because your DIV is set:
left: 295px;
If you want a DIV to be in the center the first thing you should do is make a "main container":
<style type="text/css">
.wrapper {width:500px;margin:0 auto -1.5em;}
</style>
<div class="wrapper">
</div>
Then from there you can add elements inside that container thats now centered:
<div class="wrapper">
<div style="float:left;margin-left:-295px;">
</div>
</div>