I am using a 960 responsive layout from skeleton, i have their css stylesheet which i have to addon if i want to include class. After experimenting i managed to get the site i want, but not without having piles of unnecessary selections.
So for example, based on what u see my css reflect the selector .container.four.columns, that say if i add a banner class, in my css should i only do .container.banner or .container.four.columns.banner will be the best way?
Since i thought if i add a lot of reusable style classes to it the css selector will be very long if i go into each details.. Please advise as i'm trying to make my code look as clean and neat as possible but not sure the best selectors to use as when i tried shortcut like just .banner nothing happens and i must have at least .container.banner before it make the changes. Thanks
HTML:
<div id="content" class="container">
<div class="four columns banner">
<div id="banner_a3da" class="banner_img">
<img src="page_home/banner_A3DA.jpg">
</div>
</div>
<div class="four columns banner">
<div id="banner_fi" class="banner_img">
<img src="page_home/banner_FI.jpg">
</div>
</div>
</div>
CSS:
/* Base Grid */
.container .four.columns { width: 220px; }
.banner or .container.banner or .container.four.columns.banner { width:100% }
Well either ways are correct, but you can use more classes to select specific object in your case. But maybe you have some .banner in .container.three.columns.banner and he is for example 50% and you wanted it to be 50%, but with .banner you will select him and you will resize it to 100%.
To resume, with single selection you may affect some elements that you didn't wanted, becouse there are more elements with that class.
I don't know if that's just pseudo-CSS or what, but you do 'or' with a comma,:
.banner,
.container .banner,
.container .four.columns.banner {
width:100%
}
You also had a missing space after .container.
Does that help?
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
image
this is my first post here and I'm trying to figure out how I can do something like that
thanks in advance
I would use flexbox in CSS. once you lean this it will be a tool you use a lot for this type of thing. when you use flexbox there is a container element. i would use a div. see my example.
<!--HTML-->
<html>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
the divs that are "class" of "box" are the no1 and no2 paragraphs. in CSS use:
/*CSS*/
#container {
display: flex;
flex-direction: row;
}
you'll just need to format the class of box which will format each of the elements in that class (4 in my example above)
use this cheat sheet and you'll be a pro at this in no time.
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
also, view the page source you want to copy, it will all be there for you to see.
good luck
In addition to what sao said, a more basic way would be using display's inline or inline-block properties:
.box {
display: inline-block;
}
<div>
<div class="box">X</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
It should do the trick, but I agree that using flex is a better and more advanced way to do so.
Also, I'd recommend searching a bit more for your question before asking it, I'm sure this question has been asked before.
Best of luck mate!
you've got many options depending on wether or not you intend for it to be only text, images .. and how adaptable you want it to be in the future.
here is a simple way that doesn't require advanced CSS:
.container { /*attributes of "div" weating the "container" class*/
display: flex;
width: 500px; /*make it 500pixels wide*/
}
.box {
width: 50%; /*all "box" will have a width of 50% it's parent (container here)*/
padding: 10px; /*give some cushion on the sides*/
}
.box:first-child { /*select only the first "box", very powerful*/
border-right: 1px solid red; /*right border to delimit*/
}
<div class="container"> <!--wide container in which both boxes go in-->
<div class="box"><!--1st box-->
<p>Your first text goes here and it goes on and on and on and on and on and forever....</p><!--1st text-->
</div><!--close 1st box-->
<div class="box"><!--2nd blox-->
<p>Your second text goes here and it goes on and on and on and on and on and forever....</p><!--2nd text-->
</div><!--close 2nd box-->
</div><!--close wide container box-->
The possibilities from here are endless. Visit a trusted site on HTML/CSS/JS coding to get started. I'm personally keen on Mozilla
Your most useful tool will be the "inspector", on any modern browser today you have the possibility to change CSS code and play around, discover what works and what doesn't. It doesn't affect anyone but you, on the page you're visiting, for example :
I used Flex in the example, but it's only one of the many options. With CSS there are often more than 2 ways to produce 1 result. Always go for the one with less code and less specific (more open ended to future changes)
Now hope your curiosity is tickled, get out there, learn & code !
I'm trying to figure out how I can do something like that
You have multiple options. From approximate worst to approximate best:
HTML tables (https://www.w3schools.com/html/html_tables.asp)
CSS absolute positioning (https://css3-tutorial.net/positioning/absolute/)
CSS tables (https://colintoh.com/blog/display-table-anti-hero)
CSS floats (https://www.w3schools.com/css/css_float.asp)
CSS Columns (https://www.w3schools.com/css/css3_multiple_columns.asp)
CSS Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
Is there a way to create a .col on a bootstrap page so that it goes all the way to the edge of it's container?
I would like the image in the example (which is in a .col-xs-12 inside a .row inside a .container) to use up all the space up until the edge of the container. I can solve this with pure JS resizing it as needed but I would prefer to solve this using pure CSS approach (if possible). As it is now I have tried several different variants of negative margins and relative positioning but all end up with it either not being perfectly aligned to the edge or messes something else up as well.
Here is a base example of how the page is coded: https://www.bootply.com/wVw5jnKa35
Here if you want to achieve your requirement than you can add custom class in your col-xs-12 class
Like this
HTML
<div class="col-xs-12 no-pad">
<img class="FullWidth" src="http://calendar.volego.ru/img/users/wallpapers/20160215081029217.jpg">
</div>
CSS
.no-pad {
padding: 0;
}
You don't need to define and use a custom class for this purpose.
simply, At line 8, change:
<div class="col-xs-12">
to
<div>
I have more than 6 divs and I want to set it with float left and one after another with auto resize as per the content size using css
As per image below
here is my code:
<div class="main-container">
<div class="container">
<div class="title">test1</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test2</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test3</div>
<div class="content">Testing of css html Short Content</div>
</div> <!-- And so on ... -->
</div>
any help will be appriciate. Thanks
You should use JQuery plugins like wookmark or masonry for what is you expected output. Using CSS you can not fill upper space.
You can also try http://suprb.com/apps/gridalicious/ which is very good using JQuery.
From all I know, you cannot achieve that using CSS only. The following CSS solutions are possible, but each of them fails to meet all your requirements.
float: left; with clearing
This is all you can achieve using float:
For that to work, you have to clear the float every 4th element. Recommendation is to use
.container:nth-of-type(3n+1) { clear: both; }
display: flex;
What you can achieve using display: flex; is similar, but all .container in one "row" will have the same height which will be determined by the "highest" .container.
CSS columns
The only way I know of to create a type of layout like you showed is using css colums. This does have the massive drawback that your containers will be stacked first in vertical order, and only if a column is filled the next .container will be pushed to the next column. So 2 will be below 1, not right of it.
Javascript-based solutions
As mentioned in another answer, there's a load of solutions available based on Javascript.
Find the two mentioned before here:
http://masonry.desandro.com/
http://www.wookmark.com/jquery-plugin
Add this style:
<style>
.main-container{
border:solid green 1px;
width: 500px;
height:200px;
}
.container{
border:solid gray 1px;
width:50px;
height:auto;
float:left;
}
</style>
By using height /width = auto can make your div flexible to its content as per your hint
hope this help.
My buttons don't work when I put .pull-left. I tried using the W3C validator on the document, but no problem detected.
Here's the code.
Because you've made .secondline display as block and are positioning it, it's "covering up" the button.
You can keep it block level, but instead of positioning along an axis, try positioning with line-height.
.secondline {
width: 100%;
z-index: 1;
display: block;
line-height: 24px;
}
However, I think it's a better end result to use the grid system for this. Below is an example of what you could do using the content from your first result. (Of course, you would need to add your code and content)
<div class="row">
<div class="col-xs-12">
V ➜ GARE CORNAVIN (21:44)
</div>
</div>
<div class="row">
<div class="col-xs-6">
Button
</div>
<div class="col-xs-6 text-right">
19 minutes
</div>
</div>
You're dealing with HTML structure issue rather than a Bootstrap issue. One of your HTML elements appears to be covering the button. It appears as though it's your "time" span. I would recommend trying to restructure your HTML with your button in a div class and the minutes in another div class. You have a lot of span elements there that could probably be eliminated to simplify your markup.
Another solution is to increase the z-index of the covered element, your code is no longer linked but try adding style="z-index:2147483647" to the parent of the element with .pull-left
Why do people do this in CSS:
#section #content h1
{
margin:0;
}
When they can just do:
#content h1
{
margin:0;
}
for code like this:
<div id="section">
<div id="content">
</div>
</div>
and get the same results (at least in IE7 - my target browser, unfortunately). Is it just for specificity in the code? Code clarity to declare what you are referring to?
CSS files are generally designed to be reusable so that the same CSS can be used all over the website and can be applied to all pages in the application.
Targeting a very Specific node can be useful to prevent any surprising behavior.
Suppose you had this code as you said,
#content h1
{
margin:0;
}
<div id="section">
<div id="content">
</div>
</div>
Someone came after you and created another HTML page using the same CSS and the structure was this
<div id="content">
</div>
and you desire a different styling for the H1 on this page.
You can argue that even with this CSS
#section #content h1
{
margin:0;
}
if the new page consisted of the same structure,
<div id="section">
<div id="content">
</div>
</div>
well in that case it is easier to debug, in this example the structure is quite simple, but real life CSS tend to be complex.
If you (or anybody else) is doing it, you shouldn't be. You're just trying to hold together a poorly developed CSS structure.
Try your hardest to stick to this rule: IDs are for JavaScript, classes are for CSS.
You should never need multiple IDs in a selector since IDs must be globally unique in the document. This means your #section #content h1 is overkill since it includes 2 IDs.
Other types of selectors (classes, tag names, etc) are not unique, so you might need to string a few together to get the element you want. For example, #section .content p would be perfectly reasonable in many contexts.
You might not want all #content h1 to look the same.
In that case #content h1 might have an ancestor ID/Class that you would want to latch onto so you can change the style of the h1 for those instances.
For example:
#content h1 { /* style 1 */ }
#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }
The term you are looking for is "Specificity" best example ive seen to describe this is using a points based system.
You use multiple selectors so that you don't select sections that you don't want.
For example, taking your use case, we would have to expand it from a section and content div, to something slightly larger.
<div class="wrapper">
<div class="header">
<div class="content">
</div>
</div>
<div class="section>
<div class="content">
</div>
</div>
</div>
Now, without adding the extra specificity, you will grab all H1 tags in every content section of the page, but you probably don't want to do that.
It's not a problem to be non-specific in small files, but when you begin to reach into the hundreds of possible css interactions being very specific about what you are doing in the css can save you major headaches.