im building a minesweeper game, and i included a 10*10 table. i programmed it so that when a user clicks a "td", it displays either nothing, or a "b", or a number 1-4. however it also resizes (shrinks) when it does so, how do i prevent it from doing this?
css for table
table{
border-collapse: collapse;
border-spacing: 0px;
border: 4px inset #444;
}
css for td
td {
margin: 0px;
}
css before clicking
.box{
border: 3px outset #959595;
width:25px;
height: 25px;
}
this css is for a bomb ("b"), nothing, and numbers.(the difference with those is color)
.bomb{
border: 1px dotted #000000;
width:25px;
height: 25px;
}
heres a link if that helps
what is the css after clicking?
i think it's resize because of border with diffrent value
Use a developer's tool to very carefully measure out your box-models. You should be using some padding inside the <td> so that the borders do not overwrite or coincide with the table. My suggestion would be to use display:block on possible <td> contents and set the border so that it appears within the actual grid lines of the table.
Related
I have a context specific class that I want to certain headings on the site and I'm using the following code to apply a 2px full width line under a heading:-
.headingCustom2 {
color:black;
text-align: center;
padding-top: 50px;
border-bottom: 2px solid #000;
padding-bottom: 3px;
}
I want to add 20px padding beneath the underline so there's space between it and the div below. It needs to be independent of padding:bottom. My searching has only returned results on padding-bottom which alters the distance between the heading and the underline. Wanted to keep it to a distinct class as there's a lot of headings across the site it will need to be applied to. The heading font, Heading 5 is also used in other non-underlined contexts. Anyway, I hope this question isn't too tiresome.
You can try to use ::after
.headingCustom2::after {
content: '';
display: block;
height: 20px;
}
I am trying to format via css a paricular table as it shows in the below picture:
As I am new to css I am having problems with specifying:
Borders: As you can see I want to have different border colors and weights for vertical and horizontal borders; for row names and column name
Gap after the 13th column: One solution would possibly be to create a second table and place them next to each other but i wouldn't like to go for that solution
Conditional Formating: Could I do that using css or I have to go the jQuery solution
Its pretty simple actually.
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
table td {
border: 1px solid #000;
}
table th {
border: 2px solid #000;
}
table tr th:nth-child(4),
table tr td:nth-child(4) {
border: none;
width: 20px;
}
Conditional formatting should be handled by JS, or if the data is populated from a database, do it on the server side and use classnames on the columns.
See jsfiddle: http://jsfiddle.net/b579hy76/
Be aware that with nth-child(x) you have to add an extra empty column after the 13hn column to archieve this effect.
Here is a funny problem that I encountered.
I am using Asp.net MVC WebGrid in my project. I am trying to apply some CSS to it.
So changed the code to
#grid.GetHtml(footerStyle: "pagination")
Now, the pagination class has some code like this
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #F2F2F2;
}
So now, when I run this file and hover over the page numbers, the panel containing the table starts expanding! One row at a time!
I know I can't manage to get this kind of effect with just CSS if I tried. :p But I am getting it by accident! And it goes away only if I remove both the border and the background-color attributes.
I am just curious to know how is this happening??! Anyone has any idea?
Borders add to the size of some elements. For example, consider you have a div with a height of 800px and a width of 400px. If you add a border of 5px to that div like so:
div.class {
border: 5px solid black;
}
Then you'll notice that the box expands by 5px in every direction; resulting in the box being 810px by 410px.
This can be avoided by using something like this:
div.class {
border: 5px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
This should solve your problem... hopefully!
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.