I am trying to make my logo clickable to go back to the homepage but can't seem to get it to work.
Any help appreciated...
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo logo_dark_bg" src="images/logo.png" alt="/">
<img class="logo logo_light_bg" src="images/logo_light.png" alt="/">
</a>
</div>
<!-- logo close -->
Your anchor currently work only from the root so you should update your reference to be from the root as well, so href="/index.html" note the starting "/". The Same applies to your src links:
<div id="logo">
<a href="/index.html">
<img class="logo logo_dark_bg" src="/images/logo.png" alt="logo">
<img class="logo logo_light_bg" src="/images/logo_light.png" alt="logo">
</a>
</div>
Starting an anchor link with a / means it sources from the root so that wherever the above code is based (such as in site.com/currentfolder/file.html) it will always connect with your home page which would typically be found in site.com/index.html.
Currently (without the leading /) the anchor link is looking for site.com/currentfolder/index.html which is almost certainly looking for a file which is not the welcome or home page.
Update
Also you need to ensure that the home page file does actually exist. Typically in your case the home pages may be /index.htm rather than /index.html. Please ensure that the file with the correct filetype HTML reference (.html or .htm) exists and is referenced correctly.
Summary Issues
Anchor href file should be absolute reference starting with /
Anchor href file must exist, with the correct filetype (.html or .htm, etc.).
image src should be absolute reference (starting /).
image alt should be the website name and/or logo description.
Related
I have a problem with linking images and links from HTML file to another HTML file .
The only way I have to link links or images is this way:
from one html to another:
<a class="navbar-brand" href="/index.html">Logotype</a>
of a photo:
<img src="/photos/mouse.png" class="img-fluid rounded mx-auto d-block mt-5" alt="about us">
My question was how do I not use the forward slash on all the links. I am a student and my teacher is forcing me to remove that slash from all links. And if I remove it, it doesn't work, nor does the link to the CSS work.
Put all the photos in same folder. Then you would not need to give / before the file name.
Like this:
<img src='myphoto.jpg'/>
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images
http://dev.epicwebdesign.ca/karen/2-4/a/#antartica
Absolutely positioning the continents, for some reason the links don't go to the proper place. Is this a shortfall of absolute positioning, or am I doing something stupid?
The anchors are around the headers as they should be.
Just realized it's going to the top of the image, not the headers underneath. Why?
The <a name="fragment_name" /> method of defining fragments has been deprecated in favor of using ids. So when you go to http://dev.epicwebdesign.ca/karen/2-4/a/#antartica, the browser thinks you want to go to <div id="antarctica"/>, which is at the top of the page, instead of <a name="antarctica" />, which is at the bottom of the page.
Turns out, in chrome at least, that it considers an ID an internal link, not just a name. The ID's of the images conflicted with the names of the headers. Once the ids were suffixed with "img" it works
To add to cimmanon's answer (and in case your referenced page changes).
Note: Kindly paste your code for future reference.
Change your anchors at the top of the page from:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
to:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
Notice that I've changed the href on all links.
And change your heading below from:
<a id="antartica">
<h1>Antartica</h1>
</a>
to:
<h1 id="antarticaSection">Antartica</h1>
Without the anchor (unless you plan on linking it to something else).
I'm using a custom theme based on "Contoso". I've edited the "Branding" file in my custom theme to show my logo:
#{
var homeUrl = Href("~/");
}
<h1 id="branding">
<a href="#homeUrl">
<img src="Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
</a>
</h1>
I can see the logo fine on regular pages. I've got a list of custom content items on one of my pages though, and when I click on the title of one of the content items in the list to show the details of the item, the logo at the top shows as a broken image... What would cause this?
Use
<img src='#Href("~/Themes/myTheme/Content/Images/logo.png")' alt='Our Logo'/>
Your img url path was not defined as relative to the root. More info here: http://brugbart.com/Articles/paths
This should also work: Notice the '/' at the beginning of the url
<img src="/Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
It is better to use
<img src="#Html.Content("~/Themes/myTheme/Content/Images/logo.png")" alt="Our Logo" />
Use ~/ as sugested, #Html.Content("~/...
The compiler tracks the route and makes the URL from the site root, ie, ~/ is replaced by the site's root.