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/
Related
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 am having trouble getting my 960.gs to take up the entire width of the browser. I want the grid to be 100% on resize, that is if I scroll out the text will appear smaller and take up less lines but the grid will still take 100% of the width.
There is this question here When using grid 960, can I still have a 100% width header section? And the answer was to set the top part to 100%. I added the code but this has no effect, neither does setting the body's width to 100% and all divs, ect. What am I doing wrong? Here is the code:
<!doctype html>
<html>
<head>
<title>My Fragment</title>
<meta charset="utf-8" />
<!-- Symbols rendered -->
<meta name="value" />
<!-- Do not need to close -->
<link rel="stylesheet" href="css/960_12_col.css">
<style>
body {
background:green;
}
div {
background: white;
}
.grid_4 {
height: 100px;
}
</style>
</head>
<body>
<div class="header" style="width:100%;"></div>
<div class="mainWrapper container_12">
<div class="grid_4" style="background:red">sdfds</div>
<div class="grid_4" style="background:blue">sdfs</div>
<div class="grid_4" style="background:yellow">sdfs</div>
<div class="clear">sdfds</div>
</div>
</body>
</html>
But this gives me the following result:
I want to see no green space on left side of the red column and the right side of the yellow column but this is not the case. How do I get rid of the space either side?
(Please note I am new to css and Html and have been following the learn html in 30 days, and whatever else I find online.)
First of all - <div class="header" style="width:100%;"></div> is not wrapping your container.
Second: add width: 100% to your mainWrapper class instead of .header, but that i know there is hardcoded widths in 960 grid system, so your columns with .grid_4 will be still width: 300px.
Try with another Grid System with fluid layouts, e.g.: http://www.designinfluences.com/fluid960gs/
I have a Bootstrap 3 grid.
I need to add a header image that's 960 pixels wide.
However, if I add it to a row, the usual padding of 10px on a column "offsets" my image since it no longer "fits":
I know how to force this to work, but I was wondering if I am missing some modifier class in BS3 to make this work.
And, yes, I know I could use a css background-image but the client wants an image there.
Add a class to your CSS that removes the margin to make full-width image within the column and then add that class after the column.
.bosom-none {
margin-right: -15px; // Removes the right gap
margin-left: -15px; // Removes the left gap
}
<div class="container">
<div class="row">
<div class="colum-md-6 bosom-none">
<img src="your-image.jpg">
</div>
</div>
</div>
You probably have something else messing it up because as you can see, a container, row and then a img gives you no margins.
<div class="container" style="background:green">
<div class="row">
<img src="http://www.placehold.it/150x150">
</div>
</div>
http://jsfiddle.net/dBNwq/1
Here's the whole page
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background:green;">
<div class="row">
<img src="http://www.placehold.it/960x150">
</div>
<div class="row" style="background:red;">
Some other content
</div>
</div>
</body>
</html>
This is a problem I've encountered many times with Bootstrap. You basically have three options:
If you're placing the image inside a column (e.g. .col-sm-12) which is inside a .row, you'll have to apply a negative margin to the image or a parent container equal to the column's padding: http://codepen.io/anon/pen/xEGkaQ
You could also instead make the image (or a wrapping div) a direct child of the .row but Bootstrap discouraged use to do this.
You can move the image outside the .col/.row all together, give it it's own .container and rid of that container's padding: http://codepen.io/anon/pen/WGvAap.
I usually go for option #1.
Please note that this does not answer your question. It meant to write this for future reference for other people encountering the same problem and do not know how to force this to work.
The actual answer to your question: no, Bootstrap does not offer such a modifier class.
Simply replace div class="container" with div class="container-fluid"
and that's it !
You can also create a class that will cover the container it is in...
.heroLg {
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
}
Then add the class to your image.
put the image into a span12
<div class="row">
<div class="span12">
<img src="image.jpg" />
</div>
</div>
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
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>