Image issue

Maccy

Maccy

Maccy

Commissario
Joined
23 Nov 2004
Posts
42,922
Location
Herts
Trying to get an image to go along the top of my website, however want to make it so that it stretches across the whole browser window regardless of the size. Not quite sure how to do this?

www.jmcadam.com

The current div code I'm using is this -

Code: 
<div style>

<img src="images/bar.png"
width="1000px";
height="20px"
style="position:absolute;
float:top;
top:0px;
right:0px;
left:0px;
z-index:2;">

</div>
 
That's not exactly the best advice or way to go about that.

You can remove that div entirely, and the img markup.

Apply your image to the background using the body selector and CSS. Then repeat it in the x axis. You could reduce the image file size by making it 1px wide.

Code: 
body {
background: #fff url(images/bar.png) repeat-x top;
}
 
I've changed to the suggestion, thanks, however my twitter and facebook icons are now not aligned with the title despite being aligned when I view them in live view in Dreamweaver? Definitely missing something obvious here...
 
Maccy, you wrote such elegent javascript code yesterday. Then today I look at the HTML markup and was nearly sick! Dump Dreamweaver, and write code from scratch. Only use tables if you have tabular data; even then try not to use them.

Sorry for the rant :D
 
All the cool kids use CSS instead of tables these days.

If you want to be cool I suggest reading up on some CSS, it's easy to learn and is extremely handy.
 
Code: 
<body>
     <div id="wrapper">
          <div id="header">
          </div>
          <div id="main">
             <h2>J McAdam</h2>
             <p>Web developer/Musician. Contact me below for more info.</p>
             <a href="#">Blog</a>
             <a href="mailto:xxxxxxx">Email</a>
             <a class="facebook" href="#">Facebook</a>
             <a class="twitter" href="#">Twitter</a>
          </div>
          <div id="footer">
             <label>Copyright J McAdam 2011</label>
          </div>
     </div>
</body>

Code: 
#wrapper {
    margin: 0 auto;
    width: 970px;
}

.facebook, .twitter {
  position: absolute;
}

A starting point......not finished, but you get the idea
 
Html and css are very easy to get to grips with if you just need a fairly fundamental level of skill. If you read about how css and html work together you will have a much better understanding of semantic markup and when to use tables and other elements.

Tables are still very much part of html but they should only be used to display tabular data rather than layout a site.
 
Maccy said:
I think I've made baby Jesus cry. Thanks for your help guys, in all seriousness.
Click to expand...

Haha, don't worry about not knowing something to do with web dev buddy. It moves so fast and there are so many areas that a lot of people specialise in just one area. To be able to code cross browser, complex and modern websites is no small task so if you have any questions, the best thing to do is just ask. Im sure that a lot of us learn something from reading each others responses to questions posed here so don't feel bad!
 
Yeh, I'm hoping to delve more into this area of the forums actually! Will get onto making those changes and see how it pans out.
 
Its 'better', but the use of HTML to style the page is criminal :)

The hard and fast rule is:

HTML is the content of the document and CSS is the presentation. So never use html to style a document - as you have done with various break tags. Secondly, anything that relates to the presentation of a document should go in a style sheet.

I strongly suggest reading a book or you are going to pick up bad habits very quickly
 
You must log in or register to reply here.
Back
Top Bottom