Okay, I feel totally stupid posting this. I am not sure if it is classified as a programming question, but its close enough. In my web application, one page uses relative links like this:
<img src='images/start.png' />
My other page is in exactly the same directory, but firebug says that the above code equals http://localhost/projectFolder/viewtrip.php/images/start.png. I am confused, and I feel like a total idiot. Is there something I am obviously doing wrong?
Try:
<img src='./images/start.png' />
is there a base tag in the HTML somewhere?
like this? <base href="http://localhost/myfolder/viewtrip.php" />
(there shouldn't be it doesn't make sense but I can't think of something else)
p.s. where in firebug do you see this path?
When you specify a relative path, you are saying the browser that that element is in that place using the current document as base. Where is the images directory in your website? If you put a / at the front of the path, you are saying the browser that the element can be found using the root from your website as base. The only real value I have found to use ./ or ../ in front of paths is to have a proper rendering on preview while editing the file and some times it causes trouble (for me) at release time.
Related
I'm building my first website using HTML and CSS on Visual Studio 2019, using a YouTube tutorial as well as my own small amount of knowledge. Except when I went to insert an image using:
<img src="image.jpg">
it doesn't find it.
I have also tried using the image source path thingy using:
<img src="C:/Users/Josh/Documents/HTML/BusinessWebsite/image.jpg">
but this also doesn't work. Does anybody know how to fix this?
Use the relative paths. The path is taken from where you have your html file. Like when you're moving between folders in the command line.
Well, you should have provided some more information, because your syntax seems to be perfect. There you can try out two things :
The first thing I can figure out that might have gone here would be that your image extension might not be correct, which means it might be something else than jpg(may be jpeg or png).
Use relative paths.
Example
I'm doing some experiments to see the potential pros&cons of embedding css in HTML. I have mirror of websites locally. I tried to embed external css into HTML using "style type='text/css'" tag. Its working for few css files but for some css webpage is not rendered exactly as it used to be before embedding. I'm not sure whats exactly causing this problem.
Any suggestions/help please.. Pictures before and after ebedding.
Problem is not particular to this site. I'm seeing different rendering problems for different websites. I want to know whats the difference of embedding vs referring external css?
The problem you are facing is mainly caused by relative paths being invalid once you embed your css. Let assume that the image Evil_Kitty_Of_Darnkess.JPG is one level higher than the css file. A rule inside the file will be able to use the relative path like this:
background-image: url(../Evil_Kitty_Of_Darnkess.JPG);
Once you embed those rules directly in the page, you must reference paths according to the new base path in which the page is located. If the image isn't exactly one level higher, it will fail to resolve it. You will see something like in your screenshot: Nothing at all.
I have the following problem: We have two sites, one community page based on elgg and a second page based on typo3. What we want to do is create a simple iframe in a typo3 subpage, which contain the community page.
Since the community page has its own page header with logos etc, it looks stupid. I tried to delete everything expect the , but this is not possible because the iframe source looks like "http://myiFramePage.org", so they do not have the same origin.
Fortunately, the two systems are on the same server, but i was not able to create a relative url. Could you help me to find the right url?
/
public_html
elgg
index.php
typo3
index.php
Also i would like to ask what do you think? Does it make sence to cut out the body/most important parts of the page?
If you just cutout the body from elgg and call it inside typo, it wont work. Because its missing css, essential js files etc.
The best solution is to create a similar theme for the community site too. This will make both site looking the same and you wont loose any functionality of community site.
I don't like solutions which hack things, they have a tendency to break, and are virtually untestable. I would try to customize the internal page from within the system (as suggested in Webgalli's answer) to make it look like the outer page.
I am trying to display some photos on a page, and it is breaking the styling of the page. Here is an example. See on the right side of the page, the images are broken, and they actually get displayed over other HTML elements like an H2 tag which says "coming soon"
Example here:
http://www.comehike.com/outdoors/parks/park.php?park_id=15
Any idea how to fix this? The problem is worse on Google Chrome
The html markup is a bit confusing, for one they all use http://wwww reference but they are hosted on the same server. Maybe I missed something but you can probably use a local site path relative to the web page, something that would be simplified sort of like the following non working code example:
<span style="margin: 3px;">
<a href="hikes/hike_image.php hike_photo_id=&photo_path=img/hiking_photos/108_2/full_cannon2.jpg">
<img src="img/hiking_photos/108_2/small_cannon2.jpg"
style="border: none;"></a>
</span>
This would make for a faster load time, save bandwith, and just be plain more efficient in my very humble opinion. Usually one uses http:// in image links when they are on a remote site.
There are multiple broken images when I load the page, it seems maybe it is the script that generates the markup that is breaking the layout.
To fix this, I would rip out the whole image-generation thing and simplify the mark-up just to have it work 'statically', ie without scripts to output images and/or markup.
Then, once it works in a static manner I would attack dynamic output, though I rarely use such techniques because I feel most of the time they are overkill for the small projects I maintain.
Happy coding & good day friend.
Update:
Storing the image path in a variable for easy site-wide changes:
One (simple) option is to use good old php for your image paths. IE, in main script:
define('BASE_PATH',realpath('.'));
define('IMG_PATH', BASE_PATH . "/img/);
// to inlude an image::
<img src="<php echo IMG_PATH; ?> pic.jpg" />
This way, changing IMG_PATH would change all the img tags that use the variable, and by using BASE_PATH this would work even if you move or copy the site on a different host.
Look up basename() function the man and related functions for more tips and examples like this.
I am using HTML and would like to know why when I enter
<a class="button flip" href="index2.html">List View</a>
it tries to find the original_page_url#index2.html
thanks
Charlene
From that code that you've put it shouldn't be doing that which means something else on your page is doing that. Javascript is the most likely culprit since it can easily change where your link actually goes. There may be other ways this could happen but I'd look at your javascript.
If you post a full page repro of the problem that we can use to understand the problem better that would help a lot. Preferably cutting out all the superfluous stuff on your page so its not too big. ;-)
Without further information from you, the only three things I can think of that would cause that are:
1) Your href in your question is different than your actual source, and there is a # sign before the index2.html in the a link. However, I'll assume you gave the correct href code above, in which case...
2) Some javascript on the page is automatically making that link act as an internal page link and adding the # itself. Make sure you don't have any javascript on the page that might be doing that.
3) The server has a rewrite rule that affects your links and appends them with the # sign. That would be rather odd, however.