I'm trying to include the myriad pro condensed from typekit, however for some reason this doesn't work. I'm new to Typekit, so I don't know why it isn't working. I believe it's not loading the font off of Typekit, because it's using sans-serif, not the default font. Here is the header:
<head>
<script type="text/javascript" src="//use.typekit.net/rvf7mow.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<title>PDF</title>
<link rel="stylesheet" type="text/css" href="http://raftcolorado.org/css.css">
</head>
and the CSS code:
h1, h2, h3, h4 {
font-family:"myriad-pro-condensed", sans-serif;
}
#logo{
width:810px
}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-90px;
left:160px;
text-align:left;
}
Related
I've been working on my donation website and I've come to find an issue where the default Buycraft css is taking over the css that I'm writing. I'm extremely new to css and I don't plan on doing it much in the future but for now I need help.
When I inspect element my navbar it gives me a few variables for .navbar .nav > li > a such as a color and a text shadow. I've tried to re-write the code for the text and it's to no avail. I copied it exactly like what inspect element has and I gave the variables !important but nothing changes. If anyone can tell me whats wrong with the navbar button text please help me out.
My website.
Code:
#import "http://fonts.googleapis.com/css?family=Oswald:400,300";
body {
background:url(http://i.imgur.com/tYtIxao.jpg?1);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
padding:0;
margin:0;
height:100%
}
.navbar {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
height:80px;
display:block;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar-inner {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
font-size:x-large;
text-align:center;
display:block;
padding-top:30px;
padding-bottom:30px;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar .nav>li>a {
float:none;
padding:10px 15px;
color:#000!important;
text-decoration:none;
text-shadow:0 0 0 #fff!important
}
.nav > li > a {
display:block;
color:#000!important
}
a {
color:#08c;
text-decoration:none
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
color:#fff;
height:auto;
text-decoration:none;
background-color:#11CFD9;
-webkit-box-shadow:inset 0 0 0;
-moz-box-shadow:inset 0 0 0;
box-shadow:inset 0 0 0
}
ul.nav a:hover {
color:#fff!important;
background:#1CDBE6
}
.box-container .basket-dropdown {
padding:20px;
margin-left:-145px;
margin-top:2px
}
.basket-dropdown .checkout {
float:right
}
.checkout {
z-index:9999;
font-family:Oswald;
font-weight:300
}
.row {
margin-left:20px;
margin-right:20px
}
.box-container .checkout {
width:98%!important;
float:none!important
}
.span11 {
width:98%;
float:none!important
}
.box {
background:url();
border:0!important;
margin-top:130px;
position:relative;
padding-right:25px;
padding-left:25px;
width:100%
}
.box-container {
font-family:Oswald;
font-weight:300;
margin-right:5px;
margin-left:5px
}
.box-container .checkout {
width:90%;
position:relative;
float:left;
z-index:0;
top:0
}
.box-container .header {
background-image:url(http://i.imgur.com/PzVJZ4V.png);
background-color:#fff;
border-top-left-radius:1px;
border-top-right-radius:1px;
-webkit-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-border-radius-topright:5px;
-border-radius-topleft:5px;
height:33px;
text-align:left;
text-transform:uppercase;
font-size:25px;
padding-top:20px;
font-family:Oswald;
font-weight:300;
border-radius:5px 5px 0 0
}
.box-container .content {
opacity:.9!important
}
.span7 {
width:60%;
margin-left:20px;
border-radius:10px
}
.span4 {
width:25%;
height:15%
}
.clear-fix {
z-index:9999;
top:0;
opacity:.9
}
.logo {
background:url();
background-repeat:no-repeat;
float:none;
z-index:9999;
position:fixed;
left:25%;
height:0!important;
width:0!important
}
.logo span {
opacity:0;
color:#fff;
font-size:0
}
em {
color:red;
font-weight:700;
font-style:normal
}
/*Spinny Heads*/
.image {
display:block;
text-decoration:none;
-webkit-transition:.5s all ease-in-out;
-moz-transition:.5s all ease-in-out;
-o-transition:.5s all ease-in-out;
transition:.5s all ease-in-out
}
.image:hover {
-webkit-transform:rotate(720deg) scale(1.5);
-ms-transform:rotate(720deg) scale(1.5);
-moz-transform:rotate(720deg) scale(1.5);
-o-transform:rotate(720deg) scale(1.5);
transform:rotate(720deg) scale(1.5)
}
.footer {
height:60px;
border-top:1px solid #000;
background:orange;
bottom:0;
margin-right:0;
margin-bottom:0;
width:100%;
z-index:99999;
position:static;
font-family:"Oswald";
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
display:block
}
The browser decides which css selector is applied over the others depending on its weight. Usually you will find the term CSS specificity describing this.
In your case the .nav > li > a is interpreted to have a very low weight and is therefore overridden by your default stylesheet.
If you remove the > symbols in those selectors it should still be the same result - since there are no nested a elements in the navigation bar you want to exclude, right?
The selector .nav li a has a bigger weight and should therefore take precedence. If that still does not help, please include the css-selector from your Buycraft css file, which is overriding your selector. So we can look at the specific weight of both in comparison.
Have a look at this answer here for another example.
A little background: the css specificity exists in order to make things like the following possible: Imagine, the links on your website should always be displayed in blue. But in your navigation, they should be black.
a { color: blue; }
.navbar a { color: black; }
Since the second selector is more specific, it takes precedence over the general links-are-blue selector and your navigational links are black.
I have a stylesheet for when #media screen and (max-width:639px)
When it is above 639px, it refers to my default CSS code which is what I want. But there are two elements I want to hide when the screen is below 667px.
In other words, when the screen is between 639px and 667px, I want the default CSS to show with two elements removed from it using .class{display:none}.
I tried min-width:666px, max-width:667px and several other variations but I can't get it to work.
Here's my blog:
Here's my css file: Link
body {
background-color:#CEDEAF;
color:#111530;
font-size:16px;
overflow-y:scroll;
margin:auto;
font-family:'Noto Sans', Arial, sans-serif;
line-height:2;
letter-spacing:1px
}
img, iframe {
border:none;
max-height:100%;
max-width:100%;
display:inline-block;
vertical-align:top;
padding:.75%
}
header {
text-align:center
}
a {
text-decoration:none;
color:#C33125
}
a:hover {
text-decoration:none;
color:#111530
}
h1, footer a {
color:#111530
}
footer a:hover {
color:#C33125
}
a:hover img {
opacity:.8
}
hr {
border:none;
height:1px;
background-color:#ddd
}
header img {
position:relative;
padding:0;
margin:auto;
nopin:nopin
}
.follow {
position:absolute;
top:.5%;
right:0;
margin-right:3%
}
#main {
margin:0 auto;
background-color:#fff;
width:95%
}
#Blog1 {
padding:1%
}
h1 {
margin:0;
font-size:1.3em;
text-transform:uppercase;
text-align:center;
margin-bottom:1%
}
.homelist {
text-align:center;
margin-top:-.75%
}
.homelist img {
width:30%
}
.left img {
float:left;
margin-right:20px
}
.center, .videopost, .breadcrumb, footer {
display:block;
text-align:center
}
.videopost img {
width:1px;
position:absolute
}
ul {
list-style-position:inside
}
.staticpagelist ul, .imagetextlist ul {
margin-left:-40px
}
.staticpagelist ul li, .imagetextlist ul li {
display:inline-block;
text-decoration:none;
padding:1.5%;
text-align:center;
vertical-align:top;
font-size:.8em;
width:30%
}
.staticpagelist ul li {
font-size:.85em;
font-weight:700
}
.sub {
margin:1% auto;
font-weight:700;
text-transform:uppercase;
padding:.75%;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd
}
.hcard, .hcard a {
color:#aaa
}
.hcard, footer {
font-size:.7em;
font-weight:700
}
.breadcrumb {
font-size:.8em
}
.menu {
text-align:center;
font-weight:700;
padding-bottom:.5%
}
.related-posts-widget ul {
height:250px;
overflow:hidden
}
.related-posts-widget ul li {
width:13%
}
footer {
margin:1%
}
#media screen and (max-width:639px) {
h1, .sub {
font-size:.9em
}
header img, .homelist img, iframe {
width:90%
}
#main {
width:98%
}
.mobilesquish img, .staticpagelist ul li {
width:47%
}
.breadcrumb {
margin-bottom:2%
}
.follow, .related-posts-widget, .hcard, .remove {
display:none
}
}
Try this
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}
use following code
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}
#media screen and (max-width: 639px){
//write Css for screen less than 639px
}
I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon
Google Now Icon Only with CSS
DEMO
output :
HTML :
<div class="gn"><div class="mc"></div></div>
CSS :
body{font-size: 15px;}
.gn{
position:relative;
margin: 5% auto;
background-color:#FE2222;
border-radius:50%;
width:10em; height:10em;
}
:before, :after{
content:'';
position:absolute;
background-color:#fff;
}
.gn:after{
top:30%; left:43%;
height:15%; width:14%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.gn:before{
top:40%; left:43%;
height:15%; width:14%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.mc{
position:absolute;
top:50%; left:37%;
height:24%;
width:26.5%;
overflow:hidden;
}
.mc:before{
bottom:50%;
width:100%; height:100%;
box-sizing:border-box;
border-radius:50%;
border:0.5em solid #fff;
background:none;
}
.mc:after{
top:50%; left:40%;
width:20%; height:25%;
}
Demo
html
<div class=container><i class=icon-microphone></i></div>
css
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
* {
margin:0;
padding:0;
}
.container {
width:150px;
background-color:#e74c3c;
display:block;
margin:100px auto 0px auto;
border-radius:100%;
box-shadow:0px 0px 15px 2px #bdc3c7;
cursor:pointer;
transition:.3s all ease-in;
position:relative;
}
.icon-microphone {
color:white;
font-size:60px;
line-height:150px;
display:block;
text-align:center;
transition:.1s all ease-in;
}
.container:hover {
background-color:#27ae60;
}
.container:active {
background-color:#e74c3c;
}
.container:active .icon-microphone {
color:#ecf0f1;
}
I'm using a Wordpress theme with a MLS search box however the search box is too large for my client and they want us to reduce the size of this entire search box. I've been playing with it but to no avail. Any suggestions?
Site is http://shouldirentorbuyahome.com/
}
/*-------------------------------------
4.3 Advance Search
-------------------------------------*/
.advance-search-block { background:#F2F2F2; padding:5px 0 10px; position:relative; }
.advance-search-block label { display:block; font-weight:200; font-size:12px; color:#384042; margin-bottom:10px; }
.advance-search-block ul { width: 80%; }
.advance-search-block ul li { float:left; margin-right:15px; margin-bottom:15px; }
.advance-search-block input[type='text'] { font-size:10px; color:#777; padding:8px 8px 9px; width:75px; border:1px solid #E1E1E1; }
.advance-search-block select.small, .advance-search-block a.small { width:150px !important; }
.advance-search-block input[type='submit'] { background:#445064; color:#FFF; padding:8px 11px; font-size:12px; font-weight:200; cursor:pointer; }
.advance-search-block input[type='submit']:hover { background:#344053; }
.search-title { position:absolute; top:0px; }
.search-title h4 { background:#445064; padding:18px 25px; font-size:12px; font-weight:200; float:left; color:#FFF; margin-bottom:0; }
.search-title span { float:left; display:block; background:#88C354; color:#FFF; font-size:12px; padding:18px 20px; }
.advance-search-block.advance-search-block-page { background:none; padding:0; margin-top:-200px; }
.advance-search-block.advance-search-block-page .inside { background:#dcecce; background:rgba(220,236,206,0.8); padding:30px 30px 0; width:1020px; }
.advance-search-block.advance-search-block-page ul li { margin-right:15px; }
.advance-search-block.advance-search-block-page input[type="text"] { width:150px; }
.advance-search-block.advance-search-block-page .search-title { position:relative; top:0; }
.advance-search-block.advance-search-block-page .search-title h4 { background:none; padding:0; font-size:12px; color:#384042; }
.advance-search-block.advance-search-block-page .search-title span {
background:#445064; padding:4px 8px; margin-right:15px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;
}
You have
.advance-search-block.advance-search-block-page input[type="text"] { width:150px; }
Can't you just change the width of this element to something not as wide?
Suggest
.advance-search-block.advance-search-block-page input[type="text"] { width:60%; }
Give that a shot and I'm sure you know in wordpress you will need to manually update your styles.css.
If i'm not wrong you are talking about that blue button?
Your blue submit button has a div and it has a class 'dsidx-search-button search-form' with width of 1020px !important , reduce it to 250px !important as per your requirement.
I downloaded JavaScript code from http://twitter.com to embedded a Twitter Widget in a block on the front page of this site: http://www.fareham.vm.bytemark.co.uk/.
The block renders fine in Google Chrome (10.0.648.133) and Opera (11.01), but in Internet Explorer (7.0.5730.13CO) and Firefox (3.6.15), the block is rendered incorrectly, obscuring the latest news block.
The CSS code is loaded from: http://widgets.twimg.com/j/2/widget.css:
.twtr-widget {
position:relative;
font-size:12px!important;
font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
zoom:1;
}
.twtr-fullscreen {
font-size:220%!important;
}
.twtr-fullscreen .twtr-new-results {
_display:none!important;
}
.twtr-inactive {
display:none;
}
.twtr-widget a img {
border:0!important;
}
.twtr-doc {
overflow:hidden;
width:100%;
text-align:left;
font-weight:normal;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.twtr-bd {
padding:0 1px;
}
.twtr-widget .twtr-tweet-wrap {
padding:6px 8px;
overflow:hidden;
zoom:1;
}
.twtr-fullscreen .twtr-tweet-wrap {
padding:20px;
}
.twtr-widget .twtr-tweet {
border-bottom:1px dotted #ddd;
overflow:hidden;
zoom:1;
}
.twtr-widget-profile img.twtr-profile-img {
display:block;
float:left;
width:31px;
height:31px;
border:0!important;
}
.twtr-widget h3,.twtr-widget h4,.twtr-widget p {
margin:0!important;
padding:0!important;
line-height:1.2!important;
width:auto!important;
}
.twtr-widget-profile h3,.twtr-widget-profile h4 {
margin:0 0 0 40px!important;
}
.twtr-widget h3 {
font-size:11px!important;
font-weight:normal!important;
}
.twtr-widget h4 {
font-size:16px!important;
}
.twtr-widget em,.twtr-widget .twtr-new-results {
font-size:9px;
font-style:normal;
display:block;
margin-top:2px;zoom:1;
}
.twtr-widget .twtr-new-results {
text-align:center;
padding:3px;
margin:0 auto -10px auto!important;
display:block;
position:relative;
bottom:5px;
line-height:.9;
}
.twtr-results-inner {
line-height:1;
font-size:100%;
padding:4px 0;
position:relative;
bottom:-2px;
width:40%;
margin:0 auto;
z-index:2;
text-align:center;
}
.twtr-results-hr {
width:100%;
position:relative;
z-index:1;
height:1px;
border-bottom:1px dotted #ddd;
bottom:7px;
background:none;
overflow:hidden;
}
.twtr-new-results span {
position:relative;
z-index:3;
top:-14px;
display:block;
font-size:9px!important;
}
.twtr-fullscreen .twtr-new-results span {
font-size:24px!important;
}
.twtr-hd {
padding:10px;
position:relative;
zoom:1;
overflow:hidden;
}
.twtr-fullscreen .twtr-hd {
height:0;
padding:0;
}
.twtr-timeline {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
position:relative;
overflow:hidden;
z-index:2;
height:225px;
}
.twtr-scroll .twtr-timeline {
overflow-x:hidden;
overflow-y:auto;
}
.twtr-widget .twtr-tweet:last-child {
border-bottom-width:0;
}
.twtr-ft {
position:relative;
}
.twtr-ft div {
overflow:hidden;
padding:10px;zoom:1;
}
.twtr-ft span {
float:right;text-align:right;
}
.twtr-ft a {
float:left;display:block;
}
.twtr-ft a img {
position:relative;
top:2px;
}
.twtr-ft span a {
float:none;
}
.twtr-avatar {
width:40px;
height:40px;
float:left;
overflow:hidden;
display:block;
}
.twtr-fullscreen .twtr-avatar {
width:80px;
height:80px;
}
.twtr-img {
height:25px;
width:25px;
}
.twtr-img img {
width:30px;
height:30px;
}
.twtr-fullscreen .twtr-img img {
width:72px;
height:72px;
}
.twtr-fullscreen a.twtr-join-conv {
display:none;
}
.twtr-tweet-text {
margin-left:40px;
}
.twtr-fullscreen .twtr-tweet-text {
margin-left:90px;
}
.twtr-popular {
font-size:10px;
padding:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin-top:3px;
opacity:.8;
}
.twtr-doc a {
text-decoration:none!important;
}
.twtr-doc a:hover {
text-decoration:underline!important;
}
First of all your problem has nothing to do with positioning.
Your <h2> element which come just before the twitter feed...
<h2>Twitter Timeline</h2>
... is being affected by the following CSS rule: (demo.css, line 10)
.promo-center-2cols .block h2 {
float:left;
width:320px
}
Drop the float:left. The problem is that there is a div shortly after it... (class="twtr-doc")
<h2>Twitter Timeline</h2>
<div class="content">
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div class="twtr-doc" style="width:100%;">
... which is being targeted by the following rule: (widget.css line 12)
.twtr-doc {
overflow:hidden;
width:100%;text-align:left;
font-weight:normal;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
That float and overflow together are creating your problem. You'll have to change one of them, and since widget.css comes from widgets.twimg.com (Twitter) I assume you can't change it, so change the float value in demo.css.