How do I edit this CSS?

  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

This is my HTML.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Invention Template</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="content">
    <div id="header">
     <div id="logo">
    CHURCH IMG HERE
     </div>
     <div id="links">
        <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Youth Group</a></li>
         <li><a href="#">Sermans</a></li>
         <li><a href="#">Contact Us</a></li>
        </ul>
     </div>
    </div>
    <div id="mainimg">
     <h3>Kipling Baptist Church</h3>
     <h4></h4>
    </div>
    <div id="contentarea">
     <div id="leftbar">
        <h2>Welcome</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id nisl nec leo congue fringilla. Suspendisse potenti. Phasellus sed velit eget sapien interdum ultrices. Nullam nec magna. Maecenas cursus. Etiam sapien neque, auctor eu, volutpat at, condimentum et, odio. Morbi id lorem. Nam urna ante, venenatis sed, molestie eu, dictum sit amet, tellus. Phasellus pellentesque magna vitae elit. In dignissim eleifend odio. Curabitur at libero. Donec est justo, pellentesque eu, vulputate feugiat, ultrices quis, nunc. Sed neque. Nulla egestas, risus id consectetuer ultrices, ante turpis posuere ligula, ac pulvinar tortor dui ac odio. Curabitur auctor urna sed purus. In varius.</p>
        <br />
        <p>Nulla sit amet magna non enim posuere porttitor. Vestibulum ante. Nam et nulla vestibulum libero facilisis aliquet. Vivamus ante velit, facilisis eu, pulvinar nec, ultricies vel, sem. Morbi ac velit. Sed est. Proin vehicula. Maecenas ac pede. Fusce rhoncus. Maecenas at quam. Aenean nunc felis, elementum vel, faucibus vitae, nonummy et, tellus. Nulla auctor venenatis urna. Donec accumsan urna sed libero. Fusce at mi eu leo sollicitudin adipiscing. Ut metus purus, gravida nec, scelerisque quis, venenatis non, ante. Aliquam a leo vel libero tempus scelerisque. Morbi iaculis. Ut libero. </p>
        <br />
        <a href="#">more ></a><br />
        <br />
     </div>
     <div id="rightbar">
        <h2>latest news</h2>
        <p><span class="orangetext">February 6th 09</span><br />
         Meet at the ******* house 7:30 til 10:00 and get ROOTED.
     A time to look at Blizzard, God’s word, talk about Daniel/Danielle, and spend time together.
     *If anyone bought the new Life Support CD, would you please bring it!!! Thanks.
         <br />
         <br />
         <span class="orangetext">February 13th 09</span><br />
         Meet at the ******* house 7:30 til 10:00 and get ROOTED.
     OK, so let’s make it a RED night. Let’s see what you’ve got!
     Subject: MY BODY, YOUR HOME
     Get ready to dive into God’s word.

         <br />
         <br />
         <span class="orangetext">February 20th 09</span><br />
         Meet in Kipling from 7:30 til 10:00.
     February 22nd is YOUTH SUNDAY …
     So we’ll … sing a few songs, do a little prep, act a little skit, and so on …
         </p>
     </div>
    </div>
    <div id="bottom">
     <div id="email"><a href="mailto:************">Contact *******</a></div>
     <div id="validtext">
     </div>
    </div>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Invention Template</title>
  6. <link href="css/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10. <div id="content">
  11.     <div id="header">
  12.      <div id="logo">
  13.     CHURCH IMG HERE
  14.      </div>
  15.      <div id="links">
  16.         <ul>
  17.          <li><a href="#">Home</a></li>
  18.          <li><a href="#">Youth Group</a></li>
  19.          <li><a href="#">Sermans</a></li>
  20.          <li><a href="#">Contact Us</a></li>
  21.         </ul>
  22.      </div>
  23.     </div>
  24.     <div id="mainimg">
  25.      <h3>Kipling Baptist Church</h3>
  26.      <h4></h4>
  27.     </div>
  28.     <div id="contentarea">
  29.      <div id="leftbar">
  30.         <h2>Welcome</h2>
  31.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id nisl nec leo congue fringilla. Suspendisse potenti. Phasellus sed velit eget sapien interdum ultrices. Nullam nec magna. Maecenas cursus. Etiam sapien neque, auctor eu, volutpat at, condimentum et, odio. Morbi id lorem. Nam urna ante, venenatis sed, molestie eu, dictum sit amet, tellus. Phasellus pellentesque magna vitae elit. In dignissim eleifend odio. Curabitur at libero. Donec est justo, pellentesque eu, vulputate feugiat, ultrices quis, nunc. Sed neque. Nulla egestas, risus id consectetuer ultrices, ante turpis posuere ligula, ac pulvinar tortor dui ac odio. Curabitur auctor urna sed purus. In varius.</p>
  32.         <br />
  33.         <p>Nulla sit amet magna non enim posuere porttitor. Vestibulum ante. Nam et nulla vestibulum libero facilisis aliquet. Vivamus ante velit, facilisis eu, pulvinar nec, ultricies vel, sem. Morbi ac velit. Sed est. Proin vehicula. Maecenas ac pede. Fusce rhoncus. Maecenas at quam. Aenean nunc felis, elementum vel, faucibus vitae, nonummy et, tellus. Nulla auctor venenatis urna. Donec accumsan urna sed libero. Fusce at mi eu leo sollicitudin adipiscing. Ut metus purus, gravida nec, scelerisque quis, venenatis non, ante. Aliquam a leo vel libero tempus scelerisque. Morbi iaculis. Ut libero. </p>
  34.         <br />
  35.         <a href="#">more ></a><br />
  36.         <br />
  37.      </div>
  38.      <div id="rightbar">
  39.         <h2>latest news</h2>
  40.         <p><span class="orangetext">February 6th 09</span><br />
  41.          Meet at the ******* house 7:30 til 10:00 and get ROOTED.
  42.      A time to look at Blizzard, God’s word, talk about Daniel/Danielle, and spend time together.
  43.      *If anyone bought the new Life Support CD, would you please bring it!!! Thanks.
  44.          <br />
  45.          <br />
  46.          <span class="orangetext">February 13th 09</span><br />
  47.          Meet at the ******* house 7:30 til 10:00 and get ROOTED.
  48.      OK, so let’s make it a RED night. Let’s see what you’ve got!
  49.      Subject: MY BODY, YOUR HOME
  50.      Get ready to dive into God’s word.
  51.          <br />
  52.          <br />
  53.          <span class="orangetext">February 20th 09</span><br />
  54.          Meet in Kipling from 7:30 til 10:00.
  55.      February 22nd is YOUTH SUNDAY …
  56.      So we’ll … sing a few songs, do a little prep, act a little skit, and so on …
  57.          </p>
  58.      </div>
  59.     </div>
  60.     <div id="bottom">
  61.      <div id="email"><a href="mailto:************">Contact *******</a></div>
  62.      <div id="validtext">
  63.      </div>
  64.     </div>
  65. </div>
  66. </div>
  67. </body>
  68. </html>



