So I'm hosting a website from github, and I want to add a blog section to it, therefore, I chose Jekyll.
And the problem is on my main page I add a Blog section to link it to the Jekyll autogenerated html site, and it doesnt show any of the css, just only shows pure html
How does I fix this problem?? Thanks
Picture
<header>
<div class="container">
<nav>
<ul>
<li> Home</li>
<li> About me</li>
<li> Resume </li>
<li> Projects </li>
<li> Hobbies</li>
<li> Blog</li>
</ul>
</nav>
</div>
Related
I am creating a small site for my department. My first page is called the "Home" page and it is located inside a file called index.html. In my body tag I have a header tag where I welcome the users to the site and a paragraph tag saying what this particuylar site is for. This is the HTML code I have from the title tage to the last nav menu I have:
<title>Welcome | Finance Department</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Finance and Accounting Portal</span></h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Welcome to the Finance Department Homepage</h1>
<p>This is an inter-organizational site where employees can find popular documents pertaining to financials.</p>
</div>
<img src="./img/hello.jpg">
</section>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
With this as it is now, the welcome to.. header and the This is an inter-organizational... paragraph tags are clickable and when I click them, it takes me to the FAQ page. I just want the header and the paragraph to be plain text, not clickable links.
When I inspect the header and paragraph tags that are causing issues in my browser, I have an additional <a href="faqs.html"> before my section id="showcase">. When I delete that additional tag, the header & paragraph tags are no longer clickable. But, my html does not have that additional <a href... tag so I'm confused as to where it came from. Does anyone know if how I can correct this for good?
You have not closed Hyperlinks tag in you code.
<li class="current">Home</li>
<li>Accounts Payable</li>
<li>Purchasing</li>
<li>Payroll</li>
<li>Documents</li>
<li>FAQs</li>
Check your code properly.
I am creating a navigation bar on my pages and im having trouble moving from one html doc to another. Its weird to word so i drew a picture ( pic )
Both html documents are within the same folder and i have cleared the cache just in case. The problem is i can move from 'mainpage' to 'about' page but not in reverse. Any tips or comments?
Folder of files
Main page
<div class="icon-menu">
<i class="fa fa-bars"></i> Menu
</div>
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</div>
About page
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Map</li>
<li>Help</li>
</ul>
</nav>
</div>
It should work fine. Possible errors are that filename of mainpage may have an error or if you are using any framework, it may produce some error.
This code is working fine in plain html without any css or js. So provide more information in case.
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
Forgive me, I know this question has already been asked but I wasn't able to find a solution and I've been trying for days with no luck.
I removed the "Pages widget" from Blogger in order to create a custom navigation bar with drop down menus. Everything works fine, except my tabs WILL NOT CENTER. The nav bar itself seems to be centered... just not the tabs. I feel like I've tried every code out there! It's driving me nuts!
http://www.ginachristiansenphotography.com
Please, please help!
Just add center ;) tag in the ul.
<ul id="cssnav">
<center>
<li class="active">Home</li>
<li>About
</li>
<li>Blog
</li>
<li>Archives
</li>
<li>Services
<ul>
<li>General Pricing</li>
<li>Weddings</li>
<li>Dream Scenes</li>
</ul>
</li><li>Galleries
</li>
<li>Contact
</li>
</center>
</ul>
Below CSS will make the tab nav center
#cssnav{text-align:center}
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php