I am facing some weird layout/positioning issues in my webpage. It has mostly to do with floated items and container borders that don't flow right. I have tried clearing and overflow: auto, hidden but it still does not work.
Thanks alot in advance.
Add overflow: auto; to .explore-inner
.explore-inner {
border: 1px solid #EBEBEA;
background: url(../images/inner-bg.png) repeat-x;
overflow: auto;
}
Your <ul> items have a float, this is not cleared correctly. Right after the <ul> items in .explore-inner you have have a clear: both;
Add this following css
.explore-inner:after{
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
clear:both;
}
because "ul" has floating it needs to be cleared after the "explore-inner" class
Actually you have used floating in your child div's not cleared your parent div's so i have given the overflow:hidden to your parent div so its working fine now....
So you can update your css with mine one i hope this will work for you :-
CSS
.explore-inner {
background: url("../images/inner-bg.png") repeat-x scroll 0 0 transparent;
border-top: 1px solid #EBEBEA;
overflow: hidden;
}
#team-message {
background: url("../images/outer-bg.png") repeat-x scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 10px;
width: 940px;
}
Related
I want to create a side navigation, which should be full height of the browser window. Each menu item (DT) has additional element (DD) where I will put some filters later on. When I click a menu item, its additional element opens, and pushes all other closed items to bottom of the menu. The problem is that once it's opened the size of the parent DL exceeds the screen instead of staying full height.
Could you please suggest a solution to resolve the issue.
HTML
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
CSS
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: block;
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: block;
height: 100%;
}
JSFIDDLE
Please do remove dd.active { height: 100% } and check it...
Think this will help you.
The !important declaration is unnecessary. If you know the number of menu items (e.g. 2) and their height (e.g. 40px), maybe this could help:
dd.active {
height: calc(100% - 80px);
}
An alternative (and equally inelegant) solution would be to use tables. Setting the table height to 100% will automatically stretch the rows with unspecified height to fill the remaining space (so only the rows that correspond to the menu items should have their height specified).
My solution:
<dl>
<dt>Item</dt>
<dd class="active">Filters</dd>
<dt>Item</dt>
<dd>Filters</dd>
</dl>
body, html{
height: 100%;
padding: 0;
margin: 0;
}
dl{
display: table; /*changed*/
margin: 0;
width: 200px;
background: grey;
height: 100% !important;
}
dt{
background: #ccc;
padding: 5px 10px;
}
dd{
display: none;
margin: 10px;
}
dd.active{
display: table-row; /*changed*/
height: 100%;
}
UPDATED JSFIDDLE
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
So I'm new to HTML, CSS, and the whole web development scene so I decided to learn by altering existing pages. The bellow is a template that I have altered to my needs to allow for my CMS. The problem is, is that the content moves every now and then to the most unliked position.
I believe that there is something wrong with my CSS that is causing this problem.
Upon inspection of the footer and site_content divs, I have found pretty much no differences. But I don't know why it doesn't ALWAYS show up like this:
The CSS is too large to put on here but the whole source can be found on GitHub under OrangeCider. However I am putting in the (what I think is) relevant pieces of code:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
UPDATE: So it seems that if I remove the overflow: hidden; from the #site_content, the content shows how it should, except there is text overlapping with the sidebar ontop of the footer. Could it be things with the overflow?
It looks like you may have some conflicting CSS rules here. One thing you can try is the !important keyword.
#main, #logo, #menubar, #site_content, #footer {
margin: 0 auto !important;
}
Also, just to make sure that float: left isn't interfering with your styles, put clear: both on the #site_content.
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
clear:both;
width: 837px;
overflow: hidden;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
try this css
Hey, you need to be sure the center block has block display and clear: both.
So you should update your CSS due to this one:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
That's it. Have fun!
Searched everywhere, tried several techniques, but haven't found a workable answer yet.
Goal: Display a 'pin' background image when hovering over the navigation item.
Issue: Part of pin disappears when it extends past the a:hover tag because the background image is taller than the item
Current css is below. All parent elements are set to overflow: visible
.menu-primary a {
display: block;
padding: 6px 0 6px 0;
text-align: center;
width: 184px;
height: auto;
margin: 0 5px 0 5px;
position: relative;;
overflow: visible;
}
.menu-primary li#menu-item-23 a {
background-color: #dfe6ab;
margin-left: 0;
overflow: visible;
}
.menu-primary li#menu-item-23 a:hover,
.menu-primary li#menu-item-23:hover a {
background: url(images/pin.png) no-repeat left 0px top -7px;
background-color: #dfe6ab;
color: #000000;
overflow: visible;
height: auto;
}
All suggestions welcome. Thank you.
Background's in CSS don't act like Html Elements. If you need the anchor to display it, but the anchor is too small. You'll need to change the size of the anchor tag to the size of your image. Otherwise you can change the background-size of the image inside to fit within the anchor.
Also, you've got a duplicate semi-colon(;) in .menu-primary a, see:
position: relative;;
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav