I'm making a menu with floating menu items.
What I want is to always have 10 px padding in top, on hover and not hovering.
My HTML:
<div id="menu">
<div class="menuitem">
Home
</div>
<div class="menuitem">
Item2
</div>
<div class="menuitem">
Item3
</div>
<div class="menuitem">
Item4
</div>
</div>
My css:
#menu
{
margin:0 auto;
background-color:#B89470;
height:50px;
text-align:center;
}
.menuitem
{
font-weight:bold;
padding-top:10px;
height:50px;
width:100px;
float:left;
}
.menuitem:hover
{
background-color:#abca9e;
}
So I have made this.
But for some reasing the padding is only showing while :hover is active.
But I have set the padding in
.menuitemn
and not in
.menuitem:hover
so why isn't there any padding when hover isn't active?
It is because the padding-top: 10px; is adding 10px to the height of the menuitem making it 60px in height. Yet the #menu still remains at 50px with an overlap of 10px. I changed the height of #menu to show you.
DEMO http://jsfiddle.net/6w5kz/1/
height:60px;
Another solution to the proposed ones would be to add:
#menu {
overflow: hidden;
}
The problem is that the child .menuitem is bigger than the #menu, so it overflows it. This happens because of the box model, which I really recommend you to read. So there are several ways to solve it, one is the one I pointed out, other is #Vector's and another is not setting the height of #menu so it's as high as needed.
I've also added cursor: pointer; when you hover the .menuitem to show properly that it's a clickable item.
http://jsfiddle.net/franciscop/6w5kz/3/
Related
I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
I have five square buttons in a row that I am displaying as a lock. However when viewing on a mobile phone the 5 icons do not stack, they bunch up and overlap with the element below them. I thought that adding the clear element would resolve that but it doesn't. Can anyone point me in the right direction?
Thanks so much, I greatly appreciate it!
.menu {
height: 100px;
clear: both;
width:100%;
margin-bottom:40px;
margin-top:35px;
}
.icons {
height: 100px;
width:100px;
display: inline-block;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
background-color:#ffffff;
}
Removing the height property from your .menu class (or, at the very least, changing it to min-height) will allow your parent element's height to expand to fit its contents, thereby pushing the content that follows it down the page.
See examples below for an illustration.
div{
background:green;
margin:5px 0;
padding:5px;
}
p{
font-family:sans-serif;
margin:0;
}
div p{
background:red;
min-height:40px;
}
div~div{
height:20px;
}
<div>
<p>This paragraph's parent doesn't have set height and therefore will expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>
<div>
<p>This paragraph's parent has a set height and therefore won't expand to fit the height of this paragraph</p>
</div>
<p>This is just a placeholder</p>
display:none will completely hide an element as if it now had a width and height of zero
visibility:hidden on the other hand will hide an element but reserve a rectangle of the element's original width and height in the document.
Is there a way through pure CSS, to hide an element such that it takes up zero height but its original width? Setting its height to zero doesnt work because I dont know to which height to set the element to once I want to show it again.
Specifically I want to achieve the following:
#top ul {take up zero height but original width}
#top:hover ul {restore original dimensions}
Edit: solved! The idea is to set height:auto to restore the original height.
See here http://jsfiddle.net/yP59s/ for the full version or here the css:
ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}
and the html:
<div id="top">
<h1>foobar</h1>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
blubber
#top { width: 300px; height:0px; max-height:0px; }
#top:hover {height: auto; width: 300px; }
http://jsfiddle.net/G5cgY/
using css
Show Box 1|Show Box 2|Hide All
<div id="box1" class="box"> Contents of Box 1 </div>
<div id="box2" class="box"> Contents of Box 2 </div>
and css
.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none; }
.box:target{
display:block;
}
and i found this fiddle quite a few months back, can be helpful:
http://jsfiddle.net/DbXQs/
Hi
I have this fat menu code from http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#:
<ul id="main">
<li>Home
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>
</div
</li>
The relevant portion of the style is:
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
}
#menu li a {
display:block;
outline:0;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
Even though the position of the dropdown menu is mentioned as absolute - there is no mention of the absolute position (ie co-ordinates). If the position:absolute is removed then, the subsequent elements (such as "5 elements", etc) are floated around the dropdown menu (ie the one that pops up after selecting the "Home" menu from menubar). Hence absolute is making the drop down to be placed directly under the home in the menubar and the next menu "5 columns" is placed next to "home" in the menu bar and not next to the dropdown menu. Then how is this working (ie how is the browser understanding it to be rendered as absolute) without mentioning the values of top/bottom/left/right co-ordinates? In other examples of position: absolute such as for the ones in w3schools, the position is mentioned directly ie top: 10px, left: 5px etc. But here that is happening like magic (but is not helping my understanding at all). So please help me understand this and would highly appreciate such help.
Thanks
If a child element is position:absolute and the parent is position:relative, then the child inherits the positioning of the parent. Here's an example:
http://jsfiddle.net/charlescarver/CdBHQ/
One reason why the parent might be relative of the example you posted is because you will want the dropdowns to move with the navigation bar. Hardcoding in positions would require you to hardcode them again for every change of position.
In your example, each column is given a width. When you however, its starting position is inherited from the relative parent, and then naturally flows to the right.
ATTENTION! PROBLEM SOLVED, SOLUTION PASTED BELOW INITIAL QUESTION
on the very top of web page Im working I have on to the left corner a flag (to change language) which I have in a div. On the right I have another div for another image (shop cart) but since I floated the right div, I still go to the right divs address when clicking on the left, like the right overrides the let one. Why? How can I solve this?
Also, I am doing this by using my html/css-files and editing them to fit wordpress for a customer.
CSS
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
}
#cartmenu img {
position:relative;
margin-left: 542px;
}
header.php
<div id="container">
<div id="topmenu">
<img src="wp-content/themes/blank/images/icon_en_global.png" alt="English.png" width="42" height="30">
</div>
<div id="cartmenu">
<img src="wp-content/themes/blank/images/cart.png" alt="cart.png" height="" width="">
</div>
// SOLUTION Set width (in css) to both elements as well a float:left to both elements, then position with margins to get them where you want.
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
width: 42px;
height:45;
margin-top:15px;
margin-bottom:-10px;
}
#cartmenu img {
position:relative;
margin-left: 520px;
float left;
width:350px;
height:40px;
margin-top:-20px;
}
Try to define a width for #topmenu img and giving the cartmenu a float:left; as well.