I have a problem regarding about the navbar. Just now when I was able to do make the navbar stick to the top when scrolling, the top content was then blocking my view and I actually used this question to help me but it didn't work, is there another solution or am I just putting it at the wrong place? Here is the question that I used to help me, Twitter Bootstrap - top nav bar blocking top content of the page
I tried using this following of the codes but it doesn't help:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
This is what happen
So here is the codes:
app.blade.php(where my navbar is)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid" style="background-color: blue">
<div class="navbar-header" style="padding-left: 50px">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
test.css (this is inside my sidebar code, I don't think the sidebar code is needed so I just put the css since it affect the navbar also)
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
padding-top: 65px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position:fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {
background:#0000FF;
position: fixed;
width: 100%;
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
#test .dropdown-menu {
position: absolute;
top: 0;
left: 180px;
min-width: 180px;
}
Try adding the "padding-top: 60px;" style to whatever element is wrapping the "#yield('content')" area rather than to the body element. Hopefully, that will push your content below the absolute-positioned navigation bar.
Related
I am triying to figure out why my toggle icon is not showed,and why the nav bar is not showing the menu elements when I use the mobile view.
I have created a border to see if the icon is there,and I can see the red frame,but when I click on it,does not work,and is not showing any content.
Can someone please help me.
This is my code so far:
<header>
<div class="jumbotron">
<div class="container text-center">
<div class="intro-video">
<video class="videobaner" id="video" preload autoplay="true" loop="loop" muted="muted" volume="0">
<source src="img/background.mp4" type="video/mp4">
<source type="video/webm" src="img/theremin2.mp4"></source>
</video>
</div>
</div>
</header>
<nav class="navbar navbar-expand-md" style="width:auto;background-color:black;">
<div class="container-fluid mb-2 mt-2">
<div class="navbar-collapse collapse flex justify-content-md-center">
<ul class="navbar-nav mr-auto align-center">
<li class="nav-item">
<a class="nav-link" href="music.php"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.php"> EVENTS </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">FEATURED</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="arts.php">ARTS</a></li>
<li><a class="dropdown-item" href="blog.php">BLOG</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SUBSCRIPTION </a>
</li>
</ul>
</div>
<div class="d-flex flex-md-fill flex-shrink-1 d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
</div>
</div>
</div>
</nav>
<style>
header .jumbotron{
position: relative;
background-color: black;
height: 100%;
min-height: 40rem;
width: 100%;
overflow: hidden;
}
nav {
opacity: 80%;
padding: 20px;
/* position: relative; */
z-index: 9999;
margin: 0;
width: 50%;
left: 0px;
right: 0px;
bottom:0px;
border-radius: 1px;
color: white !important;
}
.container-fluid {
height:30px;
}
nav ul {
text-transform: uppercase;
padding:20px 35px;
margin: 0;
font-size: .450rem;
font-weight: 400;
color: white!important;
}
nav ul li {
display:inline-block;
text-align: center;
padding:20px 35px;
height: 1%;
}
nav ul a {
height:35px;
line-height:20px;
padding:16px 32px;
margin: 4px 2px;
color:white !important;
font-size: 20px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
text-decoration:none;
}
nav ul a:hover {
padding: 20px;
border-radius: 15px;
color: white!important;
}
</style>
Bootstrap5 uses data-bs-toggle and data-bs-target for the toggler. Change
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsenav">
<span class="navbar-toggler-icon"style="color:white;border:2px solid red;"></span>
</button>
to
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".collapsenav">
<span class="navbar-toggler-icon" style="color:white;border:2px solid red;"></span>
</button>
More on the Bootstrap5 toggler
I'm trying to do an animation of the logo in my PHP website. I need to break the two words of the logo into separate spans. I wanted to get rid of the whitespace between the two span tags so I started looking for an answer...and found a problem. Basically, when I add an ID to each span tag, even if I replicate the styling for both IDs, or I add a new text color, it doesn't work. It's almost like the IDs do not work. The span tags are inside of an tag with an ID that does have the correct formatting, which I did try erasing and even then it doesn't work. The only way to make it work, is to duplicate the ID and that is a bad practice. I'm attaching a jsfiddle and where everything works, but on my file it doesn't.
EDIT
The only reason why I'm duplicating an ID is because it is the only way to style that text. It doesn't matter if I use a new class or two new IDs, they just don't work. It's as if they do not exist in the code. I think the a tag's ID is taking prominence over the new span IDs, but even if I remove it, it doesn't work.
I edited to include the new tags that do not reflect the changes. #unexpected and #friends have the styling color: blue; and it just doesn't show on the browser.
* {
font-family: Montserrat, Helvetica, sans-serif;
color: #828282;
}
#font-face {
font-family: "Riffic";
src: url(../Riffic.ttf);
src: url(../Riffic/rifficfree-bold-webfont.woff);
}
#keyframes logo{
}
body {
padding-top: 65px;
position: relative;
}
#navbar {
background: #FF9D9D;
}
#navbarBrand{
font-family: 'Riffic', sans-serif;
color: white;
font-size: 26px;
}
#unexpected, #friends {
color: blue;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,1);
}
.navbar-dark .navbar-toggler {
color: rgba(255,255,255,1);
border: solid 2px rgba(255,255,255,.5);
}
.btn-outline-light:hover {
color: #FF9D9D;
}
a.btn.btn-outline-light.waysToHelp:active {
color: #FF9D9D;
}
.waysToHelp {
margin-left: 10px;
}
.waysToHelp:hover {
color: #FF9D9D;
}
#mainImage {
padding-bottom: 100px;
}
section {
padding: 58px 0 80px;
}
h1 {
color: #FF9D9D;
padding: 10px 0 25px;
}
h2 {
color: #FF9D9D;
padding: 10px 0 25px;
}
figure {
max-width: 435px;
}
#figCaption {
color: #FF9D9D;
font-weight: 500;
font-style: italic;
}
#projectCol {
margin-top: 100px;
}
#message {
color: #828282;
}
#submit {
padding: 8px 50px;
background-color: #FF9D9D;
border: none;
}
.small-text {
color: #FF9D9D;
}
footer {
padding: 20px;
}
footer a {
color: #FF9D9D;
}
#heart {
color: #FF9D9D;
}
#media only screen and (max-width: 767px) {
#mainImage{
padding-bottom: 50px;
}
section {
padding: 15px 0 20px;
}
img {
padding-bottom: 15px;
}
h2{
margin-top: -70px;
}
#figure1 {
display: block;
margin: 0 auto;
}
#figure2 {
display: block;
margin: 0 auto;
}
#figure3 {
display: block;
margin: 0 auto;
}
}
#media only screen and (min-width: 767px) and (max-width: 1029px) {
img {
padding-bottom: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- it tells the browser it's a responsove site and it makes the viewport, which is the screen size, to look for the device's width -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Unexpected Friends - Bootstrap</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--all the above tells IE9 or lower to upload those scripts because you are not very smart and it'll help you-->
</head>
<body data-spy="scroll" data-target="#navbar">
<nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
<a class="navbar-brand" href="index.php" id="navbarBrand">
<span class="navbar-brand" id="unexpected">Unexpected</span><span class="navbar-brand" id="friends">Friends</span>
</a>
<!--navbar toggler is the hamburger icon that appears when in smaller screens-->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<!--ml-auto moves the links to the right-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-light waysToHelp" href="#waysToHelp">Ways To Help</a>
</li>
</ul>
</div><!--navbarNav-->
</nav>
https://jsfiddle.net/HailToTheV612/4qbeh216/6/
The first image is of the code not working in the php file.
The second image is the code working if I duplicate the a tag's #navbarBrand ID styling:
I edited to include the new tags that do not reflect the changes.
#unexpected and #friends have the styling color: blue; and it just doesn't show on the browser.
It looks like your code is working on your posted snippet (i.e., the #unexpected and #friends styling). The reason why it could not be showing on your browser is that, the browser is fetching the cached old CSS files. To refresh the cache, simply use ctrl+F5 or use an incognito browser. In addition, check if you've included the CSS file in your project.
Please someone help me. Im new to coding, I'm trying to highlight the active menu item. I have been searching for almost two weeks, but it is still not resolved. I have tried with Jquery CDN; it works, but when I upload all this to the web, it doesn't work. When I click the menu, it highlights, then disappears suddenly. So it didn't work with Jquery CDN.
here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</div>
</div>
</nav>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</ul>
</div>
</div>
<!-- Main variables *content* -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript">
$("#toi").click(function(e) {
e.preventDefault();
$("#main-wrap").toggleClass("launched");
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$(".mobileSearch a").click(function(e){
e.preventDefault();
$(".search-bar").toggleClass("toggleSearch");
});
} else {
$('#main-wrap').addClass('launched');
}
/*$(window).scroll(function() {
var nav = $('#scrollNav');
if ($(window).scrollTop() >= 10) {
nav.addClass('fixedNav');
} else {
nav.removeClass('fixedNav');
}
});*/
</script>
</body>
</html>
here is the css
}
.dahshat-board .navbar-default {
background-color: transparent;
border-color: transparent;
padding: 10px 0;
margin: 0;
background-image: none;
}
.nav-bottom {
position: relative;
z-index: 3;
}
.nav.page-navigation {
background: #fad534;
border-radius: 500px;
display: flex;
width: 100%;
position: relative;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.08);
justify-content: center;
}
.nav.page-navigation li {
display: inline-flex;
width: auto;
align-items: center;
flex: 0 0 10.85%;
flex-grow: 1;
}
.nav-bottom .nav .dropdown li {
display: block;
width: auto;
text-align: left;
}
.nav-bottom .nav li .ico {
margin-right: 4px;
width: 28px;
height: 28px;
background: #2b1f60;
border-color: #2b1f60;
}
.nav-bottom .nav li.active .ico {
background: #fad534;
border-color: #fad534;
}
.nav-bottom .nav li.active .ico img {
filter: invert(1) brightness(100%) saturate(0);
}
.nav-bottom .nav li a {
font-size: 13px;
line-height: 44px;
color: #2a1e5e;
display: flex;
justify-content: center;
position: relative;
align-items: center;
padding: 2px 9px;
border-radius: 500px;
white-space: pre;
width:100%;
}
.nav-bottom .nav li.dropdown.open a.dropdown-toggle {
/* background: transparent;
border: none; */
}
.nav-bottom .nav li a:hover,
.nav-bottom .nav li a:active,
.nav-bottom .nav li a:focus {
background: transparent;
outline: none;
}
.nav-bottom .nav .dropdown li a {
line-height: 18px;
display: block;
padding: 4px 10px;
position: relative;
}
.nav-bottom .nav .dropdown li a .badge {
position: absolute;
right: 8px;
top: 13px;
padding: 3px 7px;
font-size: 10px;
}
.nav-bottom .nav li.active a {
color: #fad534;
background-color: #270044;
}
.nav-bottom .nav .dropdown li a::after,
.nav-bottom .nav .dropdown li a::before {
display: none;
}
please help
Not an answer as such but I corrected your HTML markup as best I could - it now validates correctly so that in itself might be a help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name='keywords' content='' />
<meta name='description' content='' />
</head>
<body class="dahshat-board">
<div id="main-wrap">
<nav class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!--///////////////////////////////////////////////////////////////////////
The element "button" must not appear as a descendant of the "a" element.
The hyperlink has been removed from the DOM which might affect your
layout
/////////////////////////////////////////////////////////////////////////-->
<!--
<a class="navbar-brand" href="/"></a>
-->
<div class="sidebar-pinner">
<button type="button" class="btn btn-secondary collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="scrollNav">
<div class="collapse navbar-collapse mobileNav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="nav-bottom">
<div class="container">
<ul class="nav page-navigation">
<li class="active" >Home</li>
<li>Services</li>
<li>History</li>
<li>Support</li>
<li>Terms</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Main variables *content* -->
<script src='//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js'></script>
<script>
$('#toi').click(function(e) {
e.preventDefault();
$('#main-wrap').toggleClass('launched');
});
if ($(window).width() < 768) {
$('#main-wrap').removeClass('launched');
$('.mobileSearch a').click(function(e){
e.preventDefault();
$('.search-bar').toggleClass('toggleSearch');
});
} else {
$('#main-wrap').addClass('launched');
}
</script>
</body>
</html>
The original code, run through the W3c validator produced the following results... as you will see it gave up hope and bailed!
If the markup alters the layout significantly look again at the css and judge whether the above markup was your intended layout. With valid markup you should have fewer problems going forward I hope.
Hello guys I am building a php webpage with bootstrap and I have margin in my top, right and left of the body.
Following this question I downloaded the notepad++ and to converted to utf-8 without BOM but the margins are still there.
Here is my css file
.texts{
color: white;
}
.mainbody{
margin-top: 0;
max-width: 1200px;
}
.banner{
height : 600px;
width : 100%;
max-width:100%;
background-image: url("restrooms.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.bannertext{
color: white;
}
.bannerbg{
background-color: #a52f0b;
opacity: 0.7;
margin-left: 40px;
height :150px
}
.dashform{
margin-top: 10px;
margin-bottom: 10px;
border-style: solid;
border-width: 1px;
}
.mtop{
margin-top: 6px;
}
.blbc{
background-color: #424242;
}
.im-centered{margin: auto; max-width: 100%;}
here is index.php
<?php
include ('header.html');
?>
<div class="w3-container w3-center">
<div class="w3-container banner">
<div class="w3-container w3-display-left bannerbg">
<h2 class="w3-container bannertext">Βρες το κατάλληλο εστιατόριο<br>.....στην κατάλληλη τιμή</h2>
<button class="w3-btn w3-red w3-round-xxlarge">Βρές Εστιατόριο</button>
</div>
</div>
</div>
</body>
</html>
header.html
<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang:"en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="rules.css"/>
<title>Αρχική</title>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Δυναμικό Τιμολόγιο</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Αρχική</li>
<li>Ολα Τα Καταστήματα</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
and here is a sreenshot of the output
What am I missing?
body has default margins on all browsers, so all you need to do is shave them off:
html,
body {
margin: 0;
padding:0;
text-align: center;
}
By default, most browsers add a margin / padding to the body.
Add the following to the top of your CSS file:
html,
body {
padding: 0;
margin: 0;
}
I have a bunch of PHP forms which is working perfect. I am working on Integrating all the forms into a single HTML page so that on the click it opens the form in the same HTML page. I am new to HTML5 and took some HTML file and modified it.
I am facing two issues.
1. On click of the options in top of the form(from drop-down) it opens the page in the new tab. I need to open it in the center of the HTML page.
2. I need to create in-line drop-down boxes, the second drop-down menu is not showing up correctly.
It may be trivial or I am doing something completely wrong?
Experts, please tell me what I am missing..
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DG SIM</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<link rel="stylesheet" href="/ASSIM/css/bootstrap.min.css">
<script src="/ASSIM/jquery-1.11.3.min.js"></script>
<script src="/ASSIM/js/bootstrap.min.js"></script>
<style type="text/css">
.x-panel-framed {
padding: 0;
}
#div_g2 {
background-color: #FFFFFF;
margin: 10 10 10 10;
}
button#inner {
color: #FFF;
background-color: #3498DB;
border-radius: 10px;
margin: 0px 10px 10px 0px;
font-weight: bold;
font-size: 110%;
width: 100%;
text-transform: uppercase;
}
.dropdown-menu form :focus{
color:black;
background-color: none;
}
.buttonWidth {
width: 160px
}
</style>
<script type="text/javascript">
$(function() {
pageLoaded();
});
function pageLoaded() {
//need to call a php script here too so that it shows up on the cneter page.
}
Code:
</script>
</head>
<body style="background-color:#0067AC;">
<div align="center"><img src="img/aff_new.gif" /><img src="img/corp_id_small.gif" /></div>
<!-- Device options-->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">Device Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Onboarding Devices</li>
<li><a target="div_g2" href="/ASSIM/trialdeviceActions.php">Device Actions</a</li>
</ul>
</div>
<!-- DATA Option
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle buttonWidth" type="button" data-toggle="dropdown">SCEF Options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a target="div_g2" href="/ASSIM/addSF.php">ADD SCEF</a>
<li><a target="div_g2" href="/ASSIM/trial.html">Delete SCEF</a>
</li>
</ul>
</div>
</div>
-->
<div style="background-color:#0067AC; position: absolute; left: 10px; right: 10px; top: 95px; bottom: 10px;" > <div>
<div id='div_g2' style='height:500px; top: 30px;'></div>
</div>
</body>
</html>