The error can be found in this image... I need the white-colored list in the image to go up by several pixels, but when I try to use the margin-bottom function, a space appears between the grey-colored list (id is leftmenu) and the white-colored list (id is newsmenu) instead. Is there any way I can fix this issue? I've tried using several code from answers to similar questions on this website, but even that doesn't seem to work.
HTML:
<!DOCTYPE html>
<html manifest="developer.manifest">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Website</title>
</head>
<body>
<div id="container">
<header>
<h1>Website</h1>
</header>
<nav id="menu">
<ul>
<li class="menuitem">HOME</li>
<li class="menuitem">STUFF</li>
<li class="menuitem">STUFF</li>
<li class="menuitem">STUFF</li>
</ul>
</nav>
<nav id="leftmenu">
<h4>Random sentence.</h4>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>>
</ul>
<br></br>
</nav>
<img class="displayed" src="images/kurtar.jpg" alt="Stuff">
<nav id="rightmenu">
<h4>Random Sentence.</h4>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
<br></br>
</nav>
<!--This is the list that I want margin-bottom to move up.-->
<div id="newsmenu">
<h4>Latest MOCing News:</h4>
<ul>
<li>[NEW] 5/7/2016: Website undergoing development...</li>
</ul>
<br></br>
</div>
</div><!--container end-->
<div class="clear"></div>
</body>
</html>
CSS:
*{
margin: 0 auto 0 auto;
}
body{
font-size:13px;
font-family:"Verdana";
color:#ffffff;
background-color:#ffffff;
background-image:url(../images/background.jpg);
background-repeat:repeat-x;
}
a{
text-decoration:none;
}
p{
margin:10px 0;
}
/* Main styles */
#container{
width:1000px;
overflow:auto;
}
.displayed {
margin: 15px 0 250px 40px;
border-width:7px;
border-color:#606060;
border-style:outset;
}
header{
font-weight:bold;
font-family:"Georgia";
width:98.6%;
height:85px;
background:#ffffff;
border-width:7px;
border-color:#DFDFDF;
border-style:outset;
margin-top:20px;
padding-top:15px;
}
header h1{
color:#D4AF37;
font-size:43px;
padding:10px 0 0 0;
text-align:center;
}
aside {
color:white;
}
nav#menu{
display:block;
clear:both;
width:98.5%;
height:30px;
background:#494949;
border-width:7px;
border-color:#606060;
border-style:outset;
margin-top:15px;
}
nav#menu ul{
padding:0;
padding-top:7px;
width:960px;
}
nav#menu li{
padding:0;
display:inline;
}
nav#menu li a,#menu li a:visited{
color:#ffffff;
text-decoration:none;
text-align:center;
font-size:13px;
font-weight:bold;
padding:0 13px 0 13px;
}
nav#leftmenu{
margin-top:15px;
width:190px;
float:left;
background:#C0C0C0;
border-width:7px;
border-color:#B6B6B6;
border-style:outset;
padding: 15px 20px 0 10px;
}
nav#leftmenu ul{
list-style:none;
padding:0;
}
nav#leftmenu li{
list-style:none;
padding:15px 0 8px 0;
border-bottom:1px dashed #000000;
}
nav#leftmenu a,nav#leftmenu a:visited{
color:#000000;
text-decoration:none;
font-size:12px;
}
nav#leftmenu h4{
color:#000000;
padding:0;
padding-bottom:8px;
border-bottom:#000000 solid 2px;
font-size:12px;
}
nav#rightmenu{
margin-top:15px;
width:190px;
float:right;
background:#C0C0C0;
border-width:7px;
border-color:#B6B6B6;
border-style:outset;
padding: 15px 20px 0 10px;
}
nav#rightmenu ul{
list-style:none;
padding:0;
}
nav#rightmenu li{
list-style:none;
padding:15px 0 8px 0;
border-bottom:1px dashed #000000;
}
nav#rightmenu a,nav#rightmenu a:visited{
color:#000000;
text-decoration:none;
font-size:12px;
}
nav#rightmenu h4{
color:#000000;
padding:0;
padding-bottom:8px;
border-bottom:#000000 solid 2px;
font-size:12px;
}
div#newsmenu{
width:190px;
float:left;
background:#ffffff;
border-width:7px;
border-color:#DFDFDF;
border-style:outset;
padding: 15px 20px 0 10px;
position:relative;
margin-bottom:200px;
}
div#newsmenu ul{
list-style:none;
padding:0;
}
div#newsmenu li{
list-style:none;
padding:15px 0 8px 0;
border-bottom:1px dashed #000000;
color:blue;
font-size:11px;
}
div#newsmenu a,div#newsmenu a:visited{
color:#000000;
text-decoration:none;
font-size:12px;
}
div#newsmenu h4{
color:#000000;
padding:0;
padding-bottom:8px;
border-bottom:#000000 solid 2px;
font-size:12px;
}
Use margin-top instead, like all the rest of the objects in your document
div#newsmenu {
width: 190px;
float: left;
background: #ffffff;
border-width: 7px;
border-color: #DFDFDF;
border-style: outset;
padding: 15px 20px 0 10px;
position: relative;
/*margin-bottom: 200px; Delete this one*/
margin-top:15px;
}
This will align your object to the rest. To make it go up more by several pixels, lower the 15px as much as you want.
Are you talking about this space? (see below image)
If yes, then remove margin-top: 15px from nav#leftmenu, or make it 0.
nav#leftmenu {
background: #c0c0c0 none repeat scroll 0 0;
border-color: #b6b6b6;
border-style: outset;
border-width: 7px;
float: left;
margin-top: 0; /* Changes needs to be make here. */
padding: 15px 20px 0 10px;
width: 190px;
}
Related
I have a problem with dropmenu. I created dropmenu from li:YOU and I want to create dropmenu from li: VIEW and HELP, but every dropmenu is below YOU. I don't know what I should to do that every dropmenu was below YOU, VIEW and HELP. I tried many ways but everything failed. And I have ask, I want to pubblish my question but show information that I have to add more detail.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
nav{
height:100px;
display:flex;
font-size:15px;
align-items:center;
justify-content:center;
text-transform:uppercase;
background-color:blue;
width:100%;
position:relative;
}
nav ul{
display:flex;
}
nav ul li{
list-style:none;
}
nav ul li a{
text-decoration:none;
color:black;
position:relative;
letter-spacing:2px;
padding:20px 20px;
margin:20px 0;
font-weight:bold;
background-color:green;
}
.dropOut .triangle{
width:0;
height:0;
position:absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid red;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain{
width:160px;
position:absolute;
margin-top:20px;
left:50%;
margin-left: -80px;
}
.dropOut{
width:160px;
background-color:yellow;
position:relative;
opacity:0;
}
.dropOut ul {
text-align:center;
padding: 10px 0;
display:block;
}
.dropOut ul li {
text-align: center;
width:160px;
padding: 12px 0 10px 0;
margin: 0px ;
color: red;
}
.dropOut ul li:hover {
background: #0D74FB;
}
nav ul li a:hover{
color:white;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
<nav>
<ul>
<li>View</li>
<li>You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Gallery</li>
<li>Contact</li>
<li>f1</li>
</ul>
</div>
</div>
</li>
<li>Help <div class="dropdownContain1">
<div class="dropOut">
<div class="tringle"></div>
<ul>
<li>Plan</li>
<li>Service</li>
<li>Contact</li>
<li>gallery</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
I am trying to build a navigation menu. Here are some pieces.
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px transparent;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
What happens is that li element is not tall enough to show the picture.
Any idea how I can increase a height li element so will show the whole picture?
Thanks
I don't think there's a way to make your li stretch dynamically to the size of your background image. You can easily do the reverse however, set a definite height to your li, then set your background to 'contain'. This scales the image down to fit inside your li without clipping.
Updated jsFiddle
css
li {
height:180px;
width:240px;
background-image: url("http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303");
background-size: contain;
background-repeat: no-repeat;
border:1px solid #656565;
display:inline-block;
position:relative;
}
span {
position:absolute;
top:140px;
width:100%;
text-align:center;
background-color:rgba(255, 255, 255, 0.9);
padding:10px 0 10px 0;
border:1px solid #656565;
}
Remove background Property "transparent"
#main-menu .nav-bar { list-style:none; margin-top: 40px;}
#main-menu .nav-bar li { display:inline; padding:0 10px;}
#main-menu .nav-bar li a {
text-decoration: none;
padding-left: 50px;
text-transform: uppercase;
color: #333;
display: inline-block;
text-shadow: 1px 1px 1px #ccc;
}
.nav-bar .nav-button-home a { background:url("home.png") no-repeat 0px -20px;}
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home">Home</li>
</ul>
</nav>
<style type="text/css">
body { font-family: sans-serif; }
#main-menu .nav-bar { list-style:none; margin-top: 40px; }
#main-menu .nav-bar li { display:inline; padding:0px 30px; }
#main-menu .nav-bar li a {
height:48px;
width:48px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
text-decoration: none;
padding-left: 25px;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
position:relative;
}
.nav-bar .nav-button-home a { background:url("commons/imgs/prism/home.png") 0px -0px; }
.nav-bar .nav-button-assets a { background:url("commons/imgs/prism/assets.png") 0px -0px; }
.nav-bar .nav-button-alarms a { background:url("commons/imgs/prism/alarms.jpg") 0px -0px; }
span {
position:absolute;
top:50px;
left:0px;
width:100%;
text-align:left;
padding:10px 0 10px 0;
}
</style>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><span>Home</span></li>
<li class="nav-button-assets"><span>Assets</span></li>
<li class="nav-button-alarms"><span>Alarms</span></li>
</ul>
</nav>
The only problem I have is that text center is not fully aligned with a center of an image.
Please take a look at my menu code on my site. You can view the source and css file on this site: http://a4um.com/menu.php
some of element is not supported by ie so you can include js for ie
for reference https://github.com/aFarkas/html5shiv
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css"><!-- your css without change -->
<!-- add this for ie support-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<nav>
<ul>
</li>
<li id="moreButton">Menu
<ul>
<li id="second">Logout</li>
<br>
<li id="second">Mail</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</body>
you have used html 5 tags i.e; nav,header which are not valid in ie lower versions so follow the below code it may help you.
<div id="big_wrapper">
<div id="top_header">
<div class="nav">
<ul>
</li>
<li id="moreButton"><a href ="#" class = "hide">
Menu
</a>
<ul>
<li id = "second">Logout</li>
<br>
<li id = "second">Mail</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
*{
margin: 0px;
padding:0px;
}
.hide{
color: white;
text-decoration:none;
}
.hide:link{
color: white;
text-decoration:none;
}
.hide:visited{
color: white;
text-decoration:none;
}
.hide:hover{
color: white;
text-decoration:none;
}
.hide:active{
font: bold 23px Tahoma;
color: white;
text-decoration:none;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
height:110%;
display:-webkit-box;
-webkit-box-pack: center;
overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;
}
#big_wrapper{
position:absolute;
top: 0; right: 0; bottom:0; left:0;
background:#F0F0F0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1
}
#top_header{
background: #252525;
display:inline-block;
border: 1px solid grey;
border-left:1px solid black;
-webkit-box-orient:horizontal;
-webkit-box-flex:1;
color: white;
position:absolute;
right:0;left:0;
}
#logoThing{
width:100px;
font: bold 25px Tahoma;
padding-left:300px;
padding-right:20px;
}
#otherTopStuff{
width:120px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:20px;
padding-right:20px;
}
#moreButton{
width:30px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:5px;
}
#userID{
width:120px;
font: bold 25px Tahoma;
padding-right:20px;
}
#top_header li{
display:inline-block;
list-style:none;
}
#loginStuff{
font: bold 12px Tahoma;
padding:0px;
margin:0px;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#new_div2{
display:-webkit-box;
-webkit-box-orient:horizontal;
border-top:80px solid #F0F0F0;
}
#otherForms{
background:white;
width: 300px;
border-top: 5px solid white;
text-align:left;
}
#whiteSpace{
background:white;
border-top:1px solid white;
border-radius:10px;
bottom:0;
width:900px;
padding:20px;
-webkit-box-flex:1;
}
#signupTitle{
font: bold 18px Tahoma;
}
#theForms{
padding-top:20px;
}
#textBox{
float:right;
}
#submitButton{
float:center;
}
#aligning{
text-align:center;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid black;
}
.nav ul ul {
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
position: relative;
}
.nav ul ul li a {
padding: 0px 10px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
I am facing the problem that the jquery-tab block my Main menu class="oe_wrapper" that is located on the nav bar id="NavBar". I want the oe_menu can overlay the tabs. Is there any problem with this code? thanks in advance.
http://jsfiddle.net/Sp7Mk/
mark-up:
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
<div class="oe_wrapper" style="background-color: red;">
<ul id="oe_menu" class="oe_menu">
<li>
Main Menu
<div>
<ul>
<li class="oe_heading">
My Account
</li>
<li>Account Information</li>
</ul>
<ul>
<li class="oe_heading">
Forms
</li>
<li>F-1</li>
<li>F-2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="searchTab">
<ul>
<li>Address</li>
<li>Other</li>
<li>Disabled</li>
</ul>
<div id="tabsAddll">
<p>Address</p>
</div>
<div id="tabsOther">
<p>Other</p>
</div>
<div id="tabsDis">
<p>Disabled</p>
</div>
</div>
js:
$(document).ready(function(){
$( "#searchTab" ).tabs({ disabled: [ 2 ] });
});
css:
*{ margin: 0 auto;}
body {
background:#000000;
}
ul.oe_menu{
list-style:none;
position:relative;
float:right;
clear:both;
left: -400px;
}
ul.oe_menu > li{
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#717171;
color:#ffffff;
text-decoration:none;
font-weight:bold;
font-size:12px;
/* a link */
width:90px;
height:16px;
padding:1.3px;
margin:1px;
text-shadow:0px 0px 1px #000;
/*opacity:0.8;*/
text-align: center !important;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
left:1px;
background:#fff;
width:668px;
padding:30px;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
text-align: left;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
width: 150px;
text-align: left;
}
In the line
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
You are explicitly declaring a height for the navbar of 100px, so after 100px it's space in the DOM ends and the next element starts to render. Try changing the height to 175px, for me that put it right underneath your other menu.
I can't work out how to get my list items on one line:
HTML:
<div id="navbar">
<ul>
<li class="navbutton">About</li>
<li class="navbutton">Galleries</li>
<li class="navbutton">Info</li>
<li class="navbutton">Contact Us</li>
</ul>
</div>
CSS:
#navbar{width:960px; height:46px; list-style-type: none; margin:0 auto; margin-top:1px; text-align:center;}
#navbar li{list-style:none; text-align:center; margin:0 auto; background-position:center; background-repeat:no-repeat; padding-left:50px; padding-right:50px;}
.navbutton{background:url(images/nav/lights_lit.jpg); width:138px; height:45px; display:block; background-position:center; background-repeat:no-repeat;}
.navbutton a{background-image:url(images/nav/lights.jpg); width:138px; height:30px; display:block; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; text-shadow:#000 0px 1px 4px; font-size:16px; padding-top:15px; text-decoration:none; cursor:pointer; background-position:center; background-repeat:no-repeat;}
#navbar a:hover {background-image: url(images/nav/lights.jpg);background-position:center; background-repeat:no-repeat;}
Live Link:
http://brownbox.net.au/clients/matchlessphotography/
Is this what you intended?
jsFiddle containing your code
Here's the code I changed. Float the li and get rid of the left/right padding:
#navbar li
{
list-style: none;
text-align: center;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
float: left;
}
UPDATE
In that case, you have to reduce the width of the #navbar and make sure the left and right margins are set to auto. Here's what I did after reading your comment:
#navbar
{
width: 566px;
height: 46px;
list-style-type: none;
margin: 0 auto;
margin-top: 1px;
}
You will have to play with the width to get it right.
You can float it
#navbar {
height:50px;
width: 500px; /* just an example */
margin: 0 auto; /*will center */
}
.navbutton{
background:url(images/nav/lights_lit.jpg);
width:118px;
height:35px;
display:block;
background-position:center;
background-repeat:no-repeat;
float:left;
padding:5px 10px;
}