I've set two span elements side by side with a separating border being applied to one of the spans. The problem occurs when one span has more lines than the other. If the span with less content is the one which has the border applied to it, the border doesn't stretch to the bottom of the container.
I've tried adding height and min-height elements to the span, the containing div, the HTML and body tags in various combinations with no success.
Here is the sample HTML:
<div class="newspecs">
<div class="ns_row_type_2">
<span class="ns_field_name">Flash Exposure Compensation</span>
<span class="ns_field_value">+/- EV<br>more text<br>more text<br>more text<br>more text</span>
</div>
</div>
And the applicable CSS:
.newspecs div {
display: block;
clear: both;
}
.newspecs span {
display: inline-block;
vertical-align: top;
}
.ns_row_type_1,
.ns_row_type_2 {
border-bottom: 1px solid #fff;
}
.ns_row_type_1 {
background-color: #ccc;
}
.ns_field_name {
width: 100px;
padding: 3px;
border-right: 1px solid #fff;
}
.ns_field_value {
width: 280px;
padding: 3px;
}
The full CSS and HTML is at:
http://yazminmedia.com/clients/IR/test.htm
Anyone have an idea of what is going on?
Thanks!
Option 1: Floats, extra border, and 1px negative margin
http://jsfiddle.net/95uMq/
Option 2: CSS3
http://jsfiddle.net/95uMq/1/
Option 3: Table based Layout
http://jsfiddle.net/95uMq/2/
You should really be using a HTML TABLE here as this is a table of data that you are trying to display.
However as a nasty hack, change ns_field_value to...
.ns_field_value {width: 280px; padding: 3px; margin-left:-4px; border-left:1px solid #fff}
This just adds a border-left to the field value 'cell' and then does a -4px margin so that the borders overlap appearing to create a single border.
Related
this seam easy but i didn't find yet any way to do it. i have 3 divs (but the solution must work for n divs) like on the schema below :
| div 1 || div 2 || div 3 |
ex:
i want normal div like this :
on hover of a particular div i want ALL border of this div to have another color like this :
and finally, what i can't do, i want corner like it's show here:
i want first to collapse all the border. that easy with border-collapse:collapse. but After i want also to change the border color of the full cell on hover (top + left + bottom + right border). that also easy with border: 1px DOUBLE #000. But last (i block on this point) i want also a round corner on the top and bottom left of div 1 and on the top and bottom right of the div 3
it's look like that with border-collapse:collapse their is no way to have round corner ... so need to find another solution
EDIT: I try with the relative position and z-index and it's work a little better ! however i need to know how to move the 2nd div by 1px on the left, the 3th div by 2 pixels on the left, ... and the n div by n-1 pixels on the left?
Actually this is a little more complicated than you think.
border-collapse is for tables not for all block elements. Of course you can still make it work with display:table/table-cell.
But the hover will still be flawed since the collapsed border will belong to the first element - if you hover the 2nd or 3rd element the left border won't change.
And only then the lack of border-radius for collapsed border comes into play.
I'd say you'll have to go for a different approach. I'd probably go for inline-block (or probably rather with "old-school" floats to avoid whitespace trouble) elements with the borders overlapping by 1px and a change of z-index in the :hover to bring the hovered element to the top and make sure its border is the one displayed.
Not really clear what do you want, but just to try
.one {
width: 80px;
height: 40px;
display: table-cell;
border-collapse: collapse;
border: double 1px black;
}
.one:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.one:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
<div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
Is it what you want?
.container {
display: table;
}
.container > div {
display: table-cell;
width: 80px;
height: 40px;
text-align: center;
vertical-align: middle;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
border-left: solid 1px gray;
}
.container > div:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.container > div:last-child {
border-right: solid 1px gray;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.container > div:hover {
background-color: lightgray;
border-color: red;
border-right: solid 1px red;
}
<div class='container'>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>
Here's a solution that solves the two problems:
Rounds the outsides. This uses first-of-type and last-of-type and the border-radius property.
Overlaps the borders.
For the latter, instead of playing with z-indices, what happens is the right border is created and has a color changed. Then, the left-hand border of the next li is blanked out. Blanking the next li is done by using the adjacent sibling selector (+).
Here's a Codepen: http://codepen.io/anon/pen/JoyGxJ
Please help to achieve this with CSS:
I have array of text strings, from 1 char to 200 chars.
I need to display them in webpage each in separate box.
the box flow is similar to text, left to right until the end of page then wrap
the background color of each box must be cyan.
minimal width and height must both be 50 pixels
1-2 pixel space between boxes (maybe achieve with margin=1)
there must always be at least two pixels between text and the edge of the box
text is vertically aligned to middle
text is horizontally aligned to center
maximum width of box must be 300 px
if text does not fit in 50x300 it is cropped inside the box (box will not grow)
each box should have 1 pixel black border
this must be simple for someone experienced! I already try almost every possible CSS tag; but always something is wrong. I read about CSS boxing, but surprisingly it just made it more compilcated.
<style>
z {
min-width: 50;
#min-height: 50;
padding: 1px;
padding-color: magenta;
margin: 1px;
margin-color: red;
#padding-left: 10px;
display: table-cell;
#height: 50;
#vertical-align: middle;
#text-align:center;
background-color: cyan;
#border: 1px;
#border-color:green;
/* padding:10px 10px 10px 10px; */
border-top:1px solid
border-style:solid;
border-color:#ff0000 #0000ff;
outline-style:dotted;
outline-color:#00ff00;
outline-width: 1px;
color: blue;
}
</style>
<html>
<z>1</z>
<z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>
I am pasting this so just you can see how hard and wrong I try.
Ok.
Don't use made up/invalid HTML elements or invalid CSS comments. Just because "it doesn't seem it matters", doesn't mean it won't make problems. When your HTML/CSS is invalid it's impossible to tell if that's the problem or not and you'll only get answers that tell you to correct them.
CSS requires units on lengths. min-width: 50; is invalid and if it's working for you, that just means you aren't writing corrent HTML/CSS and the document is in Quirks mode, meaning the browser emulates old IE errors, which makes debugging just more difficult.
There is no such properties as padding-color or margin-color. Don't make up things. Use a CSS and a validator to check your code. (http://validator.w3.org and http://jigsaw.w3.org/css-validator/).
Using display: table-cell; will just place all elements in one "table row" with no wrapping.
<p><span><span>1</span></span></p>
<p><span><span>abcdefghijklmnope</span></span></p>
<p><span><span>2</span></span></p>
<p><span><span>blablablabla</span></span></p>
p {
min-width: 50px;
max-width: 300px;
height: 50px;
padding: 2px;
margin: 1px;
float: left;
background-color: cyan;
border: 1 px solid blue;
color: blue;
overflow: hidden;
}
p > span {
display: table;
height: 100%;
width: 100%;
}
p > span > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
See http://jsfiddle.net/DyzAD/1/
(Refined answer)
It's not display:block that is wanted if height/width is required, as the OP also wants the elements to appear next to each other, then break, so float:left; is required rather than display block;
I have implemented the usage of text-overflow:ellipses; to aid in "breaking" the text so the elements will always have a visual balance and vertical alignment. Maybe you could provide a tooltip or html abbr attribute to display the whole text?
float:left on 'z' on any element will (should) fix your problem.
span {
min-width: 50px;
max-width:200px;
height: 24px;
margin: 1px;
float:left;
text-overflow:ellipsis;
overflow:hidden;
vertical-align: middle;
text-align:center;
background-color: cyan;
border: 1px solid green;
padding:10px;
color: blue;
white-space:no-wrap;
}
http://jsfiddle.net/MzKCh/3/
I am not sure if I understand your requirements properly but mixture of float:left elements with display:table-cell will give you text that wraps when it gets to the end of the page but allows both vertical and horizontal center aligning
html:
<div><span>test</span></div>
<div><span>test 1</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length and will hide extra content if really really long</span></div>
<div><span>a</span></div>
<div><span>Amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>
css:
div
{
border:1px solid #000000;
background-color:cyan;
float:left;
margin:1px 1px 0 0;
box-sizing:border-box;
height:50px;
max-width:300px;
overflow:hidden;
}
div > span
{
display:table-cell;
min-width:50px;
max-width:300px;
height:50px;
padding:2px;
text-align:center;
word-wrap:break-word;
box-sizing:border-box;
vertical-align:middle;
}
http://jsfiddle.net/up6KC/6/
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.
Something like this:
This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container
I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.
Here's what I've tried:
CSS:
.line
{
display:inline-block;
border-bottom:2px #5B3400 solid;
margin-left:5px;
width:80%;
}
HTML:
<h2>Our Mission<span class="line"></span></h2>
Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?
I know this should be easy but I haven't been able to find a solution yet.
Thanks!
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2> is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the <h2> tag acts as a container for a floated element.
the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.
the <hr /> acts as the line, and fills up the remaining space to the right.
THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:
HTML:
<h2 class="line-title"><span>This is my title</span></h2>
CSS:
.line-title {
border-bottom: 1px solid #DDD;
font-size: 20px;
height: 12px;
margin-bottom: 10px;
}
.line-title span {
background: #FFF;
padding-right: 10px;
}
You can see a working example here: http://jsfiddle.net/yYBDD/
How it works.
the <h2> tag has a class that sets the height to half of the height of the text it contains.
the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).
the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.
And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.
You could use flexbox to do this.
http://jsfiddle.net/eHHep/ (prefixes not included)
<h1 class="lineme">This is my header</h1>
<h2 class="lineme">This is another header</h2>
.lineme {
display: flex;
}
.lineme:after {
display: block;
content: " ";
border-bottom: 1px solid;
flex: 1 1 auto;
}
Advantages over other methods:
No extra markup required
Background color is not required
Down side:
Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
Your line goes away if your text wraps around
HTML:
<h2><span>Our Mission</span></h2>
CSS:
h2{
border-bottom: 1px solid #000;
height: 20px;
overflow: visible;
display: block;
width: 100%;
}
h2 span{
display: inline-block;
background: #fff;
height: 21px;
}
This way it'll overflow on the bottom border as it has bigger height.
Demo: http://jsfiddle.net/afuzk/
Here's something I tried and that worked:
HTML
<h2>Our Mission</h2>
CSS
h2:after
{
content: "\00a0";
border-bottom: solid 2px black;
position: fixed;
top: 0;
width: 100%;
margin-left: 3px;
}
The JS Bin to test: http://jsbin.com/ayuvuc/4
I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable.
My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution?
You can implement a border using the pseudo-selector :after and absolute positioning, like so:
.line:after {
border-right: 1px solid #000000;
content: "";
display: block;
margin: 1px;
position: absolute;
right: -11px;
top: 0;
bottom: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
position:relative;
}
Here is a demo http://jsfiddle.net/andresilich/ZTyf4/show/
Edit here http://jsfiddle.net/andresilich/ZTyf4/
If you don't want the separating line to change the position of the next row of DIVs, I think absolute positioning is your best bet. What you could do is use an absolutely-positioned :after selector to position something relative to the bottom of the box yet not affect the layout. This works for me to position a line between boxes without affecting layout, just change the values of the last four properties as needed:
#topbox:after {
content: "";
display: block;
position: absolute;
margin-top: 25px;
height: 5px;
width: 400px;
background-color: #999;
}
I think this is do-able without jQuery. The main issue is accounting for the variable height of the elements.
reference here: http://jsfiddle.net/uqZgt/1/
HTML:
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS:
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
in this example, all divs in the .container div have a 2px solid black border-right. However, an element with class box-2 which directly proceeds an element with .box-1 will have a 2px solid black border-left, and no border-right. So far this creates a 3px border in between the two elements.
Now, .box-1 ~ .box-2 selects any .box-1 that directly preceeds a .box-2, and sets it's margin-left to -2px. This drags it's sibling two pixels to the left, which effectively makes the borders of both elements overlap.
The .container div has a width equal to the sum of the width of the two elements (200px), plus padding (10px right and left = 20px) plus the width of one of the borders (2px). 242px, so the two elements fit perfectly.
No matter which div has more content, the border will appear to span the height of the div with the most content.
I may not be understanding your problem. I would probably just use a right or left border on one of the columns and adjust padding to be sure it is centered between the 2.