I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):
Everything is done except the background!
The quotation is different each time, so the background needs to automatically adjust in height.
It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.
Here's my current code - now on JSFiddle:
HTML
<div id="ehs-quotecontainer">
<div id="ehs-bgleft">
</div>
<div id="ehs-bgright">
</div>
<div class="ehs-marks" id="ehs-marktop">
“
</div>
<span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
<div class="ehs-marks" id="ehs-markbottom">
”
</div>
</div>
CSS
#ehs-quotecontainer {
padding-top:8px;
padding-bottom:8px;
background-color:#F7F8FA;
text-align:center;
}
#ehs-bgleft {
background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
height:20px;
color:#8B8C90;
font-size:5.0em;
}
#ehs-marktop {
float:left;
margin-top:-18px;
}
#ehs-markbottom {
float:right;
margin-top:-5px;
}
.ehs-quotetext {
padding-left:4px;
padding-right:4px;
color:#000;
font-size:1.1em;
font-style:italic;
}
Any ideas on how to make the background work correctly?
The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.
After that what you ask is fairly easy to do:
http://jsfiddle.net/7GEah/1/
Something like this: http://www.webdevout.net/test?012&raw
<!doctype html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<style>
body {
background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
margin: 71px 8px 8px;
}
.quote {
border: 1px solid #dfdfdf;
position: relative;
padding: 8px 35px;
}
.quote
p {
margin: 0;
font: italic 12px sans-serif;
text-align: center;
position: relative;
z-index: 1;
}
.quote .w,
.quote .e {
position: absolute;
top: 0;
width: 75px;
height: 100%;
background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote
span {
color: #898a8e;
font: 70px/70px allerta, serif;
position: absolute;
}
.quote
.ldquo {
left: -35px;
top: -15px;
}
.quote
.rdquo {
right: -35px;
bottom: -42px;
}
</style>
</head>
<body>
<div style="width: 209px;">
<div class="quote">
<p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
<div class="w"></div>
<div class="e"></div>
</div>
</div>
</body>
</html>
Could you create a single image, with the gradient meeting in the middle? If so, you can use:
#ehs-quotecontainer {
background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}
Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.
I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.
i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .
so here you will :
you keep the background with the quotation marks as it is
Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .
Related
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
Basically I can't get the div that holds all the content to move down with the content itself. If I take out the fixed height on the comborder div it disappears. The content remains in place, though over the bg image. Does anyone see any solution to this? I've tried a whole lot and can't come up with anything. I just want to base the height of the content div on the height of the content, like a div usually works. Thanks a bunch!
Here's the site: http://www.drdopamine.com/kineticaid/community.php?page=profile&id=1
Here's the relevant CSS:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
div.comborder {
width:900px;
height:600px;
background-image: url(http://www.drdopamine.com/kineticaid/pics/bg.jpg);
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 10;
}
div.comcon {
background-color: white;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
-moz-border-radius: 15px;
border-radius: 15px;
z-index: 11;
}
Here's the relevant HTML:
<div class="comborder wrap rel" style="margin-top:100px;opacity:0.9;z-index:80;">
<div class="comcon abs" style="opacity:none;">
<div class="comhold rel" style="height:100%;width:100%;border:1px solid transparent;">
<?php
if($_GET['page'] == "profile") {
include_once('profile.php');
}
if($_GET['page'] == "editprofile") {
include_once('editprofile.php');
}
?>
</div>
</div>
</div>
Do this:
body.combody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://www.psdgraphics.com/file/blue-sky-background.jpg");
background-origin: padding-box;
background-position: left center;
background-repeat: repeat;
background-size: 110% auto;
height: 100%;
}
div.comborder {
background-image: url("http://www.drdopamine.com/kineticaid/pics/bg.jpg");
border-radius: 30px 30px 30px 30px;
height: 100%;
width: 900px;
z-index: 10;
}
What is important to notice is that both the body and the div have a 100% height.
That might help you.
Absolute positioning removes the content div (and everything else) from the flow of the page. That makes it so the containers don't know the size of the inner elements.
Remove all the .abs classes from everything inside the container, and the white background will correctly stretch as you want. However, it also stretches over the black border, so you'd have to find different way to create it.
More general advice:
.wrap {margin: 0 auto; }
.abs { position:absolute; }
.rel { position:relative; }
These are just plain bad ideas. It looks like you saw or were told about always putting CSS into a CSS file and never in HTML; a good idea when done right, but classes should identify content, not styles. For example:
.sidebar-image { /* css here */ }
.sidebar-donate ( /* css here */ }
.sidebar-infobox { /* css here */ }
It creates duplicate position: tags and so on, but it's also much easier to understand and much easier to get the results you want, since fixing your current problem involves editing the HTML when it should be a CSS problem.
Edit: fixed. Thanks everyone for the help ;)
Hello everyone,
I'm having a few problems with the blue bar elements being separated instead of being together.
Both elements "Notícias" and the blue bar are inside a div called "content". The blue bar is inside a span, and is created with 3 divs. One for the left image, the middle one is a repeating background and finally the third one with the last image.
Here's an image to ilustrate the problem: http://i52.tinypic.com/b3vhic.png
The code is the following:
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}
And the html is:
<span class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</span>
What is the best way to accomplish this?
Thanks in advance ;)
It's hard to answer without being able to experiment with the actual code and graphics. But you can start with adding the following.
.barra div {
padding: 0;
margin: 0;
}
If it doesn't work it would be great if you could post a link to a demo of bar.
The problem is that they're inline-block elements per your CSS rules and you have whitespace between them in your markup. You should either float them, or position them absolutely.
HTML:
<div class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</div>
CSS:
.barra > div {
float: left;
height: 14px;
width: 7px;
}
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
}
That also cuts out a bunch of duplication you had going on.
This is my image:-
http://www.flickr.com/photos/50525207#N02/5064283850/
CSS n html
Now the problem:-
When I hover over links the same image appears when I want different parts of the image to appear. Also the other links shift when I move mouse over one link. What I want is this:-
http://www.flickr.com/photos/50525207#N02/5063686801/
What I want is a grey colored image to appear in the background when the mouse is hovered over "Link1". A green colored image is to appear when the mouse is hovered over "Link2" and so on. What am I doing wrong? I have been trying to make it work since yesterday but in vain.
PS: erm, that's not the actual image BTW. I don't want colors in the background. It's going to be images of products. Oh, and I want that grey image to appear when no link is hovered over. How to do that?
[EDIT]
I added the following in the CSS:-
.sprite Div
{
width: 728px;
height: 243px;
}
.sprite a
{
width: 728px;
height: 243px;
}
In the HTML IK included the links inside of Div so the height gets fixed:-
<div id="SpriteDiv" class="sprite">
My links here...
</div>
First, you should set a size of your anchor element without hover, this is what's causing your other links to shift around (the dimensions shouldn't be defined on a:hover):
.sprite a {
display: block;
width: 728px;
height: 243px;
}
Next, your image background is assigned to the anchor elements, not the span, so you need to define those positions with the selector like this:
.sp_ID1 a {
background-position: 0px 0px;
}
Corrected according to your comment:
Originally I put the gray background on .container, but that causes strange behavior on Chrome, so I added .sp_ID0
<style type="text/css">
.sprite { display: block; margin-bottom: 5px; }
.container, .sp_ID0, .sprite div { width: 600px; height: 203px; }
.sp_ID0, .sprite:hover div {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container { position:relative; }
.sp_ID0 { z-index: -2; }
.sprite div { display: none; z-index: -1; }
.sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
.sp_ID1 div { background-position: 0px -203px; }
.sp_ID2 div { background-position: 0px -406px; }
.sp_ID3 div { background-position: 0px -609px; }
.sp_ID4 div { background-position: 0px -812px; }
.sp_ID5 div { background-position: 0px -203px; }
.sp_ID6 div { background-position: 0px -406px; }
</style>
<div class="container">
<div class="sp_ID0"> </div>
Link1<div> </div>
Link2<div> </div>
Link3<div> </div>
Link4<div> </div>
Link5<div> </div>
Link6<div> </div>
</div>
Old solution.
I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:
<style type="text/css">
#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.
Any suggestions gratefully received - this is driving me mad!
In your #wrapper2:
bottom: -4px;
Will make it move 4 pixels downwards to overlap the other line.
(Tested in Safari, works)
Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.
OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.
<html>
<head><title>test</title></head>
<body>
<style type="text/css">
#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
</body>
</html>