Back To Website Design Forum

Very New

  • LurkinWilli
  • Born
  • Born
  • No Avatar
  • Joined: Jul 06, 2011
  • Posts: 1
  • Status: Offline

Post July 6th, 2011, 4:05 am

Havein some probs with egtting an image in the header at the top of a webpage, as well as the menu bar and the footer. im very lost right now and any thing i do does not work. so i am puttin what the last good config of what i had. im very new to all of this and have done some looking around. thank you ahead of time for any help.

Here is the url for the pic for the header

http://lurkinwilli.angelfire./b2.jpg

and then the pic for the content.

http://lurkinwilli.angelfire./b1.jpg

Code: [ Select ]
<html>
<head>
<title>Lurkin Studios</title>
<style type="text/css">

</style>
</head>
<body>

<div id="container" style="width:1200px">
<div id="header" style="background-color:green;">
<h1 style="margin-bottom:0;">Lurkin Studios</h1></div>

<div id="menu" style="background-color:green;height:400px;width:100px;float:left;">
<b>Menu</b><br />
Home<br />
Fourms<br />
Links
</div>

<div id="content" style="background-color:green;height:300px;width:1100px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:green;clear:both;text-align:center;">
Copyright © 2011 Lurkin Studios</div>

</div>

</body>
</html>
  1. <html>
  2. <head>
  3. <title>Lurkin Studios</title>
  4. <style type="text/css">
  6. </style>
  7. </head>
  8. <body>
  10. <div id="container" style="width:1200px">
  11. <div id="header" style="background-color:green;">
  12. <h1 style="margin-bottom:0;">Lurkin Studios</h1></div>
  14. <div id="menu" style="background-color:green;height:400px;width:100px;float:left;">
  15. <b>Menu</b><br />
  16. Home<br />
  17. Fourms<br />
  18. Links
  19. </div>
  21. <div id="content" style="background-color:green;height:300px;width:1100px;float:left;">
  22. Content goes here</div>
  24. <div id="footer" style="background-color:green;clear:both;text-align:center;">
  25. Copyright © 2011 Lurkin Studios</div>
  27. </div>
  29. </body>
  30. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 6th, 2011, 4:05 am

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post July 7th, 2011, 11:07 am

the links do not work you know, when I do a google search for your site I get 1 link this post, just so you know.
^__^
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post July 10th, 2011, 2:54 pm

Not sure where you like to add those images and as pointed out those links seems dead.

You may however use css to place an image in the background (if the style is added to your top div id=header then the image should be placed somewhere at top where you may want it) :

Code: [ Select ]
background-image:url('imagelinkhere');


Or you can simply use a html <img> command somewhere:

Code: [ Select ]
<img src="http://linktofile.here" width="100" height="100">


Most web-designers seems to avoid the inline style that you uses and rather uses a separate .css file to line out most of the design. If you haven't already that might be something worth researching.
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Joined: Jun 13, 2011
  • Posts: 127
  • Status: Offline

Post July 28th, 2011, 9:34 pm

LurkinWilli wrote:
Havein some probs with egtting an image in the header at the top of a webpage, as well as the menu bar and the footer. im very lost right now and any thing i do does not work. so i am puttin what the last good config of what i had. im very new to all of this and have done some looking around. thank you ahead of time for any help.

Here is the url for the pic for the header

http://lurkinwilli.angelfire. /b2.jpg

and then the pic for the content.

http://lurkinwilli.angelfire. /b1.jpg




http://lurkinwilli.angelfire. com/b22.JPG

You said that is the image you want to use in the header, but looking at your site, it is actually the bg image, and the b1.jpg is a gold bg image, are you trying to make that the background for the body (iframe?). If so, you need to make an .html page as your iframe source, use that image as the bg on the .html page, then link the html by using an <iframe >. The menu on the left is there, but the page source is now missing the <div id="footer"> so your copyright text is going to be sitting where ever it lands as you add content.

Here is the code for your page as it looks now:

Code: [ Select ]
<html>

<head>

<title>Shatterd</title>

</head>



<body>

<style type="text/css">

body

{

background-image:url(http://lurkinwilli.angelfire. com/b22.JPG);

}

</style>



<div style="width:1000px">

<div style="background-color:;height:125px;">

</div>



<div style="background-color:;height:400px;width:100px;float:left;">

  Menu<br />

    <p><a href="http://www.google. com" target="iframe3">GoOgLe</a></p>

    <p><a href="http://www.yahoo. com" target="iframe3">YaHoO!</a></p>

 </div>



 <div style=height:400px;width:900px;float:right;">

  <iframe src="iframe1" name="iframe3" width="826" height="400"></iframe>

 </div>



 <div style=clear:both">

  <div style="width:1000px">

  <p style="color:lightblue;font-size:27px;">Copyright © </p> 

</div>



</body>

</html>
  1. <html>
  3. <head>
  5. <title>Shatterd</title>
  7. </head>
  11. <body>
  13. <style type="text/css">
  15. body
  17. {
  19. background-image:url(http://lurkinwilli.angelfire. com/b22.JPG);
  21. }
  23. </style>
  27. <div style="width:1000px">
  29. <div style="background-color:;height:125px;">
  31. </div>
  35. <div style="background-color:;height:400px;width:100px;float:left;">
  37.   Menu<br />
  39.     <p><a href="http://www.google. com" target="iframe3">GoOgLe</a></p>
  41.     <p><a href="http://www.yahoo. com" target="iframe3">YaHoO!</a></p>
  43.  </div>
  47.  <div style=height:400px;width:900px;float:right;">
  49.   <iframe src="iframe1" name="iframe3" width="826" height="400"></iframe>
  51.  </div>
  55.  <div style=clear:both">
  57.   <div style="width:1000px">
  59.   <p style="color:lightblue;font-size:27px;">Copyright © </p> 
  61. </div>
  65. </body>
  67. </html>


If you really want to use an iframe, make the relevant page, and link it in the content section with something like this:

Code: [ Select ]
<iframe src="lurkinwilli.angelfire. com/frame_source.html" name="frame-source.html" frameborder="0" height="400" width="826">If you can read this your browser does not support I-Frames. </iframe>


Something else, you have your iframe dimensions set to 400 x 826, and the image b1.jpg is 600x600, so it's going to look distorted since it's not a seamless tile image.

good luck

Page 1 of 1

Post Information

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