I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
So i'm using flexbox grid and have a basic something like this:
<div class="container">
<div class="row">
<div class="sidebar col-xs-3">
<div class="sidebar-top"></div>
<div class="sidebar-space"></div>
<div class="sidebar-bottom"></div>
</div>
<div class="content col-xs-9">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
</div>
</div>
And generally looks something like this:
Now I need the top green bar to follow down when the scroll and the bottom green bar to stick to the bottom of the visible page. The center place that says hey, may or may not ever have content in it.
I have tried quite a few things, mostly taken from the css-tricks site about flex and other various blog posts, but none seems to satisfy what I need. If I add a wrapper around the sidebar-top/space/bottom and set it to a column instead of row it no longer gets the equal height that .sidebar and .content have. Nothing seems to work.
Is this even possible with pure css?
edit: The relevant css classes container row and col-xs-X are all from flexbox grid linked at top of question
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
i just started using bootstrap, and i think it's awesome. but i'm having a hard time figuring out how to add a wrapper around the basic container of bootstrap.
I'm using the Fluid responsive css, and it centers the elements inside the .container nicely.
but my WHOLE page as a whole has a BACKGROUND, and i wanted a different background for the actual content area (where the container is)
So basically i have for example
<div id="wrapper-page" style="background-color:grey; ";>
<div id="wrapper-content" style="background-color:#93C;>
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
</div>
Is there a simple way to achieve what i need?
I actually could easily modify the bootstrap.css file to kind of achieve what i want but i really want to keep my modifications outside of the template/framework for easy upgrade later
Why don't you make the wrapper-content also a Bootstrap .container?
<div id="wrapper-page" style="background-color:grey; " ;="">
<div id="wrapper-content" class="container" style="background-color:#93C;">
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
Demo