/    Sign up×
Community /Pin to ProfileBookmark

How Can I create a Sideline (a image that runs vertically down the side of my page)?

Copy linkTweet thisAlerts:
Dec 14.2004

Is there a way in CSS to create an image that will run down the length of the page in CSS? Here’s an example of what I want: [url]http://www.gamexplain.com/contact.shtml[/url]

See the gray “Game Xplain” that runs vertically? I’m doing that now with standard CSS placement commands; is there an easier way to do this?

Thanks!

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 14.2004 — body {background: url(path/sideline.gif) left repeat-y;}
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — [i]Originally posted by Fang [/i]

[B]body {background: url(path/sideline.gif) left repeat-y;} [/B][/QUOTE]

Excellent, thanks.

I'm still new to CSS though, so do I put that entire line in, including "body"? Or do I put it in the "body" of my page? Sorry for my extreme ignorance ?
Copy linkTweet thisAlerts:
@FangDec 14.2004 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Basic HTML&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
// all JavaScript here

//--&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
&lt;!--
/* cascading style sheet */
body {background: url(path/sideline.gif) left repeat-y;}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;!-- html here --&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — Excellent, thanks. That makes sense.

One problem though, here's the page I tested it on:

http://www.gamexplain.com/test.shtml

The image doesn't seem to start where it should; it's half-way cut off. What should I do to fix this? Thanks!
Copy linkTweet thisAlerts:
@FangDec 14.2004 — Move the style to the [i]head[/i] section.
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — [i]Originally posted by Fang [/i]

[B]Move the style to the [i]head[/i] section. [/B][/QUOTE]

Just did, same problem ?
Copy linkTweet thisAlerts:
@CharlesDec 14.2004 — [font=monospace]body {background: url(path/sideline.gif) fixed no-repeat}[/font] works for me.

By the way, your HTML is a mess. Get rid of those trailling slashes in the empty tags, they're from XHTML, and then run your page through [url=http://validator.w3.org/]The Validator[/url] once you've prepended the following to your page:

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/font]

Note: some browsers, such as MSIE, behave incorrectly without a DOCTYPE.
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — Yeah, the page isn't final by any means, those slashes were created by a program that made my image map; I should have seen those though.

Also, I've always wondered, what exactly does

"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">" do? I've seen plenty of pages with that, but I've also seen a fair share that don't.

Thanks.
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — Oh, and Charles, I tried your command, but it doesn't quite do what I wanted it to do. It only displayed the image once (whereas to fill the page, it needs to be twice), and the image stays stationary, whereas I'd like it to scroll with the page.
Copy linkTweet thisAlerts:
@FangDec 14.2004 — body {background: url(path/sideline.gif) scroll repeat-y;}

You can not set the number of repeats, only one or the full height of the page.

[URL=http://www.w3.org/TR/REC-html40/sgml/dtd.html]DTD[/URL]
Copy linkTweet thisAlerts:
@duderdude2authorDec 14.2004 — [i]Originally posted by Fang [/i]

[B]body {background: url(path/sideline.gif) scroll repeat-y;}

You can not set the number of repeats, only one or the full height of the page.



[URL=http://www.w3.org/TR/REC-html40/sgml/dtd.html]DTD[/URL] [/B][/QUOTE]

Woo, that works great. Thanks so much.
Copy linkTweet thisAlerts:
@CharlesDec 14.2004 — Just having the DTD doesn't help much unless you know how to read it. See http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.3 .
×

Success!

Help @duderdude2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...