My carousel has a bad alignament on small screens, but on laptop/desktop its fine. Ill attached for you a screenshot and my css code.
Thanks a lot.
.MultiCarousel { margin-right:15px; margin-left: 15px;float: left; overflow: hidden; padding: 5px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:20% ; }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
Do not use left: and right: rather take a look at this
https://www.w3schools.com/css/css_align.asp
all you need to do on the carousel is margin: 0 auto;
Related
Right now on hover the underline animation I've set up for my .nav extends past the link, and I want to make it so it only takes up the width of the link. The width is set to 100%, so I'm not quite sure why it's doing that. Also tried messing around with padding to see if that was the issue but didn't work. Could it be because of bootstrap?
html, body {
font-family:;
margin:0 auto;
text-transform: lowercase;
font-family: Roboto;
letter-spacing: 0.5px;
}
.nav {
float: right;
display: inline-block;
margin:0 auto;
list-style: none;
}
.nav li {
display: inline-block;
margin:0 auto;
list-style: none;
list-style: none;
display: inline;
padding-top:0;
padding-left: 10px;
}
.nav > li > a {
padding: 10px;
color: white;
font-family: Roboto;
text-decoration: none;
position: relative;
width:100%;
}
.nav > li > a:hover {
background-color:transparent;
text-decoration: none;
}
.nav > li > a:focus {
background-color:transparent;
text-decoration: none;
}
.nav > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color:white;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav > li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
width:100%;
}
.work h1 {
border-left: 0px solid black;
padding-top:30px;
display:inline-block;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
color:;
}
.work a {
color: black;
text-decoration: none;
}
.supporting .container-fluid {
background-image: url("img/photo-top.jpg");
height: 600px;
background-size: cover;
background-position: center center;
text-align: center;
position:relative;
top: 0;
width: ;
height: 100vh;
}
.work .container-fluid {
height:500px;
margin: 0 auto;
background: white);
width:100%;
padding:0;
}
.photography .container-fluid {
height:500px;
margin: 0 auto;
background: white);
width:100%;
padding:0;
}
.photography a {
border-left: 0px solid black;
padding:10px;
display:inline-block;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
color:black;
}
div.container-fluid {
padding:0;
width:100%;
height: 100%;
}
.info {
position: absolute;
top: 50%;
left: calc(50% - 180px);
width: 360px;
}
.info h1 {
margin:0 auto;
color:white;
font-size: 50px;
}
.info a {
color: white;
}
.info a:hover {
color: white;
background-color:transparent;
text-decoration: none;
}
}
I have a navigation menu that takes up to 250px in width of the page's left side and 100% in height. I added a 1. Fixed Top Title List Item at the top of the navigation menu, as well as a 2. Fixed Footer List Item at the very bottom of the navigation menu. My idea is to keep both items fixed, and both items have to also disappear when the browser width is a certain size. but I have a big problem:
Problem 1: When I add the fixed width to .topfilter and .bottomfilter, the list items now extend the full width of the
entire page instead of the navigation menu.
Problem 2: Now when I resize the browser the fixed width items
don't disappear
Bonus: I also don't know how to add a padding to the .topfilter and .bottomfilter so that they don't cover up the text before it.
Padding-Top and Padding-Bottom don't work.
Fixed Width Items: https://jsfiddle.net/4fqapznu/1/
.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box;
box-sizing: border-box;}
.bottomfilter {border-top: solid #333 2px; width:100%; height:50px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;}
HTML:
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="topfilter">
<a class="filtertitle">Title</a>
</li>
<li>
<a href="#/content">
Content
</a>
</li>
<li>
<a href="#/topics">
Topics
</a>
</li>
<li>
<a href="#">
Groups
</a>
</li>
<li>
<a href="#">
Premium
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="bottomfilter">
<a class="filtertitle">Footer</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div class="content" style="min-height:90%; background:white;" >
</div>
<div class="push"></div>
<footer class="footer">
</footer>
CSS:
a {outline:none !important;}
html,
body,
.wrap {
height: 100%;
}
.wrap {
box-sizing: border-box;
}
form {
height: 100%
}
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -60px;
/* for sticky footer to not go below page */
/* for sticky header to not overlap content */
}
.push,
.footer {
height: 60px;
}
.footer {
background-color: #ebebeb;
height: 60px;
width: 100%;
position: fixed;
bottom: 0;
}
.content {
position: absolute;
width: 100%;
top: 120px;
background-color: yellow;
z-index: 0;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 142px;
top: 0px;
margin-bottom: 60px;
width: 0;
height: 100%;
margin-left: -142px;
overflow-y: auto; overflow-x: hidden;
background: #eee;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box:
box-sizing: border-box:}
.filtertitle { position:relative; display:inline-block; color:#000; width:100%; }
.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box:
box-sizing: border-box:}
.filtertitle { position:relative; display:inline-block; color:#000; width:100%; }
.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box;
box-sizing: border-box;}
.bottomfilter {border-top: solid #333 2px; width:100%; height:50px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;}
#wrapper.toggled #sidebar-wrapper {
width: 200px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -200px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(255, 255, 255, 0.6);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media screen and (min-width:768px) {
#wrapper {
padding-left: 300px;
}
#wrapper.toggled {
padding-left: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
#media screen and (max-width:1526px) {
.content,
.footer {
width: 82%;
right: 0;
}
.header {width:82%;}
#sidebar-wrapper {
width: 18%;
}
}
#media screen and (max-width:1059px) {
.content,
.footer {
width: 80%;
right: 0;
}
.header {width:80%;}
#sidebar-wrapper {
width: 20%;
}
}
#media screen and (min-width:1527px) {
.content,
.footer {
width: 85%;
right: 0;
}
.header {width:85%;}
#sidebar-wrapper {
width: 15%;
}
}
#media screen and (max-width:991px) {
.content,
.footer {
width: 100%;
right: 0;
}
#sidebar-wrapper {
width:0;
}
The Answer was very simple: https://jsfiddle.net/4fqapznu/3/
All I had to do was:
Add min-width:100%, and replace width:100% with width:inherit on the parent container: .sidebar-nav
Then add width:inherit on the 2 children with position fixed items:
.topfilter and .bottomfilter
Here's the code that fixed it for me:
.sidebar-nav {
width:inherit; min-width:100%;
}
.topfilter {width:inherit; position:fixed;}
.bottomfilter { width:inherit; position:fixed;
Note: Now I have another problem with the fixed items overlapping the scrollbar, but I will ask that question on another thread unless someone has a quick answer on how to fix it.
I would like to add a transition on the overlay but i can't work out which class it needs to be on to make it work. I'd like it to transition down from the top. Something along the lines of
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
HTML
<ul class="about-image">
<li>
<div class="image"></div>
<div class="overlay"><div class="bt1">Dan Morris</div><div class="bt2">Multimedia Journalist</div></div>
</li>
</ul>
CSS
.image{
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
background-image: url(../images/danmorris_profile.png);
}
.overlay{
width:252px;
height:252px;
display:none;
position:absolute;
top:40px;
left:0px;
}
.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}
ul { list-style: none; width: 252px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
}
li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}
Any help would be greatly appreciated. Thanks in advance
You need to apply the effect to the .overlay - Transition cannot be set to transform as it is not supported (Reference).
To get the effect you are after, try the following:
Remove your display: none; - this cannot be animated.
Style your .overlay completely but set top: -100%;, position: absolute;, and transition: top 0.3s ease-in-out;.
On hover, just change to top: 0;.
Finally, add overflow: hidden; to the li container.
ul {
list-style: none;
width: 252px;
margin: 40px auto 60px auto;
}
ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
overflow: hidden;
}
li:hover .overlay {
top: 0;
}
.overlay{
width:252px;
height:252px;
opacity: 0.75;
position:absolute;
background-color:black;
top:-100%;
transition: top 0.3s ease-in-out;
}
.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}
<ul class="about-image">
<li>
<img src="http://placehold.it/252x252"></div>
<div class="overlay">
<div class="bt1">Dan Morris</div>
<div class="bt2">Multimedia Journalist</div>
</div>
</li>
</ul>
For convenience I have moved your .image to an element - but it will work with both. Also added some ease for smoothness.
Pen here
I want to display some image with caption.By default its showing image only but I want to display image with caption by default.I am giving my css and html code below :
<style type="text/css">
.caption-style-1{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
margin-right:5px;
}
.caption-style-1 li:hover .caption{
opacity: 1;
}
.caption-style-1 .hover-effect{
margin: 0px;
padding: 0px;
float: left;
width:220px;
height:150px;
//background-color:#999;
margin-bottom:5px;
}
.hover-effect img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.hover-effect h1
{
font-size:20px;
border:solid 1px red;
}
.hover-effect p
{
font-size:13px;
margin:0;
padding:0;
}
.caption-style-1 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition:all 0.45s ease-in-out;
-moz-transition:all 0.45s ease-in-out;
-o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out;
}
.caption-style-1 .blur{
//background-color: rgba(0,0,0,0.65);
height: 150px;
width: 220px;
z-index: 5;
position: absolute;
}
.caption-style-1 .caption-text h1{
text-transform: uppercase;
font-size: 10px;
}
.caption-style-1 .caption-text .blur{
z-index: 10;
color: #fff;
position: absolute;
width: 220px;
height: 150px;
text-align: center;
background-color: rgba(0,0,0,0.65);
}
/** Nav Menu */
ul.nav-menu{
padding: 0px;
margin: 0px;
list-style-type: none;
width: 490px;
margin: 60px auto;
}
ul.nav-menu li{
display: inline;
margin-right: 10px;
padding:10px;
border: 1px solid #ddd;
}
ul.nav-menu li a{
color: #eee;
text-decoration: none;
text-transform: uppercase;
}
ul.nav-menu li a:hover, ul.nav-menu li a.active{
color: #2c3e50;
}
.opacity
{
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}
</style>
And my html code's are given below :
<ul class="caption-style-1">
<li>
<div class="hover-effect">
<div class="opacity"><img src="img/chaps_1x.jpg" width="220px" height="150px" alt=""></div>
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<img src="img/chaps_1x.jpg" width="220px" height="150px" alt="">
</div>
</div>
</li>
</ul>
Any Idea?
Your HTML code is not written in well manner. If you using HTML5 then you may use HTML5 tags like figcaption with figure. The Caption tag is not showing in your style because they are behind the image.
So here is the way to move to front using z-index property.
.hover-effect h1
{
font-size:20px;
border:solid 1px red;
position:fixed;
z-index:999;
}
.hover-effect p
{
font-size:13px;
margin:0;
padding:0;
position:fixed;
z-index:999;
}
Here is the Demo. http://jsbin.com/yegiyico/1/
here it is, this is the css, and the media queries is down below, just search #media and it will find it.
Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF; text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
img
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
So, the problem is primarily twofold:
1) You have several errors in your css. Using the validator, I found 13 errors.
- There's declarations that are unclosed (missing a closing curly-brace - }), such as your declaration for #nav a:hover
- There's extra / stray closing curly-braces in other locations.
- There's invalid background color and color properties
- You have div.1, which implies a class of "1". That's not a valid class according to the validator.
2) The media query contains far too many rules. You should only put rules in the media query that replace / override previous rules, or are new rules. You've got many rules that are simply repeats of your other common css rules.
Clean up the errors. Try running them through the W3C CSS validator - you can copy-and-paste your css directly, to see if / where there are errors.
Then, simplify your media query css to only include the necessary changed rules (and only the specific properties that need to be changed).
Note: I was able to get it to validate by cleaning up the errors. For your reference, the valid / clean CSS is below.
You still need to simplify, and the code below is not necessarily guaranteed to work. I'd encourage you to over-simplify - put one rule in your media query for a border, background color, or something, just to see if the media query is getting picked up. Then you can work on adding in the different styles you need.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF;
text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}