This is my CSS

Code: [ Select ]
html, body {
    margin: 0px;
    padding:0px;
    background-image:url(../images/bg.gif);
}

h1, h2, h3, h4, h5, h6, p, form {
    margin: 0px;
    padding:0px;
}

#wrapper {
    width:800px;
    margin:0px auto;
    background-color:#FFF;
}

#content {
    width:778px;
    margin:0px auto;
    background-image:url(../images/bg_header_top.gif);
    background-repeat:repeat-x;
    background-position:top;
}

#header {
    height:96px;
}

#logo {
    width:258px;
    float:left;
}

#logo h1{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#F76B0C;
    font-weight:normal;
    text-decoration:none;
    padding-left:40px;
    padding-top:30px;
}

#logo h4 {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#808080;
    font-weight:normal;
    text-decoration:none;
    padding-left:75px;
}

#links ul {
    margin:0px;
    padding-top:67px;
}

#links li{
    float:left;
    list-style-type:none;
    width:129px;
    height:25px;
    text-align:center;
    background-color:#F4A80A;
    border-left:1px solid #FFF;
    padding-top:4px;
}

#links a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}

#links a:hover{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
}

#mainimg {
    background-image:url(../images/main_img.jpg);
    background-repeat:no-repeat;
    height:132px;
    text-align:right;
}

#mainimg h3 {
    font-family:"Trebuchet MS";
    font-size:48px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:20px 40px 0px 0px;
}

#mainimg h4 {
    font-family:"Trebuchet MS";
    font-size:18px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px 0px 0px;
}

#contentarea {
    clear:both;
    padding:25px 0px;
}

#leftbar {
    float:left;
    width:539px;
    border-right:1px solid #BCBDBC;
}

#leftbar h2{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#EE8907;
    font-weight:normal;
    text-decoration:none;
    padding-left:40px;
    padding-bottom:5px;
}

