the css dropdown is a variation of the one found at:
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
When placed inside a dijit.layout.ContentPane, instead of floating, a scroll bar appears.
I've tracked the bug to this file:
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
But i fail to see the cause.
Below, the code.
<!-- File: css/dropdown.css-->
ul.dbtul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.dbtli {
float: left;
}
li.dbtli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dbtli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/dropdown.css"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require([
'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;" >
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> << Volver a página anterior</a>
<div >
<ul class="dbtul">
<li class="dbtli"><a class="active" href="#home">Home</a></li>
<li class="dbtli">News</li>
<li class="dropdown">
123456
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is a result of the BorderContainer layout, which sets a fixed height for the ContentPane div. This div has the dijitContentPane class and claro.css has the following declarations for it:
.dijitContentPane {
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can override overflow to visible and your example will work but then you may run into layout problems when you add other elements to the container. I would suggest to just use a dijit MenuBar instead: https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html
Related
I'm writing a simple code to design a plain header with a logo and navigation menu inside it. I want my logo to be on left and navigation menu to be on right side. It looks like a child problem but I am unable to resolve this issue.
I have tried to make all possible tweaking in my IDE as well as Chrome Inspection but couldn't figure it out.
My Index.html code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PSD to Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- body content -->
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<a href="#" class="logo">
<img src="img/logo.png" alt="logo" />
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- javascript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
and style.css is
header {
color: #fff;
height: 100px;
line-height: 100px;
}
header a.logo{
float: left;
margin-right:10px;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
I have a reset.css also
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1
{
font-size: 36px;
color: #555;
font-weight: bold;
}
h2
{
font-size: 30px;
color: #555;
font-weight: bold;
}
h3
{
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary{
color: #e74c3c;
}
.primary-bg{
background-color: #e74c3c;
}
.secondary-dark-blue
{
color: #34495e;
}
.secondary-dark-blue-bg
{
background-color: #34495e;
}
.secondary-sky-blue
{
color: #2d82d8;
}
.secondary-sky-blue-bg
{
background-color: #2d82d8;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
}
I am expecting the nav menu to float on right but it is not working.
You don't have a menu class defined. Are you trying to use nav if so it should be
nav {float:right;}
I can see in your code that you are defining class .menu in your css but you are not using it anywhere in your html.
And you can do it in better way by using flexbox.
.row{
display: flex;
justify-content: between;
}
It not that much heard as i have review your code you have to add simple one class to your nav tag and that is nav class="pull-right" use class pull-right, it is default bootstrap class.
I am here to answer my own question. I found this piece of code in default bootstrap file
.row {
display: flex;}
I changed it to display:block and it is solved.
I respect all the answers but if you using Bootstrap 4 just give ml-auto class to nav it will solve the issue.
You must use col-md-12 inside the row. I have used flex property for nav and margin-left:auto to align the menu right side.
Optionally you can use floating method with clearfix to align the menu right side.
* {
box-sizing: border-box;
position: relative;
}
header {
color: #fff;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header a.logo {
display: inline-block;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
/** second css **/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1 {
font-size: 36px;
color: #555;
font-weight: bold;
}
h2 {
font-size: 30px;
color: #555;
font-weight: bold;
}
h3 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary {
color: #e74c3c;
}
.primary-bg {
background-color: #e74c3c;
}
.secondary-dark-blue {
color: #34495e;
}
.secondary-dark-blue-bg {
background-color: #34495e;
}
.secondary-sky-blue {
color: #2d82d8;
}
.secondary-sky-blue-bg {
background-color: #2d82d8;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.nav-wrapper {
margin-left: auto;
}
nav {
display: flex !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<a href="#" class="logo">
<img src="https://via.placeholder.com/250x150" alt="logo" />
</a>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
Either
.row {
display: block;
justify-content: between;
}
in your reset.css or style.css
or
<nav class="ml-auto">
in your index.html will work fine.
I have a navigation bar inside a few pages. It's repeated code for now.
I just want to get it up and working.
On my home page, it shows up bolded and slightly larger.
On my about page, it shows up slightly less bolded and slightly smaller.
I'm just confused as to why, they have the exact same code (copy pasted) except the href a tags are modified (urls are different).
Here is the html kind of summarized:
<body>
<Header>
<img src="img/header.gif" alt="Dental Dynamics Logo Header" class="header_logo">
</Header>
<nav>
<div class="toggle-nav">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Doctors
</li>
<li>
Office Tour
</li>
<li>
Sterilization Infection Control
</li>
<li>
Technology
</li>
<li>
Bleaching
</li>
<li>
Photos
</li>
<li>
Map
</li>
<li>
Post Op
</li>
<li>
Forms
</li>
<li>
Insurance/Payment
</li>
<li>
Just For Fun
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(() => {
$('.menu').click(() => {
$('ul').toggleClass('active');
})
})
</script>
This is the CSS to go along with it:
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url("./../img/dental_background.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.header_logo {
position: relative;
top: 0;
right: 0;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
margin: 0 auto;
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none;
}
nav ul li a {
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
font-size: 62.5%;
color: #0000e0;
display: block;
padding: 1.5em;
}
nav ul li a:hover,
nav ul li a:focus {
font-size: 70%;
color: blueviolet;
background: rgba(177, 173, 173, 0.3);
}
.toggle-nav {
width: 100%;
padding: 0.5% 1.1%;
text-align: left;
box-sizing: border-box;
font-size: 150%;
color: #0000e0;
display: none;
}
#media (max-width: 768px) {
.toggle-nav {
display: block;
}
nav ul {
width: 100%;
display: block;
}
nav ul li {
display: block;
text-align: center;
}
.active {
display: none;
}
}
Any ideas as to why this is happening?
I have a header with an image tag but the size of that is remaining the same.
This is all just a bunch of HTML and CSS.
No javascript (besides the JQuery happening within the HTML file, not a fan of jquery but oh well :D )
---------------------------------- EDIT ----------------------------------
Top pic is the home page nav bar, bottom is the about page nav bar.
It may be worth noting that the toggle-nav portion is related to the link
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> in the head?
In fact, here is the head from the about page which is identical to the home page except for the Title tag.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>About Us!</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
I have a div which in 1000px; and a navigation bar which is also 1000px; but it doesn't extend as much as the div.
Please help...
[index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
fun stuff
<ul>
<li>jokes</li>
<li>riddles</li>
<li>facts</li>
</ul><!-- end of Second List -->
<li>
my work
</li>
<li>
my favourite songs
</li>
<li>
my favourite links
</li>
<li>
about me
</li>
<li>
contact me
<ul>
<li>phone</li>
<li>e-mail</li>
<li>mail</li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>
[style.css]
body {
background: SILVER;
margin: 0;
padding: 0 auto;
}
.banner {
background: blue;
width: 1000px;
height: 70px;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#navMenu {
margin: 0;
padding: 0;
line-height: 30px;
width: 1000px;
}
#navMenu ul {
margin: 0;
padding: 0;
border: 1px white;
}
#navMenu li:hover {
font-weight:normal;
text-transform: capitalize;
background:silver;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
}
#navMenu ul: hover {
text-transform: capitalize;
}
#navMenu ul li a {
text-align: center;
font-family: "Arial";
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: white;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top:30px;
border: 1px white;
}
#navMenu ul li:hover ul {
visibility: visible;
}
I have added the code for the style and index.. As you can see both the banner and navmenu have 1000px;
Just change you CSS like this: Live Demo
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
width:165.6px;
}
165.6 is (1000 - 5)/6 (approx)
Using Chrome, right-click each element and choose "Inspect Element". Scroll down to "Metrics". This will show you what other properties are affecting the apparent width of each element (margin, border, padding, box-model, and positioning).
The navigation is not 1000px because each item is set to fixed width
You should change the width of each item using percentage, so the width of each item is relative to 1000px and the number of items
however, if it's still not working, you should add <div style="clear:both;"></div> at the bottom of <ul></ul>
The length of the navigation bar is decided by each individual bullet point in the list. Where you have width: 150px; shows the length of each individual li. The length of all of them together gives you the length of the navigation bar. You add display: inline-block; under the #navMenu ul li to make it depend on the original width.
Have a bit of a issue with a h1 not staying in its containing div, the odd thing is its stays in it until the h1 gets to a certain font size then it starts going outside of the div and overlapping into other content. Here is my html and css, also i am also using the eric meyer reset sheet and my font style sheet just contains my #font-face font styles since i am using a custom font:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lawrence Chabela - User Interface Design</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="siteWrap">
<div class="nav clearfix">
<ul class="clearfix">
<li>
Home<span>is where I work.</span>
</li>
<li>
About<span>this dude.</span>
</li>
<li>
Folio<span>take a peek.</span>
</li>
<li>
News<span>whats going on.</span>
</li>
<li>
Contact<span>got some work?</span>
</li>
</ul>
</div>
<div class="slogan">
<h1>Why Is this h1 not staying in here</h1>
</div>
</body>
/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
.siteWrap { width: 1024px; margin: 0 auto; }
.nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
.nav ul { margin: 0 auto; width: 94%; }
.nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
.nav li:last-child { padding: 0; }
.nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
.slogan { text-transform: uppercase; }
<div class="slogan"> isn't closed.