Is it good practice to use multiple .container and .container-fluids? (not nested)
I'd like to create some segments of my page with max-width and some without any.
You can use any number of '.containers' and '.container-fluid''s in a page. Beware when you are using nested '.container' since its having fixed widths at breakpoints. The examples in the bootstrap site itself have used multiple containers. So you can use..
This is well answered here: Multiple and/or nested Bootstrap containers?
Usually, with Bootstrap I use more than one container: one for the main content itself, the normal one; one inside the .header; and one inside the .footer.
You can use both, and also nested if required in your layout web page.
I'm currently using a .container for each section on my website. It's based on this template: http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/.
As long as you don't nest them you'll be good!
Related
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.
I'm renovating a legacy Java based web site. I've already greatly reduced the number of tags used on the front end by using CSS to do the graphic lay out of the "screens". Is there a CSS tag that will replace HTML tables that makes a good grid for HTML forms? Does it significantly reduce the number of tags? Is it reliable in most of the main browsers?
Tables are actually prevalently used to align forms. You take out the borders with <table borders='0'>. They are pretty reliable for aligning because the table cells in different rows line up.
You'll still probably want to use <table> tags for actual grid/table elements. But, you could consider using something like Javascript grid/table plugins for tables... for styling, and functionality.
I would suggest using <ul> and <li> elements (and then setting CSS rules for those elements,) when formatting <form> elements, though. If it doesn't seem to be working out... you can still leave the <form> in a table; over the past decade, however, browser support for CSS has made it a lot easier to use HTML lists instead of tables for formatting things like forms.
Here's the layout I'm trying to achieve http://jsfiddle.net/qeDs3/44/
I mocked it up on Indesign using Grid_960 templates: http://designobvio.us/dov2/Homepage1.pdf
Here are the divs I cannot make parents out of http://designobvio.us/dov2/Homepage1Encapulate.pdf
Through trial an error, grid 960 seems forces you to use the class container_12 in conjunction to .grid_12 as the parent tag.
Here's another full example: http://designobvio.us/dov2/index.html
How can i get gChild to be the parent
Heres paired down example: http://designobvio.us/dov2/index2.html
I'm trying to get the header tag to be the parent of its contents.
Does my layout not cooperate with grid960? Am I totally missing something stupid? Does it require a hack? If you need any clarification of anything I'll be right here and will response ASAP.
Thanks
Update The reason I'm trying to do this is so that I may gain control of those parent divs for ease of media query.
After EXTENSIVE research (lol) I've finally solved this problem.
Grid 960 has 2 extra classes which simply remove margins left and right named alpha & omega. I've never bothered learning the purpose/theory of these because I was dumb. The purpose of these classes are exactly what I was curious to, "nesting grids within grids;" thus allowing me to clear the float and control the parent div's that dont abide by the 12 column standard.
I hope someday this question/answer helps some other fool that refuses to read documentation.
I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.
I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.
Do you have any ideas?
This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.
Here is a script with some of the groundwork.
An article explaining future support available in CSS3.
This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.
For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.