i am developing website for one political party(not client,my own purpose) using wordpress software. i am modifying theme called fresh life by theme junkie. actually i am not a front end developer, but i am putting my max efforts to change the theme styles that matches to political party flag.
First of all, website which i am modifying styles is www.ysrcong.com. political party flag URL is http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg .
i am trying to put background color of left part of the web page with 2266BB , right part of the web page with 0FBD60 and middle part of the page with white color.middle part of the website width is 950px. there is no specific widths for left and right.
i have googled and found out one solution. solution i have implemented is , i have designed one image with colors 2266BB and 0FBD60 of same width and height and color 2266BB in left and other in right.
i have set that image as background in all webpages. seems working fine in majority browsers with some small issue. issues i am facing are
1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it was left some height and that part was filled with background image
kindly please give me suggestions how to solve these two issues and also if any other effective solution to achieve this.
following code i have written.
html code
-------------------------
<body>
<div id="bg"><img src="bg.png" width="100%" height="100%" alt="">
</div>
<div id="#wrapper">
webpage content goes here.
</div>
</body>
styles i applied.
---------------------------------
body {
height:100%; margin:0; padding:0;
}
html {
height:100%;
}
#bg {
position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
background: #fff;
margin: 0 auto 0px auto;
padding: 10px 15px 0 15px;
width: 950px;
position:relative;
}
Delete the #bg div that you created for the background
Create an image 1px high by 3000 + px wide. Split the image in half with the right and left side being teh colors that you want
set the body tag in css to background: url(path/to/your/image) repeat-y center top;
Celebrate, you are finished
My inclination would be to do something like this.
HTML
<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>
With the CSS
html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}
Link here: http://jsfiddle.net/folktrash/EQE6K/
For flexibility, I would personally use css gradients like these on the body :
background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left, #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right, #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */
You could then have a "background-image" fallback for old browsers.
Related
I applied a css code to create a shadow on the initial part of the page (I have a social network and I would like to create the type of shadow created by Facebook on user profile pages, just to get an idea).
Everything would seem ok for some pages but not for others. That is, for short pages, the shading might be acceptable, but for long pages, the shading increases as the page length increases, almost encroaching on the page. I tried to set specific height values but without success, indeed if I set a "height" value an unwanted dividing line is created.
The code I'm using is as follows:
background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);
Some idea?
Thank you!
If you use pixel values instead of percentage values you can keep the gradient height uniform.
div {
background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
width: 100px;
}
body {
display: flex;
}
<div style="height: 100px;"></div>
<div style="height: 400px;"></div>
I would like know how is made the shadow on bottom image, i tried to check to the source code but I not found nothing. Any idea? Thank you
example in the cover image or see in the widget friend on the your profile page under the name there is a shadow for see better the name of color white
You seem to be looking for a gradient. An option is to do this with an image, however this can be done with css as well. Check out this page. Or search Google/Bing/.. for css3 gradient.
I've made a quick fiddle of what I generated in the generator I linked that might fit your needs. You can change the background-color to whatever you want (in the example I set it to red) to show it is transparant.
background: -moz-linear-gradient(top, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 40%, rgba(43,43,43,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,43,43,0)), color-stop(40%,rgba(43,43,43,0)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(43,43,43,0) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b2b2b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
UPDATE
Looking at the Facebook code, it does seem that they are using an image to overlay the image. If you look at the source, you will see that a#fbCoverImageContainer.coverWrap.coverImage has two important children, the img.coverPhotoImg.photo.img, that contains the image of the background. Often this image will expand further than the height of the banner itself, since only part of the image is shown. The other important child is div.coverBorder. Looking at it's source it has following css:
background: url(/rsrc.php/v2/yJ/r/UgNUNkKQar6.png) bottom left repeat-x;
This is a 1x95px image creating the overlay.
I've fumbled around a little, getting to this fiddle. This is the code I used:
html
<div class='myHeader'>
<img src='http://lorempixel.com/output/people-q-c-747-438-1.jpg' />
<div class='coverBorder'></div>
</div>
css
.myHeader{
display:block;
position:relative;
height:315px;
overflow:hidden;
}
.coverBorder{
background: url(http://i.imgur.com/UGqidBk.png) bottom left repeat-x;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
}
If you look at the fiddle, you can clearly see that the image expands outside of the div, but the overflow:hidden; hides this. Currently the overlay extends outside of the image because the div.myHeader has no width so it gets set to 100%. Give it 500px and you will see you can easily scale it.
Create a shadow class in your css file
.shadowThing
{
box-shadow: 2px 2px 3px 2px #333;
}
Then apply it to a div (or something else) in your HTML.
<div class="shadowThing">
<!--some content here-->
</div>
Using a gradient background. I'm assuming you're talking about the homepage before you login. If you really mean shadow please be more specific.
Edit in response to comment:
Yes. That is not a shadow, but a gradient background image repeated.
background: url(background-url.png) bottom left repeat-x;
Use google image search and search for term "gradient".
This is achieved by taking a small slice of the image and repeating it as a background along the x axis.
Use the CSS box-shadow property
The syntax is:
box-shadow: h-shadow v-shadow blur spread color inset;
so use like this:
.shadow {
box-shadow: 2px 2px 2px 2px #888888;
}
See this fiddle for an example
It will look like this when applied to a block element with height and width properties set.
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.
I am new to css and trying to draw in 3 separate parts of a single box. The box is defined like this in CSS:
#nutrients .row .values li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
I want to be able to do this:
<li><span class="min_graph" style="background:green" height="32%">
<span class="normal_graph" style="background:red" height="22%">
</li>
where the min part would be the bottom third, the normal part would be the middle third, and the max part would be the top third.
I tried this in the CSS:
#nutrients .row .values li span .min_graph {
vertical-align:bottom;
}
#nutrients .row .values li span .normal_graph {
}
#nutrients .row .values li span .max_graph {
vertical-align:top;
}
but clearly I'm not understanding how to focus on the 3 different sections of the box.
Thanks...
========
Thanks so much for all the help! I didn't explain this well enough.
I do want to use div. There are basically 3 sub boxes, the lower (min), the middle (normal), and the top (max).
I want "#nutrients .row .values li" to be the parent element.
Then, the min graph piece would be the bottom 21px; the normal graph would be the middle 21px; and the max graph piece would be the top 21px.
Then, within the bottom 21px (for example), I might want to fill 30% of it, or 50% of it, etc.
Cell 1:
min graph piece - red, 21% of its full height of the bottom third
normal graph piece - white, and no text (the middle third)
max graph piece - white, and no text (the top third)
Cell 2:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 46% of its full height (the middle third)
max graph piece - white
Cell 3:
min graph piece - green, 100% of its full height (the bottom third)
normal graph piece - green, and 100% of its full height (the middle third)
max graph piece - green, and 46% of its full height
In other words, the percentages cannot go into the CSS definition file. The HTML has to be able to set the percentages.
But the CSS does need to allow me to write to the individual three pieces of the parent box.
I need to understand how to make "#nutrients .row .values li" into a parent div.
Ideally, you would want to use <div> elements to accomplish this, as <span> elements are not serving their intended purposes here. I'll go over accomplishing this both ways.
<div> Implementation:
CSS:
/* To use %-based heights, the parent element must have a defined height */
.values { height: 500px; width: 100%;}
.min_graph { background:green; height: 32%;}
.normal_graph { background:red; height: 22%;}
.max_graph { background:yellow; height: 22%;}
HTML:
<div class='values'>
<div class="min_graph">TEST</div>
<div class="normal_graph">TEST</div>
<div class="max_graph" >TEST</div>
</div>
Example
<span> Implementation
Firstly - you will need to ensure that you are closing your <span> elements and you will need to use display: block to ensure that they are visible, as shown:
CSS
#nutrients .row. values li span
{
height: auto;
width: 100%;
display: block;
}
HTML:
<li>
<span class="min_graph" style="background:green; height:32%">Test</span>
<span class="normal_graph" style="background:red; height:22%">Test</span>
<span class="max_graph" style="background:yellow; height:22%">Test</span>
</li>
Example
Check out This JSFiddle with your example. Divs inside your <li> is the way to go, as a div is a block level element that works better for your needs. You define a parent element, in this case, the <li> with the width and height that you want the whole thing to be. Then it is just a matter of defining how big and what color you want each <div> to be.
<ul id="boxes">
<li>
<div id="top">Div 1</div>
<div id="mid">Div 2</div>
<div id="bottom">Div 3</div>
</li>
</ul>
#boxes li {
position:relative;
float:left;
width:29px;
height:63px;
border-right:1px solid #C9C3BA;
list-style-type:none;
}
#top {height:auto}
#mid {background:red; height: 32%}
#bottom {background:green; height:22%;}
You could use a css gradient to color the different sections:
I used this site: http://www.colorzilla.com/gradient-editor/
to produce this:
background: -moz-linear-gradient(top, #ff3232 0%, #ff3030 33%, #f9f227 33%, #f5f900 66%, #00ff00 66%, #00ff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3232), color-stop(33%,#ff3030), color-stop(33%,#f9f227), color-stop(66%,#f5f900), color-stop(66%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3232 0%,#ff3030 33%,#f9f227 33%,#f5f900 66%,#00ff00 66%,#00ff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#00ff00',GradientType=0 ); /* IE6-9 */
Oh, but unless it's been changed, I don't think the iPad version of Safari accepts percentage gradients, only pixel count, so you may have to tweak that depending on your target user
I think you might be able to achieve what you are looking for more easily with a color sequence or gradient (as mentioned by Robot Woods). I found a good reference to be https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops
body {
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}
first time posting - I hope somebody can help.
I have a gradient background on a page which uses ajax (and becomes quite long after the call).
In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.
Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?
Here is my css relating to the gradient:
html {
background-color: #8c827a;
height: 100%;
margin: 0 0 1px;
padding: 15px;
/* Mozilla: */
background: -moz-linear-gradient(top, #8c827a, #2B2825);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8c827a), to(#2B2825));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}
To make other browsers behave the same as Internet Explorer, you can make the background fixed:
html {
background-attachment: fixed
}
Make sure you place background-attachment after the two background declarations.
Add this CSS:
background-attachment: fixed;
This property "pins" the background at the browser viewport.