#leftbar p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px;
}

#leftbar a {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#EE8907;
    font-weight:bold;
    text-decoration:none;
    padding:0px 40px;
}

#leftbar a:hover {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    padding:0px 40px;
}

#rightbar {
    float:left;
    width:237px;
}

#rightbar h2{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding-left:25px;
    padding-bottom:5px;
}

#rightbar p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding:0px 25px;
}

.orangetext {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#EE8907;
    font-weight:bold;
    text-decoration:none;
}

#bottom {
    clear:both;
    height:32px;
    padding-top:25px;
}

#email {
    float:left;
    width:500px;
    background-color:#9BBE00;
    height:27px;
    padding-top:5px;
}

#email a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
    padding:0px 40px;
}

#email a:hover{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px;
    
}

#validtext {
    float:left;
    width:278px;
    background-color:#9BBE00;
    height:27px;
    padding-top:5px;
}

#validtext p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    text-align:right;
    padding-right:35px;
}

#validtext a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
}

#validtext a:hover{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}
  1. html, body {
  2.     margin: 0px;
  3.     padding:0px;
  4.     background-image:url(../images/bg.gif);
  5. }
  6. h1, h2, h3, h4, h5, h6, p, form {
  7.     margin: 0px;
  8.     padding:0px;
  9. }
  10. #wrapper {
  11.     width:800px;
  12.     margin:0px auto;
  13.     background-color:#FFF;
  14. }
  15. #content {
  16.     width:778px;
  17.     margin:0px auto;
  18.     background-image:url(../images/bg_header_top.gif);
  19.     background-repeat:repeat-x;
  20.     background-position:top;
  21. }
  22. #header {
  23.     height:96px;
  24. }
  25. #logo {
  26.     width:258px;
  27.     float:left;
  28. }
  29. #logo h1{
  30.     font-family:"Trebuchet MS";
  31.     font-size:26px;
  32.     color:#F76B0C;
  33.     font-weight:normal;
  34.     text-decoration:none;
  35.     padding-left:40px;
  36.     padding-top:30px;
  37. }
  38. #logo h4 {
  39.     font-family:"Trebuchet MS";
  40.     font-size:11px;
  41.     color:#808080;
  42.     font-weight:normal;
  43.     text-decoration:none;
  44.     padding-left:75px;
  45. }
  46. #links ul {
  47.     margin:0px;
  48.     padding-top:67px;
  49. }
  50. #links li{
  51.     float:left;
  52.     list-style-type:none;
  53.     width:129px;
  54.     height:25px;
  55.     text-align:center;
  56.     background-color:#F4A80A;
  57.     border-left:1px solid #FFF;
  58.     padding-top:4px;
  59. }
  60. #links a{
  61.     font-family:"Trebuchet MS";
  62.     font-size:11px;
  63.     color:#fff;
  64.     font-weight:normal;
  65.     text-decoration:none;
  66. }
  67. #links a:hover{
  68.     font-family:"Trebuchet MS";
  69.     font-size:11px;
  70.     color:#fff;
  71.     font-weight:normal;
  72.     text-decoration:underline;
  73. }
  74. #mainimg {
  75.     background-image:url(../images/main_img.jpg);
  76.     background-repeat:no-repeat;
  77.     height:132px;
  78.     text-align:right;
  79. }
  80. #mainimg h3 {
  81.     font-family:"Trebuchet MS";
  82.     font-size:48px;
  83.     color:#fff;
  84.     font-weight:normal;
  85.     text-decoration:none;
  86.     padding:20px 40px 0px 0px;
  87. }
  88. #mainimg h4 {
  89.     font-family:"Trebuchet MS";
  90.     font-size:18px;
  91.     color:#fff;
  92.     font-weight:normal;
  93.     text-decoration:none;
  94.     padding:0px 40px 0px 0px;
  95. }
  96. #contentarea {
  97.     clear:both;
  98.     padding:25px 0px;
  99. }
  100. #leftbar {
  101.     float:left;
  102.     width:539px;
  103.     border-right:1px solid #BCBDBC;
  104. }
  105. #leftbar h2{
  106.     font-family:"Trebuchet MS";
  107.     font-size:26px;
  108.     color:#EE8907;
  109.     font-weight:normal;
  110.     text-decoration:none;
  111.     padding-left:40px;
  112.     padding-bottom:5px;
  113. }
  114. #leftbar p{
  115.     font-family:"Trebuchet MS";
  116.     font-size:11px;
  117.     color:#797B7A;
  118.     font-weight:normal;
  119.     text-decoration:none;
  120.     padding:0px 40px;
  121. }
  122. #leftbar a {
  123.     font-family:"Trebuchet MS";
  124.     font-size:11px;
  125.     color:#EE8907;
  126.     font-weight:bold;
  127.     text-decoration:none;
  128.     padding:0px 40px;
  129. }
  130. #leftbar a:hover {
  131.     font-family:"Trebuchet MS";
  132.     font-size:11px;
  133.     color:#000;
  134.     font-weight:bold;
  135.     text-decoration:none;
  136.     padding:0px 40px;
  137. }
  138. #rightbar {
  139.     float:left;
  140.     width:237px;
  141. }
  142. #rightbar h2{
  143.     font-family:"Trebuchet MS";
  144.     font-size:26px;
  145.     color:#797B7A;
  146.     font-weight:normal;
  147.     text-decoration:none;
  148.     padding-left:25px;
  149.     padding-bottom:5px;
  150. }
  151. #rightbar p{
  152.     font-family:"Trebuchet MS";
  153.     font-size:11px;
  154.     color:#797B7A;
  155.     font-weight:normal;
  156.     text-decoration:none;
  157.     padding:0px 25px;
  158. }
  159. .orangetext {
  160.     font-family:"Trebuchet MS";
  161.     font-size:11px;
  162.     color:#EE8907;
  163.     font-weight:bold;
  164.     text-decoration:none;
  165. }
  166. #bottom {
  167.     clear:both;
  168.     height:32px;
  169.     padding-top:25px;
  170. }
  171. #email {
  172.     float:left;
  173.     width:500px;
  174.     background-color:#9BBE00;
  175.     height:27px;
  176.     padding-top:5px;
  177. }
  178. #email a{
  179.     font-family:"Trebuchet MS";
  180.     font-size:11px;
  181.     color:#fff;
  182.     font-weight:normal;
  183.     text-decoration:underline;
  184.     padding:0px 40px;
  185. }
  186. #email a:hover{
  187.     font-family:"Trebuchet MS";
  188.     font-size:11px;
  189.     color:#fff;
  190.     font-weight:normal;
  191.     text-decoration:none;
  192.     padding:0px 40px;
  193.     
  194. }
  195. #validtext {
  196.     float:left;
  197.     width:278px;
  198.     background-color:#9BBE00;
  199.     height:27px;
  200.     padding-top:5px;
  201. }
  202. #validtext p{
  203.     font-family:"Trebuchet MS";
  204.     font-size:11px;
  205.     color:#fff;
  206.     font-weight:normal;
  207.     text-decoration:none;
  208.     text-align:right;
  209.     padding-right:35px;
  210. }
  211. #validtext a{
  212.     font-family:"Trebuchet MS";
  213.     font-size:11px;
  214.     color:#fff;
  215.     font-weight:normal;
  216.     text-decoration:underline;
  217. }
  218. #validtext a:hover{
  219.     font-family:"Trebuchet MS";
  220.     font-size:11px;
  221.     color:#fff;
  222.     font-weight:normal;
  223.     text-decoration:none;
  224. }


