Need help making a line fit all resolutions

[mgdpublic]

I'm totally new to html coding so go easy on me. Just read my first tutorial yesterday. I need to have two colored lines drawn across my homepage horizontally. I used windows paint to draw these lines on a canvas but I didn't
know what resolution to make the canvas. How can I make a line as a graphic that will stretch to the edges of the screen regardless of what resolution the viewer has set? Is there a way to make graphic files set to a percentage rather than as a number of pixels? Thanks.

[spufi]

If I understand you correctly, you can do it one of two ways. One is by using your image as a background image and just repeating it for as far as the user's resolution. Another way is to just use a colored area with a different colored border and have it go across the screen. If you post your code we could see what might be the best way of doing it for your case. The link below shows an example of having a three colored line going all the way across the screen without images.

http://www.lauramccandliss.com/

[Paul Jr]

I can think of two ways to do this.

1) without images:

<hr color="#000" width="100%">


Or...

2) With an image such as the one attached:

<img src="www.theurl.com/tothe/image.gif" height="4" width="100%" />

[mgdpublic]

I don't have code yet because this is the first thing I'm trying to do. :(

I assume the burgundy line at that site is created with this command:

<div class="coloredLine">&nbsp;</div>

but I don't understand what that means. Didn't see that stuff in any of the basic tutorials. I didn't even understand the implications for resolution on web page creation until yesterday. Might you be able to point me to a tutorial on those specific things you are mentioning?

[mgdpublic]

Originally posted by Paul Jr
I can think of two ways to do this.

1) without images:

<hr color="#000" width="100%">


Or...

2) With an image such as the one attached:

<img src="www.theurl.com/tothe/image.gif" height="4" width="100%" />


Ok, so the hr won't work because I can't modify the thickness (unless you tell me otherwise), but the image thing certainly would. So if I make a line on an 800x600 canvas and embed it with the 100% width command will it stretch thinner on a higher resolution or maintain the same thickness? Thanks for the help so far guys/girls.

[Paul Jr]

The thickness of the <hr> tag can be adjusted with CSS, I just figured that out :eek:

<hr style="height:10px;width:100%;color:#000;" />


And yes, if the width of the image is set to 100%, it will stretch and compress to fit the window while retaining its set thickness.

[spufi]

Originally posted by Paul Jr
I can think of two ways to do this.

1) without images:

<hr color="#000" width="100%">


There is no color attribute for the <hr> tag, and even using CSS can create some not exactly desired results. Having noshade being deprecated causes the problem, and it depends on how tall you have your <hr> tag. The taller the <hr> tag the smaller the noshade issue is a problem. This is why I played around with a <div> tag to create a more valid form of a colored line. As shown on the one site I did, you create a <div> tag that has a non-breaking space in it and then you define the font size and height of it(due to issues with Opera) in the CSS. Here's the CSS I used.

.coloredLine {
background-color:#9E575A;
height:2px;
font-size:2px;
border:1px solid #000;
}

[Paul Jr]

Ooh...whoops, I had no idea about that. :eek: :o

But now I'm a bit confused, on my current site, I use a few <hr> tags with the color attribute, and it looks fine, and validates as XHTML 1.1...

[spufi]

Originally posted by Paul Jr
2) With an image such as the one attached:

<img src="www.theurl.com/tothe/image.gif" height="4" width="100%" />


Just showing another way of doing this. Find out how tall you want your image to be. Let's say you want it to be 10px tall with half of it being blue and half being black. Create a 10px high image and color it the way you want it. Now, crop/resize the image to where it is 1px wide. You can then use that image as a background where ever you want to. Let's say you want it at the top of your page all the way across. Here's the CSS...

body {
margin:0;
padding:0;
background-image:url(bg.gif); background-repeat: repeat-x; }

Since you are using such a basic image, there's no real need to make it wider than 1px because it will look the same if it's 1px wide, or 100px. It will however download quicker with the smaller width.

[mgdpublic]

Ok that width 100% thing worked well. Great, thanks. Any recommendations for well written/conceived tutorials? I clearly have a long long way to go.

[mgdpublic]

That's a cool idea Spufi. I don't know anything about CSS other than what it stands for but I get the idea.

[spufi]

Originally posted by Paul Jr
Ooh...whoops, I had no idea about that. :eek: :o

But now I'm a bit confused, on my current site, I use a few <hr> tags with the color attribute, and it looks fine, and validates as XHTML 1.1...

<hr color="#000" /> is invalid XHTML. Defining it in a style is valid. I'm playing around with the <hr> tag right now to see what I can come up with for what I was talking about.

[spufi]

Ah, it's an IE thing. For it to look correctly in Mozilla and IE, you have to define the color and background color as the same thing. If you use color, it won't work in Mozilla. If you use background-color, in IE there is a ever so slight white area between the inner colored area and any border color you have defined. I assume it's white because I think it's pulling the color from the background of the actual page. Doing it this way also looks good in Oprea 7.

[Paul Jr]

Originally posted by spufi
<hr color="#000" /> is invalid XHTML. Defining it in a style is valid. I'm playing around with the <hr> tag right now to see what I can come up with for what I was talking about.

Oooh...I think I get it now.

Also, good idea with the image thing, I didn't really think of that. :o

[spufi]

Originally posted by mgdpublic
That's a cool idea Spufi. I don't know anything about CSS other than what it stands for but I get the idea.

Here's the "proper" way of doing the <hr>/CSS version of the two colored 10px tall blue and black line.

1. Define your CSS like this.

hr {
width:100%;
height:5px;
color:#000;
background-color:#000;
border-top:5px solid #00F;
}

Create a file called styles, place the above CSS in it, and save it with a .css extension.

2. Within your <head> tag, place this code.

<link rel="stylesheet" title="Default" media="screen" href="styles.css" type="text/css">

3. Add a <hr> where ever you wanted it and then view it in your browser.

If you have anyquestions, let me know.