Jump to content

Isaac19

Members
  • Content Count

    19
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Isaac19

  • Rank
    Newbie
  1. 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
  2. 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.
  3. 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.
  4. 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?
  5. 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.
  6. 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.
  7. 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"); }
  8. Perhaps, background-image has finally been made redundant and wordy.
  9. And it worked for both sites, the one I am creating, and the phony one.
  10. 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.
  11. Here is the code for the only page: <!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. I have exhausted all my options. I have even created a completely new website without anything in it except one image, one page, and the css file. I will attach pics here for you to see. It's still not working. And I have tried every syntax or version of background-image I can possible enter. I am attaching files here for you to see. If you see something that I am not seeing, do let me know. I truly appreciate your help as this is driving me absolutely nuts. haha,
  13. Yes I tried that too before you mentioned that here, but it still did not work. And I just tried it again and still doesn’t work. And although w3schools says to use “images/Art 1.jpg” in its examples for the background-image property, many books say ‘images/Art 1.jpg’ and yet other books say “images/Art 1.jpg” but nothing is working. Also, my images folder is not inside the CSS folder. CSS folder which contains the stylesheet.css file, is on the same level as images folder. Thus, CSS and IMAGES are siblings, and they are children of MAIN folder. Remember I said I used images in the about.html and the path was images/Art 1.jpg.
  14. And I already tried deleting everything in the about.html except the Nav bar. I also created a new stylesheet that contained only the background-image property and applied to the about.html page. And it still didn’t work. Ugh
×
×
  • Create New...