I am currently teaching myself HTML & CSS, I have bought many books online (hardly read) and I am running into more and more problems. Luckily I have StackOverflow and since you guys helped me out with my last question I thought I should come back and ask another.
All this troubleshooting makes it harder to actually achieve my goal but I am in it for the long run.
I try to write code for at least 2 hours a day while watching tutorials at night. That's my schedule. Once I become more confident in what I am doing then I will put more hours into it.
It's hard to get into the learning process in the beginning, but I know if I keep working hard then anything is possible
So let's solve this,
Thank You!!!!
Youtube Tutorial
timestamp reference 10:00 - 12:00
Screenshot of Icon
Code:
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/gooch/assets/pics/Logo.png"><img src="/gooch/assets/ illustrator/1.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
I wanted my logo to appear inside the Navbar.
It could just be a syntactically error in the html? There seems to be a space in your src attribute. If that doesn’t fix it, there is probably an issue in your stylesheet.
Lack reputation to comment so will say it here.
Try to use developer tool of your browser to see the error about your icon
https://i.stack.imgur.com/o5kvH.png
then head to "Console" tab
https://i.stack.imgur.com/2dhWE.png
you can see here if the image file is missing.
Related
In my google account, for example, when I click their youtube icon, it opens youtube in a browser tab. Is it allowable/possible to have icons open as tab of a tab bar within the html body, directly below the browser bar, having the code of the site of whatever icon is clicked begin a few lines lower?
Having a navigation bar on the top of your page is as follows:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
</nav>
If you meant having links to other pages openning in a new tab in your browser there is an attribute called target to an <a> element, if you give it the value _blank it opens the link in a new tab
So your navbar should look something like this:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">My Awesome NavBar</a>
<ul>
<li>
Youtube
Google
Facebook
</li>
</ul>
</nav>
Hope that answers your question, let me know if it doesn't :)
EDIT:
If you're trying to achieve these sites displayed within your site and keep the bar presented above you might want to take a look at iframe documentation which basically is having another document (html page) within yours
I am trying to link an image to a website i'm building but i am having trouble linking the img. It's on my desktop and i believe i've taken the right steps, but i keep getting a "broken image symbol". Please take a look at the code and let me know if anything is wrong.
<nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
<div class="container">
</div>
<div class="container">
<div class="navbar-header">
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')">
</div>
<div class="row">
<!-- insert rows here -->
</div>
</div>
</div> <!-- End of Container -->
</nav> <!-- End Nav Bar here -->
Ok first moan - indent your code (unless its just from copying and pasting into SO and it messed the format, in which case - sorry for the moan xD)
I have a feeling, the image isn't showing because it's 404'ing - if you open up the browser console / firebug it should show you if it's 404'ing
secondly, you're using images src correctly but is the file structure? Should be something like:
html
index.php
somepage.php
img
img1.jpg
img2.jpg
this means that if you called img in index.php like:
<img src="img/img1.jpg" class="some-class" id="some-id" />
it should show - let me know if it works :)
(notes)
don't have to be a .php file - tis just what I'm used to
You are not closing your tag properly! Do this:
<img class="logo" src="img/mainLogo.gif" ng-click="redirect('#')"/>
Also, make sure that your path is correct, you are using a relative path for your project. Can you post your project structure?
Sorry for this, but I was trying to edit my code for my website, what i was editing was the drop down menu, when i would hover over the link itself the dropdown menu would appear, but when i hovered my cursor over the dropdown menu, the drop down menu would just disappear, i have asked this question before and thankfully someone fixed, i would really appreciate if someone could help me fix the drop down menu, I also have a problem with moving the "======" header to the very top of the website, for some reason it is unable to go to the very top, but essentially can someone please help me fix the drop down menu, Thank You!
ps. I know that this isnt the correct way to implement my code to this website but im not entirely sure how and im looking to bypass this dropdown menu problem quickly, thanks again!
Source code:
http://pastebin.com/Yuxmi9g9
CSS:
http://pastebin.com/QrpJr68C
I wrote your code on https://jsfiddle.net/ssucugx1/
It will be good to show your example more clearly. Your problem can not be solved just with css, or unless you can do that(i.e removes margin between button), it's not a good way.
This problem can be solved easily, if you use javascript, especially jQuery. And I think you are new to web programming(just my guess), using Bootstrap is good answer to you.
Bootstrap Getting Started
Go to the site, and copy and paste CDN code in your <head> and put these code in your project. And your body,
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-default">Dropdown trigger <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Eat Healthy
</li>
<li>Workout
</li>
<li>Advice
</li>
</ul>
</div>
<script>
$('.dropdown-toggle').dropdown();
</script>
That's all. Here is example fiddle. https://jsfiddle.net/oh3ck3Lr/
I saw question about how to add logo to navbar and I tried this
<img src="C:/Users/s003/Documents/Visual Studio 2013/Projects/Model/LOGO.png">
I have already download the picture LOGO.png, and the path I input is where I put that picture. However when I open the web, instead of the LOGO, there is a broken picture icon showed in navbar. Is there anything wrong with my code? I have tried different pictures. Thanks for your help
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="file://localhost/c:/Users/LOGO.png">
<a class="navbar-brand" runat="server" href="~/">Science</a>
</div>
I assume you are viewing your webpage using localhost.(Visual studio server, or apache etc.)
Browsers do not load local file by default due to security reason.
You have to use file path relative to the html file like: ../path/to/images/
or absolute path \path\to\images
You cannot use windows path when viewing pages through server
But if still want to load local files, there are workarounds for every browsers.
For chrome: google allow file access
Example:
Lets assume this is your project path.
C:/Users/s003/Documents/Visual Studio 2013/Projects/Model/
looking at your image path, LOGO image is in the root folder of project i.e Model.
if your html file is also in the same directory, you just have to use
suppose your image file is inside images folder in model folder, then you have to use
and suppose you html file is inside some view folder in model folder, then (../ to go up one directory)
I have built a site that I am trying to make responsive...with Bootstrap CSS it is actually fairly easy - but I am running into a weird problem. Everything works fine...except when I visit one page (the "Settings" page), when I'm holding my iPhone upright...the links stop working in the navbar (I try to click on them but nothing happens). However, if I turn my iPhone, and hold it horizontally, the navbar links start working again. Has anyone ever seen this problem? Here is relevant code:
navbar.html (I am using angular, and it doesn't make sense for the nav buttons to function on one page...and not on another):
<div class="header" ng-controller="NavbarCtrl">
<h2 id="redbox" class="text-muted">[H]</h2><h3 class="text-muted">ackabox</h3>
<ul class="nav nav-pills pull-right">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="currentUser" ng-class="{active: isActive('/settings')}">Settings</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/signup')}">Sign up</li>
<li ng-show="currentUser" ng-class="{active: isActive('/logout')}">Logout</li>
</ul>
</div>
I don't really know what else to include for code...it just seems like a glitch with responsive web design that might have some weird solution I don't know about. Any help would be greatly appreciated.
UPDATE
I posted the site to git: https://github.com/eamonwhiter73/hackabox
Node modules are included...you just have to run MongoDB instance...and then cd to the site directory in your console...and type grunt serve. That will load the site automatically into the browser on localhost:9000.
Also, for MongoDB to function - mind this line in lib/config/env/development.js:
...
uri: 'mongodb://localhost/hackabox'
...
You may have to change this depending on how you have MongoDB set up on your computer (I am on a Mac, but I know that for Windows, it might be a slightly different syntax - or you may be using a username and password...just google it).
Have at it (and check out the cool forum that I built into the site)!
Found the real culprit - oddly enough - it was just a float:left in the css for .header > h2 and .header > h3 - when I removed that it fixed everything - need to figure out a different way to reformat my header though :)