I have a fixed header and footer and when I added an element such as a ribbon for a div header part of the ribbon spills into the header but not the footer.
The element in question can be found at:
http://mikesbaum.com/plan9alehouse/index.html
Here is the header/nav CSS:
header {
position: fixed;
top:0px;
left:0px;
width: 100%;
height: auto;
padding: 0px;
border-bottom: 4px solid #291e13;
background:url(../../img/dark_wood_texture.jpg);
background-color:#FFF;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
nav {
list-style:none;
text-align:center;
font-family: Conv_goudy_bookletter_1911-webfont;
font-weight:bold;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 10px;
}
and the ribbon:
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
I found the ribbon tutorial at: http://css-tricks.com/snippets/css/ribbon/ but still cannot figure out a solution.
You need to add z-index:1 to your header to avoid the ribbon to flow above of it:
header {
// your css
z-index:1;
}
Related
I am finding that applying a transform:skewX() to an element blurs its poition vertically(!) in Firefox. Does anyone know why, or how to fix this?
HTML
<div id="tab"><span>Tab</span></div>
<div id="content">Content</div>
CSS
#tab {
display: inline-block;
margin-left: 2em;
position: relative;
width: 3em;
text-align:center;
padding: .375em 0 0.125em;
}
#tab span {
position: relative;
z-index: 10;
}
#tab:before,
#tab:after {
position: absolute;
content: '';
top: 0;
width: 60%;
height: 100%;
border-top: 2px solid #999999;
background-color: #ffffff;
z-index: 1;
}
#tab:before {
left: 0;
transform: skewX(-20deg);
border-left: 2px solid #999999;
border-top-left-radius: 6px;
}
#tab:after {
right: 0;
transform: skewX(20deg);
border-right: 2px solid #999999;
border-top-right-radius: 6px;
}
#content {
border: 2px solid #999999;
border-radius: 6px;
padding: 4px;
margin-top: 0px;
}
The result is as below (zoomed image). Note the #content box's border showing through where they don't overlap, and the fuzziness at the top of the tab (both above and below the 2px width). By comparrison, when removing the skewX() for a straight tab, the border becomes pixel-perfect.
Is there any way to force the element's vertical pixel-alignment when it is subjected to a skewX() transform?
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
How would I define the degree of an arrow created with css follows
<div class="bubble"></div>
.bubble
{
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
float: right;
height: 63px;
margin-right: 10px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 29px 16px 0;
border-color: #ff7401 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -29px;
left: 47px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 18px 0;
border-color: silver transparent;
display: block;
width: 0;
z-index: 0;
bottom: -34px;
left: 45px;
}
div.bubble p {
color: #FFFFFF;
font-size: 21px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
http://jsfiddle.net/lgtsfiddler/GpUpZ/1/
What I want is that the arrow's right edge right should be longer and not equal to the left edge. In particular, the left edge should be perpendicular to the text-bubble, and the right edge should come to meet it. For better visualization, here is an example of what I'm trying to achieve:
Modify your css as like this
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0; // modify this line
border-color: silver transparent;
/* display: block; */ // remove this line
width: 0;
z-index: 0;
bottom: -27px; // modify this line
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg); // modify this line
}
Demo
The shape and direction of the arrow is determined by the individual border widths and colors
A simple adjustment of individual values makes it easy to experiment. It's often also useful to write out the individual values for both widths and colors so see what's what.
JSfiddle Demo
CSS
.bubble {
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
height: 63px;
margin: 50px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top:100%;
left: 47px;
}
.bubble.one:after { /* straight left side */
border-width: 29px 29px 29px 0;
border-color: #ff7401 transparent transparent transparent;
}
.bubble.two:after { /* straight right side */
border-width: 29px 0px 29px 29px;
border-color: #ff7401 transparent transparent transparent ;
}
I use Tao theme http://themeforest.net/item/tao-retina-responsive-wordpress-portfolio-theme/5913809
The website I have issue with is this http://www.thamon.co.uk/
If you open the page with Safari, it overlaps the logo with the body of all pages.
In styles.css I have he following code associated with the header that I believe is somewhat relevant to the problem
.header {
position: relative;
}
.header .header-primary-content {
display: table;
width: 100%;
position: relative;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
/* Border shadow */
.header .header-primary-content:after {
content: " ";
position: relative;
z-index: -1;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, .5);
}
.logo, .header-buttons {
display: table-cell;
vertical-align: middle;
}
/**
* Logo
*/
.logo {
width: 70%;
}
.logo a {
display: inline-block;
position: relative;
width: 120px;
height: 40px;
margin-left: 410px;
vertical-align: middle
color: #444652;
text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
}
.no-touch .logo a:hover {
animation: tinywiggle 220ms ease-out;
}
You put a height of 40px on .logo a when the height of the logo is 120px x 147px. Try matching the height of the .logo a with the img instead or remove the height from the .logo a
I have customized one banner and one drop down menu. On mouse over the menu drop down menu appears. If I scroll this menu is not going below the banner and it is over writing banner.
My menu css3 code
#menu ul {
background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
border-radius: 5px 5px 5px 5px;
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 200px;
z-index: 99999;
}
style.css (line 305)
ol, ul {
list-style: none outside none;
border: 0 none;
font-size: 100%;
line-height: 1.2em;
margin: 0;
padding: 0;
vertical-align: baseline;
}
the header or banner css:
#the_header {
background: -moz-linear-gradient(center top , #000000 0%, #45484D 100%) repeat scroll 0 0 transparent;
border-bottom: 1px solid #BBBBBB;
box-shadow: 0 0 10px #000000;
color: #EEEEEE;
font-size: 30px;
font-style: italic;
height: 30px;
line-height: 30px;
padding: 30px;
position: fixed;
text-align: center;
text-shadow: 1px 1px 1px #000000;
top: 0;
width: 100%;
z-index: 1000;
}
What is the problem here?
in your the header or banner css try inserting following code fragment.
max-height:30px;
this should work.