My sidebar in working with woocommerce is positioned under my content div. when i shrink the content div to 710px and try to float:right the sidebar... it doesn't want to float correctly.
SUBJECT SITE
Any help would be appreciated.
# SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
You have two divs with id="container" that means that anything you pass to #container in your css it will only be applied to the first one. So you should take this div #wrapper-containter #wrapper #container change it's id, and then apply the width to it and then float around whatever you need.
Related
I cannot put my menu in the center of the page, i've inserted all "margin: 0 auto;" i can and all "text-align: center", and the div is separated from everything, is not a child of something else..
here's the css code:
.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
And here's the HTML code:
<div class="more">
<ul>
<li class="selected">Homepage Blog</li>
<li>Cerca</li>
<li>Archivio</li>
<li>Tags</li>
</ul>
</div>
How-to make the div permanently in the center of my page? I've tried lot, lot, lot of possible moves.
Thank you.
p.s. I've also tried to put a <div align=center> ...my menu (class=more) list ...</div>
Remember that you can't use margin:0 auto on floatted element.
Keys for margin 0 auto are:
1) element must have display:block
2) no float, absolute or fixed position
.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
I have a horizontal unordered list, the list is almost half width of screen.
The problem is that the border-bottom applied to the last <li> element does not extend to the full width of the page.
.pageContent .filters{
margin:0px;
padding:0px;
list-style:none;
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
border-bottom:1px solid #e5e6e7;
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
This should do what you're looking for.
Using the following CSS, you get this: http://jsfiddle.net/6AGTM/
.filters{
margin:0px;
padding:0px;
list-style:none;
overflow: hidden; /* make container the same height as floating elements inside */
border-bottom:1px solid #e5e6e7; /* apply border to this element which goes to edge of page */
}
.filters li{
float:left;
display:inline;
border-right:1px solid #e5e6e7;
/* remove border-bottom from here */
}
.filters li:last-child{
border-right:none;
}
.filters li:hover{
background-color:#fcfcfc;
}
.filters li a{
display:block;
padding: 12px 35px;
font-size: 18px;
color:#353535;
text-transform:capitalize;
font-family:'regular';
}
http://www.guytgunterappliances.com/product-category/shop/
My #container is currently at width:980px and my side has positioned itself to the bottom of the container div. Im trying to float it to the right of my container div. I have reduced the width of the container to 710px to fit the 270px sidebar then i float the sidebar. As you can see in the image, it stretches the sidebar.It runs over the container div as well.
SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
There are few steps required to fix that issue:
you have two divs with id container on main page, the inner one and the outer one. Change id of one of those.
for the inner #container, add:
width: 710px;
float: left;
reduce width of #content and iframe to 710px or less.
finally, style #sidebar as #KaronatoR suggests:
width:270px;
display: block;
float: left;
Try so:
#sidebar {
width:270px;
display: block;
dloat: left;
}
I'm having problem with submenu hiding behind the next line of menu.
vs
I've searched many topics and questions and basically everyone's saying that I need to add z-index > 100 to my sub-menu. I tried that everywhere, where sub-menu's present but nothing worked.
Do you have any idea how to make it work as it should?
Here's my code:
#header #nav{
float:right;
margin:0px;
position:relative;
z-index:100;
}
#header #nav > li {
display:inline-block;
margin:0;
position:relative;
z-index:100;
}
#header #nav > li > a{
color:#727272;
border:none;
background:none;
font-size:11px;
font-weight:700;
height:60px;
line-height:59px;
display:block;
padding:0 15px;
background:none center bottom;
position:relative;
}
#header #nav > li > a:hover{
color: #0073fe;
}
#nav li ul.sub-menu{
width:210px;
background:#fff;
position:absolute;
border:1px solid #ececec;
border-top:2px solid #0073fe;
margin:0;
top:96%;
padding:0 15px;
display:none;
-webkit-box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
margin-top:2px;
}
#nav li ul.sub-menu > span{
position:absolute;
top:-6px;
left:30px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #0073fe;
}
#nav li ul.sub-menu > li{
margin:0;
width:100%;
display:block;
}
#nav li ul li a{
font-size:11px;
font-weight:700;
display:block;
padding:7px 0px;
color:#727272;
border:none;
border-bottom:1px solid #ececec;
}
#nav li ul li a:hover{
color: #0073fe;
}
#nav li ul li:last-child a{
border-bottom:none !important;
}
#nav li ul li ul.sub-menu{
margin-left: 190px !important;
margin-top: -35px !important;
}
.slogan{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size:34px;
line-height:35px;
text-align:center;
font-weight:300;
letter-spacing: -0.01em;
color:#000;
padding:0px 30px 30px;
}
So you want : submenu > menu; which means: #nav li ul.sub-menu > #header/#nav
The problem is that you set up your menu to a high z-index and not your submenu (and results in: submenu < menu).
z-index defines a "set a layers" where your element would be, if it's set higher than an other one, then it will appear on top of it.
You need to delete the z-index for #header #nav and #header #nav>li and instead put a high z-index to #nav li ul.sub-menu.
#nav li ul.sub-menu {
z-index: 50; //It doesn't have to be a hundred, 50 should do, or even 5...
}
I was trying to make menu at the top that drops down another menu it works but it overlap the menu at the top I tried absolute value but the submenu it gone I think absolute wont work and i tried relative it didnt work as well.
what is the best way to fix this?
http://jsfiddle.net/TBEnf/ Here is the Jfiddle demo
Here is my code
<style>
.midbox {
margin:0px auto;
width:900px;
height:1000px;
background:#c0d8d8;
border-radius:10px;
box-shadow: 10px 10px 10px #969696;
}
.headerprofile {
width:900px;
height:30px;
background-color:skyblue;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow:0 1px -2px #70badb
}
.headerprofile .ULlist ul li:hover > ul{
display:block;
}
.headerprofile .ULlist ul ul li a {
padding: 15px;
position:relative;
}
.headerprofile .ULlist ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.headerprofile .ULlist ul ul {
display: none;
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.headerprofile .ULlist ul {
position:relative;
list-style:none;
padding:0 10px;
}
.headerprofile .ULlist ul li {
float:left;
}
.headerprofile .ULlist ul li a{
display: block; padding: 6px 10px;
color: #757575; text-decoration: none;
}
Just set position:relative on the parent li instead of the outer ul. The ul doesn't have an actual height because all the lis are floated.
.headerprofile .ULlist ul {
list-style:none;
padding:0 10px;
}
.headerprofile .ULlist ul li {
float:left;
position:relative;
}
I think this line will solve your problem
headerprofile .ULlist ul li:hover > ul
{
display:block;
margin-top:30px; /* add this line to your css*/
}
DEMO
You can fix this if you add: top: 30px; to your submenu.
Demo