Why won't my image show centered? (NSFW) |
Why won't my image show centered? (NSFW) |
roccojade |
Nov 6 2016, 03:41 PM
Post
#1
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Hello,
What is wrong with my code? The banner image is supposed to be centered on the page. It is flush left. You can view the page at www.roccoandjade.com CODE <img src="Intensify Banner.jpg" width="1100" height="200" alt="Rocco & Jade Teach You How to Intensify Your Sex Life" align="middle"/> Google Chrome Version 54.0.2840.71 (64-bit) iMac OS X Yosemite Thanks, Scott This post has been edited by Christian J: Nov 6 2016, 04:31 PM |
pandy |
Nov 6 2016, 04:18 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Several things. It's outdated. It's better to use CSS for things like that. And align="middle" doesn't do what you think it does. It vertically aligns the image relative the baseline, i.e. a thought line that letters and images stand on.
http://htmlhelp.com/reference/html40/special/img.html Is that image inside a block level element? If so the easiest is to apply 'text-align: center' to that. If you for instance have this. HTML <div id="foo"> <img src="Intensify Banner.jpg" width="1100" height="200" alt="Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> This line in your style sheet does the trick. CODE #foo { text-align: center } http://www.w3.org/Style/Examples/007/center.html |
roccojade |
Nov 6 2016, 11:20 PM
Post
#3
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Several things. It's outdated. It's better to use CSS for things like that. And align="middle" doesn't do what you think it does. It vertically aligns the image relative the baseline, i.e. a thought line that letters and images stand on. http://htmlhelp.com/reference/html40/special/img.html Is that image inside a block level element? If so the easiest is to apply 'text-align: center' to that. If you for instance have this. HTML <div id="foo"> <img src="Intensify Banner.jpg" width="1100" height="200" alt="Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> This line in your style sheet does the trick. CODE #foo { text-align: center } http://www.w3.org/Style/Examples/007/center.html Thanks Pandy! |
roccojade |
Nov 7 2016, 01:07 AM
Post
#4
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
So as Panda suggested, I input the CSS code and style sheet. Now I have a box that goes across the width of the page and my image is missing.
My web code: CODE <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Rocco & Jade</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="banner"> <img src="images/Intensify Banner.jpg" width="1100" height="200" alt="Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> <hr><h1>Welcome to our brand new website! Let us show you how to get our product(s) for free!</h1> <h2>We are Rocco and Jade Martinez. We are very innovative, so over the five years we have been married, we have researched and experimented a lot with our sexuality. As a result, we have found some obscure, yet powerful techniques to intensify each others orgasms.</h2> <p><strong>Section 1, Pleasing Her </strong></p> <ul> <li>Chapter 1, Foreplay</li> <li>Chapter 2, Clitoral Stimulation</li> <li>Chapter 3, G-Spot Stimulation</li> </ul> <strong>Section 2, Pleasing Him</strong> <ul> <li> <p>Chapter 4, The Squeeze Method: Long, Back-to-Back Male Orgasms</p> </li> </ul> <strong>Section 3, Exercises</strong> <ul> <li> Chapter 5, Pubic Strengthening</li> <li> Chapter 6, Learning Each Others Zones</li> </ul> <p> </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="ZBQ4FR7F9GP5L"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </body> </html> My style sheet: CODE @charset "UTF-8"; /* CSS Document */ banner { text-align: center } Thanks so much for your help, Scott |
Christian J |
Nov 7 2016, 11:14 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Now I have a box that goes across the width of the page The DIV? That's the default for block-level elements like DIV, H1, P etc. QUOTE and my image is missing. The image URL is changed to CODE images/Intensify Banner.jpg before it was CODE Intensify Banner.jpg BTW I recommend not using spaces in file names, use hyphens or underscores instead. If you do use spaces, they should be encoded as %20 in URLs. QUOTE My style sheet: CODE @charset "UTF-8"; /* CSS Document */ banner { text-align: center } An ID selector must begin with a # sign, in this case #banner. See also http://htmlhelp.com/reference/css/structure.html |
pandy |
Nov 7 2016, 11:27 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If it's the DIV you mean, give it the same width as the image and instead of using text-align to center the image within the DIV you center the hole DIV with auto left and right margins (described at the page I linked to before).
CODE #banner { width: 1100px; margin-left: auto; margin-right: auto } Your CSS can't possibly have worked since you didn't have a hash sign before 'banner'. Just banner refers to an element named banner <banner>. To make it refer to an id you need the hash prefix. |
roccojade |
Nov 7 2016, 12:39 PM
Post
#7
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Thanks, I will try to fix these tonight.
|
roccojade |
Nov 11 2016, 08:28 AM
Post
#8
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Ok I know I am getting close. As far as I can tell, I have formatted my code to match Pandy's suggestions and Christian I added "#" before Banner. The image is centered but invisible, although it shows up fine in Dreamweaver.
HTML: CODE <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Rocco&Jade</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="banner"> <img src="images/Intensify-Banner.jpg" width="817" height="252" alt="Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> <h2>test</h2> </body> </html> Stylesheet: CODE @charset "UTF-8"; /* CSS Document */ #banner { text-align: center } body {font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black",sans-serif} h1,h2,h3,h4,h5,h6 { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; letter-spacing: 5px; } This post has been edited by roccojade: Nov 11 2016, 08:34 AM |
Christian J |
Nov 11 2016, 09:28 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Is the file name exactly "Intensify-Banner.jpg" (with a hyphen), and is it located in the directory "images"? Note that case matters also.
|
pandy |
Nov 11 2016, 10:26 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
And with the same case? Most servers are case sensitive.
|
roccojade |
Nov 11 2016, 02:58 PM
Post
#11
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Okay, now I am getting concerned.
The file name was exactly "Intensify-Banner.jpg" (with a hyphen), and is it located in the directory "images". Since case matters also, I made everything lower case, in the saved file and in the code. I also deleted my cache again. Still the same problem. |
pandy |
Nov 11 2016, 03:10 PM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
And is the images folder inside the folder where the HTML is? What happens if you go to the image directly with a browser, i.e. type the whole URL to the image in the address bar.
It would be easier if you could link to the page so we could see for ourselves. |
roccojade |
Nov 11 2016, 03:41 PM
Post
#13
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
And is the images folder inside the folder where the HTML is? What happens if you go to the image directly with a browser, i.e. type the whole URL to the image in the address bar. Yes, the images folder is in the same folder as HTML. I suppose you mean this? http://www.roccoandjade.com/images/intensify-banner.jpeg That only leads to a 404 error page. QUOTE It would be easier if you could link to the page so we could see for ourselves. I am not sure I am doing this right. Sorry for my semi-computer illiteracy! I hope you guys can help me. I need to get this website built soon. Thanks, Scott |
Christian J |
Nov 11 2016, 04:15 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Yes, the images folder is in the same folder as HTML. I suppose you mean this? http://www.roccoandjade.com/images/intensify-banner.jpeg That only leads to a 404 error page. I get a 404 even for http://www.roccoandjade.com/images/ which suggests the directory doesn't exist. Also note that .jpg and .jpeg are different extensions. |
pandy |
Nov 11 2016, 04:32 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yeah, you should look again where you've put that image.
I don't know how things are sorted on your server, but usually there's a directory above the one that's accessible from the web, the one you "land in" when you FTP. It's not uncommon to place web files there by mistake instead of in the folder dedicated for that. Sometimes the whole site is duplicated there. You think you have uploaded the whole lot with your updates. And you have, only to the wrong folder. The web folder may be called www or public_html, but it could be called anything. Usually something that gives you a hint about what it's for though. |
roccojade |
Nov 11 2016, 06:32 PM
Post
#16
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
Yes!
Thanks, Pandy and Christian J! Pandy I had my image on the server in my root directory, and on my computer in the images folder. Appreciate you guys! Scott |
pandy |
Nov 11 2016, 07:13 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What can I say? I'm clairvoyant.
|
roccojade |
Nov 14 2016, 02:38 AM
Post
#18
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
So I had my images showing up fine and I don't even know what happened. So I came back here to review what you guys have said already. So my image names are lower case with hyphens between words. They are in the folder roccoandjade.com/images. The only thing I can think of is someone stated in a previous thread that the size of the original image should be the same that I type in my code.
So the original image rocco&jade-book-illustration.png when I imported it had dimensions of 2172px x 1277px. I thought that can't be right, but I went into illustrator and cut it way down. It now has dimensions of 71.6px x 43.13px. Yet it continues to import into DW at 2172px x 1277px. Domain is roccoandjade.com. What is going on? Code: CODE <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Rocco&Jade</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <!--Banner--> <div id="banner"> <img src="images/rocco-&-jade-final-text.png" width="800" height="110" alt="Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> <!-- End of Banner--> <!--Container--> <div id="container"> <p1>Teach You How to Intensify<br> Your Sex Life</p1> <!--"Cutting Edge Information" Table--> <table width="800" border="0"> <tbody> <tr> <td width="194"><hr></td> <td width="264"><p2>Cutting Edge Information!</p2></td> <td width="194"><hr></td> </tr> </tbody> </table> <!--End of "Cutting Edge Information" Table--> <h1>Limited Time Offer!</h1> <h2>Get all modules at 75% off!<br> Let us show you how to get them for free!</h2> <!--The Book Image--> <div id="bookimage"> <img src="images/rocco&jade-book-illustration.png" width="510" height="298" alt="Get the Book, Rocco & Jade Teach You How to Intensify Your Sex Life"> </div> <!--End of The Book Image--> <img src="images/rocco&jade-book-illustration.png" width="2172" height="1277" alt=""/> <h4>Rocco</h4> <h3>Hello, my name is Rocco Martinez. I'm here with my beautiful wife, Jade. We want to show you some things you won't want to miss!</h3> <h5>Jade</h5> <h3>text</h3> <h4>Rocco</h4> <h3>text</h3> <h5>Jade</h5> <h3>text</h3> <h4>Rocco</h4> <h3>text</h3> <h5>Jade</h5> <h3>text</h3> <h4>Rocco</h4> <h3>text</h3> <h5>Jade</h5> <h3>text</h3> <h4>Rocco</h4> <h3>text</h3> <h3>text</h3> <h6>test</h6> </div> <!--End of Container--> </body> </html> CSS: CODE @charset "UTF-8"; /* CSS Document */ #banner { text-align: center } #bookimage { text-align: center } body { font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", sans-serif; } div#container { width:900px; margin: 0px auto; background: #fff; text-align: center; } p1 { text-align: center; font-family: "Times New Roman", Times, serif; font-size: 36px; font-weight: 900; } p2 { text-align: center; font-family: Verdana, san-serif; font-size: 18px; font-weight: 900; font-variant: small-caps; } hr { } h1 { font-family: Cambria, sans-serif; letter-spacing: 0px; text-align: center; color: #ff0000; font-size: 56px; text-shadow: h-Offset*: 2px, v-Offset*: 2px #777777; } h2 { font-family: Verdana, Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, sans-serif; letter-spacing: 0px; font-size: 30px; color:#000000; } h3 { font-family: "times new roman",serif; letter-spacing: 0px; font-size: 24px; text-indent: 50px; margin-top:auto; text-align: left; } h4 { font-family: Verdana, sans-serif; letter-spacing: 0px; font-size: 30px; color: darkgoldenrod; font-weight: 900; text-align: left; margin-bottom: auto; margin-top: auto; } h5 { font-family: Verdana, sans-serif; letter-spacing: 0px; font-size: 30px; color: mediumseagreen; font-weight: 900; text-align: left; margin-bottom: auto; margin-top: auto; } h6 { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; letter-spacing: 5px; } This post has been edited by roccojade: Nov 14 2016, 02:40 AM |
pandy |
Nov 14 2016, 10:59 AM
Post
#19
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Same as before. The image isn't there.
QUOTE The only thing I can think of is someone stated in a previous thread that the size of the original image should be the same that I type in my code That's for other reasons. Mainly so the image won't be distorted. And even if you use the same aspect ratio but use a large image and size it down with HTML it slows the page down compared to if you had resized it with an editor. But the image still shows up. But the ampersand should be escaped with %26. http://www.blooberry.com/indexdot/html/top...urlencoding.htm |
roccojade |
Nov 14 2016, 08:36 PM
Post
#20
|
Novice Group: Members Posts: 29 Joined: 6-November 16 Member No.: 24,917 |
What do you mean they are not there? I have not moved them, and I have rechecked to ensure they are there.
The paths are: website/images/rocco-&-jade-final-text.png website/images/rocco&jade-book-illustration.png" Looking at it from your viewpoint, I get a 404 error when I go to: http://www.roccoandjade.com/images/rocco-&...-final-text.png or http://www.roccoandjade.com/images/rocco&a...llustration.png Yet I know that the files are in that folder. Is there anything else that could cause this error? This post has been edited by roccojade: Nov 14 2016, 08:38 PM Attached thumbnail(s) |
Lo-Fi Version | Time is now: 25th April 2024 - 10:41 PM |