I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/
You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/
How do I make a button with CSS to look like this?
I've tried, but I can't imagine how should I make bottom line with borders like this.. My result: http://jsfiddle.net/UPpfw/
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 7px solid #00a09a;
}
i've solve the problem and the solve was: http://jsfiddle.net/TmQzX/
.button_push{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 54px;
display: block;
text-align: center;
line-height: 47px;
text-decoration: none;
}
.button_white{
background: #4ec9a6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 189px;
height: 49px;
display: block;
}
.try_button{
width: 189px;
height: 54px;
position: relative;
top: 212px;
margin: auto;
}
Do you need something like here?
I figured out that you need shadow for your button. and instead of border-bottom: 7px solid #00a09a;
I suggest use of box shadow
-webkit-box-shadow: 0 8px 3px -2px #00a09a;
-moz-box-shadow: 0 8px 3px -2px #00A09A;
box-shadow: 0 8px 3px -2px #00A09A;
Css:
.button_push{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 189px;
height: 54px;
line-height:54px;
display: block;
}
.button_green{
background: #4ec9a6;
border-bottom: 5px solid #00a09a;
text-align:center;
color: white;
text-decoration:none;
font-size:25px;
font-weight:bold;
font-family: Sans-Serif;
}
Fiddle: http://jsfiddle.net/UPpfw/6/
I have this 3x chunk of CSS serving 3 of my HTML Divs, the actual problem is that the code is repeated three times with only one change, that ofcourse is the background color of the divs: background-color: #xxxxx; my question, is how would I go about not repeating this 3x block, but only keep 1 block but the color change on each of my Divs is different for each of these offers.
Is this even possible, or am I going about it the right way at the moment?
.BlueOffer {
width: 300px;
height: 25px;
background-color: #0099ff;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.OrangeOffer {
width: 300px;
height: 25px;
background-color: #F90;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.GreenOffer {
width: 300px;
height: 25px;
background-color: #66FF00;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
The only change is: background-color: #0099ff;
HTML Code follows:
<div class='GreenOffer'>GREEN OFFER</div>
<div class='OrangeOffer'>ORANGE OFFER</div>
<div class='BlueOffer'>BLUE OFFER</div>
There's no need for multiple classes. Just define the common properties up front, then specify the unique ones individually:
.BlueOffer, .OrangeOffer, .GreenOffer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
You can use more then one class on an element.
<div class='Offer GreenOffer'>GREEN OFFER</div>
<div class='Offer OrangeOffer'>ORANGE OFFER</div>
<div class='Offer BlueOffer'>BLUE OFFER</div>
.Offer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
In addition to the other answers, which are great, you could use an "ends with" selector:
[class$=Offer] {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.BlueOffer {
background-color: #0099ff;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
I prefer a more hierarchical CSS selector approach, one that also tries to avoid undesired changes:
.offer {
width: 300px;
height: 25px;
/* ... etc ... */
}
.offer.blue{
background-color: #0099ff;
}
.offer.green{
background-color: #66ff00;
}
You apply it the same way:
<div class="offer">Standard Offer</div>
<div class="offer green">Green Offer</div>
However, the difference is, the css selector .offer.green selects elements that have both the offer and the green class.
Having just...
.green{ /*...*/ }
could cause problems if you some OTHER element on your page you also want to have a green color but it's slightly different in some way. Perhaps green text and not a green background. Ouch, imagine if you had that bug? Green text on a green background? =)
You could use...
.offerGreen{ /*...*/ }
Your introducing more writing than necessary. While relatively insignificant, it will also increase the size of your page because...
<div class="offer offerGreen"></div>
is more characters than...
<div class="offer green"></div>
although it is just text and with gzip compression, the practical impact is not worth optimizing for unless you're uber optimizing.
I hope that helps!
Cheers!
Use multiple classes
.offer{
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px solid #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
/*or you could use
border-radius: 15px 15px 0 0;
*/
}
.Blue{background-color: #0099ff;}
.Orange{background-color: #F90;}
.Green{background-color: #66FF00;}
And apply it them
<div class='Green offer'>GREEN OFFER</div>
<div class='Orange offer'>ORANGE OFFER</div>
<div class='Blue offer'>BLUE OFFER</div>
Try using more than one class.
CSS:
.offer{
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.green {
background-color: #66FF00;
}
HTML
<div class='offer green'>Green OFFER</div>
you can either have multiple classes per object or have a block apply to more than one class:
.OrangeOffer, .BlueOffer, .GreenOffer {
width: 300px;
height: 25px;
opacity: 0.4;
font-size: 22px;
border-bottom: 1px SOLID #555555;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
}
.OrangeOffer {
background-color: #F90;
}
.GreenOffer {
background-color: #66FF00;
}
.BlueOffer {
background-color: #0099ff;
}
To prevent repeating CSS code is possible to use CSS framework like LESS or SASS for example. You can use with them variables, nesting, functions, they have nicely made inheritance and you can use mixins too.
http://lesscss.org/
http://sass-lang.com/
There are many other CSS frameworks too, so its your choice. But I recommend CSS FW.
I need to make a shape like the one below and was trying to get it working with CSS.
The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.
Is it possible to actually make the top version with CSS?
Working Example Here
CSS
.block-a {
display: block;
height: 200px;
width: 200px;
background-color: #8BC541;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
}
.block-b {
color: #fff;
text-align: center;
line-height: 40px;
position: relative;
display: block;
height: 40px;
width: 80px;
margin-left: 120px;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px#000;
box-shadow: 0 0 10px #000;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #8BC541;
}
.block-b:before {
position: absolute;
background-color: #8BC541;
height: 11px;
width: 90px;
top: -11px;
left: -10px;
display: block;
content: "";
}
.block-b:after {
padding-left: 5px;
color: #fff;
content: "▲";
}
HTML
<div class="block-a"></div>
<div class="block-b">Login</div>
Image
It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/
See this pic:
http://twitpic.com/5k3uph
The CSS I use is:
#content_filter_items {
display: none;
background-color: #ccc;
padding: 3px;
margin-bottom: 5px;
clear: both; }
#content_filter_items .filter_item {
display: inline-block;
background-color: white;
width: 200px;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 100px; }
Why is it that I have the extra space on top of the 2nd column?
Thanks
Eric
Where you have display: inline-block, you also need to set vertical-align: top.
See the "baseline" section here for an explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/