What is the best/correct way of making a table like thing with divs.
I've tried different methods, with position: and using percentage's.
What I want is text and input box on the same line and make the input box scale with the size of the parent div, responsive design.
JSFiddle
Help would be appreciated :)
just add this extra line of CSS -
#box input[type="text"]
{
width: 100%;
box-sizing: border-box; /* This line */
}
Fiddle Demo
You can also use - display: table-cell on div to mimick like a table cell, similarly, you have display: table-row, table-column, etc. They implement table like behavior to divs.
Related
I want to create a horizontal nav that sometimes has multiline link text (not always; it's dynamically generated), and that has all the text vertically centered.
The caveat is that I'd also like to make the nav so that the a elements fill up the entirety of their containing element so that the clickable and hoverable area is much bigger for each link.
Is this possible with just CSS? Thank you.
full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below
Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table styles is going to help you here.
If you apply display:table; to your containing div/ul/whatever, and display:table-cell to each item in your navigation, you will then be able to use properties like vertical-align:middle;.
Do you know how many elements you will have in your navigation? If not, create a few css properties that look like something like this:
.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407