I can't figure out why the border isn't showing up. I have a main wrapper that encapsulates all the elements; I'm just making the background of each element a transparent white, and then adding a transparent white border to the wrapper.
http://violetoeuvre.com/
/* Wrapper - Main *********/
.main_wrapper{
display:block;
background: rgba(255,0,0,.5);
width:1000px;
height: 2000px;
margin-left:18%;
margin-top:7%;
border:10px;
border-color: rgba(255,255,255,.5);
}
html
<div class="main_wrapper">
<!-- Logo _____________________________________________________-->
<div class="logo">
<a href="index.html"><img alt="emma carmichael" height="150px"
src="images/Home/emma-logo.png"></a>
</div>
<!---Navigation Menu ______________________________________________-->
<div id="main_menu" class="wrapper_nav_box">
<div class="nav_box">
WRITING
</div>
<div class="nav_box">
BLOG
</div>
<div class="nav_box">
CONTACT
</div>
</div>
Any ideas?
As #Lotus said:
You forgot to include the border-style
As an altenative to use the shorthand as Lotus suggested, you could do like this:
.main_wrapper
{
/*other stuff*/
border-width: 10px;
border-style: solid;
border-color: rgba(255,255,255,.5);
}
Note: I add this to extend on Lotus's answer, and to help to answer #Claire's comment "i know i should use shorthand, but why wouldn't the other way work?"
Related
I have the following unique attribute assigned to a class:
.subcategory1:hover span { background: url(entertainment-hover.png); }
I have many such subcategory classes and I want to assign them additionally general attributes for :hover span and I came up with the following:
[class*="subcategory"]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
But it doesn't work and I cant find the problem!
Does anyone know what I have to amend to make this work assigning these attributes to all subcategory classes on :hover for span?
Please note that I dont have access to the HTML Code!
EDIT
[class*=subcategory]:hover span{
background-repeat: no-repeat !important;
background-size: 20px !important;
}
.subcategory1:hover span{
background: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
}
<div class="subcategory1">
<span style="font-size: 100px;">I am in a mess</span>
</div>
You can add another class to the current classes that you want to add an effect on hovering it
for example
.hover-effect:hover span {
/*
your CSS code
*/
}
<div class="subcategory1 hover-effect">
<span>text</span>
</div>
<div class="subcategory2 hover-effect">
<span>text</span>
</div>
<div class="subcategory3 hover-effect">
<span>text</span>
</div>
<div class="subcategory4 hover-effect">
<span>text</span>
</div>
remove quotation from the class name in css file
[class*=subcategory]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
I made a jsfiddle for you too.
I am using slick slider and showing 3 slides, I would like to add specific styling on the center slide. by using nth-of-type but it seems to fail when I add .slick-active:nth-of-type(2) any ideas?
for example:
<div class="slickslider">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-current slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
.slick-slide{
background: blue;
width: 20px;
height: 20px;
margin-bottom: 1px;
}
.slick-active{
background: green;
width: 20px;
height: 20px;
}
.slick-active:nth-of-type(2){
background: pink;
}
https://jsfiddle.net/pixelatorz/73scpych/2/
You can do it this way by playing process of elimination:
.slickslider .slick-active + .slick-active:nth-child(odd){
background: pink !important;
}
See demo
Basically, eliminate the first one with the + and next, eliminate the last one by choosing the odd child. Or first child would've worked too
EDIT
If you think there will be more than 3 active slides in the future and you want to make this more dependable, I suggest you wrap the active slides in a <span> and class it active-slides or something similar. Then. you will be able to select through them with nth-child without using .slickslider as a parent.
Is a stupid solution, but works:
.slick-slide:nth-of-type(6){
background: pink;
}
Good morning, I have a Div within a Div, the child div is hidden, but displays when the mother div is hovered. I need this display to be transitioned, but when I try this with Display or Visibility, its not working. I've created a fiddle here with sample code:
https://jsfiddle.net/eggb4zra/
.vocabTitle
{
text-align:left;
background:linear-gradient(#ffffcc, #ffffcc, white, lightblue);
padding:3px;
padding-bottom;2px;
border:2px solid black;
border-radius:15%;
cursor:pointer;
transition: all 2s;
}
.highlightClass
{
background-color:pink;
}
.hiddenMeaning
{
visibility:hidden;
display:none;
}
.vocabTitle:hover .hiddenMeaning
{
visibility:visible;
display:block;
}
You can see the display works on hover, but not transitioned. Any help appreciated.
Transition for display: none to display: block will not work in CSS since none value removes the element as if it is not there in the page.
Try transition of height* from 0 to say 20px. Set overflow: hidden to the div to be hidden initially.
*Since you need to use dynamic height, you can make use of max-height instead of height
Updated JSfiddle
.vocabTitle {
text-align: left;
background: linear-gradient(#ffffcc, #ffffcc, white, lightblue);
padding: 3px;
padding-bottom;
2px;
border: 2px solid black;
border-radius: 15%;
cursor: pointer;
transition: all 2s;
}
.highlightClass {
background-color: pink;
}
.hiddenMeaning {
transition: all 2s;
max-height: 0;
overflow: hidden;
}
.vocabTitle:hover .hiddenMeaning {
max-height: 100px;
}
<!-- Left bar -->
<div class="kanjiVocab">
<p>Kanji and Vocabulary listed below:</p>
<div class='vocabTitle'>風邪 (かぜ ふうじゃ )
<div class='hiddenMeaning'>common cold cold influenza flu ague</div>
</div>
<br>
<div class='vocabTitle'>気味 (きみ きび )
<div class='hiddenMeaning'>sensation feeling tendency propensity</div>
</div>
<br>
<div class='vocabTitle'>熱 (ねつ )
<div class='hiddenMeaning'>heat fever temperature zeal passion enthusiasm mania craze rage</div>
</div>
<br>
<div class='vocabTitle'>季節(きせつ)
<div class='hiddenMeaning'>Season</div>
</div>
<br>
<div class='vocabTitle'>風邪 (かぜ ふうじゃ )
<div class='hiddenMeaning'>common cold cold influenza flu ague</div>
</div>
<br>
<div class='vocabTitle'>引き (ひき )
<div class='hiddenMeaning'>pull patronage influence tug discount</div>
</div>
<br>
<div class='vocabTitle'>で (で )
<div class='hiddenMeaning'>indicates location of action at in indicates time of action indicates means of action cause of effect by and then so indicates continuing action indicates certainty, emphasis, etc.</div>
</div>
<br>
<div class='vocabTitle'>ん (ん )
<div class='hiddenMeaning'>yes yeah uh huh negative verb ending used in informal speech (abbr. of negative verb ending "nu") abbr. of particle "no" abbr. of particle "ni" (used especially when it precedes the verb "naru")</div>
</div>
<br>
<div class='vocabTitle'>を (を )
<div class='hiddenMeaning'>indicates direct object of action indicates subject of causative expression indicates an area traversed indicates time (period) over which action takes place indicates point of departure or separation of action indicates object of desire, like, hate,
etc.</div>
</div>
<br>
</div>
<!-- End of left bar -->
I am using Jquery Mobile´s grid and I want to remove the default border and change the default background-color. Here is my code:
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div><!-- /grid-b -->
Thank you
The answer is
.ui-bar-a {
background-color: #FFFFFF;
border-style: none;
}
Try this:
.ui-bar-a {
background-color: #fff !important;
border-style: none !important;
}
!important helps to override the jquery mobile css.
For my website I have split the page up into rows using CSS(no tables) to get a line to split up the content. As you can see ive just used height:px; for each row to manually move the line. But it jumps all over the place in different browesers. Is there a way to get it to automatically set the border so it appears at the end of the content inside the div?
.row1A
{
height: 600px;
border-bottom: 1px solid white;
}
.row2A
{
height: 820px;
border-bottom: 1px solid white;
}
<div class="row1A">
<div class="column1">
<h2> Bluerock FX-10G</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Bluerock.jpg" alt="Bluerock FX-10G" width="450px" height="325px">
</div>
</div>
<div class="row2A">
<div class="column1">
<h2>Line 6 Spider IV 15W</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Line6Spider.jpg" alt="Line 6 Spider IV" width="350px" height="350px">
</div>
</div>
Please try adding following styles:
.row1A
{
height: auto;
border-bottom: 1px solid white;
clear:both;
}
.row2A
{
height: auto;
border-bottom: 1px solid white;
clear:both;
}
It has been fixed thanks for your help. For some reason when i entered the extra info above the border was at the top of the row not at the bottom. Maybe it was like that anyway just did not make a fuss. But i have now fixed it by removing the border from row 1.