Back To Website Design Forum

How do I edit this CSS?

  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 2:25 pm

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.
  52.          <br />
  53.          <br />
  54.          <span class="orangetext">February 20th 09</span><br />
  55.          Meet in Kipling from 7:30 til 10:00.
  56.      February 22nd is YOUTH SUNDAY …
  57.      So we’ll … sing a few songs, do a little prep, act a little skit, and so on …
  58.          </p>
  59.      </div>
  60.     </div>
  61.     <div id="bottom">
  62.      <div id="email"><a href="mailto:************">Contact *******</a></div>
  63.      <div id="validtext">
  64.      </div>
  65.     </div>
  66. </div>
  67. </div>
  68. </body>
  69. </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. }
  7. h1, h2, h3, h4, h5, h6, p, form {
  8.     margin: 0px;
  9.     padding:0px;
  10. }
  12. #wrapper {
  13.     width:800px;
  14.     margin:0px auto;
  15.     background-color:#FFF;
  16. }
  18. #content {
  19.     width:778px;
  20.     margin:0px auto;
  21.     background-image:url(../images/bg_header_top.gif);
  22.     background-repeat:repeat-x;
  23.     background-position:top;
  24. }
  26. #header {
  27.     height:96px;
  28. }
  30. #logo {
  31.     width:258px;
  32.     float:left;
  33. }
  35. #logo h1{
  36.     font-family:"Trebuchet MS";
  37.     font-size:26px;
  38.     color:#F76B0C;
  39.     font-weight:normal;
  40.     text-decoration:none;
  41.     padding-left:40px;
  42.     padding-top:30px;
  43. }
  45. #logo h4 {
  46.     font-family:"Trebuchet MS";
  47.     font-size:11px;
  48.     color:#808080;
  49.     font-weight:normal;
  50.     text-decoration:none;
  51.     padding-left:75px;
  52. }
  54. #links ul {
  55.     margin:0px;
  56.     padding-top:67px;
  57. }
  59. #links li{
  60.     float:left;
  61.     list-style-type:none;
  62.     width:129px;
  63.     height:25px;
  64.     text-align:center;
  65.     background-color:#F4A80A;
  66.     border-left:1px solid #FFF;
  67.     padding-top:4px;
  68. }
  70. #links a{
  71.     font-family:"Trebuchet MS";
  72.     font-size:11px;
  73.     color:#fff;
  74.     font-weight:normal;
  75.     text-decoration:none;
  76. }
  78. #links a:hover{
  79.     font-family:"Trebuchet MS";
  80.     font-size:11px;
  81.     color:#fff;
  82.     font-weight:normal;
  83.     text-decoration:underline;
  84. }
  86. #mainimg {
  87.     background-image:url(../images/main_img.jpg);
  88.     background-repeat:no-repeat;
  89.     height:132px;
  90.     text-align:right;
  91. }
  93. #mainimg h3 {
  94.     font-family:"Trebuchet MS";
  95.     font-size:48px;
  96.     color:#fff;
  97.     font-weight:normal;
  98.     text-decoration:none;
  99.     padding:20px 40px 0px 0px;
  100. }
  102. #mainimg h4 {
  103.     font-family:"Trebuchet MS";
  104.     font-size:18px;
  105.     color:#fff;
  106.     font-weight:normal;
  107.     text-decoration:none;
  108.     padding:0px 40px 0px 0px;
  109. }
  111. #contentarea {
  112.     clear:both;
  113.     padding:25px 0px;
  114. }
  116. #leftbar {
  117.     float:left;
  118.     width:539px;
  119.     border-right:1px solid #BCBDBC;
  120. }
  122. #leftbar h2{
  123.     font-family:"Trebuchet MS";
  124.     font-size:26px;
  125.     color:#EE8907;
  126.     font-weight:normal;
  127.     text-decoration:none;
  128.     padding-left:40px;
  129.     padding-bottom:5px;
  130. }
  132. #leftbar p{
  133.     font-family:"Trebuchet MS";
  134.     font-size:11px;
  135.     color:#797B7A;
  136.     font-weight:normal;
  137.     text-decoration:none;
  138.     padding:0px 40px;
  139. }
  141. #leftbar a {
  142.     font-family:"Trebuchet MS";
  143.     font-size:11px;
  144.     color:#EE8907;
  145.     font-weight:bold;
  146.     text-decoration:none;
  147.     padding:0px 40px;
  148. }
  150. #leftbar a:hover {
  151.     font-family:"Trebuchet MS";
  152.     font-size:11px;
  153.     color:#000;
  154.     font-weight:bold;
  155.     text-decoration:none;
  156.     padding:0px 40px;
  157. }
  159. #rightbar {
  160.     float:left;
  161.     width:237px;
  162. }
  164. #rightbar h2{
  165.     font-family:"Trebuchet MS";
  166.     font-size:26px;
  167.     color:#797B7A;
  168.     font-weight:normal;
  169.     text-decoration:none;
  170.     padding-left:25px;
  171.     padding-bottom:5px;
  172. }
  174. #rightbar p{
  175.     font-family:"Trebuchet MS";
  176.     font-size:11px;
  177.     color:#797B7A;
  178.     font-weight:normal;
  179.     text-decoration:none;
  180.     padding:0px 25px;
  181. }
  183. .orangetext {
  184.     font-family:"Trebuchet MS";
  185.     font-size:11px;
  186.     color:#EE8907;
  187.     font-weight:bold;
  188.     text-decoration:none;
  189. }
  191. #bottom {
  192.     clear:both;
  193.     height:32px;
  194.     padding-top:25px;
  195. }
  197. #email {
  198.     float:left;
  199.     width:500px;
  200.     background-color:#9BBE00;
  201.     height:27px;
  202.     padding-top:5px;
  203. }
  205. #email a{
  206.     font-family:"Trebuchet MS";
  207.     font-size:11px;
  208.     color:#fff;
  209.     font-weight:normal;
  210.     text-decoration:underline;
  211.     padding:0px 40px;
  212. }
  214. #email a:hover{
  215.     font-family:"Trebuchet MS";
  216.     font-size:11px;
  217.     color:#fff;
  218.     font-weight:normal;
  219.     text-decoration:none;
  220.     padding:0px 40px;
  221.     
  222. }
  224. #validtext {
  225.     float:left;
  226.     width:278px;
  227.     background-color:#9BBE00;
  228.     height:27px;
  229.     padding-top:5px;
  230. }
  232. #validtext p{
  233.     font-family:"Trebuchet MS";
  234.     font-size:11px;
  235.     color:#fff;
  236.     font-weight:normal;
  237.     text-decoration:none;
  238.     text-align:right;
  239.     padding-right:35px;
  240. }
  242. #validtext a{
  243.     font-family:"Trebuchet MS";
  244.     font-size:11px;
  245.     color:#fff;
  246.     font-weight:normal;
  247.     text-decoration:underline;
  248. }
  250. #validtext a:hover{
  251.     font-family:"Trebuchet MS";
  252.     font-size:11px;
  253.     color:#fff;
  254.     font-weight:normal;
  255.     text-decoration:none;
  256. }


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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 25th, 2009, 2:25 pm

  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post February 25th, 2009, 2:40 pm

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?
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 2:43 pm

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
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post February 25th, 2009, 2:48 pm

Is any of the site online, or are you still testing off-line?
If it is online, could you provide a link?
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 2:49 pm

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
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post February 25th, 2009, 2:58 pm

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.
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 3:01 pm

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
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post February 25th, 2009, 3:03 pm

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?
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 3:06 pm

One second I am hosting it real fast on freewebs.
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 3:14 pm

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
  • Joined: Jan 21, 2004
  • Posts: 351
  • Loc: Indiana, USA
  • Status: Offline

Post February 25th, 2009, 3:56 pm

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.
-Patrick J. B. Simmons | @hobbramble
"If I could give you one piece of advice to remember for the rest of your life, it would be this: when Patrick tells you to do something, do the opposite." - Nolan Ladewski
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 4:00 pm

Alright give me a second.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 25th, 2009, 4:08 pm

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>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • WTF-AComputer
  • Student
  • Student
  • No Avatar
  • Joined: Feb 12, 2008
  • Posts: 97
  • Loc: Canada
  • Status: Offline

Post February 25th, 2009, 4:11 pm

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 25th, 2009, 4:14 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 25th, 2009, 4:14 pm

1, 2

Post Information

  • Total Posts in this topic: 30 posts
  • Users browsing this forum: No registered users and 138 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.