Related
I have this background:
.background:hover {
background: #F4F4F4 url(../images/arrow_down_over.gif) no-repeat right;
}
that I would like to change into a gradient like this one :
.background:hover{
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4f4f4 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee',GradientType=0 );
} /* IE6-9 */
But I would like to keep the arrow image. I can't find a way to do it. I did try something like this:
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%) url(../images/arrow_down_over.gif) no-repeat right; /* FF3.6+ */
or add this after the gradient properties but without any success.
background: url(../images/arrow_down_over.gif) no-repeat right;
I can't add another class so I have to deal with this CSS. Any idea how to do it?
You may try:
background: url(../images/arrow_down_over.gif), linear-gradient(...);
Multiple backgrounds must be comma-separated rather than space-separated, and they weirdly stack from top to bottom.
Also note that this is not necessarily supported by all browsers.
See http://css-tricks.com/stacking-order-of-multiple-backgrounds/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds for details
I designed a very basic looking box in Photoshop that I would like to use to show product information inside of. It basically consists of a Header, Body and Button (each a separate image) that look like the image below.
How can I use CSS/HTML to piece these together? I just need to show header text in the top box and bullet points in the body area, but not sure how to actually build this from the image files.
I know the HTML will look as such, I am just confused as to how to actually build the box, such as stacking the images and overlaying the button in that position over the body.
<div id="product_box">
<div id="header">Title Here</div>
<div id="body">
<ul>
<li>Point here</li>
<li>Point here</li>
<li>Point here</li>
</ul>
</div>
<div id="button></div>
</div>
Well Have a look at:
http://jsfiddle.net/2A2Fn/4/
You don't have to change your html markup just use css:
Here is relevant CSS:
#product_box{
border:2px solid #bbc;
border-radius:15px;
display:block;
width:50%;
height:100%;
position:relative;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding:0px; !important
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header{
background:#aaf;
width:100%;
height:50px;
border:0px;
border-bottom:1px solid #99b;
padding-top:15px;
padding-bottom:15px;
border-radius:5px;
background: #b5bdc8; /* Old browsers */
/* gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#body{
padding-bottom:15px;
}
#button{
background:#756;
border:1px solid #645;
display:block;
width:150px;
height:50px;
border-radius:5px;
position:absolute;
bottom:-25px;
right:33%;
color:#fff;
box-shadow:5px 5px 5px rgba(0,0,0,0.4);
text-align:center;
font-weight:bolder;
font-size:15px;
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
text-align:center;
color:#fff;
font-weight:bold;
}
And Here is output of that:
EDIT
According to your comment here is updated code:
http://jsfiddle.net/2A2Fn/5/
and its output:
Hope it helps.
It can be done using only HTML/CSS.
Use CSS gradient for it.
Here is the DEMO
Seeing your CSS code would help. This is how I would achieve what you want:
Set a div element to the desired height of the box. Apply a border and border-radius property as desired, probably 2 px border and a radius of 10-15 px.
Take the header image, and crop it down to 1 pixel wide (for memory conservation). Then set a div element and use this 1pixel wide image as the background, repeat x, but not y. Set the height of the header to the height of the gradient image.
Then, make another div inside the container div. Take your second gradient image and again reduce it to a 1 pixel width. Set it as the background for this div with repeat-x. You'll have to set the height of the header div to the difference of the height of the header and the height of the container.
Your button can then be placed as a link, probably in another div element.
All this can be coded something like as follows:
CSS:
div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}
div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}
div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}
And the HTML:
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>
This should do what you want. You'll need to specify the button CSS as well which I didn't do as I'm on mobile right now.
Hope this helps you!
I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.
Here is a screenshot of what i mean,
Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?
There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.
HTML:
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/3/
This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:
Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.
HTML:
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/4/
The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.
Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}
http://jsfiddle.net/Q66Xn/
Disadvantages: Complex CSS which is difficult to easily edit later on.
You're issue isn't related to bootstrap specific, as Ollie stated.
Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).
I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.
Example
http://jsfiddle.net/wLw4r/4/
Markup
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
You will struggle to do this using only bootstrap.
You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs.
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
}
I'm using Bootstrap to create my personal webpage, and i tried to add a gradient background to <body> but i ended up with a meaningless space of gradient there. Here is images, i can't include jsfiddle because i have more than one CSS files.
http://jsfiddle.net/eJ3CL/
You can't see the problem in jsfiddle since bootstrap is not included there, but here are the screenshots:
EDIT:
Edited Fiddle to include bootstrap and set height of content middle to 120px so that others can see the problem that OP wants to convey.
What is causing this? How can I fix this problem?
Edited: Here is all the relevant code.
<head>
<title>Burak Özmen - A Newbie Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container container-top">
<div class="page-header">
<h1>Burak Özmen <small>A Newbie Developer</small></h1>
</div>
</div>
<div class="container container-middle">
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>About Me</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="vertical-middle">In development... </div>
</div>
</body>
</html>
style.css:
body {
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
}
.container-middle {
height: 300px;
background: white;
}
Give a min-height to body
body {
min-height: 400px;
}
move the rules in body selector to html selector and add height:100%; rule to html selector.
html{
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); /* IE6-9 */
height: 100%;
}
.container-middle {
height: 300px;
background: white;
}
It works on Firefox, Chrome and IE9
I am developing the front end for one of my clubs in my school, and I am having problems placing two inline elements on top of each other. I have been stuck on this for a few nights and it is really upsetting me. I have tried everything from margin,positioning,inline-block, and all of it seems to give me one problem or the other. Right now I am at my wits end, so I am turning here. The elements are suppose to be above the elements. both elements are in the player which is suppose to be next to the image. I will include the link to download my code, and where I am having the problem it pretty obvious once you see my page in a browser. Thanks for any help you can give me.
https://dl.dropbox.com/u/21141217/HvZ.zip
Edit: I am having an issue here
<div id="recentTags">
<h4>RECENT TAGS</h4>
<div class="tag">
<div class="player">
Chris Stephenson
<h6>Legends</h6>
</div>
<img src="tag.png" alt />
<div class="player">
Eric Tadt
<h6>butt pirates</h6>
</div>
</div>
<div class="tag">
<div class="player">
Zack Baer
<h6>Little Bears</h6>
</div>
<img src="tag.png" alt />
<div class="player">
Humble Trumble
<h6>Glorious pres</h6>
</div>
</div>
</div>
Relevant CSS:
#recentTags{
width: 292px;
padding: 4px;
height: 236px;
/*My attempt at trying to recreate the color gradient. Gabe fix it*/
/*I used http://www.colorzilla.com/gradient-editor/ or you can just google css gradient generator*/
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #5e5e5e 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5e5e5e 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #5e5e5e 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#recentTags h4{
color: #D23000;
background-color: grey;
padding-left: 8px;
/*Color gradient*/
background: #2d2d2d;
background: -moz-linear-gradient(left, #2d2d2d 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2d2d2d), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(left, #2d2d2d 0%,#4c4c4c 100%);
background: -o-linear-gradient(left, #2d2d2d 0%,#4c4c4c 100%);
background: -ms-linear-gradient(left, #2d2d2d 0%,#4c4c4c 100%);
background: linear-gradient(to right, #2d2d2d 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#4c4c4c',GradientType=1 );
}
.tag{
width: 280px;
height: 31px;
margin-top: 5px;
padding:3px;
border: 0px solid #829485;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/*Gradient*/
background: rgb(30,87,153);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(255,255,255,1) 0%, rgba(53,53,53,1) 2%, rgba(73,73,73,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(255,255,255,1)), color-stop(2%,rgba(53,53,53,1)), color-stop(100%,rgba(73,73,73,1)));
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 0%,rgba(53,53,53,1) 2%,rgba(73,73,73,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#494949',GradientType=0 );
}
.tag a{
color: #D23000;
display: inline-block;
text-decoration: none;
font-size: 13px;
font-weight: bold;
position: relative;
bottom: 14px;
}
.player{
width:110px;
display: inline;
}
.tag img{position: relative;}
.tag h6{
display: inline;
}
dabblet link: http://result.dabblet.com/gist/4007549/381ecd27edf3c72fbde28575ca9cd2e50e2c2a52
EDIT: I guess I choosed the wrong choice of words I want to place the elements above the elements. So the end result will look like this:
Chris Stephenson
Legends
If I understand your question correctly, you want the player name to sit above the player team name, and both to sit to the left, with the image sitting to the right. The following answer assumes that this is correct. If it is not correct please specify what you mean with specifics.
To have an element followed by a line break, you want to style that element display: block;.
display: inline; will make the elements sit side by side.
So I think this is the first place you are going wrong. You want to make the player link and player team name display: block;.
Then float the player to the left and the image to the right.
Then clear the floats.
Then you end up with something like this:
http://jsfiddle.net/NsfB4/
This is the css to do this:
.clear {
clear: both;
}
.tag .player {
float: left;
}
.tag .image {
float: right;
}
And the html:
<div id="recentTags">
<h4>RECENT TAGS</h4>
<div class="tag">
<div class="player">
Chris Stephenson
<h6>Legends</h6>
</div>
<div class="image">
<img src="tag.png" alt="" />
</div>
<div class="clear"><!-- --> </div>
<div class="player">
Eric Tadt
<h6>butt pirates</h6>
</div>
<div class="clear"><!-- --> </div>
</div>
<div class="tag">
<div class="player">
Zack Baer
<h6>Little Bears</h6>
</div>
<div class="image">
<img src="tag.png" alt="" />
</div>
<div class="clear"><!-- --> </div>
<div class="player">
Humble Trumble
<h6>Glorious pres</h6>
</div>
<div class="clear"><!-- --> </div>
</div>
</div>
Is this what you after (other than your gradient styling).