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/
Related
I looked for already asked questions like here and here but couldn't get working.
I would like to make something similar to image down below but an struggling to make sect-a and section-b size of full window. It either is only full sized or extends below the window area.
I am using mini css for grids and below is my code
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navigation">
<h1>Navbar</h1>
</nav>
<section class="section ">
<div class="container">
<div class="row" style="min-height:100vh; min-height: -webkit-fill-available;box-sizing: border-box;">
<div class="col-sm-12 col-md-8 col-lg-8" style="background-color: aqua;">
<input class="button" type="submit" value="sect a"
style="border-radius:2rem; padding: 0.5rem 3rem 0.5rem 3rem;">
</div>
<div class="col-sm-12 col-md-4 col-lg-4" style="background-color: yellow;">
<button>sect b</button>
</div>
</div>
</div>
</section>
</body>
</html>
How can I make sec-a and sec-b available remaining full screen and not overflow it.
If i understand correctly, you want to make section a and section b as high as your window, no more, no less.
There are 2 ways to do this:
you can set the html and body to be 100vh, or 100 units ot "View height", which is the height of your inner browser window.
You can set the display of the body to flex and flex direction to column, that way, when you set the height of the sections to "100%', or their flex grow to "1". they will grow to be the full size of the remaining space under the navbar
if you wish to add something below these sections, such as more sections,t he above method won't work.
Then you can either:
calculate the nav's height and set the height of sect a and sect be to be (100 vh - the nav height)
put the nav and the sections in a single flex container, that has height of 100vh, and then add more content below it.
I had a similar issue and fixed it by adding those lines in my css:
*{
margin: 0;
padding: 0;
}
After adding this, I was able to use the the whole space.
I want to realize a 'reponsive' box (having a fix width) containing a logo (having a fix width) and an infobar (taking the rest width of the main box). The width of the infobar is therefor calced with calc() As the infobar would be useless if getting to small it also contains a min-width.
This works well until the screen width gets so small that the flexbox has to break into two rows. Now there are two problems in my design, i would like to solve:
1) I want the logo in wrap-row 1 to be centered horizontally
2) I want the infobar taking the whole width of wrap-row 2
(In my solution the logo sticks on the left of the first wrap-row and the infobar in the second wrap-row lacks the size of the logo, which I subtracted.)
Is there a solution using flexboxes?
Code (HTML):
<!DOCTYPE html>
<head>
<link rel=stylesheet type="text/css" href="test.css">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<div class="box wrap" align="center">
<div class="logo">logo</div>
<div class="infobar">infobar</div>
</div>
</body>
</html>
Code (test.css):
div.wrap{margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap}
div.box{min-height:100px;max-width:1200px}
div.logo{width:200px;min-height:128px;margin-bottom:10px;margin-right:10px;background-color:#456789}
div.infobar{width:calc(99% - 215px);min-width:320px;min-height:128px;text-align:left;padding-left:3px;padding-top:3px;margin-bottom:10px;background-color:#ABCDEF}
You need to enable auto growing to your infobox, so it fills the remaining space, and centering your whole content.
div.infobar {
flex-grow: 1; /* Fill the remaining space */
}
div.wrap {
justify-content: center; /* Center whole content */
}
Your whole code could look like this.
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 new to bootstrap and I am having an issue trying to position an Image on the page. I am trying to use bootstrap grid to position the image in the center of the page. I am familiar with html5 and I know there are other ways of centering the image;however,I was wondering if this can be done using bootstrap's grid system. The reason for this example, is that I have other image position things I would like to use bootstrap for.
When I run the example below on a Windows 8 desktop or iPad the image is extremely small(i.e. almost like an icon) and resides in the upper left corner; however, when I run this on my Nexus 5 the image is sized correctly and is centered. I have included some sample html code of what I am using.
Again, I am some what new to bootstrap so it could be something simple. Any input or advice is greatly appreciated
Thanks in advance for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autoroute Login</title>
<meta name="viewport" content="width=device-width,
height=device-height,initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/
3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/
css/bootstrap-responsive.css">
<style>
#media (min-width:#screen-sm-min){
#main-image{
height: 200px;
width:200px;
}
}
#media (min-width: #screen-md-min){
#main-image{
height: 350px;
width: 350px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2"/>
<div id="main-image" class="col-sm-8 col-md-8">
<img src="img/ar-main-image.jpg" alt="Autoroute Main Image"
class="img-responsive center-block"/>
</div>
<div class="col-sm-2 col-md-2"/>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js" > </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/
bootstrap.min.js"></script>
</body>
</html>
Bootstrap's column system is laid out on a base of twelve. For example, if you wanted two columns of equal width, you would have them both be .col-sm-6 because two columns with widths of 6 equals twelve. Likewise, you could have three equal .col-md-4 columns.
Bootstrap floats columns to the left by default, but also allows you to offset them by a specific number of columns: .col-md-offset-4
So, if you would like to have a Bootstrap div that is always centered, you can do that by setting it's width to any even number, subtracting that number from 12, and setting the offset to that number. So for a centered .col-2, you would give an offset of 5 because 5+5+2=12. For a centered .col-4, you would give an offset of 4 because 4+4+4=12. You need to account for the left (empty) columns, the center div with x columns width, and the right (empty) columns.
JSFiddle
I have
<div id="containter"><div class="column" id="left">
left</div><div class="column" id="right">right</div></div>
.column
{
float: left;
}
Problem is, if i shrink my browser, the right column will wrap.
How can I prevent this?
Thanks
You may try to add a width your container div.
Have you ever try float left div to left and float right div to right?
It works for me (example here)
You just forget a " # id="right> and you must erase / in </div class="column" id="right>
That corrected, I made changes in my example :
http://www.jsfiddle.net/D2TvR/2/
add a width to your container and overflow:auto (else, it won't overflow your floated divs)
Just add a width to your containers (say 50%) and set them to float left. This way, both containers will take only half of the width's screen. That is why you'd better use percentage instead of pixels, as pixels state static width and depending on your question, since you are resizing the browser window, you need to implement the page using fluid width. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.column { float: left; width:50%; }
</style>
</head>
<body>
<div id="containter">
<div class="column" id="left">
This is the left container
</div>
<div class="column" id="right">
This is the right container
</div>
</div>
</body>
</html>
if you have set your site on percentage then
give min-width to the container div so that the inner divs wont wrap
So even if you resize it wont wrap