I am relatively new to StackOverflow and am experiencing some difficulties while making a webpage
So what I require is a one page website divided into different sections, which are full-width divs (i.e 100% width of the screen)and are consecutive with different background colors.
The problem I am facing is that the divs do not take up the full width of the screen and have white space not only on the sides, but also between 2 divs
Also, when the window size reduces, the gap between divs increases
The desired result is as observed in the following websites:
http://classrebels.com/
http://startbootstrap.com/templates/freelancer/
The code I am using is as follows:
i) HTML:
<html>
<body>
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
</body>
</html>
ii) The CSS:
.full{
width= 100%;
}
#one{
background-color: #fff;
}
#two{
background-color: #f13;
}
Please do tell me where I am going wrong
Demo
html
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
css
body, html {
width: 100%;
height: 100%;
margin:0; /* default margin set to 0 */
padding:0; /* default padding set to 0 */
}
.full {
width: 100%;
}
#one {
background-color: gray;
height: 50%; /* whatever you want to give height */
}
#two {
background-color: #f13;
height: 50%; /* whatever you want to give height */
}
.full h1 {
margin:0; /* default margin of h1 tag set to 0 */
padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
Demo Fiddle
To remove the default margin/padding on the viewport (which is giving you the whitespace), you need to add the following CSS:
html, body{
width:100%; /* <-- also a good idea to add */
margin:0;
padding:0;
}
and change:
.full{
width= 100%;
}
to:
.full{
width:100%;
}
CSS style property/value pairs are seperated with a colon : and not an equals =
have you tried setting margin and padding 0 in full and in body tag too
like
.full
{
width :100%;
margin:0px;
padding:0px;
}
similarly your heading also takes some margin so set the margin of heading as required.
for better please consult this link w3schools
You have to change the body and h1 margins, since they have default values in the browser.
I've fixed it for you in this fiddle:
h1{
margin: 0px;
}
body{
border: 0px;
padding: 0px;
margin: 0px;
}
http://jsfiddle.net/pWLgb/
the problem is that you dont give the whole div a background color but only the text.
if you ad a border you can see the real size of the div and it will fill the whole div with color.
check out the fiddle i made for that
border: 1px solid black;
http://jsfiddle.net/2h4kQ/
you can set the border to 0px so it is not shown and it will give you the right result
The demo's that you linking to aren't using full width divs. They actually use a full width <section> element which has the background color set on it.
Then, they have an inner row <div> which then has a container and column <div>. So in the Freelancer example it looks like this:
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>
Sample of the CSS:
section.success {
color: #fff;
background: #18bc9c;
}
.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Download that template, it uses Bootstrap, and play around with it to get the look you want.
Related
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
I want to make a class full bleed but I cant.
Here is the HTML :
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
and css :
.main-class{
padding: 20px;
width: 100%;
background-color: #fff;
display: inline-block;
box-sizing: border-box;
}
.background{
margin: -20px;
background-color: #eee;
display: inline-block; // must use inline-block
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content{
margin-top: 30px;
}
and here is a demo: https://jsfiddle.net/uumkjLy8/1/
the background class must be full bleed with background but as seen in the demo there is white space on the right side.
The background element is inside of an element that has padding, meaning it can only extend the full width if you do some sort of "cheesy" method to extend it outside of its parent element (width > 100%, etc).
Your negative margin is not going to fix the width because it is only moving the div, not enlarging it. With 100% width and a parent that has padding, it will never fully cover its parent's width.
See this fiddle please: https://jsfiddle.net/uumkjLy8/6/
I've removed the padding from .main-class, as well as the negative margins on your .background.
Remove box sizing from .background
https://jsfiddle.net/uumkjLy8/8/
I think you don't need the padding: -20px at the .background class. Furthermore, add a padding: 20px to the .content class in order to be lined-up with .background
This can be straightforward as:
.main-class {
background-color: #fff;
}
.content,
.background {
padding: 20px;
}
.background {
background-color: #eee;
}
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
...unless you are forced to use some of that redundant CSS...
In such case state that in your question.
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
I'm using a table for the footer of my web page. I really don't know much about tables because I've always used CSS. The following is the only table I've ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I'm not sure what I'm doing wrong with the table because I don't know much about tables. Here is the HTML:
<div id="framecontentBottom">
<div id="container">
<div id="row">
<div id="left">
<!-- Counter Code START --><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ><br>Page Views<!-- Counter Code END -->
</div>
<div id="middle">
Contact me at jacksterdavis<img src="images/#white.png">gmail.com
</div>
<div id="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<p>The internet is the printing press of the 21'st century.</p>
</div>
<div id="right">
</div>
</div>
And here is the CSS:
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#middle {
width:50%;
text-align:center;
display: table-cell;
}
}
#left
{
width:25%;
text-align:left;
display: table-cell;
}
#right
{
width:25%;
text-align:right;
display: table-cell;
padding: 5px;
}
#quote
{
text-align:center;
width:100%;
}
#logoBtm
{
align:middle;
text-align:center;
}
#logoBtmLeft
{
align:left;
}
#logoBtmRight
{
align:right;
}
#framecontentBottom{
clear: both;
position: relative;
z-index: 10;
margin-top: -3em;
top: auto;
bottom: 0;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #585858;
color: white;
width: 100%;
}
If you point out everything wrong with my table it's appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it's fine.
the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.
also, in referring to your comment, ie 7 does not support table display CSS.
http://caniuse.com/#search=table-cell
use a combination of inline block or float. but beware, as inline block has its own issues with ie7
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Here is a working, valid, example.
http://jsfiddle.net/mRHnW/2/
A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.
I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.
I adjusted the width of your 'columns' to be slightly less than 100%, because you've also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you're creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.
On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.