I am using ASP.net web application, the default CSS when modified with the following CSS gives error:
Expected selector for the style rule
It seems a CSS version problem. How can I know which version of CSS i am using? How can I upgrade?
Here is the CSS taken from Codepen
$white: #fff;
$google-blue: #4285f4;
$button-active-blue: #1669F2;
.google-btn {
width: 184px;
height: 42px;
background-color: $google-blue;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.25);
.google-icon-wrapper
{
position: absolute;
margin-top: 1px;
margin-left: 1px;
width: 40px;
height: 40px;
border-radius: 2px;
background-color: $white;
}
.google-icon {
position: absolute;
margin-top: 11px;
margin-left: 11px;
width: 18px;
height: 18px;
}
.btn-text {
float: right;
margin: 11px 11px 0 0;
color: $white;
font-size: 14px;
letter-spacing: 0.2px;
font-family: "Roboto";
}
&:hover {
box-shadow: 0 0 6px $google-blue;
}
&:active {
background: $button-active-blue;
}
}
#import url(https://fonts.googleapis.com/css?family=Roboto:500);
You can convert your syntax with the following css syntax
Check the snippet:
#import url(https://fonts.googleapis.com/css?family=Roboto:500);
.google-btn {
width: 184px;
height: 42px;
background-color: #4285f4;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
}
.google-btn .google-icon-wrapper {
position: absolute;
margin-top: 1px;
margin-left: 1px;
width: 40px;
height: 40px;
border-radius: 2px;
background-color: #fff;
}
.google-btn .google-icon {
position: absolute;
margin-top: 11px;
margin-left: 11px;
width: 18px;
height: 18px;
}
.google-btn .btn-text {
float: right;
margin: 11px 11px 0 0;
color: #fff;
font-size: 14px;
letter-spacing: 0.2px;
font-family: "Roboto";
}
.google-btn:hover {
box-shadow: 0 0 6px #4285f4;
}
.google-btn:active {
background: #1669F2;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<div class="google-btn">
<div class="google-icon-wrapper">
<img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
</div>
<p class="btn-text"><b>Sign in with google</b></p>
</div>
Related
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
Please refer to this image as a visual aid for my question.
I want the text input with "Sindre", the other input, and the buttons, to be placed higher, so they vertically align with the Icehotel logo. How can I do this?
Here's my code...
HTML
<div id="header-content">
<br>
<a href="/index">
<img draggable="false" src="{url}/app/tpl/skins/{skin}/images/logo.gif" style="position:relative; margin-left: 20px; <div align=; color: #FA0000;margin-top: 15px;margin-left: 180px">
</a>
<input id="username" name="log_username" placeholder="Username" style="position:relative; margin-left: 20px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="text">
<input id="password" name="log_password" placeholder="Password" style="position:relative;margin-left: 1px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="password">
<a href="{url}/api.php">
<button class="login green" name="login" style="height:34px;" type="submit">Let's go!</button>
</a>
<a>
<button class="login red" style="height:34px; margin-left: 4px" type="sumbit">Forgot your password?</button>
</a>
</div>
CSS
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr, img {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
#page {
margin: .5cm
}
p, h2, h3 {
orphans: 3;
widows: 3
}
h2, h3 {
page-break-after: avoid
}
}
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
color: #e0eff5;
background-attachment: fixed;
background-color: #013448;
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png');
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -webkit-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -moz-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #2D3877 480px);
, -ms-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
, radial-gradient(circle farthest-side at 190px 190px, #0297c8 0, #013448 480px);
min-height: 755px
}
i, cite, em, var, address, dfn {
font-style: italic;
}
body {
font-family: "Ubuntu Condensed", Arial, serif;
font-weight: normal;
min-height: 0;
}
#footer a {
color: #a1b5c8;
text-decoration: none;
font-size: 13px;
}
body {
font-size: 1em;
line-height: 1.4;
}
.form__input, .form__select {
box-shadow: inset 0 2px 0 0 #9ebecc;
line-height: 1.2;
padding: 5px 12px;
width: 100%;
font-size: 16px;
}
.button b, .new-button i {
position: absolute;
display: block;
left: 2px;
top: 3px;
right: 2px;
height: 9px;
background-color: #4a9fb4;
z-index: 0
}
.button:hover, .new-button:hover {
background-color: #418491
}
.button:hover b, .new-button:hover i {
background-color: #46a9bf
}
.button span, .new-button b {
position: relative;
z-index: 100
}
.button:active, .button-active, .new-button:active {
left: 1px;
top: 1px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.4)
}
.button.dimmed {
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .50
}
.button.large {
height: 100px;
background-color: #c78800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #5f4416
}
.button.large:hover {
background-color: #d99b00
}
.button.large:hover b {
background-color: #f7ce00
}
.button.large b {
left: 4px;
top: 4px;
right: 4px;
height: 48px;
background-color: #f0bb00;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0
}
.button.large span {
display: block;
font-size: 27px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 54px
}
.button.large span.sub {
display: block;
font-size: 17px;
font-weight: bold;
line-height: 42px;
text-transform: none
}
.button.large.not-so-large {
height: 48px
}
.button.large.not-so-large b {
height: 20px
}
.button.large.not-so-large span {
text-transform: none;
font-size: 22px;
line-height: 46px
}
header, footer {
width: 100%;
background: #101016;
background: rgba(16, 16, 22, 0.85);
position: fixed;
z-index: 999
}
#login-errors {
width: 100%;
height: 35px;
background-color: #c00;
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 35px
}
#login-errors a {
color: #000
}
#footer-content {
float: left;
margin-left: 50px
}
#footer-content.partner-logo-present {
margin-left: 20px
}
#footer {
width: 100%;
min-width: 780px;
margin-top: 19px
}
header {
top: 0;
min-height: 99px
}
header #border-left {
position: absolute;
width: 500px;
height: 1px;
left: 0;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
header #border-right {
position: absolute;
width: 100%;
height: 1px;
left: 220px;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
footer {
height: 69px;
bottom: 0;
border-top: 1px solid #7aa3b9
}
#top-bar-triangle, #top-bar-triangle-border {
position: absolute;
left: 163px;
bottom: -29px
}
#top-bar-triangle {
font-size: 0;
height: 0;
line-height: 0;
border-style: solid;
float: left;
margin: 0;
border-color: #101016 transparent;
border-color: rgba(16, 16, 22, 0.85) transparent;
border-width: 29px 29px 0 29px
}
#top-bar-triangle-border {
background-image: url('http://localhost/images/new_index/images/v3/top_bar_arrow_border.out.png');
width: 58px;
height: 29px
}
header #habbo-logo {
position: absolute;
width: 190px;
height: 52px;
background-image: url('http://localhost/app/tpl/skins/aura/images/logo.png');
left: 32px;
top: 27px
}
#login-form-container {
position: relative
}
header form {
position: relative;
left: 239px;
top: 0;
width: 740px;
height: 99px
}
#login-columns {
position: relative
}
header form.captcha {
height: 200px
}
header form.captcha #login-recaptcha {
height: 103px;
margin-top: 8px
}
#login-recaptcha .field-error, #login-recaptcha #captcha-overlay {
display: none
}
#login-column-1 {
position: absolute;
left: 0;
top: 11px;
width: 205px;
height: 70px
}
#login-column-2 {
position: absolute;
left: 214px;
top: 11px;
width: 134px;
height: 70px
}
#login-column-3 {
position: absolute;
left: 358px;
top: 32px;
width: 205px;
height: 55px
}
Set vertical-align: middle; on the inputs and remove the margin-top from the inline styles in the logo <img> tag.
While I'm at this, though...General cleanup of this code is probably a good idea. I would like to caution you to avoid mixing inline styles and CSS. Also, the <br> tag should probably be replaced with padding - that line break and the inline styles are there only for design purposes and design is handled in CSS. Keeping as much design out of the HTML will help you (or someone else) easily make changes to this site later, if needed. The <img> tag's styles also include two margin-left values. I would remove one to avoid confusion. Lastly, I think you will want to remove <div align=; from the <img> tag's styles. As far as I know, this doesn't accomplish anything.
Hope that helps!
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}
I am trying to create a cinnamon CSS theme, but I'm having a very strange issue.
As you can see below, I have set .menu-application-button:hover and .menu-application-button-selected's backgound-colour attribute to #3478db.
This works fine except when a scrollbar is present, where the background appears white. This is bizarre, as I have not set anything to white in the menu code at all. I have tried using !important but the problem still persists.
Is this just a silly mistake done by me, or a bug in cinnamon? And if it is a mistake how can I fix it?
here's the menu code:
/* ===================================================================
* Menu (menu.js)
* ===================================================================*/
.menu-favorites-box {
width: 50px;
margin: auto;
padding: 10px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: rgba(85,85,85,0.1);
transition-duration: 100;
}
.menu-favorites-button {
padding: 10px;
}
.menu-favorites-button:hover {
padding: 10px 4px 10px 16px;
}
.menu-help-button {
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}
.menu-help-button:hover {
color: white;
background-gradient-direction: vertical;
background-gradient-start: rgba(255,255,255,0.12);
background-gradient-end: rgba(255,255,255,0.06);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.12);
border-radius: 3px;
}
.menu-places-box {
padding: 10px;
}
.menu-places-button {
padding: 10px;
}
.menu-categories-box {
padding-top: 15px;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 0px;
}
.menu-applications-box {
padding-top: 15px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 0px;
}
.menu-application-button {
height: 36px;
padding: 0px 7px;
}
.menu-application-button:hover,
.menu-application-button-selected {
height: 36px;
padding: 0px 7px;
color: rgba(255,255,255,1);
background-color: #3478db;
border-color: #3374D4;
}
.menu-application-button-label:ltr {
padding-left: 5px;
}
.menu-application-button-label:rtl {
padding-right: 5px;
}
.menu-category-button {
height: 36px;
padding: 0px 7px;
}
.menu-category-button-greyed {
height: 36px;
padding: 0px 7px;
color: #aaa;
}
.menu-category-button-selected {
height: 36px;
padding: 0px 7px;
background-color: #3478db;
color: rgba(255,255,255,1);
border-color: #3374D4;
}
.menu-category-button-label:ltr {
padding-left: 5px;
}
.menu-category-button-label:rtl {
padding-right: 5px;
}
/* Name and description of the currently hovered item in the menu
* This appears on the bottom right hand corner of the menu*/
.menu-selected-app-box {
padding-right: 30px;
padding-left: 28px;
text-align: right;
}
.menu-selected-app-title {
font-weight: bold;
color: #4784de;
}
.menu-selected-app-description {
max-width: 150px;
color: #333;
}
.menu-search-box:ltr {
padding-left: 15px;
}
.menu-search-box:rtl {
padding-right: 15px;
}
#menu-search-entry {
border-image: url("entry.png") 5;
color: #333;
caret-color: #333;
font-size: 12pt;
caret-size: 1px;
selected-color: white;
selection-background-color: #4784de;
padding: 0px 8px;
width: 15em;
height: 30px;
}
.menu-search-entry-icon {
icon-size: 1em;
color: #333;
}
.menu-context-menu {
}
the full code, if needed, is available at http://pastebin.com/yTCF0b9f.
I'm trying to copy the Facebook's notification's blobs by using CSS3 ::before pseudo-element. I added a maximum height value and everything I tried isn't enough to reduce the space between the number and the beginning of the box. Any ideas on how to reduce/eliminate it?
Code:
HTML: <li notificaciones="3">[...]
SCSS:
*[notificaciones]:not([notificaciones="0"]){
&::before{
content: attr(notificaciones);
position: absolute;
color: $color-cajas-notificaciones-texto;
background-color: $color-cajas-notificaciones-fondo;
max-width: 25px;
font-size: 16px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: 800;
height: 20px;
float: left;
z-index: 999;
width: 20px;
text-align: center;
vertical-align: top;
top: 0px;
padding: 0 1px;
color: white;
text-shadow: 0px 0px 1px;
background-color: #f03d25;
border: 1px solid #d83722;
border-bottom: 1px solid #c0311e;
border-top: 1px solid #e23923;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);
display: block;
}
I didn't understand question well, but maybe you want like this
http://jsfiddle.net/zxshz/36/
<ul>
<li data="3"></li>
<li data="7"></li>
<li data="15"></li>
</ul>
/* css */
ul{
width: 250px;
}
li{
list-style: none;
float: left;
margin-right: 8px;
width: 18px;
height: 18px;
background: #9c0;
position: relative;
}
li:after{
content:attr(data);
padding: 1px 2px 2px 3px;
position: absolute;
background: red;
right: -3px;
top: -5px;
font-weight: bold;
text-align: center;
font-size: 9px;
border-radius:2px ;
color: #fff;
}
li:nth-child(1){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}
li:nth-child(2){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}
li:nth-child(3){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}
I can't understand what is your problem, put your code please
It's was just a matter of referring to the official documentantion on Line Height Calculations
line-height: /*same as height property*/
vertical-align: top;