I want to create a boxed border around some text, specifically numbers. But I want the box to be the same size, no matter if its a single digit number or a triple digit number. I've tried a couple things, but every time the border just wraps the number. The number will be wrap with the <strong> tag.
strong{
border: 1px;
border-style: solid;
font-size:12px;
}
As said in the comments, wrap your text using a div of fixed width and style the div with a border. Here is a live example:
#theDiv {
width: 300px;
border: solid red 2px;
}
<div id="theDiv">
Your Content
</div>
You have to give a fixed width to that element
strong {
display: inline-block;
width: 50px;
border: 1px solid #000;
text-align: center;
}
http://jsfiddle.net/Lcpvgykr/
I suggest using <div> tag in this situation (remember that you can place a div inside of div!) as it would look neat and you could do it pretty neatly. However it is also possible to make such a thing with 'padding:x' on CSS style sheet, but I do not suggest this way as it would be less efficient than div.
When you write your divs surrounding those numbers, define a class for all of them. Let's say <div class="numberBoxes"></div> (between would be that number), then go to CSS stylesheet and write .numberBoxes { } inside of curly braces design that border (remember to put width and height of div! It won't show up, if you don't!)
Related
I would like to create two adjacent <div>'s satisfying the following properties:
The left one contains a picture, and the right one contains some text.
The picture is resized so that its height matches the height of the text, without being distorted.
The right <div> has its width extended fully to the edge of the screen.
Here is an example of what I mean. I have manually set the height of the image to 70px, but I would like this to be automatically set so that the two blocks have the same height.
.container {
display: flex;
}
.left {
margin-right: 5px;
border: 1px solid black;
}
.right {
width: 100%;
border: 1px solid black;
}
<div class="container">
<div class="left">
<img src="https://media.istockphoto.com/photos/stack-of-colorful-books-left-border-picture-id147704087" style="height: 70px;"/>
</div>
<div class="right"> line 1 <br> line 2 <br> line 3 <br> line 4 </div>
</div>
I have heard that tables should not be used for this sort of thing, but if there is a solution with tables, I am okay with that.
Indeed using tables for img and text presentation is not considered a good practice.
I should add that styling them inline also is not considered a good practice too.
In case you need to dynamically change those values in a web page tou could use javascripts native methods to get and set those heights.
var left = document.getElementsByClassName("left");
var height = left.clientHeight;
document.getElementsByClassName("right").style.height = left;
I should also note that you should keep in mind that you should calculate any other DOM space that the element might use, like padding margin or border.
I want to align an text to an exactly position, like 2cm from right not the pre-stabled positions like right, left and center. There's an example: Example
How can I center the Regular, upgraded and exclusive cases like that?
per my comment, here is how the text is centered, but the price tag is included as an inline element with the text.
html
<p class="container">
Text goes here
<span class="block">
$3
</span>
</p>
CSS
.block {
padding: 4px;
background: lightblue;
border-radius: 2px;
margin-left: 4px;
}
.container {
max-width: 400px;
text-align: center;
border: 1px solid;
}
EDIT:
based on the additional information you provided, it's not just aligning text that you were having an issue with, but also layout in general.
I've updated my example to show how you could align elements within a container using text-align: center; and converting the different text/price items to have display: inline-block;.
This is just an entry point to get you started. There are many other ways to layout content with CSS, from floats, flex-box and new CSS Grids. I suggest you review each to determine what is appropriate for your project.
Updated Demo: https://codepen.io/scottohara/pen/oWLxXN
This is the html code.
<div id="sidebar1">
sidebar1
</div>
<div id="sidebar2">
sidebar2
</div>
This is the css code for the html.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
}
div#sidebar1 {
float: left;
}
The presentation of it looks like below in my latest firefox.
Why was the text 'sidebar2' not hidden by the div1?
The original html looked like below.
In my opinion, due to the float left, the entire div2 will be overlapped by div1 including the text in div2 like below.
the below picture is the moment when I hover to the div2 in firebug. Obviously, the text 'siderbar2' seems depart from the div2. why?
To get the problem, you need to understand that the box is not the content.
From W3C wiki:
Each rendered line is enclosed in a separate line box.
You make #sidebar1 floating, so you put it out of the flow
Now, #sidebar2 box can take its place
But, #sidebar2's content (aka. first line box) is different from #sidebar2 box, and was pushed down by #sidebar1
To avoid this kind of behavior, you can add overflow: hidden on #sidebar2, or better: float: left.
Many people doesn't understand float and don't think it put the element out of the flow. The way we use it usually makes us to think it simply "puts elements next to each other". And when we face an "issue", we solve it without understanding it.
This property's name is float, not arrange.
If you want the two elements to display over each other. Change the positioning of the first one to absolute.
This will take it out of the ordinary flow rendering and allow any elements to overlap with it.
div {
width: 100px;
height:100px;
border-style: solid; border-width: 1px 1px 1px 1px;
position:absolute;
}
div#sidebar1 {
float: left;
}
Consider following code. There is a top bar that contains a long text
<div class="topbar">
<div style="float:left;height:36px;line-height:36px;text-transform: none;">
long text....
</div>
</div>
For class topbar, I have this line,
border-bottom: 1px solid #b6b6b6;
which draws a underline for the topbar.
Usually there is no problem. The long text occupies one line. However, when I shrink browser width, the long text occupies two lines, and the underline remains at the original position.
So my question is how to make the topbar extends height when the long text occupies two lines? Probably I miss something in topbar css style?
Here is the topbar css style:
font-size: 19px;
border-bottom: 1px solid #b6b6b6;
padding: 11px 0 7px 0;
color: #737171;
text-transform: none;
Thanks.
if you want to underline the individual lines of text why not use
text-decoration: underline
Also if you want the height of the element to change use the min-height attribute instead of height.
Try to add this.
.topbar:after{
content:'';
display:block;
clear:both;
}
The clear:both helps to change the .topbar element height when there are more than one line.
Try this for your div's css:
word-wrap: break-word;
I am looking for the solution which will make elements within anchor vertically aligned to the middle.
Typically I have a name and the numeric value, both in the same table cell, which must be clickable as a whole. The name must be aligned to the left (floated), the numeric value to the right (text-align).
I am using this solution: http://jsbin.com/edecof where everything works just fine until the name is too long to fit on a single line. When it breaks to two or more lines, the numeric value stays vertically aligned to the top, because of the floated element overflows the anchor. Knowing that I am obviously facing the challenge to make anchor 100% height of table cell. Adding a clearfix element doesn't help, adding clearfix solution with before and after tables doesn't help either.
The expected result is to align the number in the middle too.
Any ideas?
Here is the WORKING SOLUTION for the issue that needs to be vertically aligned.
The HTML:
<table>
<tr><td><strong>A man without a name</strong><span>188 cm</span></td></tr>
</table>
The CSS:
td {border: 1px solid #000; width: 150px; text-align: right; border-collapse: collapse;}
td a {display: table-row; text-decoration: none; color: #333; background: #f90; vertical-align:middle;}
td a strong {width: 60%; display: table-cell; text-align: left;}
td a span{display: table-cell;
vertical-align: middle;}
The Logic:
To add vertical alignment to the issue in question i.e 188cms, you need to either create it in a separate table-cell or if you do not want to create it separately, you need to add a tag within which it should co-exist. In this case, you need to wrap it between the span tag.
Hope this helps.
HTML:
<table>
<tr><td><a href="#" >
<table ><tr><td>A man without Name</td>
<td>188 cm</td><tr></table>
</a></td></tr>
</table>
CSS
td { width: 150px; text-align: right;}
td a {display: block; text-decoration: none; color: #333; background: #f90; border:solid 1px; }
a td{text-align:left;padding-right:5px;}
The key for this is usually the line-height property in CSS, combined with vertical-align:middle. (JS: .lineHeight, .verticalAlign)
line-height is measured in px, and should be equal to the height of the parent. You may need to set the element to display:block, but if it's floated I think it will work right away.
HTML DOM is notorious for struggling with 100% height; most (all?) solutions fail without an explicit pixel height on a parent.
Javascript can be used after the page is rendered to match a child's .lineHeight to its parentNode.offsetHeight, perhaps, but in general styling a page with Javascript is less elegant than using CSS.
EDIT
To further elaborate on the JS solution then, something like this can get you started:
var element = document.getElementById('yourelement');
var h = element.parentNode.offsetHeight + 'px';
element.style.height = h;
element.style.lineHeight = h;