Jump to content

Isaac19

Members
  • Content Count

    23
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Isaac19

  • Rank
    Newbie
  1. It would be a relative path, and I am trying to picture the structure of everything relative to the very image in order to retrieve it and make it a background and do this from the CSS file. I think what you referred to above was an absolute path. I am trying to figure out how the image would be accessed from the images folder located at the current web. Ugh “current web” is what’s throwing me off. So, i ll give you the structure of the site I have going on DESKTOP ———Level 1 MY WEBSITES FOLDER ———Level 2 Name of Website Folder ——— Level 3 about.html contact.html products.html Css Folder- styles.css Images Folder img1.jpg img2.jpg img3.jpg So, when w3school says: In this example, the file path points to a file in the images folder located AT THE ROOT of the current web. In order for me to understand this, I want to know what does it mean by CURRENT WEB? Does it mean Level 1? Level 2? Level 3? Clearly, for me, current web would be or mean Level 3, and I have tried it, but it doesn’t work, it doesn’t retrieve the image to make it a background within the body of the website through the body element in CSS. So, what does “CURRENT WEB” mean and what am I doing wrong in relation to the structure I just mentioned?
  2. Well, I know what you mean. But my intention in understanding this finds itself in the context of using the body { background-image: url (“image.gif”); property. You see, within the “____” there are several options, one of which is what I asked above: src="/images/picture.jpg" picture.jpg is located in the images folder at the root of the current web So, what I want to know, is if I am creating a background-image for the body element, where exactly would my picture.jpg be when it is saying “Current web”? What does mean when it says current web? What is the current web? What web? Because as I understand, the current web could mean the many files and folders I have created within main folder where all folders and files are located for the website. Lol its vague in my opinion. I know that every / keeps pointing to the root above it. Like for example, I have a folder with images, and image1.jpg is within this folder, this to get it, I may refer to it as images/image1.jpg where images is the root folder for image1.jpg and if images folder is located within the main folder then you can refer to it as /images/image1.jpg. And so on and so forth, but I want to know what “root of the current web” is. I can’t know this unless what “current web” is referring to and I need to understand this in the context of using images for background-image in body or simply for img within the main code of the body. Btw, thanks for helping.
  3. Mmmmm id need to see a picture. I am a visual person. I understand for the most part, but I still don’t get this one. I have understood the others but not this one. I have tried putting it into practice, but it doesn’t work. .And the reason I have tried that is so I can get a visual of what it means in practice.
  4. So, can someone help me understand, visually, what this means and how to make it work? <img src="/images/picture.jpg"> WHEN picture.jpg is located in the images folder located at the root of the current web What does it mean by "root of the current web"?
  5. lol I see what you mean, and maybe I didn't explain myself correctly as I am new to creating websites and html and css. So, what I want to do has not so much to do with a particular browser like, say, Safari, Opera, or Firefox, but it has to do with what happens when you are resizing a window.For example, with Safari, I press Command and + to enlarge the content within that window as much as it can, the max, or I press Command and - to decrease the content within a window to the minimum it can do. And when I do this with pages like this one I am typing in, the content within them becomes smaller like using a font size but the elements do not move from their places. The elements do disappear after you begin at enlarging at a certain size but when you make them the smallest, everything remains there. Now, I understand when enlarging, some elements will disappear because of the enlargements and that's fine. But the elements stay within their places, they do not move from their blocks or inline-block assigned displays. So, that is what I want to achieve. I wish I could upload a screenshot here, but I am not allowed. I have maxed it out my allowable sharing of screenshot space. But let me try to show you visually 1.) LINK LINK. LINK LINK LINK (normal window...total of 5 links here) When I resize to either smaller or larger, this happens: 2.) LINK. LINK. LINK LINK. LINK (this is what happens when enlarging....no links disappear in my site....but in the ws3 links begin to disappear the larger to enlarge the content of the page...so in essence I am speaking of enlarging the content or making it smaller....not necessarily maximizing or minimizing the window itself...though the links do begin to disappear as you minimize the window.....anyways, the idea is changing the content size as well as have the ability to maximize or minimize a window size and have the elements remain in place as well as prevent them from disappearing). 3.) If I have centered a nav bar and the content in a page: Then everything stays in place centered More specifically, if you want a visual of what I mean, go to the ws3 site: https://www.w3schools.com/html/default.asp and click command and + or command - and see what happens (Safari) I don't think I want it exactly like that because in the ws3 site, the Navigational Bar, as I enlarge the page, some of it's nav links disappear. And I don't want that to happen to my site. Hopefully, I haven't over-explained myself. lol Oh and after typing all this, I went into photoshop and resized images so I could be allowed to upload lol
  6. So, I am creating a website for fun, and I am new to this. I have just added a nav bar and some pictures and have figured out how to center them. Now, my dilemma is making sure that they stay in place when I resize the browser. Can anyone help with this? I have centered the nav bar and the images but that gets moved around when I resize the browser (I am using Safari and FireFox). For example, the nav bar, at the smallest browser size is perfectly centered, but if I make it smaller, everything gets moved around, and I want to make sure things stay the same regardless of browser size.
  7. It has been on that setting since I have been using it. The background-image property was simply not working. And why it wasn't working, I simply do not know. But seeing how sensitive code can be to the most minor of changes or missing things, I can see how everything needs to be in place. But the background-image property is now working. It's frustrating because it I was doing things right by the process of elimination, which on the same day before creating this post, I had used the right choice. I didn't understand it then, but I do now, thanks to you and more reading.
  8. Ugh, so how do I fix that? I was not aware of this. Is this because of the TextWrangler? Or is it because of the UTF-8? And I ll be frank, I wasn't putting in the UTF-8 before...I finally did it at the end, but that still didn't fix things. So, what do I do?
  9. oh and by the way, the very correct URL was the one you had suggested: body { background: url("../images/Art 1.jpg");}, which I used in the DUMMY website. I know in the above message, I didn't type it that way, but I did after and used it with just background property.
  10. Have you tried the code on your side? Because on my side it is just not working. It only worked when I used the background property instead of the background-image property. So, I know that the url is correct. I had been going through every choice of url syntax and nothing worked. And I'd even used everyone of the ones you had suggested before you had suggested them, and I tried again when you suggested them again, but nothing. So, it must be the background-image property...unless there is some hidden code within TextWrangler that predisposes the background-image property to not work? Just brainstorming here.
  11. Here is the code for the DUMMY PAGE. What invisible characters are you referring to? Isn't this literally an almost empty page, devoid of any CSS except for the background-image property as well as the usual elements and the link to the style sheet within that one page? I am confused. Because even in that DUMMY page, DUMMY CSS, it just doesn't work. Also, I am using TextWrangler. In the DUMMY site, I eliminated every element except the necessary/basic ones. And in the CSS there is only one property: background-image. So, what invisible characters could there be? Ugh. <!DOCTYPE html> <html> <head> <title>DUMMY SITE</title> <link rel="stylesheet" type="text/css" href="css/hello.css"> </head> <body> Hello World! </body> </html> And here is the CSS code for that page: body {background-image: url ("../Art 1.jpg"); }
  12. Perhaps, background-image has finally been made redundant and wordy.
  13. And it worked for both sites, the one I am creating, and the phony one.
  14. Actually I just figured out...the background-image property is simply not working. What worked, however, was simply using: body { background: url ("../images/Art 1.jpg"); } I skipped using -image. And that worked.
×
×
  • Create New...