My slick slider dots are positioned so that one is under another, what's happening here and how can I fix it?
slick-theme.css:
.slick-dots
{
/*position: absolute;*/
/*bottom: -25px;*/
display: inline-block;
/*width: 100%;*/
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 20;
display: inline;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
I've never seen anything like this in another persons code and I can't find any results on Google. Please help, thank you.
Related
I am trying to get the the menu on the right side of the search bar to breakout of the parent.
Code: http://jsbin.com/xecolubodi/edit?html,css,js,output
I believe a modified to the following css styles is required:
.mapsearch-menu ul {
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu ul:hover {
display: block;
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
}
.mapsearch-menu input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.mapsearch-menu li:hover {
background: #eee;
cursor: pointer;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
padding-right: 5px;
}
Before click:
After click:
I want the hamburger menu icon to stay stationary and have the dropdown menu either breakout of the parent divs bounds or have the list items right justified.
I have been working on this for an hour and I am not getting anywhere. I tried various things (floating, etc).
ps: I prefer to have the search icon, the search text, and the hamburger all left-floated instead of the hack I am currently doing with padding with the search. If that is easier to fix that first then please attempt (I also been trying to fix that)
I updated your css below, It will probably work for you.
.mapsearch-menu ul {
display: none;
position: absolute; /* Add this you can change it as per you need */
top: -34px; /* Add this */
right:0px; /* Add this you can change it as per you need */
min-width:170px; /* Add this */
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
position:relative; /* Add this */
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
display:inline-block; /* Add this */
}
I'm trying to implement the following on my website:
Obviously this should be able to go on for more iterations, I don't really know what to google for, I found a way to create a line, but I have no idea how to combine that with Circles and how to make those aligned with the text.
Final code:
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li div {
width: 50%;
float: left;
text-align: center;
}
ul li .zero-left {
position: relative;
color: #EB908B;
width: 30%;
text-align: right;
padding-right: 20px;
}
ul li .zero-right {
border-left: 3px solid #3C4C4C;
position: relative;
color: #3C4C4C;
width: 70%;
padding-left: 15px;
text-align: left;
}
ul li .first {
position: relative;
color: #EB908B;
width: 30%;
text-align: right;
padding-right: 20px;
}
ul li .second {
border-left: 3px solid #3C4C4C;
position: relative;
width: 70%;
padding-left: 15px;
text-align: left;
}
ul li .second p {
color: #EB908B;
position: relative;
text-align: left;
}
ul li .first::before {
content: '';
position: absolute;
right: -11.5px;
width: 20px;
height: 20px;
border-radius: 150%;
border: 2px solid #3C4C4C;
background: #3C4C4C;
z-index:9999
}
You can use after pseudo-element to put circle. Here I made an example with after solution.
jsfiddle
Page in question: http://bit.ly/1xLOmeS
Every third LI has extra spacing at bottom that isn't supposed to be there.
I've tried using nth-child (odd) and (even) as shown below, and have also tried just the li:nth-child(2n+2) condition with the right margin set to 0px to prevent every 2nd box being shifted to the next line. Where is this space coming from??
CSS
ul.comment-card {
padding: 0;
margin: 0;
list-style: none;
}
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li .meta {
color: #767da1;
font-weight: 400;
line-height: 1.4em;
}
.comment-card .meta img {
position: relative;
top: -8px;
}
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
Example: jsFiddle
I' cant for the life of me figure out why the div "book_button" won't display at the bottom of the page, above the footer. I have a main wrapper div, and then there is a content div. I've placed the book_button in a relative position outside the content div. In the dream weaver design window it's showing it where I want it to be. When I view it in a browser it diplays like so
http://kerrydean.ca/GreyRiver/fly_fishing.html
here is the css
#Wrapper {
margin-top:0;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #ebebeb;
padding: 0px;
width: 100%;
top: 75px;
}
#Header {
background-color: #b2b85c;
height: 75px;
width: 100%;
position: fixed;
top: 0px;
overflow: hidden;
z-index: 999;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#Content {
width: 900px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#Left_Side {
padding: 10px;
width: 485px;
clear: left;
float: left;
}
#Right_Side {
width: 340px;
position: relative;
display: inline;
float: right;
margin-left: 20px;
margin-bottom: 10px;
padding-left: 35px;
height: 100%;
}
#Footer {
background-color: #BCC271;
height: 15px;
width: 100%;
text-align: center;
padding-top: 15px;
padding-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
float: left;
position: relative;
}
/* Navigation*/
.nav-wrap {
position: relative;
margin-right: auto;
margin-left: auto;
width: 900px;
padding-left: 15px;
padding-top: 31px;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #FFF;
}
#navlist a:hover
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
background-image: url(../GreyRiver/Images/pointer.jpg);
background-repeat: no-repeat;
background-position: 50% bottom;
}
.border-none{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/*End of Navigation*/
#header_img{
height: 250px;
width: 900px;
position: relative;
background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg);
margin-top: 10px;
margin-bottom: 25px;
}
#book_button{
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
}
I figured it out.
I put the book_button div right before the footer. I made the width 100%, position:relative and add a float:left
thanks anyway!
1) Make #Wrapper position:relative
2) make #book_button position:absolute, set bottom:40px;right:200px;
This probably isn't best practice, but you could use the top style property to push the button down where you want it. It looks like the content of your page is static, meaning that button isn't going to need to position itself dynamically each time the page loads. So, a hard coded value to position it may work for you.
I took your current view source and just changed the #book_button back to relative and it displays in between the footer and the content. Change that back to relative as absolute will not work.
My navigation looks fine in Chrome but in Firefox and IE, the list items appear below (about 15 pixels below) the nav container div. Can someone please help me?
Here is the link: http://jwstudio.us/bkpa/
The CSS:
nav {
position: relative;
background-image: none;
background-repeat: no-repeat;
float: left;
background-color: #DBD0CA;
z-index: 3;
margin-top: -115px;
margin-left: -2px;
height: 29px;
width: 945px;
margin-right: 10px;
background-position: left;
}
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
}
nav ul li a {
position: relative;
height: 27px;
float: left;
z-index: 5;
text-align: left;
padding-left: 11px;
list-style-type: none;
text-decoration: none;
color: #8F181B;
font-weight: normal;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #DBD0CA;
}
nav ul li a:hover, a:active {
position: relative;
height: 27px;
color: #FFF;
background-image: url(images/nav_rollover.png);
z-index: 6;
padding-top: 3px;
}
You need to reset the padding on the ul as it is the left padding that is causing the element to go to the next line:
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
padding: 0; // added
}