I would like to make a text element have a border around it like this in an upcoming ghost dashboard: Ghost blog
I have done this:
border: 10px solid #ffffff;
however that works for the height but not the width. The width is a lot wider. I know I could set the width to something however I would like the width to update when the text is changed, so there is always a certain amount of space between the text and box on each side.
I'm not sure how to do this or if it needs JS or if it can be done with pure CSS.
You are going to want to use padding and display:inline-block; on a span element in order to do this. For example:
HTML
<span>GHOST</span>
CSS
span {
padding: 10px;
border: 10px solid white;
display: inline-block;
}
This will allow the border around the text to shrink and grow depending on the length. It will also keep 10px of space between the border and the letters no matter the size.
Here is a fiddle: http://jsfiddle.net/ZDzn2/
If I understood you correctly, you want the border-width to be included in the css-width?!
you should then try the box-sizing attribute via CSS:
box-sizing: border-box
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
[Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing]
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
[Source: http://css-tricks.com/box-sizing/]
Related
I'm trying to create a small navigation menu, however IE seems to render it differently, completely messing it up.
Here's what html/css I'm using (jsfiddle renders it correctly, as does chrome):
http://jsfiddle.net/Seytonic/gmp975sm
However IE renders it like this (I omitted the bootstrap in the jsfiddle):
EDIT: I'm using IE 11
This is one reason why it's important to declare a width on floated elements. If you don't, the box size may render differently across browsers.
Try adding width: 330px to the #navigation container.
Revised Demo 1
The 330px is just for example. You can use relative units, like percentages or ems, as well.
Again, to avoid unpredictable browser behavior, also specify a width for the two floated child elements:
#navbar li { width: 49.5%; }
Then adjust the spacing between the boxes on the top row:
#projects { margin-left: .5%; }
#about { margin-right: .5%; }
Lastly, width by default only includes the content box. Make it also account for padding and border with box-sizing: border-box:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}
Revised Demo 2
This question already has answers here:
How can I align two divs horizontally? [duplicate]
(10 answers)
Closed 4 years ago.
I am mainly a backend developer but am trying to get a layout to come out right. Basically I am creating a list view page that will contain a div tag on the left that has a bunch of filters (drop down lists, checkboxes, etc). On the right side of the screen I am going to have a div tag that contains a grid. This seems to be working but looks terrible when I'm on an overhead or when my screen is not maxed. Am I doing this right? Basically here is what I am after:
The CSS I had done for this was as simple as this:
.filterContainer {
width:20%;
float:left;
}
.gridContainer {
width:79%;
float:right;
}
Basically .filterContainer is my left div (dLeft) and .gridContainer is my right div (dRight). Is this valid for what I am trying to achieve? The result is as shown here:
http://i.imgur.com/WFasMF1.png
However, if I resize my window I end up with the following result:
http://i.imgur.com/4u9HRlK.png
Which I guess is normal because I'm resizing, but is my css valid?
First of all when you are dealing with Grid Based layouts, always make sure you use
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
Note: * is nothing but a universal selector which will apply the
defined properties to every element. Inorder to target specific
elements, use more specific selectors like div.class_name etc
Now, why you need that?
If you see in the diagram below..
CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.
Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;
How do you achieve this?
Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.
Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.
Demo
<div class="wrap">
<div class="left_wrap"></div>
<div class="right_wrap"></div>
</div>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
.wrap:after {
clear: both;
display: table;
content: "";
}
.wrap > div {
min-height: 300px;
}
.wrap .left_wrap {
width: 30%;
float: left;
border: 3px solid #f00;
}
.wrap .right_wrap {
border: 3px solid #000;
width: 70%;
float: left;
}
if you make the left container fixed width that will help. and you can always wrap both those divs in another div where you set a max-width if you'd like.
Maybe you can use position:absolute?
Or just use table tag for what it was designed? It is not like W3C plans to discard that tag in near future.
That is not a normal behavoir of floated blocks, since they placed before any normal block and not use normal parent container context.
You can use Frameset for dividing your pages into frames and then add css to it for style.
According to the standard, adding padding to a HTML element in CSS will grow the element by the amount defined. For example:
.elem {
width: 100px;
height: 100px;
padding: 20px;
}
will add 20 pixels to the .elem's sides, causing the actual width and height to be 140px total.
Since this is actually pretty impractical in web design (having to calculate and keep track of the resulting sizes), I was wondering if it was somehow possible to do the reverse instead. I set a padding, and the inner text area shrinks instead. So the element stays at 100*100px, has the padding of 20px inside it, and I don't have to worry about messing up my design while experimenting with the padding.
Is this possible? Perhaps through a language that compiles to CSS (haven't looked into that much)? And perhaps a more minor question: why does it work this way in the first place?
Use box-sizing:
elemSelector {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This value for the property declares that the declared size of the element will include the border and the padding.
References:
box-sizing at: 'CSS Basic User Interface Module Level 3 (CSS UI)'.
box-sizing at MDN.
It is currently impossible to perform what you are after. You'll have to account for padding in total width before you attempt to define what your css 'width' value will be. For more information on this, see the CSS Box Model. This is the only method to guarantee correct sizing in all web-capable devices, CSS3 compatible and not.
When assigning some HTML elements (like a form input) 100% width - you can no longer apply any additional styles that might effect the width. Things like border or padding will cause the element to exceed 100%. This results in awkward elements that may be outside of their parent elements.
Since CSS doesn't support width: 100% - 2px; The only way I know around this is to use an absolute pixel width (width: 98px) or chop the element off at 100% which is not really an option.
<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>
Are they're any other ways around this?
Along with adding another div, the solution will soon be to use CSS 3 to add the box-sizing attribute to the CSS rules. This new CSS 3 value already works in IE 8 and all other browsers - so if you don't mind skipping IE 6 & 7 you can use it now!
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
You can make a container that's 100% without chrome (borders, padding), and then place a block element within, with whatever chrome you want - a block element will fill-up the total width by default.
<style>
.container {width:100%;border:0:margin:0;}
.thingy {border:1px solid black;margin:2px;background:#ddd;}
</style>
<div class="container">
<div class="thingy">
Both worlds?
</div>
</div>
This is an old question, but it's worth mentioning that since CSS3, you can use calc:
width: calc(100% - 2px);
When I use the following CSS:
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
with this HTML:
<input type="button" value="Foo" />
I expect to see this, so the total height becomes 36px:
1px border
7px padding
20px content (with 15px text)
7px padding
1px border
But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)
Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border
Does anyone have any idea why this happens?
(Even if it's expected behavior, what's the logic behind it?)
Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.
To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.
You can disable this behaviour with:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)
The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.
A few things you can try:
Set the doctype of the document (<!DOCTYPE html>)
Set the input to be display:block or display: inline-block
Use a reset stylesheet.
It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.
I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element.
I Also set the line-height, font-size and the font-family.
worked on FF,IE,safari and chrome :D