Can anyone write the code to display this shape?
The code so far
html
<a class="steps_boxes" href="#"></a>
css
.steps_boxes {
width:22%;
height:auto;
background:#e7f4ef;
border-radius:6px;
float:left;
margin:0 2%;
padding:20px 0;
}
.steps_boxes:hover {
background:#ff7429;
}
a.steps_boxes {
color:#119865;
font-size:28px;
text-decoration:none;
}
a.steps_boxes:hover {
color:#fff;
}
I do not have 10 reputation to post image, It's basically a rectangle with a semi circle on the bottom center of the rectangle. Can email the pic to anyone who can help.
This is an answer based off of the one by damien hawks. I have included some jQuery so that both shapes change color on hover. You can adapt this to be closer to the code you had provided.
DEMO
HTML:
<div id="rectangle" class="hover"></div>
<div id="halfCircleBottom" class="hover"></div>
CSS:
.hover {
background-color: #e7f4ef;
}
.hovered {
background-color: #ff7429;
}
#rectangle {
margin: 0 auto;
width: 200px;
height: 50px;
}
#halfCircleBottom {
margin: 0 auto;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
}
jQuery:
$(document).ready(function () {
$('.hover').hover(function () {
$('.hover').toggleClass('hovered');
});
})
With this you can put the rectangle and half circle divs in a container and position them wherever you want.
Is this what you're looking for? I made a jsFiddle doing that. Just click on the link and comment below regarding what exactly you want to do.
Simply used two css classes two make two different shapes and to get the circle to the centre of the rectangle have used margin-left:50px;
Related
Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.
I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)
To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.
The code on the JSFiddle is as follows:
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}
Any help is appreciated, and if you would like me to clarify anything please do ask.
Thanks,
Jake
Demo http://jsfiddle.net/Amn7S/
Dont use z-index:-1; use z-index:1; and z-index:2; then it works.
#div-1 {
background-color: grey;
z-index:2;
position:relative;
}
#div-2 {
background-color: black;
position: relative;
margin-top:-25px;
z-index:1;
}
instead using z-index-1; you should use positive z-index and tell each div where to stand.
http://jsfiddle.net/wdQWu/3/
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
position:relative;
z-index:1;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: 0;
margin-top:-26px;
}
oups, little late, answer already there :)
You could change the z-index of the link to be above the 2nd div
something like this maybe ?
http://jsfiddle.net/wdQWu/1/
I've used a div with a class wrapper as you can see in the code.
.wrapper {
width: 350px;
border-radius: 0 0 16px 16px;
background-color: black;
}
Hope it's useful..
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding
Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don't have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?
sure just put the border on too.. and where there's a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?
Example Fiddle
div, img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
background: #0f0;
width: 200px;
margin: 50px;
text-align: center;
line-height: 40px;
}
HTML:
<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">
Update: Webkit browsers do have problems with this if it's actually an image that needs rounding with borders, here's one workaround that seems to help:
New Example Fiddle
(view with webkit to see difference between second and third images)
HTML:
<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>
CSS:
div {
margin: 50px;
text-align: center;
line-height: 40px;
width: 100px;
height: 100px;
}
.ri {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
border: 1px solid #000;
}
.ri img {
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
}
the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn't appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy ;)
You might try this curved-corner project on Google Code that purports to allow the border-radius CSS property to work cross-browser.
you can write with css3 & for IE you can download piecss3 js.
Example
div{
width:200px;
height:200px;
background:red;
color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
border:2px solid yellow;
behavior: url(PIE.htc);
}
check this
http://jsfiddle.net/sandeep/KDBGV/
The other ways is:
CSS:
.container {
background:gray;
color:#fff;
margin:0 15px;
}
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML:
<div class="container">
<b class="crvtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
Place the content here
<b class="crvbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
This is going to work in all the browsers.
Cheers and Enjoy :)
Well Cris,
The classes are for the spanned elements to create a curvy edges. Simply modify
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
with
.crvtop, .crvbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom * {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
and it will work
Hope that helps..
This is my layout:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
And the CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
The round borders don't appear on the item elements.
If I put them separately in itemHeader and itemFlag they appear.
But I'd really like to clear some code and put them in the item
Also can't get the radius to work on the divContainer class. I want a rounded container which contains rounded rows.
What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.
I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.
If you remove the background color from the table rows, and you can add this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your class names.
You can see it in action here:
http://jsfiddle.net/jaSs8/1/
Maybe the problem is in divContainer class. Try to change the display attribute to table-row.
You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
I think best solution for this case is to create wrapper for table tag and apply all border styles to it.
<div class="tableWrapper">
<table>{tableContent}</table>
</div>
<style>
.tableWrapper {
border-radius:10px;
}
</style>