when i put in my social media icons with "Rollover Image", my main navigation rollover image effects stop working. Why is that?
the layout: http://postimg.org/image/n8xfmtodj/
My css:
wrapper
{ width:900;
margin:-15px auto 20px auto;
background-color:#000;
padding:0 40px;
box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
background-color: rgba(0,0,0,0.8);
float:none; width:900; height:100%; }
mainNav
{ width:90%;
height:90%;
position:absolute;
bottom:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
text-align:left; }
socialMedia
{width:97.5%;
height:98%;
position:absolute;
bottom:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
text-align:right }
yes i got # before every category in the css docoment just dident get it to work, its my (my first question)
Related
#mixin search-box{
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width:100%;
outline: none;
border-radius: 5px;
color:$color;
font-family: $myFont;
font-size: 23px;
}
.search-container{
background:lightcyan;
margin: 5px auto;
width:30%;
#include: search-box;
}
Here I am using mixins in scss.
But it is giving me error identifier expectedscss(css-identifierexpected)
Please have a look.
#include is used like
#include <name>
So your styles would look like
#mixin search-box {
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width: 100%;
outline: none;
border-radius: 5px;
color: $color;
font-family: $myFont;
font-size: 23px;
}
.search-container {
background: lightcyan;
margin: 5px auto;
width: 30%;
#include search-box;
}
I can't apply fixed height with scroll. When I fixed height container blow up all div's height. How can I fixed height div? Fixed tree items in container. I made fix container height '200px' but it doesn't work. Maybe there is something simple but I can't see.
Here's my simple code:
<div class="container-Atanan">
<div class="container-Atanan-Header">
<i class="fas fa-american-sign-language-interpreting fa-2x"></i>
<div class="container-Atanan-Header-Title"><span>Başlık</span></div>
</div>
<div class="container-Atanan-ListItem">
<a class="listItem" href="#">
<div class="container-Atanan-ListItem-Avatar">
<img src="https://cdn.vuetifyjs.com/images/lists/1.jpg" alt="">
</div>
<div class="container-Atanan-ListItem-Content">
<div class="Content-Title">Lorem ipsum.</div>
<div class="Content-Subtitle">
<span>Lorem ipsum dolor sit. <span class="italic">-25.2.2019</span></span>
<span class="italic oldline">Lorem ipsum dolor sit amet. </span>
</div>
</div>
</a>
</div>
and my scss:
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height: 80%;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display: inline-flex;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
display: inline-flex;
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
and my fiddle
Use this instead
display:grid;
grid-template-columns :max-content max-content;
In &-header and remove inline-flex from &-ListItem and you can set the height in .container-Atanan to any value you want
body{
background-color:#FEFCFC;
}
.container-Atanan {
box-shadow:0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
box-sizing: border-box;
// background-color : #7AD3B1;
width: 470px;
height:350px;
overflow: auto;
padding-bottom : 30px;
font-family: 'Roboto', sans-serif;
&-Header {
display:grid;
grid-template-columns :max-content max-content;
background-color: #e2e2e2;
height: 50px;
align-items: center;
&-Title{
padding:15px;
}
}
&-ListItem{
.listItem{
display: inline-flex;
width: 100%;
height: 72px;
text-decoration: none;
color:black;
padding: 15px 15px;
}
&-Avatar {
margin-right: 10px;
display: inline-flex;
align-items: center;
img{
border-radius: 50%;
width: 40px;
height: auto;
}
}
&-Content {
display: inline-flex;
padding-right: 30px;
flex-direction: column;
justify-content: center;
padding-left:10px;
width: 362px;
height: 72px;
box-shadow: 0 8px 6px -20px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
transition: background-color 0.5s ease-out;
.Content-Title{
font-weight: 500;
}
.Content-Subtitle {
font-weight: 300;
display: inline-flex;
flex-direction: column;
.italic{
font-weight : lighter;
font-style: italic;
font-size :1em;
}
.oldline{
text-decoration:line-through;
}
}
&:hover{
background: rgba(0,0,0,0.05)
}
}
}
.divider{
display: block;
margin-left: 72px;
border: solid;
border-width: thin 0 0 0;
margin-left: 0;
margin-right: 0;
margin-bottom : 0;
&-Light{
border-color: rgba(0,0,0,0.12);
}
}
}
JSFIDDLE
I want to add background to language switch bar and login bar as shown on the image below:
http://s21.postimg.org/ra5z6djyv/Untitled_1.jpg
I have two modules called "position2" and "position1" for these two sections.
I can also associate "Custom class" of the module with specific code in my template.css so I need just a code for the style. What CSS should I put to my template to make this work?
Here are my codes and by adding them Im getting this:
http://s30.postimg.org/6yjew3601/Untitled_1.jpg
CODE FOR "postion1":
.flag-container {
background:#88e1f9;
border-radius: 0px 0px 8px 0px;
-moz-border-radius: 0px 0px 8px 0px;
-webkit-border-radius: 0px 0px 8px 0px;
border: 0px solid #800000;
}
CODE FOR "position2":
.box-color {
background:#88e1f9;
border-radius: 0px 0px 0px 8px;
-moz-border-radius: 0px 0px 0px 8px;
-webkit-border-radius: 0px 0px 0px 8px;
border: 0px solid #800000;
}
/additional code for buttons style/
.box-color ul
{
float:center;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.box-color a
{
float:right;
text-align:center;
width:4em;
text-decoration:none;
color:#666;
background-color:transparent;
padding:0.2em 0.6em;
border-width:1px solid black;
}
.box-color a:hover {background-color:#ff3300;}
.box-color li {display:inline;}
Thank you!
Ok so I assume by what you've written, you know about Module Class Suffix's. Once you have done this, let's say you add the class "custom", your CSS will simply be like this:
.custom {
background: #62BBDD;
border-radius: 0px 0px 5px 5px;
}
which you can add to your template.css file.
You can change #62BBDD to whatever colour you wish
Update:
Without looking at your site, it's very hard to figure out how to remove the spacing so the only thing I'm going to suggest is a "quick fix" solution.
add this to your .flag-container class CSS:
position: relative;
right: 40px;
So it will finally look like this:
.flag-container {
background:#88e1f9;
border-radius: 0px 0px 8px 0px;
-moz-border-radius: 0px 0px 8px 0px;
-webkit-border-radius: 0px 0px 8px 0px;
border: 0px solid #800000;
position: relative;
right: 40px;
}
Note that you will probably need to change 40px until it meets the other container
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)
You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.
You can do the same thing like this:
HTML:
<button id="a">click</button>
CSS:
button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}
button:hover{
box-shadow:0 0px 3px #999;
-webkit-box-shadow:0 0px 3px #999;
-moz-box-shadow:0 0px 3px #999;
}
Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/
This can be done by multiple shadows:
CSS
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
see example 5.5:
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/