Firstly, I'm not good at English. Sorry T.T;;
I want to make a box like this, which has a border with two colors. I've been trying to make it using CSS border-color, but I cannot implement it. I hope to know any idea for this.
I do not want to have a duplicated div. I want to use CSS only.
How can I design this using CSS ? pls T.T;;
This is what I have so far:
#box{
margin-top:10px;
width: 950px;
height:100px;
border:5px solid #f3f3f3;
padding: 5px;
}
<div id="box">
</div>
Regards,
What you are looking for is the CSS3 box-shadow.
#box{
margin-top:10px;
width: 950px;
height:100px;
border:5px solid #f3f3f3;
padding: 5px;
box-shadow: 0px 0px 0px 2px #ddd;
}
<div id="box">
</div>
When you apply the box-shadow with a 0px value for the x-offset and y-offset, you get the shadow on all four sides. Furthermore with a 0px value for the blur, it ultimately looks like a border with two colors.
On a page when we tab across elements, they get focused and those elements get highlighted with some browser specific css.
Like on button when focused it shows like below screen shot.
Notice the white dotted line on button
I would like to show exactly similar when button is hovered
button:hover {
/*What should go here?*/
}
Is this what you're looking for? http://jsfiddle.net/Screetop/tpx5tyxc/
As mentioned by the others, take a look at the outline property. Also the box-shadow simulates a border around your button.
<button>Submit</button>
button {
display: block;
background: grey;
padding: 5px;
border: none;
box-shadow: 0 0 0 3px grey;
}
button:hover {
/*What should go here?*/
outline: 1px dotted white;
}
button:focus {
outline: 1px dotted white;
}
There’s the CSS outline property, but it won’t render inside the element. If we use a simple border for the dotted line, we nee to get some spacing between the dots and the visible border. Perhaps using box-shadow? Try this:
button{
width:140px;
height:36px;
color:#FFF;
background-color:#555;
border:1px dotted #555;
border-radius:2px;
box-shadow: 0 0 0 4px #555;
}
button:hover{
border-color:#FFF;
}
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
I know there are a bunch of questions about this already but none of the solutions actually work for my particular situation. This is what the layout looks like without any fixes for vertical centering: http://jsfiddle.net/4FsKG/9/
This is with tr#toolBar: height and line-height set to 2.25em: http://jsfiddle.net/4FsKG/10/. This centers everything but the border around my page numbers results in a gap that you can easily notice under the borders on the left. In addition, the border takes up the whole height of the cell instead of just being around the numbers as intended.
I've tried numerous other solutions to the problem but all of them end up as some variation of the two examples I've already shown.
I would like everything in the row to be centered vertically while allowing me to put a border around things like my page numbers. Anyone have any ideas?
The CSS for my example:
table {
background-color:#274F68;
font-size:0.85em;
white-space:nowrap;
border-collapse:separate;
border:1px solid #274F68;
border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
}
tr#input td { border-bottom:2px solid #6189A3; }
tr#input td form {
float:right;
}
tr#toolBar {
font-family:Arial;
background-color:#152939;
color:#6189A3;
}
tr#toolBar td { border-bottom:2px solid #6189A3; }
tr#toolBar td a {
padding:0;
margin:0 3px 0 3px;
}
.dataTables_length { float:left;}
.dataTables_info { float:left; }
.dataTables_filter { float:right; }
.dataTables_paginate { float:right; }
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
float:left;
border: 1px solid #6189A3;
}
Just replace floats with display:inline-block with vertical-align:middle and that will do the trick: http://jsfiddle.net/4FsKG/42/
But don't forget to also add _display: inline; zoom:1; if you want to support IE7 and below.
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.