I have a private (not public) website. In this website I want to use Lightbox2 (image gallery), but when I run lightbox2, the links of my home page and my background picture don't work.
There is a style.css in my template, and there is also one in lightbox2. I think this is the problem, but I'm not sure. Can anyone help me please?
Simply load in your own stylesheet and the one lightbox uses in the header
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/my_style.css">
At the end of the page you must also load in the javascript that comes with lightbox:
<script src="js/lightbox-plus-jquery.js"></script>
Don't forget to set the right attribute for all your pictures:
<a href="./pic.jpeg" data-lightbox="lightbox">
<img src="./pic.jpeg" style="width:100%">
</a>
Related
I created a portfolio using github pages but the images and the css in the site won't load.
<link rel="stylesheet" href="../css/style.css">
<img src="../avatar/avatarmakercolor.png" class="avatar">
This how folders are organised
docs
index.html
avatar
avatarmakercolor.png
css
style.css
I have tried to change PNG to png and remove all the capital letters from my files but nothing has changed.
You are using the wrong path.
Change the link tag to this:
<link rel="stylesheet" href="../css/style.css">
And the image tag to this:
<img src="../images/image.png" class="avatar">
This is based on the info you provided about the folder structure. Change as needed
I'm a beginner, alright?
I'm trying to build an HTML page that needs social media logos. I have all the ones I need except for good reads.
https://www.goodreads.com/
I can't find how to build one in CSS. I've tried to copy the image, that doesn't work. Does anyone else know how to build a goodreads tag?
you can download a goodreads svg at Goodreads, open the file in your editor, copy the content and put it where you need it in your HTML file.
On goodreads.com, copy the image address and paste in into a new tab. If the new tab contains only the image, copy the image address again and paste it between the src tabs. Otherwise, keep copying the image address from the new pages.
Depends if you want to just put in the logo or make the logo a link to your goodreads account
For just the image you could use
<html>
<head>
<!--Put your metadata and link css here-->
</head>
<body>
<img src="https://i.stack.imgur.com/g0KBL.png" alt="Goodreads">
</body>
</html>
And for a social media link I recomend using a icons library like FontAwesome
<html>
<head>
<script src="https://kit.fontawesome.com/393a279287.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="fa fa-goodreads"></div>
</body>
</html>
Anyways good luck!
I am trying to create a custom logo for my website through a .png file, as soon as I type in the code and test run it through local host, the file does not display the logo image.
Renaming the .png file
Checking for spelling
Checking for capitalization
Tried adding a "-" inbetween ("holyland-logo.png")
Tried adding a color brown ("images/brown-holylandlogo.png")
<html>
<head>
<title>HolyLand Souveniers</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top-nav-bar">
<div class="search-box">
<img src="images/holylandlogo.png" /> (This is causing the issue)
<input type="text" class="form-control">
<!--This is a search box -->
<span class="input-group-text"><i class="fa fa-search"></i></span>
<!--Search Icon -->
</body>
</html>
I expected the logo to appear on the top left of the website, but is it not doing anything, is it only giving me an X with no .png logo picture.My file pathing and folders as requested in the comments
If you don't put an / at the beginning of the image URL (relative path) the server expect to have the images folder next to your index point (index.html/php) but if you put one at the beginning (absolute path) it tries to go from the root of your Apache/nginx. Just to clarify.
In your case that means, you need to make sure the images' folder is next to your index.html or index.php.
Another tip: avoid spaces between the = in HTML and place your style after external styles in case you want to override parts of those.
But please give us more information about your environment, so we can help better:
Where is you site hosted (locally/provider)
Which is the URL you tried to access or file
Your folder structure
Your setup (OS, apache/nginx, PHP...)
According to your screenshot the HTML file and the PNG file are in the same folder, so your file path is wrong: In the img tag, instead of src="images/holylandlogo.png" just write src="holylandlogo.png" .
I've clicked on your public link and looked at my Chrome console logs:
Failed to load resource: the server responded with a status of 404 (Not Found)
for following resources:
style.css
holylandlogo.png
favicon.ico
https://apollo.waketech.edu/~smbannoura2/holylandlogo.png shows the image, so
<img src="holylandlogo.png">
should work for your html page.
For style.css and favicon.ico, check the file path as suggested in previous answers
I solved the problem by adding <img src="holylandlogo.png"> instead of what i originally had <img src="images/holylandlogo.png" /> since i had the logo in the same file. Thanks to a reply in the comment that Esdee stated. For more details you can read throughout the post on what other things i tried.
you need to put the images folder with the image in the source files of your website. Otherwise, use the original website link for the image
I'm creating an interface using Bootstrap and CSS,but when I run this page without including the project in nodejs program the page appears very well but when I include the bootstrap folder in nodejs program,some icons didn't appear such as the logout icon and login icon(I got a recatngle in place of the suitable icon).Does any one know what is the problem??
Are you using font awsome for the icons? if so have you included those in you code ie,the following code into the head section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">?
I added this two tag to the header:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I am trying to call a link from a page which points to another part of the page.
This is the code I am using to do this:
<img src="Dress1.jpg" alt="Pic1"></img>
The problem is that when I remove the css stylesheet links from the page, in other words:
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
It actually works but with the above links, it doesn't work.
Instead all it does is change the address (by adding #product) and doesn't display the image requested in
I'm not sure what could be wrong.
Thanks.
C.
Depending on which revision of jQTouch that you are using, you will need to add an animation class to your link like slide/flip/disolve in order to actually cause a transition from one psuedo page to the next.
<img src="Dress1.jpg" alt="Pic1"/>
not sure what you are trying to do. in your example, the image is in the link, not the target div. from your description it sounds like you might want something like
See my image
<div id="product"><img src="Dress1.jpg" alt="Pic1"/></div>