/    Sign up×
Community /Pin to ProfileBookmark

Positioning an image either side of page

I am trying to place an image on the left side and on the right side oif the screen but I’m not having much luck. Can someone tell me where I’m going wrong? The site can be found at [url]www.ufreak.net/new[/url].
Thanks

[code=html]<div id=”leftbar”><p><img src=”img/leftside.png” /></p></div>
<div id=”rightbar”><p><img src=”img/rightside.png” /></p></div>[/code]

[CODE].leftbar {
position: absolute;
display:inline;
left: 0;
bottom:0;
padding:0;
margin:0;
}
.rightbar {
display:inline;
float:right;
position:absolute;
right:0;
bottom:0;
padding:0;
margin:0;
}[/CODE]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisAug 18.2006 — It may have something to do with when you specify the bars. The document is created top-down, so the "bottom" is wherever the body is when the bars are rendered. If you want them at the bottom, put them at the end of the file. Otherwise, they appear in the order of the file.
<i>
</i>&lt;style type="text/css"&gt;
.leftbar {
position: absolute;
left: 0px;
botttom: 0px;
border: 1px solid black;
}
.rightbar {
position: absolute;
right: 0px;
botttom: 0px;
border: 1px solid black;
}
&lt;/style&gt;
&lt;img class="leftbar" src="redstarf.gif"&gt;
&lt;img class="rightbar" src="redstarf.gif"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.&lt;/p&gt;
&lt;img class="leftbar" src="redstarf.gif"&gt;
&lt;img class="rightbar" src="redstarf.gif"&gt;
See what I mean? the first ones listed are at the top of the document rather than the bottom.

You could use javascript to move them after the page loads, but it is easier to do it by placement in the file.

BTW, without using js or knowing how big the window is, they won't go down to the bottom of the window by themselves.
Copy linkTweet thisAlerts:
@ray326Aug 19.2006 — #leftbar {

float:left;

}

#rightbar {

float:right;

}

You did class selectors then referred to ids.
Copy linkTweet thisAlerts:
@DoppleauthorAug 20.2006 — You did class selectors then referred to ids.[/QUOTE]

:o

Whoops.

Thats sorted it. Thanks Ray.

GRaham
×

Success!

Help @Dopple 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,
)...