I am developing a sample website to learn CSS and HTML. Have created a horizontal nav bar, a side nav bar, and a welcome message on the top of the page. And when any of the links are clicked the corresponding Html file will be loaded onto the 'mainContent' . All are working as expected except the 'mainContent' is not occupying the remaining space of the page. Please advise me on what is missing.
/* Add a black background color to the top navigation */
.topnav {
background-color: #111;
margin-left:160px;
width: 90%;
height:10%;
overflow-x: hidden; /* Disable horizontal scroll */
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: Green;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: White;
}
/* The sidebar menu */
.sidenav {
margin-top: 0;
height: 80%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: absolute; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 1000; /* Stay at the top */
left: 0;
background-color: #00A555; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
display: block;
font-family: sans-serif;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: black;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
/*padding: 0px 10px;*/
/*top: auto;
position: static;*/
overflow: auto;
background-color: #FFF;
padding-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>XYZ Hostel</title>
<style>
li {
display: inline;
}
</style>
</head>
<link rel="stylesheet" href="divCss.css">
<body>
<script>
function lurl(page) {
let node = document.getElementById('mainContent');
let url = '<object type="text/html" data=' + "\""+ page + "\"" + '></object>';
node.innerHTML = url;
}
</script>
<div id="container">
<div id="Welcome">
<table style="width: 100%">
<tr>
<td>
<div>
<img alt="Hostel" src="hostel1.webp" width="200" height="100">
</div>
</td>
<td align="right">
<div>
<h2 style="color: black; font-family: Lucida Calligraphy; font-style: black;">Welcome to XYZ Hostel</h2>
</div>
</td>
</tr>
</table>
<div class="topnav">
<ul style="list-style: none; padding-left: 0;" >
<li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li>
<li>Login</li>
<li>Room Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="menuOption">
<!-- Side navigation -->
<div class="sidenav">
<ul style="list-style: none; padding-left: 0">
<li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li>
<li>Login</li>
<li>Room Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="mainContent" class="main">
<!-- iframe id="contentPage" height="600" width="1200" style="border: 0">
</iframe -->
</div>
<footer>
Thank you
</footer>
</body>
</html>
enter image description here
From your question i don't understand 100% what you are trying to do.
Because you are loading some extra content, i can't really see it here on the snippet.
But i think something like this would work:
.grid {
--grid-sidebar-width: 160px;
display: grid;
grid-template-columns: var(--grid-sidebar-width) 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas: "header header" ". topbar" "aside main";
min-height: 100vh;
}
.header {
grid-column: 1/ -1;
display: grid;
grid-template-columns: var(--grid-sidebar-width) 1fr;
grid-area: header;
}
.header__title {
text-align: right;
}
.topbar {
grid-area: topbar;
background-color: darkgrey;
}
.topbar__nav {
display: flex;
gap: 2rem;
}
.aside {
grid-area: aside;
background-color: green;
}
.main {
grid-area: main;
background-color: lightgrey;
}
.main__content {
padding: 1rem;
}
<div class="grid">
<header class="header">
<p>Logo</p>
<p class="header__title">Welcome to xyz hostel</p>
</header>
<div class="topbar">
<nav>
<ul class="topbar__nav">
<li>Home</li>
<li>Content A</li>
<li>Content B</li>
</ul>
</nav>
</div>
<aside class="aside">
<nav>
<ul>
<li>Link 1</li>
<li>Link 3</li>
<li>Link 3</li>
</ul>
</nav>
</aside>
<main class="main">
<div class="main__content">
<p>You content goes here</p>
</div>
</main>
</div>
This allows you to create the basic layout (grid) for the page without needing to place any elements with position absolute or by giving them hacky margins.
I didn't pay much attention to any other styles, just the grid layout.
This html and css create a grid with two columns:
a left column of 160px (defined by the --grid-sidebar-width variable)
a right column that takes the rest of the available space
You then just need to place your page elements on the grid areas where you want to show them.
The content you load with JS can be placed inside the main__content div.
Here is some more information about using CSS grid:
CSS Grid on MDN
Grid layout
CSS Grid Area
CSS Template Columns
CSS Template Rows
I'm trying to get multiple tabs on the same page working without having to change my markup or style.
The problem is that clicking the tab links in one section removes the content from the other sections
I see other questions with the same issue but I can't modify my HTML or CSS
// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage .tab-content').hide();
$($(this).attr('href')).show();
});
$('.tabs-nav a:first').trigger('click'); // Default
JS Fiddle
There's a couple of issues with the logic.
You need to add the .current class to the targeted tab, not manually call show() on it, as the latter will apply an inline style which will not be overriden by removing the .current class.
Use li:nth-child(1) a instead of a:first to get the first a element in each container, not the first in the entire page.
You need to remove the .tab-active class from the li, not the a.
Your CSS needs to include the rules to hide/show the tab content in .tab-content and .tab-content.current.
With those issues addressed, the code works:
$('.tabs-nav a').on('click', e => {
e.preventDefault();
let $tabLink = $(e.target);
let $div_container = $tabLink.closest('.wrap');
$div_container.find('li').removeClass('tab-active');
$div_container.find('.tab-content').removeClass('current');
let targetSelector = $tabLink.attr('href');
$tabLink.parent().addClass('tab-active');
$(targetSelector).addClass('current');
});
$('.tabs-nav li:nth-child(1) a').trigger('click');
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav a {
border-bottom: 5px #a6a6a6 solid;
color: #a6a6a6;
display: block;
font-size: 18px;
font-weight: 600;
padding: 10px 40px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.tabs-nav .tab-active a {
border-bottom-color: #000;
color: var(--body-color);
cursor: default;
z-index: 1;
}
.tabs-nav li {
float: left;
}
.tabs-stage {
background-color: #fff;
border-radius: 0 0 6px 6px;
border-top: 5px #a6a6a6 solid;
clear: both;
/* margin-bottom: 20px; */ /* removed for this demo to save space */
padding: 10px 20px 20px;
position: relative;
top: -5px;
width: 100%;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab11" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab12" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab21" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab22" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
I am using a simple top css navbar(just a css and html, without bootstrap/other framework) and i would like to change the active page. So when i go to the home page, the button color in navbar changes into red/whatever, likewise when i go to the other page...
here the code:
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
do you have an idea? it's ok to add javascript
Thanks a lot!
What I did here is when $(document).ready(function() {..} get the path using var url = window.location.pathname; so you know which link the user coming from therefore you know which menu item they clicked.
Then $('ul li a').each(function() {...} will check each menu item, try to match the url path with the menu's href attributes, if a match found, make that menu item active (with css active class added), if not match remove the active class if any. That should do the trick.
(note: assume your app is not single page app)
for Single page app it is much easier, deactive all menu item then active the one you clicked.
$(document).ready(function() {
//var url = window.location.pathname;
var url = 'http://stacksnippets.net/js#division';
console.log('url-->', url);
$('ul li a').each(function() {
var href = $(this).attr('href');
if (!!url.match(href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
The simplest solution would be to add an active class to the link of the page you're on:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
Then style those that class accordingly:
li a.active {
background: #F00;
}
If you're using a CMS (Wordpress, etc), adding some sort of active class on the active link is usually done for you. If you're doing your own static HTML, you would have to do it manually.
try below code for active menu
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a').on('click', function(){
$('li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover, li a.active {
background-color: #111;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
To change the color of active link in your navigation you need to do the following things:
On click of navigation link add css class:
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
Add CSS for active class
ul li a.active {
background-color: #f4f4f4;
}
One possible way is to use the active selector in CSS. This selector highlights the active element you are using when its clicked.
a:active {
background-color: yellow;
}
a:focus {
background-color: yellow;
}
You can use some JQuery to turn it on and off too. Try looking at this post here, I think you may have get your answer.
(Related to How to keep :active css style after clicking an element)
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
function redButtons() {
$(".inclusive-buttons").on("click", "a", function() {
$(".inclusive-buttons a").css("background", "#333");
$(this).css("background", "red");
})
}
var x = document.getElementsByTagName("li");
x.onclick = redButtons();
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
a:active {
background-color: red;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<ul class="inclusive-buttons">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
https://jsfiddle.net/m5gm7x7e/2/
HTML Part
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="News">News</li>
<li id="Contact">Contact</li>
<li id="About">About</li>
<li id="Division">Division</li>
<li id="Career">Career</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="MChoice">MChoice's</li>
</ul>
</div>
</div>
</div>
</div>
JavaScript part
$(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
CSS Part
.navbar #nav > .active > a {
color: yellow;
}
here is JSFiddle result
http://jsfiddle.net/Ag47D/775/
Here's a JSFiddle: https://jsfiddle.net/timhjellum/nw3n7eka/103/
This is a jQuery option which looks at the page URL (window.location) and specifically for a string which you define in the .indexOf(" add a unique string here ") and asks if that string is greater than -1, then locate the li element with the class you assigned to it, and add another class called active.
In the example I'm using "display" because that the URL for that iFrame that JSFiddle uses so hopefully that's not confusing.
Here's the navigation:
$(document).ready(function () {
if(window.location.href.indexOf("home") > -1) {
$(".home").addClass("active");
}
if(window.location.href.indexOf("display") > -1) {
$(".news").addClass("active");
}
//make one for each nav element
});
The HTML needs to be modified like:
<ul>
<li class="home">Home</li>
<li class="news">News</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
And then a simple css addition:
li.active {
background-color: white;
}
li.active a {
color: black;
}
If you can't use jQuery, let me know but this is the easiest solution for you to implement and allow you to easily modify
You could try having separate classes in your CSS file, like "ul-home," "ul-news," etc. and define different background colors for each, then simply set the class for your <ul> tag on each page to match the class you want. So:
.ul-home {
background-color: red;
}
.ul-news {
backrgound-color: yellow;
}
And then on your home page:
<ul class="ul-home>
<li>Home</li>
<li>News</li>
</ul>
On your news page:
<ul class="ul-news">
<li>Home</li>
<li>News</li>
</ul>
Etc. with all the other pages you have.
I m developing a site and I m about to add a little bit of transition to the nav bar, but I have few bugs can anybody help.
The Objective is when you scroll down the nav elements gets hidden and the logo of the site will be at the fixed position, if you move hover logo the nav appears again.
I think it still needs to be fixed.
Reference Navigation bar: https://www.barackobama.com/
.logo{
position: fixed;
}
.navigation{
position: fixed;
margin: 50px 20px;
display: block;
}
ul li{
padding: 0 30px;
display: inline-block;
}
ul li a{
color: #646464;
text-transform: uppercase;
font-weight: 600;
}
ul li a:hover{
color: #BE9503;
text-decoration: none;
}
.main{
min-height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navig" id="navhome">
<div class="logo">
<img src="images/logo-4.png" width="70">
</div>
<nav id="navMain" class="navMain">
<ul class="navigation">
<li>Dr Ganesh</li>
<li>Connect</li>
<li>Achievers</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
</div>
<div class="main"></div>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>100)
{
$('.navMain').fadeOut();
}
else
{
$('.navMain').fadeIn();
}
$('.navig').mouseenter(function(){
$('.navMain').show();
});
$('.navig').mouseleave(function(){
$('.navMain').hide();
});
});
</script>
</div>
Site: http://www.zrrdigitalmedia.com
My main nav menu shows up on two lines instead of one on mobile devices. I'm using the latest version of Bootstrap 2.
Here's the HTML:
<div class="row-fluid" id="navRow">
<div class="span12 text-center">
<nav class="container-fluid" name="nav">
<ul class="nav nav-pills center-pills">
<li>
<a name="sites" href="#">SITES</a>
</li>
<li>
<a name="logos" href="#">LOGOS</a>
</li>
<li>
<a name="ads" href="#">ADS</a>
</li>
<li>
<a name="prints" href="#">PRINTS</a>
</li>
<li>
<a name="about" href="#">ABOUT</a>
</li>
<li>
CONTACT
</li>
</ul>
</nav>
</div>
</div>
Here's the CSS:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
h1{
font-size: 40px;
}
h3{
font-size: 14px;
line-height: 20px;
}
.headerText{
font-size: 40px;
}
#headerBG{
padding: 0px;
}
#navRow{
top: 50px;
height: 30px;
}
#topFiller{
height: 100px;
}
.nav-pills > li > a,
.nav-pills > li > a:focus {
font-size: 30px;
padding: 5%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
h1{
font-size: 30px;
padding-bottom: 0px;
}
h3{
font-size: 12px;
line-height: 15px;
}
.thumbnail p {
font-size: 10px;
line-height: 12px;
}
.headerText{
font-size: 24px;
}
#headerBG{
padding: 0px;
height:40px;
}
#navRow{
top: 40px;
height: 25px;
}
#topFiller{
height: 70px;
}
.nav{
margin: 0;
}
.nav-pills > li > a,
.nav-pills > li > a:focus {
font-size: 17px;
padding: 5%;
}
}
Here's the JS:
$(document).ready(function(){
resizeStuff();
$(window).on('resize',resizeStuff);
function resizeStuff(){
if($(window).width()<=600 && $(window).width()>0){
$('#leftFiller').removeClass('span3');
$('#leftFiller').addClass('span1');
$('#rightFiller').removeClass('span3');
$('#leftFiller').addClass('span1');
$('#content').removeClass('span6');
$('#content').addClass('span10');
}
else{
$('#leftFiller').removeClass('span1');
$('#leftFiller').addClass('span2');
$('#rightFiller').removeClass('span1');
$('#leftFiller').addClass('span2');
$('#content').removeClass('span10');
$('#content').addClass('span8');
}
});
I need to make sure the main nav shows up on one line instead of two. When I rotate my phone from landscape to portrait to landscape, or portrait to landscape to portrait, the main nav resizes as it should. But I need this to happen when the site loads. I'm at a loss of ideas as to why this is happening. Can anyone provide assistance please? Thank you.
The navigation only splits up when the screen is narrower than 239 pixels. The resizer does not shrink the text fast enough for the navigation to stay on one line.