Now what I am trying to do is put my church picture where is says CHURCH IMG HERE, how would I do that?
Moderator Remark: ; Added [code] tags
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

I'm not 100% I understand the issue - can't you just put:
Code: [ Select ]
<img src="church_picture_folder/and_image.jpg" alt="Church Picture" />

...in that spot?

Or are you trying to insert the image from within the CSS?
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

I am going to copy, paste then entire thing and just change the text below the "Welcome" area. The rest of the site will remain identacle.

I want to add the picture in the top left corner. But it always shows a broken link.

The picture name is kiplingbaptistchurch2.jpg and it is in a file called images withing the folder I am holding all my html in.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Is any of the site online, or are you still testing off-line?
If it is online, could you provide a link?
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

It's still offline sorry... Why do you need a picture or something? Perhaps I can provide a screenie.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Nah - it wasn't a screenshot I was looking for. I was hoping to get a look at the exact file structure you were using, as well as, if it WAS online, the operative system.

Just to double check the basics, though:
1. All of the files of your website are stored in one main folder.
2. The HTML file you are dealing with in within this main folder - not a subfolder.
3. The image you need is in a subfolder of the main folder called "images."
4. The image file is called: kiplingbaptistchurch2.jpg
5. In your HTML, where you want the image to appear, you have:
Code: [ Select ]
<div id="logo">
<img src="images/kiplingbaptistchurch2.jpg" alt="Church Picture" />
</div>
  1. <div id="logo">
  2. <img src="images/kiplingbaptistchurch2.jpg" alt="Church Picture" />
  3. </div>

