While trying to style my html with CSS i have to use an LI and i am getting trouble with it.
If the Html or js is need i will provide it asap.
The error i am getting is at the "LI" every time
The exact error i am getting is "property value expectedcss(css-propertyvalueexpected)"
#menu{
list-style:none;
padding: 0;
margin: 0;
li: {
display : block;
border-right: 1px solid #fff;
background: #E7E7E7;
color: #3B3B3b;
text-decoration:none;
padding:0 10px;
float:left
padding-left:0
position:relative
line-height: 4.5em
width: 10em
text-align: center
&:hover{
background-color: #3d6fc3;
background-image: -webkit-linear-gradient(left,#4577cb,#3264b6);
background-image: -o-linear-gradient(left,#4577cb,#3264b6);
background-image: -moz-linear-gradient(left,#4577cb,#3264b6);
background-image: -ms-linear-gradient(left,#4577cb,#3264b6);
background-image: linear-gradient(left,#4577cb,#3264b6);
color:#fff;
}
ul {
position:absolute;
}
a{
color: #3B3B3B;
text-decoration:none;
&:hover {
color:#fff;
}
}
}
ul {
border-top:1px solid #fff;
list-style:none;
padding:0;
margin:0;
li {
ul {
margin-top: -73px;
margin-left: 170px;
}
}
}
#drop-down{
display:none;
}
}
Related
I have created a small call back popup on the footer
http://bit.ly/1MThJ5w
The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.
It should only close and open when I click- CALL BACK
And also the close and open arrows are not showing as well
My code snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000);
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000);
}
});
});
CSS CODE:
/*Contact Styles
------------------------------------*/
.contact{
width:28%;
float:left;
padding-left:20px;
background:#001832;
color:#FFFFFF;
padding-top:15px;
padding-bottom:12px;
}
.contact h2{
font-size:27px;
font-family:impact;
font-weight:500;
color:#fff;
}
.contact form{
margin-top:6px;
}
.contact label{
font-size:10px;
}
.contact input{
width:210px;
color:#666;
}
.contact a{
text-decoration:none;
text-align: center;
background: none repeat scroll 0% 0% #0060A3;
color: #FFF;
display: inline-block;
padding: 12px 37px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
}
.contact .btn{
text-decoration:none;
text-align: center;
background: #0060A3;
color: #FFF;
display: inline-block;
padding: 10px 20px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
font-size:20px;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*Slider footer*/
.foot {
position:fixed;
width: 300px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -185px;
}
.slide-up
{
bottom: -445px !important;
}
.slide-down
{
bottom: -185px !important;
}
.call_back{
background:#405E51;
padding:10px;
margin-bottom:10px !important;
color:#fff;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
Your click event is bound to the wrong element. Change it to the "call_back" class instead.
Change this:
$('.foot').click(function() {
// your code
});
To this:
$('.call_back').click(function() {
// your code
});
I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan
Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?
I'm using UberGallery and am trying to add facebook like button to jQuery colorbox. As far as I get is here:
(You can see the top of fb plugin)
Then if I press ctrl+f, write test(as I made <div id="extra-info">test</div>) and press enter I get normal view as I want to:
Question is: What do I need to change in css to make colorbox stretch at the beggining (on colorbox OnComplete function)?
colorbox.css (it's UberGallerys default one(nothing changed))
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
colorboxScripts.php (changed a little bit)
<script type="text/javascript" src="<?php echo $path; ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5",
onComplete: function() {
$("#cboxContent").append('<div id="extra-info">test<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=673146712707892" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe></div>');
}
});
});
</script>
style.css (changed a little bit)
/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html {
background-color: #222;
font-size: 100%;
}
body {
color: #333;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: .8em;
}
#galleryWrapper {
background-color: #FFF;
margin: 20px auto;
padding: 3px;
width: 1000px;
}
h1 {
background-color: #000;
color: #FFF;
font-size: 1.6em;
font-weight: bold;
margin: 0 0 3px;
padding: 8px;
}
#galleryListWrapper {
/* NULL */
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryList {
margin: 0;
padding: 0 4px;
}
#galleryList li {
display: inline-block;
float: left;
list-style: none;
margin: 5px 5px;
padding: 0;
}
#galleryList li a {
background-color: #000;
border: 4px solid #DDD;
display: block;
padding: 1px;
}
#galleryList li a:hover {
border-color: #DA8600;
}
#galleryList li a img {
border: none;
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY FOOTER |--------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryFooter {
background-color: #000;
color: #999;
margin-top: 3px;
padding: 8px;
}
#credit {
float: right;
font-size: .95em;
margin: 4px 0;
}
#galleryFooter #credit a {
color: #999;
}
#galleryFooter #credit a:hover {
color: #DA8600;
}
/* ---------------------------------------- */
/* ----| PAGINATION |-------------------- */
/* ---------------------------------------- */
#galleryPagination {
color: #FFF;
float: left;
font-size: .95em;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#galleryPagination li {
border: 1px solid transparent;
display: block;
float: left;
list-style: none;
margin-right: 1px;
}
#galleryPagination li:hover {
background-color: #FFF;
}
#galleryPagination li.title {
background: transparent url(../../page_white_stack.png) no-repeat left center;
border: 1px solid transparent;
font-weight: normal;
padding: 3px 6px 3px 22px;
}
#galleryPagination li a, #galleryPagination li a:visited {
color: #FFF;
display: block;
padding: 3px 6px;
text-decoration: none;
}
#galleryPagination li:hover a {
color: #000;
}
#galleryPagination li.current {
background-color: #DA8600;
color: #000;
font-weight: bold;
padding: 3px 6px;
}
#galleryPagination li.inactive {
background-color: transparent;
color: #999;
border: 1px solid transparent;
display: block;
padding: 3px 6px;
}
/* ---------------------------------------- */
/* ----| SYSTEM MESSAGES |--------------- */
/* ---------------------------------------- */
#systemMessages {
margin: 0;
}
#systemMessages li {
background-color: #DDD;
color: #000;
line-height: 1.4em;
list-style: none;
margin-bottom: 6px;
padding: 5px;
text-align: center;
text-shadow: none;
}
#systemMessages li.notice {
background-color: #DDD;
color: #FFF;
}
#systemMessages li.success {
background-color: #070;
color: #FFF;
}
#systemMessages li.error {
background-color: #DA8600;
}
/* ---------------------------------------- */
/* ----| MISCELLANEOUS |----------------- */
/* ---------------------------------------- */
#errorMessage {
background-color: #FFF;
display: block;
line-height: 1.4em;
margin: 20px;
padding: 20px;
text-align: center;
}
#cboxWrapper {
text-shadow: none !important;
}
#cboxCurrent {
display: none !important;
}
#cboxTitle {
font-size: 1em !important;
}
#extra-info {
position: relative; display: inline-block; bottom:4px; left:0; text-align:center; width:100%; color:#949494;
}
P. S. Yes I have read and tried these threads:
Adding div below images in colorbox
Facebook like button and colorbox
html section
Test
header {
overflow:auto;
}
ul {
list-style-type:none;
margin:0;
padding:0;
width:300px;
}
ul li {
float:left;
margin:0 4px 0 0;
font-size:15px;
}
ul li a {
color:#0076d1;
height:20px;
text-decoration:none;
display:block;
background:white;
padding:6px 10px 8px 10px;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
transition: border-color 0.23s linear;
}
ul li a:hover {
color:#232628;
}
ul li.toplevel a:hover, ul li.toplevel a.hoversub {
color:##232628;
height:19px;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
border-top:1px solid #d3d3d3;
background:white;
padding-bottom:9px;
border-color:#d3d3d3
}
ul .submenu:before {
background-color: #d3d3d3;
content: "";
height: 1px;
left: 71px;
position: absolute;
top: 0;
width: 120px;
}
ul.submenu {
position:absolute;
list-style-type:none;
width:187px;
margin:0 0 0 0;
padding:0;
display:none;
z-index:999999;
background:#FFFFFF;
/*border-top:1px solid #d3d3d3;*/
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
border-bottom:1px solid #d3d3d3;
}
ul.submenu li.sublist {
clear:left;
margin:0;
padding:0;
width:187px;
height:30px;
padding:5px;
margin-bottom:2px;
font-size:17px;
}
ul li.sublist a {
border:none;
background:none;
}
ul li.sublist a:hover {
border:none;
background:none;
color:#FF0000;
}
</style>
</head>
<body>
<div id="mainContent">
<header>
<ul>
<li>Home</li>
<li>News</li >
<li class="toplevel">
Programm
<ul class="submenu">
<li class="sublist">Weather</li>
<li class="sublist">all</li>
<li class="sublist">a</li>
<li class="sublist">Economy</li>
</ul>
</li>
</header>
js-section
<-- javascript section-->
$('ul > li.toplevel').hover(
function () {
$('ul.submenu', this).fadeIn(230);
$(this).find('a:first').addClass("hoversub");
},
function () {
$('ul.submenu', this).fadeOut(230);
$(this).find('a:first').removeClass("hoversub");
}
);
Here's a FIDDLE
Depends on your font-family & font-size you must change the width and left position in below code.
ul .submenu:before {
background-color: #d3d3d3;
content: "";
width: 105px; /* If border is too wide reduce the width */
height: 1px;
top: 0;
left: 82px; /* Also change left distance till you achieve desired look */
position: absolute;
}
I have got a task to do horizontal menu from json file. I created json file. But while creating subchild the CSS is not working properly. I want the sub child menu as vertical.
css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#nav,
#nav ul {
list-style: none;
padding: 2px;
}
#menu {
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li a:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
}
.nav-child {
width:160px;
display:block !important;
}
#menu ul li ul {
border-radius:0px;
border-color:#fff #ccc #ccc #ccc !important;
}
#menu ul li ul li:hover {
border:0px;
}
#nav {
float: left;
height: 25px;
}
#nav> li {
float: left;
}
#nav li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#nav ul {
position: absolute;
display: none;
z-index: 999;
}
#nav ul li a {
/*width: 80px;*/
}
#nav li:hover ul {
display: block;
}
#nav {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8 ;
}
#nav > li > a {
font-family: Verdana,Arial,sans-serif;
font-style: normal;
color:#787878 ;
font-weight: bold;
}
#nav > li > a:hover {
/*color: #000;*/
}
#nav ul {
background: #fff;
border:1px solid #C0C0C0;
border-radius:5px;
}
#nav ul li a {
color: #000;
}
#nav ul li a:hover {
background: #E0E0E0 ;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin: 0 116px !important;
position: absolute !important;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li:hover ul {
display: block !important;
}
How can i arrange the subchild values properly?
Try with this one: in this fiddle, maybe you want something like this.
.subchild-list {
margin:0; /*<-----make 0*/
position: absolute !important;
top:0; /*<-----0 from top*/
right:-66px; /*<-----gets outside from the .childlist li*/
}
.child-list li {
position:relative !important; /*<-----important*/
}
Change display:block to inline-block in .nav-child and do the same for .nav-subchild
.nav-child {
width:160px;
display:inline-block !important;
}
.nav-subchild{
display: inline-block !important;
}
DEMO