/    Sign up×
Community /Pin to ProfileBookmark

Yet another div background problem

Copy linkTweet thisAlerts:
Feb 04.2007

Heya,

could you please help me out here… I’m trying to get [URL=”http://infoz.ffzg.hr/Nwp/ijaksic/snax/grm.php”]this page[/URL] to have a better background.

(Pay no attention to the text, I’m Croatian)

Anyway, as you can see there’s a green background on the left. Now I want to add another one on the right.

Here’s how I did the left one:

CSS

[CODE]#sve{
background:url(bg.gif) repeat-y;[/CODE]

Basically I wrapped all contents of the page in a div with the ID “sve”. Since I use PHP and include header and footer, this applies to all pages on the site. So the beggining div tag is in the header, the closing is in the footer.

It is possible I did something wrong here, but it works well in Opera, Firefox and IE.

Anyway.
I tried adding another div just like the first one and floating it right, didn’t help. I tried some other things, too. Didn’t help.

If you view the source you’ll notice a weird mixture of div elements and table elements.
Don’t be scared.

Any ideas are appreciated.?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriFeb 04.2007 — Forget about the #desni div, and add this to the body tag in your css [CODE]body{
margin:0;
padding:0;
text-align:center;
font-family: book antiqua, courier new, arial, verdana;
font-weight: bold;
font-size: 14px;
[COLOR="Red"]background:url(bg2.gif) repeat-y right top;[/COLOR]
}[/CODE]

that applies your other background to the body tag, and note the "right top" positions this background to the right.

Not being able to read Croatian, whats with the bent '58 ??

Cheers

Graeme
Copy linkTweet thisAlerts:
@grmmuauthorFeb 04.2007 — Forget about the #desni div, and add this to the body tag in your css [CODE]body{
margin:0;
padding:0;
text-align:center;
font-family: book antiqua, courier new, arial, verdana;
font-weight: bold;
font-size: 14px;
[COLOR="Red"]background:url(bg2.gif) repeat-y right top;[/COLOR]
}[/CODE]

that applies your other background to the body tag, and note the "right top" positions this background to the right.

Not being able to read Croatian, whats with the bent '58 ??

Cheers

Graeme[/QUOTE]

worked like a charm, thanks.

About the 58... lol... I tend to throw it around at shows. It's my mic. ?

Anyway, second question - observe the awful effect I get now: almost-blank page

...any way to get around this and make the image go all the way down?
Copy linkTweet thisAlerts:
@CentauriFeb 04.2007 — This is due to #sve div normally only being long enough to enclose the contents. It can be made to be at least full page height using min-height rule, although html and body tags need to be specified as screen height first. As IE6 doesn't understand min-height, a "* html" hack can cover that. So changes to css are:
[CODE][COLOR="Red"]html, body {
height: 100%;
min-height: 100%;
}[/COLOR]

#sve{
background:url(bg.gif) repeat-y;
[COLOR="Red"]min-height: 100%;[/COLOR]
}
[COLOR="Red"]* html #sve {
height: 100%;[/COLOR]
}
[/CODE]

Cheers

Graeme
Copy linkTweet thisAlerts:
@grmmuauthorFeb 04.2007 — works lovely. thanks a million ?
×

Success!

Help @grmmu 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 5.17,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...