This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
I am trying to push the child div down 5px inside of the parent div. When I put margin-top:5px; on the inner div it pushes down both the inner div and the parent div from the div above the parent div, but does not push the inner div down from the parent div. How to I set it so that only the inner div is pushed down 5px from the parent div? I do not want the parent div to push down from the div above it. Thanks for any help.
html for Navigation:
<nav>
<div class="nav-container">
<div id="cat_14623_divs">
<ul id="nav_14623">
<li><a href="#" onclick="return false;">AKINA & RED LAKE</a</li>
<li>FRESH WILD CAUGHT FISH
<ul id="navsub_14623_2326">
<li>WALLEYE</li>
<li>PERCH</li>
<li>CRAPPIE</li>
<li>NORTHERN</li>
<li>WHITEFISH</li>
</ul></li>
<li>NEWS FROM THE FISHERY</li>
<li>CONTACT US</li>
<li class="last">FAQs</li>
</ul>
</div>
</div>
</nav>
CSS for Navigation:
nav{
position:relative;
width:960px;
background-color:#660000;
height:40px;
}
div.nav-container{
position:relative;
width:100%;
}
#cat_14623_divs{
margin-top:5px;
height:30px;
background-color:#520000;
width:960px;
}
#nav_14623{
list-style:none;
display:block;
padding:0;
width:80%;
margin:0 auto;
}
#nav_14623 li{
position:relative;
float:left;
padding: 0.5em 1.5em;
margin: 0px;
font-size:12px;
border-right:solid 2px #fff;
text-align:center;
}
#nav_14623 li.last{
border-right:none;
padding-right:5px;
}
#nav_14623 li a{
color:#FFF;
text-decoration:none;
}
#nav_14623 ul{
position: absolute;
left:0;
top: 100%;
display: none;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
list-style: none;
margin-left: 0px;
margin: 0;
padding: 5px;
width:200px;
z-index: 1000;
background: #660000;
border-left: 1px solid #336699;
border-right: 1px solid #336699;
border-bottom: 1px solid #336699;
border-top: none;
}
#nav_14623 ul li{
position: relative;
float: none;
border-right: none;
padding:0;
margin: 0;
}
#nav_14623 ul li a{
color: #fff;
font-size: 12px;
vertical-align: middle;
line-height:32px;
width: 100%;
height:35px;
display:block;
}
#nav_14623 ul li a:hover{
background: #520000;
width: 100%;
}
#nav_14623 li:hover > ul{
display: block;
}
#nav_14623:after {
content: ""; clear: both; display: block;
}
Here is the url in case you want to see the site:
http://redlakewalleye.designangler.com/
Instead of a margin-top on the child, you should use a padding-top to the parent.
UPDATED (as a reaction on your comment)
A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it. Therefor you should use padding.
The issue is collapsing margins when margins touch - http://www.sitepoint.com/web-foundations/collapsing-margins/
Related
This question already has answers here:
How to create Curved & Overlapping Menu Tabs in CSS
(2 answers)
Closed 7 years ago.
I'm trying to replicate this menu feel but I've some trouble making the trapezoid shape of the different tabs. I went through the source code and also in the dev tool I removed each css propriety one by one but still I'm not figuring it out. I also tried
I made a JSFiddle trying to replicate it (there is no trapezoid shape at the moment).
<nav>
<ul>
<li class=" active">NEWS</li>
<li>FORUM</li>
<li><span>TRUC</span></li>
<li><span>OTHERS</span></li>
</ul>
</nav>
nav{
background:white;
border-bottom: 2px solid #50bfff;
}
nav ul{
margin:0;
}
nav ul li{
display:inline-block;
}
nav a{
padding: 1rem;
color:#505050;
display:block;
text-decoration:none;
}
nav ul .active{
background:#50bfff;
}
I have found the Trapezoid shape in the Source.
It is a perspective transformation, have a look at this fiddle.
div{
width: 50px;
height: 50px;
background: lightblue;
border-radius: 5px;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
<body>
<div>
</div>
</body>
I hope this helped.
Here are some great instructions for shaping elements:
https://css-tricks.com/examples/ShapesOfCSS/
The one you're looking for looks like this:
#trapezoid
{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
Try this one:
ul > li > a:hover{
background:#50bfff;
transition: all .2s ease;
color: white;
}
ul > li > a{
text-align:center;
left: 0;
bottom: 0;
right: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: 100px;
height: 120%;
z-index: -1;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
nav{
background:white;
border-bottom: 2px solid #50bfff;
}
nav ul{
margin:0;
}
nav ul li{
display:inline-block;
}
nav a{
padding: 1rem;
color:#505050;
display:block;
text-decoration:none;
}
<nav>
<ul>
<li class=" active">NEWS</li>
<li>FORUM</li>
<li><span>TRUC</span></li>
<li><span>OTHERS</span></li>
</ul>
</nav>
I can't figure it out how to center float:left object vertically.
I imagine that I could set the position of this menu bar vertically (The height of Y-axis) I think that would be the answer
// html part
<div class="menu_simple">
<ul>
<li>One</li>
<li>Two</li>
</ul>
//css
.menu_simple ul {
float:left;
margin: 0;
padding: 0;
width:100px;
list-style-type: none;
box-shadow: 5px 8px 5px #888888;
}
.menu_simple ul li a {
border: 1px solid #0066cc;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #3b3b3b;
display:block;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
Fiddle example
First you set position: absolute for the menu div, then set top to 50% and the transform option to -50%.
Source: https://css-tricks.com/centering-css-complete-guide/
Hope this helps
Use the CSS position property.
Set the page hold, in your case the <body> to position: relative; and the part you wish to move, in your case; .menu_simple to the following:
.menu_simple {
position: absolute;
top: 50%;
left: 0;
}
Flexbox works nicely for this type of thing:
http://codepen.io/simply-simpy/pen/rVwXyz
menu_simple {
display:flex;
justify-content: flex-start;
align-items: center;
height: 500px;
border: 1px solid red;
}
Relatively new to CSS, so please bear with my inexperience. I'm trying to create a menu, and after much searching and comparison and reading and copying, I've mostly come up with the format I want. The problem is that I want my menu to be the width of its content, not full width, and the code below (adapted from various examples) yields a full width menu. I've played around with things, but can't seem to identify what makes it full width or not -- it may be that what I want requires a more substantial rewrite.
In case it helps, what I want is a horizontal menu with an outer rectangular border, with width determined by its contents, not automatically full width (or even, not automatically a specified width).
This is my first time posting a question here, so thanks in advance for your help and patience!
<style type="text/css">
*/#menu ul,#menu li,#menu a{
list-style:none;
margin:0;
padding:0;
border:0;
font-family: Arial}
#menu{
border:1px solid #000000;
border-radius:5px}
#menu ul{
background:#ffffff;
padding:5px 10px;
border-radius:5px}
#menu ul:before{
content:'';
display:block}
#menu ul:after{
content:'';
display:block;
clear:both}
#menu li{
float:left;
margin:0px 0px 0px 0px;
border:0px}
#menu li a{
border-radius:5px;
padding:5px 10px 5px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
border:0px;
font-size:15px}
</style>
<div id="menu">
<ul>
<li><span>Link1</span></li>
<li><span>Link2</span></li>
<li><span>Link3</span></li>
<li><span>Link4</span></li>
</ul>
</div>
ul are block level elements are so are 100% wide by default.
Make the ul display as inline-block and it will collapse to the width of it's contents.
Add text-align to the parent as required. Here I used center.
#menu ul,
#menu li,
#menu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-family: Arial
}
#menu {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
}
#menu ul {
display: inline-block;
background: lightblue;
padding: 5px 10px;
border-radius: 5px
}
#menu ul:before {
content: '';
display: block
}
#menu ul:after {
content: '';
display: block;
clear: both
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
border: 0px
}
#menu li a {
border-radius: 5px;
padding: 5px 10px 5px;
display: block;
text-decoration: none;
text-align: center;
color: #000000;
border: 0px;
font-size: 15px
}
<div id="menu">
<ul>
<li><span>Link1</span>
</li>
<li><span>Link2</span>
</li>
<li><span>Link3</span>
</li>
<li><span>Link4</span>
</li>
</ul>
</div>
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
I hope someone can guide me towards the right direction. I was learning how to use the :before and :after in CSS, so I tried to create a menu navigation, somehow I managed to make it how I wanted with displaying the right shadow image as :before and a :after but now as soon as I roll over my menu it goes up. I tried to put padding and margin with !important but nothing worked.
My second problem is in <li> I have a link <a> but it only changes color of rollover on text. I want to change the color on the whole menu <li> but it doesn't work. My code is in this JsFiddle:
HTML:
<div id="menu">
<ul>
<li class="proxima_bold">Menu1</li>
<li class="proxima_bold">Menu2</li>
<li class="proxima_bold">Menu3</li>
<li class="proxima_bold">Menu4</li>
</ul>
</div>
CSS:
#menu {
text-transform:uppercase;
position:relative;
}
#menu ul{
margin: 0; padding: 0;
float: left;
margin-top:-10px !important;
color:#787878;
}
#menu ul li{
display: inline;
float: left;
padding: 20px 15px 20px 15px;
color:#787878;
background: url(http://www.example.com/p7lpz) no-repeat 0 20px;
}
#menu ul li:hover{
background: url(http://www.example.com/2v4ik) repeat-x;
padding:0;
margin:0;
color: #7fc652 !important;
cursor:pointer;
}
#menu ul li a {
color: #787878;
display:inline-block;
}
#menu ul li a:hover {
color: #7fc652;
}
#menu ul li:hover:after,
#menu ul li:hover:before{
content: "";
position:relative;
top:0;
width:15px;
height:55px;
display:inline-block;
vertical-align:middle;
}
#menu ul li:hover:after{
right: -15px;
background: url(http://www.example.com/9tly4) no-repeat 0 0;
}
#menu ul li:hover:before{
left: -15px;
background: url(http://www.example.com/u969z) no-repeat 0 0;
}
#menu ul li .selected{
float: left;
text-decoration: none;
font-weight:bold;
color: white;
padding: 0 20px 0 20px;
color:#444;
background: url(http://www.example.com/p7lpz) no-repeat 0 0;
}
Please let me know how to fix this.
I HAVE FIXED IT MYSELF. Thank you all for your time.
Is this what you want? I am not sure what the images are supposed to do.
jsfiddle