Hi all am trying to create a info box using css by an gradient box and which must expand by its contents goes large and which has to support old version upto ie6 i can able to create box using pure CSS and CSS3 which is not working on old browsers so am planned to do it using background image concept but i can't able to finish it.
this is the image used as background
Gradient rectangle box
then I sliced the images as four slice and I styled and markup ed using this four corners like
CSS
.rounded-box{
background: #fff url('../img/top-left-radius.png') no-repeat;
}
.top-right-radius{
background: url('../img/top-right-radius.png') no-repeat top right;
}
.bottom-left-radius{
background: url('../img/bottom-left-radius.png') no-repeat bottom left;
}
.bottom-right-radius{
padding:20px;
background: url('../img/bottom-right-radius.png') no-repeat bottom right;
}
HTML
<div class="rounded-box">
<div class="top-right-radius">
<div class="bottom-left-radius">
<div class="bottom-right-radius">
rounded box :-)
</div>
</div>
</div>
</div>
it add the corners of the box correctly and now the problem top,bottom border and center background gradient i don't have any idea to do it please help me out
Use css3pie
http://css3pie.com/
or jquery plugin
http://jquery.malsup.com/corner/
Both solutions will allow you cross browser compatibility.
Related
I have these divs with same classes and same css design containing pictures
<div class="it2" style="background: url(../images/ian.png) no-repeat top center;"></div>
<div class="it2" style="background: url(../images/top.png) no-repeat top center;"></div>
<div class="it2" style="background: url(../images/ylle.png) no-repeat top center;"></div>
what i was trying to do is when I hover on one of the divs the background will become red without covering the picture
any possible idea?
I tried adding in the css:
.it2:hover { background-color:red;}
but it is not working
I'm presuming the typo in your code snippit is just in the posting, and not in the actual code?
Presuming that your actual css file has 'background-color' instead of 'hacground-color' as the property name, is all your CSS inline, or is some in a separate stylesheet? Inline CSS will always over-rule the stylesheet (which is one of the adcvantages of starting with everything in the stylesheet -- more room to work with, when changes need to happen.
Does your png have transparency and are you using a browser that supports that? If not, the background color will be behind the image, and thus you won't see the change.
If your site needs to work on browsers that don't render transparency properly, you may need to use two background images, (the only difference being the background color of the image) and use the CSS to switch between them.
try this:
.it2:hover
{
background:url() no-repeat top center;
background-color:red;
}
I always have a problem trying to figure out the best way to make expandable content boxes. I used to use tables and cut the box into sections (top, bottom, left and right - then each corner in a table cell too, with an expandable middle cell for the content) This worked flawlessy on all browsers but its generally frowned upon.
Today i have an image which i need need to only expand vertically. however it has a drop shadow and the top 200 pixels or so has a gradient. Heres a link to the image im working with.
http://imageshack.us/photo/my-images/16/brandinfobox.png/
The content needs to flow and the div needs to expand vertically as the content grows. Ive looked at a few approaches but ive either not been successful or they have just not worked in some browsers. The main problem is the drop and shadow and top gradient. Those stop me from using a base background then absolute positioning some divs inside as the background ruins the drop shadow when i absolute position the outer edges.
Any advice? Sure its fairly simple if you know your way around css
May be you can do like this for this type of image & gradient
http://jsfiddle.net/wh6r4/
edit: added CSS code
.content{
background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
width:647px;
min-height:300px;
position:relative;
margin:50px;
}
.y-repeat{
position:absolute;
left:2px;
right:7px;
top:0;
bottom:0;
background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
height:20px;
width:100%;
position:absolute;
left:0;
}
.top{
top:-20px;
}
.bottom{
background-position:left bottom;
bottom:-20px;
}
If that box can have a min-height than here are some ex. how to do it:
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
OR EVEN BETTER:
You can make expand a gradient image inside the middle DIV, by setting position:absolute, width 100% and height:100% !!
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle">
<img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
Another trick is to simply use a CSS3, you'll get support for IE gradients but not for shadows and corner (border) radius.
http://jsbin.com/uberub/2/edit#javascript,html,live
I would add a linear-gradient in CSS3.
For the surrounding rounded box with drop shadow, whether I go for 100% CSS3 or two background images and an extra div would depend of the requirements of my client.
I would split the image into three horizontal strips. One for the top, including the rounded corners, one for the bottom, including corners and shadow, and one very thin strip for the middle.
Then with markup like this:
<div style='background-image: url("middle.png"); width: 400px;'>
<img src='top.png'>
Expanding content in the middle
...
Can be as big as you like
<img src='bottom.png'>
</div>
I have some layout css questions. Their more like best practices and whats the most efficient way to build this. Let me start with a diagram of what I'm trying to achieve.
This header menu background will be liquid and the buttons inside it will be fixed. So really its made up of a left button independent of the gray style background. Then 3 or more buttons in the gray style background followed by some icons and a search filed, all within the gray background. My main issue is getting started with how to achieve the grey background expanding to the browsers width 100% and still having 2 rounded corners at each end.
Here is a pseudo html structure
<div id="menuHeader">
<ul>
<li class="">home</li>
<li class="">button1</li>
<li class="">button2</li>
<li class="">button3</li>
<li class="tools">
<div class="icon">icon1</div>
<div class="icon">icon2</div>
<div class="icon">icon3</div>
<div class="search"></div>
</li>
</ul>
Now the css issue where do I put my repeating background. If I put it on the menuHeader as a background image then its going to be one long repeating background graphic with no left and right corners.
Would I need to setup a div for left right and center. Then have my gray buttons inside that and my blue home button outside that center div to the left of the left div. Or is there a way to do it where I can use the existing tags I have now and not have to deal with extra empty div markup.
I'm sorry if I'm not more clear but the main question I think is clear how can I get the background graphic to have rounded corners along with repeating background. Then be able to add my buttons in as background graphics.
Update: this is not going to be html5 unfortunately
#menuHeader {
position: relative;
width: 100%;
background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
position: absolute;
top: 0;
width: 20px;/*Whatever width*/
height: 40px;/*Whatever height*/
}
#leftside{
background: url("left.png") transparent;
}
#rightside{
background: url("right.png") transparent;
}
Add this HTML inside the div#menuHeader:
<div id="menuHeader">
<div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
....
</div>
Create two images (or one, to reduce server load, and use background-position). If you want to add that blue box, expand the left background-image. Make sure that the elements inside the div#menuHeader have a transparent or no background.
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.
i have a web page using a css style file who have this property:
body {
background: #7a9c12 url(images/main_background.jpg) top center no-repeat;
color: #bbb;
font: 12px/14px helvetica, arial,Sans-serif;
}
As you can see this code only puts a background image on the top center on the div body. But, i need a background image in the botton center too of the body tag, how can i do this? Thanks!
An option if you're not using CSS3 is to layer the background images on your html and body tags:
html {
background: #7a9c12 url(images/main_background_top.jpg) top center no-repeat;
}
body {
background: url(images/main_background_bottom.jpg) bottom center no-repeat;
}
Just make sure you only apply a solid background colour to the html background property, otherwise you'll overlay the image and only see the body background image.
With CSS2.1, no, it's impossible.
With CSS3, yes, you can.
The background of a box can have
multiple layers in CSS3. The number of
layers is determined by the number of
comma-separated values in the
‘background-image’ property.
Reference: W3C.
With CSS3, you can have multiple backgrounds, separated by commas. See the documentation. e.g.
background: url(banner.png) top center no-repeat,
url(footer.png) bottom center no-repeat;