i want to know whats the best way to position text inside a block element.
foo
normal link but styled as display block with a background
display: block;
width: 100px;
height: 100px;
background: #000000;
the text now is top left.
now the question: what the best way to get this text to example: bottom-left or bottom-right?
i prefer CSS solution without any new elements inside the A-Tag. Some opinions?
You could also make use of display:table-cell - however, that won't work in <=IE7
http://jsfiddle.net/QU9gy/
you can't select content to sit along the bottom. By using padding (padding-top) you can manually make it look like ist's justified to the bottom.
so in the above example try
display: block;
width: 100px;
height: 14px;
background: #000000;
padding-top: 86px
You can try this too.
display: block;
width: 100px;
height: 100px;
background: #000000;
line-height:188px;
font-size:12px;
color:#fff;
text-decoration:none;
If you change your font-size than reduce than value from 200px :) means if you are using 18px font than line-height would be 182px so total no will be 200px;
Related
I am trying to create circular buttons in CSS. I use border-radius: 100% to make the button look like a circle but it only works if I explicitly set the width and height of the element. But if I do so, the buttons will not adjust to fix larger text
This is what I've tried so far:
.round-button{
width: 60px;
height: 60px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button">Button</button>
</div>
<div>
<button class="round-button">This text will overflow the button!</button>
</div>
As you can see the first button looks pretty OK, but the text in the second button overflows it. I've used overflow: hidden to prevent it from looking ugly but I would like the buttons size to adjust according to the content's size. Is that possible?
In order to draw a circle, you need a square to start with .
You can insert a pseudo of an height equal to width using vertical padding with percentage value.
https://www.w3.org/TR/CSS2/box.html#padding-properties
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
Make this pseudo inline-block to help yoy center text.
If text has to wrap a few lines, it needs to be wraped within an inline-block .. if you use an inline-block pseudo.
You can set max and min width too.
example:
.round-button{
min-width: 60px;
max-width:120px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding:0;
}
.round-button:before {
content:'';
display:inline-block;;
vertical-align:middle;
padding-top:100%;
}
span {
display:inline-block;
vertical-align:middle;
max-width:90%;
}
.round-button:active{
background-color: #2980b9;
}
<div>
<button class="round-button"><span>Button</span></button>
</div>
<div>
<button class="round-button"><span>This text should NOT overflow the button!</span></button>
</div>
You are looking for an automatic way of making the width and height equal while it increases its size. If so, I don't think there's a way you can do that in CSS. I mean you don't expect width=height do you?
I'm not sure but JQuery might be the solution because it has operators and can interact with CSS.
Edit After reading the previous answer, I now understand that there's a way to do it in padding. But in my answer I said "I don't think". I loved the solution of #GCyrillus BTW.
I am making a search tool, and the search bar was originally a div, and everything was fine, but when I change it to input tags, the margin on the left disappears. Can someone please explain why this might be happening.
Here's my code (with header HTML removed for security reasons): http://jsfiddle.net/k3pv5cmh/
I have tried margin: auto, margin: 0 auto, and margin-left: auto with margin-right: auto. But none of these fix the problem.
On the JS Fiddle you can change the input tags to div tags and see the difference.
An input element is an inline element by default. A div is a block level element. So change your css to this:
#search-bar {
height: 50px;
width: 60%;
max-width: 800px;
background-color: white;
border: 2px solid rgb(230, 230, 230);
border-radius: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20%;
display:block;
}
Note: display:block;
Just add display: block; to your #search-bar definition. Input is basically line element, that means margin: auto; has no effect.
Inputs by default have style: display: inline-block;
Divs on the other hand, by default have style: display: block
The difference is in how much of container does each style takes.
You can see their differences here
If you want the same behaviour, you just have to put
style="display: block" in your input element and override its default style.
You can also add #container { text-align: center; } if you want to keep input tag inline. In this case you can get rid of left and right margins of input tag and put something next to it (may be button).
The text have a big space in the bottom here: http://jsfiddle.net/qHaFR/
And I am not able to remove it.
Can you tell me how to do it?
The wrapper, in this case <span> needs to be a block element with width and height defined. You'll also need to change the line-height to match the height of the container.
So your style would look like:
#foo {
background-color:yellow;
font-size:260px;
border:1px solid black;
width: 190px; /* if display: block; */
line-height: 200px;
display: block; /* or inline-block */
}
Just to clarify, were you trying to wrap A in an element such as <div> or <h1> you shouldn't need to declare it display: block because div and h1 are already block.
It's because the line-height is actually that big, in order for each character to be displayable there. In some languages that space is fully used. For example, if you'd type ÁĄ, you'd need whole 260px. If you're okay with not being able to display those characters, you'll need to change line-height accordingly and display it as a block:
#foo
{
background-color: yellow;
font-size: 260px;
border: 1px solid black;
line-height: 200px;
display: block; /* or inline-block */
}
If you're not okay with treating it as a block (it gets 100% width then or you'll need to set it yourself), use display: inline-block;. Also, type ÁĄ instead of A and see that the letters get their top and bottom cut. Here, see this: http://jsfiddle.net/vmVcr/.
Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg
I'm trying to recode one of my older forms. It was filled with tables that I want to replace with CSS. However I'm having trouble having text and a form element aligned vertically together. As the picture shows the text defaults to starting at the top instead of in the middle. The blue highlights around the row is dreamweavers interpretation / selection of what is going on.
I have label and input divs, both floated left, inside a div called #light, which is inside a general container. This is what my css code looks like:
#contentBox{
width: 600px;
float: left;
background-color: #e2e2e2;
overflow: auto;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
font-size: 12px;
}
#light {
float: left;
width: 500px;
padding: 15px;
background-color: #e2e2e2;
margin: 7px;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
vertical-align: middle;
}
input {
float: right;
width: 20em;
}
label {
float: left;
text-align: right;
vertical-align: baseline;
}
Any idea what the problem is? I've tried swapping around the vertical-align in different divs, floating in different directions, getting rid of the label but I just end up with more problems rather than less.
You cannot use vertical-align on elements unless they are table cells (or displayed as such) as this article explains. Set line-height to the element height if you've only got one row of text.
Usually, to solve that problem, I use the line-height property:
Ex:
div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}
This will set the font to 12px, and the line-height to 30px, keeping the font vertically align within the 30px of its line.
Vertical alignment of text can be incredibly annoying or incredibly easy.
If the size of all the involved elements are known, your best bet is to set manual padding/margins on the text itself to make sure it's aligned.
If the content you want to center vertically is dynamic, this is your best bet.
Not sure, but your input tag is set to "float:right", so its height won't be taken into account by the parent. Hence, the height of the parent is actually probably the height of the label (I suspect dreamweaver is not interpreting correctly what browsers do.) Try to remove the float on the input tag and see if it makes a difference.
Vertical alignment can be applied only to inline elements.
The best solution is to modify your HTML and make it like in this examples
You could go for a 'cheap' solution and apply a padding-top to the label divs.
<th>
My Heading
Sort Asc
</th>
I want to apply CSS to .sort-asc to replace the text "Sort Asc" with a custom 16x16 sort glyph image (/images/asc.png), placing the image directly to the right of the text. Is it possible?
NOTE: I can't change the markup. I can only apply styles; the following is my feeble attempt:
a.sort-asc {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url("/images/asc.png") no-repeat;
}
Currently, the image shows up all the way to the left of the table header cell. I need it to the right of the text "My Heading".
a.sort-asc {
width: 16px;
height: 16px;
padding: 0;
display:inline-block;
text-indent: 200px;
overflow: hidden;
background: url("/favicon.ico") no-repeat;
}
Removed float - you don't need it, it's on the right position. Text indent does nothing with inline, try inline-block: http://jsbin.com/abeme
Another hack is to add color: transparent, and a small size, but that too hacky.
If you remove the display block, you won't be able to set your width, height or use text-indent to hide the copy within the A. Try changing display:block to display:inline (since you're floating) instead - it may give you what you need.
Remove float and display:block for the text to appear next to the "My Heading" text.