The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Why won't my image show centered? (NSFW)
roccojade
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 6 2016, 04:18 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post Nov 6 2016, 11:20 PM
Post #3


Novice
**

Group: Members
Posts: 29
Joined: 6-November 16
Member No.: 24,917



QUOTE(pandy @ Nov 6 2016, 03:18 PM) *

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 7 2016, 11:14 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,560
Joined: 10-August 06
Member No.: 7



QUOTE(roccojade @ Nov 7 2016, 07:07 AM) *

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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 7 2016, 11:27 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 11 2016, 09:28 AM
Post #9


.
********

Group: WDG Moderators
Posts: 7,560
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 11 2016, 10:26 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
Joined: 9-August 06
Member No.: 6



And with the same case? Most servers are case sensitive.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 11 2016, 03:10 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post Nov 11 2016, 03:41 PM
Post #13


Novice
**

Group: Members
Posts: 29
Joined: 6-November 16
Member No.: 24,917



QUOTE(pandy @ Nov 11 2016, 02:10 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 11 2016, 04:15 PM
Post #14


.
********

Group: WDG Moderators
Posts: 7,560
Joined: 10-August 06
Member No.: 7



QUOTE(roccojade @ Nov 11 2016, 09:41 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 11 2016, 04:32 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 11 2016, 07:13 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
Joined: 9-August 06
Member No.: 6



What can I say? I'm clairvoyant. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 14 2016, 10:59 AM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,581
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
roccojade
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th May 2017 - 09:19 AM