I'm creating an iMessages like view of some data showing outgoing and incoming messages - I found a nice CSS solution here:
http://cssdeck.com/labs/6mifhkdc
One missing part that I need is the ability to show the timestamps when messages were sent/received - like you get in iMessages when you swipe a message to the left. I have the timestamps stored and ready to display, I just need some guidance on the CSS to use to make them appear like they do in iMessages.
(the timestamps will appear permanently on the page - no swiping involved)
I'm a newbie at CSS so not sure where to start to add this type of attribute.
Here's a sample of how my page currently looks:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fmSMS Chat Thread</title>
<style type="text/css">
/* Bit of normalisation */
/* Inspired by: http://cssdeck.com/labs/6mifhkdc */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: left;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--green {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: right;
}
.bubble--green:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--green:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
</style>
</head>
<body>
<div class="container">
<div class="bubble">
This is a sample outgoing message
</div>
<div class="bubble bubble--green">
Here's the first reply
</div>
<div class="bubble">
Here's the next sent message
</div>
<div class="bubble bubble--green">
And the final reply
</div>
</div>
</body>
</html>
You can not use CSS to add timestamps. Generate the timestamp from javascript or get it from the API and then add it to your DOM.
First add the timestamp to your application using the Javascript attribute Date.now. Then make it look pretty using CSS. CSS will only control the way elements look in your application, it's not the language to use to add elements to your application.
Found this which was close to what I was after:
http://cssdeck.com/labs/pmbrpxle
Related
I'm modifying some CSS/HTML that I found here that displays a iOS style chat message with bubbles. I wanted to swap the alignment of the blue and green bubbles which I've managed to do but the only thing I'm not sure about is how to change the little "handle" that appears in the bottom left and right corners around as well.
Here's how it currently looks:
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
I can't work out how to swap the little handles in the bottom corners of each bubble so they are on the opposite side. I'd like the blue one appear from the bottom right corner and the green one appearing from the bottom left corner.
Here you go full code:
Under .bubble:before{..} and .bubble:after {..} you have used left property that should be of right and vice-versa for 'bubble--alt:before{..}andbubble--alt:after{..}`.
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
Updated your code. Is this what you want?
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
Hello I've created a webpage with a banner on it and a button is centered under the banner. When I go to access my website on a large screen the banner resizes to fit the screen but the button stays the same size. I've tried looking for an answer but could not find it.
Here is my code:
HTML
<a href='http://www.aporiagrand.com/shop/' class='button'>SHOP</a>
CSS
.button {
border: 2px solid #ffffff;
background: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));
background: -webkit-linear-gradient(top, #000000, #000000);
background: -moz-linear-gradient(top, #000000, #000000);
background: -ms-linear-gradient(top, #000000, #000000);
background: -o-linear-gradient(top, #000000, #000000);
background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%);
padding: 12px 24px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #000000 0 1px 0;
color: #ffffff;
font-size: 18px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: center;
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
}
.button:hover {
border: 2px solid #ffffff;
text-shadow: #ffffff 0 1px 0;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, #ffffff);
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -ms-linear-gradient(top, #ffffff, #ffffff);
background: -o-linear-gradient(top, #ffffff, #ffffff);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
color: #000000;
}
.button:active {
text-shadow: #dbdbdb 0 1px 0;
border: 2px solid #dbdbdb;
background: #dbdbdb;
background: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff));
background: -webkit-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -ms-linear-gradient(top, #dbdbdb, #dbdbdb);
background: -o-linear-gradient(top, #dbdbdb, #dbdbdb);
background-image: -ms-linear-gradient(top, #dbdbdb 0%, #dbdbdb 100%);
color: #dbdbdb;
}
I assume you are using this
position:relative;
transition: .5s ease;
top: 1px;
left: 45%;
right: -45%;
bottom: -20%;
as a way to center your button; might I suggest instead you try to use something along the lines of:
margin: 0 auto; max-width:25%; text-align:center;
Your button currently won't scale with your site as I believe the only thing giving it any size is the padding you've applied. Using percentages is generally a good way to deal with these kind of issues.
I noticed that your font-size for the button in css is fixed, so the button size is not being small in small screens.
See this code:
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
in stackoverflow link
and try changing font-size:18px; to something like font-size: 4.0vw; according to your requirements.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i want to use color gradient on my top border
i have used this site for generate Gradient color i have done copy and past for code css and i had replaced background with border-top-color :
its my project :
Jsfiddle
this is the PSD FILE :
PSD FILE
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="wrap">
<div id="carousel" >
<div class="title">
Welcome to ...
</div>
</div>
</div>
</body>
</html>
CSS
#wrap {
position: relative;
width: 1100px;
}
#wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:883px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border-top:solid 1px ;
border-top-color: rgba(240,240,240,1);
border-top-color: -moz-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
border-top-color: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,240,240,1)), color-stop(20%, rgba(240,240,240,1)), color-stop(22%, rgba(250,250,250,1)), color-stop(71%, rgba(250,250,250,1)), color-stop(97%, rgba(230,230,230,1)), color-stop(100%, rgba(230,230,230,1)));
border-top-color: -webkit-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
border-top-color: -o-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
border-top-color: -ms-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
border-top-color: linear-gradient(to right, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=1 );
color:#ffffff;
font-size: 12 ;
padding-left: 19px;
font-style: Arial;
text-transform: uppercase;
background:url(images/title.png) bottom left repeat;
}
so my probleme is that i don't have gradient color but just white color
Demo
Best way is to use <hr>
css
top_line {
position:absolute;
bottom: 47px;
height: 1px;
width: 100%;
border: 0;
margin:0;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, white));
}
html
<div id="wrap">
<div id="carousel">
<hr class="top_line" />
<div class="title">Welcome to ...</div>
</div>
</div>
You can also do this with Read here
From given psd
there are 3 elements basically
gradient block
gradient top border
3 sides border gradient
From my demo above you get the #2, #3 is already achieved, #1 is achieved if you follow the link I have attached to read.
Here is your psd parts
Well, you can do it this way
HTML:
<div class="title">
<div class='backTitle'></div>
Welcome to ...
</div>
CSS:
.backTitle {
width: 100%;
height: 5px;
position: absolute;
background: linear-gradient(90deg, #888, #cccccc, #888);
margin-left: -19px;
margin-top: -5px;
}
.title {
position:absolute;
width:883px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border-top:solid 5px black;
color:#ffffff;
font-size: 12 ;
padding-left: 19px;
font-style: Arial;
text-transform: uppercase;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
I've achieved nearly the look that a want and I've removed the irrelevant html and I want to improve the look of the button.
I've created a fiddle for the button.
I think that the color is good (the blue) and the goal is to make the text render and a look that is more clear. How can the text look less blurry and with sharper contrast ? The CSS is
html {
height: 100%;
overflow-y: scroll;
}
body {
background-color: rgb(255, 255, 235);
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 16px;
color: rgb(0, 0, 0);
height: 100%;
text-align: center;
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0px;
height: 46px;
line-height: 46px;
}
#post a {
color: rgb(255, 255, 255);
text-shadow: rgb(255, 244, 210) 1px 1px 2px;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid rgb(0, 0, 0);
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: rgb(255, 255, 255);
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
}
#post {
display: inline-block;
border: 1px solid black;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: white;
font-weight: bold;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */
}
#post {
display: block;
position: absolute;
top: 16px;
right: 0;
height: 46px;
line-height: 46px;
}
#post span {
display: block;
float: left;
height: 52px;
}
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #FFF4D2;
font-size: 20px;
}
#post a:hover, #post a span:hover {
text-decoration: none;
}
#ad {
display: inline-block;
border: 1px solid #000;
width: 290px;
height: 45px;
font-size: 150%;
text-decoration: none;
text-align: center;
color: #FFF;
font-weight: 700;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #6db3f2;
/* Old browsers */
background: 0;
/* FF3.6+ */
background: 0 color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de));
/* Chrome,Safari4+ */
background: 0;
/* Chrome10+,Safari5.1+ */
background: 0;
/* Opera 11.10+ */
background: 0;
/* IE10+ */
background: linear-gradient(tobottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0);
/* IE6-9 */
}
Change the text shadow on #post a (And remove duplicate definitions) e.g.
#post a {
color: #FFF;
text-shadow: 1px 1px 2px #333;
font-size: 20px;
}
Demo: http://jsfiddle.net/4u4T7/5/
The text shadow makes it appear a little off, have a mock about with the text shadow and if you're not sure then use something like a text shadow generator to see a real time preview but I'd recommend using inspect element since it's better in my opinion.
Background
Colorzilla's gradient genetor is very helpful and is browser friendly. though in IE8 and below wont be that High Definition looking.
http://www.colorzilla.com/gradient-editor/
Text
Use text-shadow: 0 2px 0 #f2f2f2;
text-shadow: a, b, c, [d], e;
where a = distance from the text vertically (e.g. 1px, 2px, 0, -1px)
b = distance from the text horizontally (e.g. 1px, 2px, 0, -1px)
c = the weight of how it spreads out / smudge out / blur out (e.g. 1px, 2px, 0, -1px) in your case use 0 because you dont want it blurry looking
d = optional. great use for inner borders
e = color of the shadow
try to read on more of that to understand the syntax
It's one of those days and I can not figure out why I'm getting a space to the left of each of the LI tags in the following code. If you hover over, the menu items you'll see what I mean.
http://jsfiddle.net/midnitesonnet/C2Dub/
<div id="wrapper">
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
I can not figure out why I'm getting a space to the left of each of the LI tags
Because you format them with display:inline-block - and have whitespace between the tags. That's basic "HTML behavior", that any whitespace between two inline(-block) elements is condensed to one space character when displayed.
Either float the LI instead, or write them without whitespace between the tags, meaning ...</li><li>...
try this
http://jsfiddle.net/C2Dub/4/
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 0px;
background-color: #f5f5f5;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
margin: auto;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;*/
}
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 26px;
color: #CCC;
}
#menu ul {
display: block;
height: 39px;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
display: inline-block;
height: 39px;
border-right: 1px solid rgb(0, 0, 0);
padding: 0px 20px !important;
line-height: 39px;
list-style: none;
float:left;
}
#menu li a {
display: inline-block;
width: 99%;
color: #CCC;
text-decoration: none;
}
#menu li:hover {
background: #6b6b6b;
background: -moz-linear-gradient(top, #6b6b6b 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -o-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -ms-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: linear-gradient(to bottom, #6b6b6b 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#4c4c4c',GradientType=0 );
}
#content {
min-height: 600px;
padding: 5px;
}
#footer {
min-height: 50px;
background: #f4f7f5;
background: -moz-linear-gradient(top, #f4f7f5 0%, #edf5f7 37%, #d3e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f5), color-stop(37%,#edf5f7), color-stop(100%,#d3e8e6));
background: -webkit-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -o-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -ms-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: linear-gradient(to bottom, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f5', endColorstr='#d3e8e6',GradientType=0 );
border-top: 1px #D2D2D2 solid;
}
This seems to work, I floated your li's, removed some padding and changed the height of the menu: http://jsfiddle.net/C2Dub/5/
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 39px;
color: #CCC;
}
#menu ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 19px;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px !important;
list-style: none;
}
U have some whitespace characters between your HTML code try to put the li tags on eachtoher:
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
This solved the problem in the Fiddle.