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 8 years ago.
Improve this question
In the code below, we have for the section class="body" and a different class for each of ol, li. h2 , footer and div. What is the use of mentioning class="body" in the section when we don't apply it anywhere? In case we give a css for the "body", how will it be reflected in the code?
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
If you read the article that you posted a link to... you should find the following...
LIMITING OUR BLOCKS
Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I've never been a fan of the big wrapping <div> to do that. So we'll use the basic block centering technique using margins for this. I'm also adding a couple of generic classes to this section that might be used for a post side content.
Layout
.body {clear: both; margin: 0 auto; width: 800px;}
img.right >figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; >margin: 0 0 2em 2em;}
...end quote...
In general terms, if you don't reference a class name in css or JavaScript then there is not much of a purpose in including it in your html.
If you add a css rule like the following:
.body {*css rules*}
...then wherever you have class="body" those rules will be applied to it.
Hope that helps
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make my .screen class to be on its own line. Assuming I can not change the current layout.
<div class="app">
<div class="screen"></div>
</div>
I though that display: block; would do the trick but no.
.screen {
display: block;
}
As of now it all sits on one line. I am only handy with flex and I can't think of anyway flex will help me here.
If you're using flexbox flex-wrap can help. Make the first child 100% wide and put flex-wrap: wrap to the parent.
By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS. There is probably override of <div> style.
Try to use !important to prioritize your style:
.screen {
display: block !important;
}
Also, check the style of div in browser's inspector and provide that info – it would be useful to get more details
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
hello i have two codes to understand the first question is how does the * get rid of my LI list styling when i not told css to do so this is the code that getting rid of the bullet points
*{
margin:0;
padding:0;
box-sizing:border-box;
}
and my second question is about div classes i was clawing though facebook's html makeup looking for ideas and i want to know why facebook use a lot of div classes for css when most the code i looked at could easy have been put in one css class i understand css and code being reusable but most of it was just for one div and not use any where else so why would you use multi css statements for one div is this because of readability or optimization or and i missing something and sorry about my english and punctuation
To get the margin and padding back to the <ul><li> just set it after you used the * see here: http://jsfiddle.net/8mbrn3ra/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul, li {
margin: 10px;
padding: 10px;
}
The other part of your question: I don't know why facebook does the things it does. But one reason could be that you have a div as a wrapper of things. If this div has a class with given styles and you want to use them somewhere else you just need to set the class to the wrapper. Understand what I mean?
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 8 years ago.
Improve this question
I would like to create a text like that:
My question is, how can I create it using CSS?
The closest solution I've found was unicode with circles:
①②③
Start by simply creating something like the HTML and CSS below:
HTML
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
CSS
li {
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
border: solid 1px #888;
line-height: 25px;
}
li a {
display: block;
}
See example here
To add the numbers with CSS before/after selectors-See this example.
In my opinion using a span is better than using a custom font because of two reasons
Support across all browsers - Many browsers don't support custom font
It is one extra resource download (font file) for the browser so it will affect performance and contribute to the overall page load time.
Of course you can always style each letter differently by assigning classes individually and applying some specificity but that could be more work than it's worth and very hard to maintain. I would recommend lettering.js and you can find it in Github for free download.
here are some links to get you started.
Ahandling Web Typograhy
Lettering.js
lettering.js download on GitHub
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have no doubt that this will end up being some rookie css error on my part, but I can't figure out why Chrome and Safari render this page the way I would like and expect, while Firefox and IE9 will not:
http://turtlemountainbrewing.com/wordpress/beers-on-tap/
For the text "Guest tap:" and "TMBC DRAFT LIST" I have a div at width 100% with the css set to align the text-center, with a bottom margin and border, but Firefox seems to ignore these rules entirely, which don't even show up in the css when I inspect the element. It also won't render some colored circle divs I have floating next to the beer titles.
This is also affecting the links I have in the right footer area in a similar fashion.
It seems something is canceling these style rules out but I can't figure exactly what.
In this stylesheet you have a syntax error.
You have:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b;
!important
}
This it what it should be:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b !important;
}
I am not positive this is the problem. But it would be my first guess. Also on a side note I would suggest using header tags for headers instead of paragraph tags. And like others have mentioned, validating your code is also a good idea.
Page checked: http://turtlemountainbrewing.com/wordpress/beers-on-tap/
Total errors found: 76 (Parsing: 13, HTML: 63)
Total warnings found: 1 (Parsing: 1)
(X)HTML used for this page: HTML 5.1
When it 'bugs' in a browser or 2, and not in another browser or 2, i validate the html and MOST OF THE TIME, it fixes what some say beeing 'bugs' but what i say is broken markups.
About validating : http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/
line 370 in css/other/custom.css remove double quote mark
line 442 in the same file !important should be before the ; mark
You can use a css validator in order to check these kind of errors ;)
for example http://jigsaw.w3.org/css-validator/validator