6. If you are using Linux (and this may count for Macs too, I'm not 100% sure), you have the folder and image names typed in the same case (as in UPPERCASE & lowercase) as they appear.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Not sure what that linux and all that is. If this makes any sense I am not on a mac either.


I am just using plain old notepad.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Linux is, like Windows, and operating system. If you're not using Linux, ignore step 6 up there. Did the double check the other 5 steps, though?
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

One second I am hosting it real fast on freewebs.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Image
[url=http://g.imageshack.us/img261/example4ozzu.jpg/1/][img]

I got you a picture of the folder looks. I was not able to host it all. Requires a 7 day wait.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Ok, I want you to try something real quick: upload the church picture you want to appear on your site to ImageShack. Then, using the image tag just like above, insert the image in your page. So your code would look something like:
Code: [ Select ]
<div id="logo">
<img src="http://g.imageshack.us/imgwhatev/YOURIMAGE.jpg" alt="Church Picture" />
</div>
  1. <div id="logo">
  2. <img src="http://g.imageshack.us/imgwhatev/YOURIMAGE.jpg" alt="Church Picture" />
  3. </div>
Just, with your image URL in there, instead of the example one I put in.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Alright give me a second.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

If you want that in CSS you can have the CSS as
CSS Code: [ Select ]
#logo {
   background-image: url('path/to/image.png');
   width: 300px;
   height: 120px;
}
  1. #logo {
  2.    background-image: url('path/to/image.png');
  3.    width: 300px;
  4.    height: 120px;
  5. }

...and the HTML would look like...
HTML Code: [ Select ]
<span id="logo"></span>
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Alright, It worked but it shows the parameters of the picture underneath it for some reason.

Like in black line with white print that says. 371x184 15kb
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

That is because it is hosted in ImageShack.

Don't host it anywhere, but put that image on your FreeWebs hosting service. Just simply upload the image to your host.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Well, that's expected - that's on ImageShack's end, not yours.
[edit]Bogey beat me to it. *wink*[/edit]

So, that means the problem is somewhere in your image path, or related to viewing your site offline. Just to verify, when you put "images/kiplingbaptistchurch2.jpg" in the src="" area, it does not show up?

If that's the case, you may be best off to wait until you can upload the website to your host, and once it's up, put the image in place - i.e. it would read:
Code: [ Select ]
<div id="logo">
<img src="http://www.yoursite.com/images/kiplingbaptistchurch2.jpg" alt="Church Picture" />
</div>
  1. <div id="logo">
  2. <img src="http://www.yoursite.com/images/kiplingbaptistchurch2.jpg" alt="Church Picture" />
  3. </div>
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Hmm, I lost my nav bar when I put Bogey's code in.

Best so far was the imageshack list one.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

The problem is everything is set up for the folders they are in. I cannot upload to my host in the folders. They all become one big folder so a lot of things stop working.

Like the path for the style sheet gets messed.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Can you create folders from your hosts site, and them upload the files correspondingly?

For example, from your hosts file manager, create a folder called "images," and them upload everything from the "images" folder on your computer into the one on your host?
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Heh, the link is messed for some reason. Background does not come in. I'll post a screenie of what it should look like.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Ok, you're going to have to do a lot of editing with the CSS to get your images to work right, but fortunately, it's very simple: you need to remove the "../" in the image paths. So:
Code: [ Select ]
background-image:url(../bg.gif);
becomes
Code: [ Select ]
background-image:url(bg.gif);
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Image
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Again, just remove the "../" from the image paths in the CSS, and your site will look as it does in the screenshot.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

I think I got it now. But now all the editing I do will have to be over the net...

I still cannot get my church pic in there.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Try this: upload your church pic to your website - just go ahead and put it in the main directory with the bg.gif image and all the others. Then, in your HTML, replace the words "CHURCH IMG HERE" with the following line of code:
Code: [ Select ]
<img src="kiplingbaptistchurch2.jpg" alt="Church Picture" />
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Ohhh, very nice. Now how do I umm, size it?
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Nevermind, got it...

Take a look and tell me what you think.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

looks good
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Thanks for all your help guys.
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

No problem!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 30 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.