PDA

View Full Version : Bottom Right Hand Corner

Troy297
06-18-2007, 03:17 AM
Hey,

Just wondering if there is any simple way to put an expandable css div of text in the bottom right hand side of the screen? I am currently doing it with margin attributes but when the browser window is resized it wraps the text which I don't want it to do.

Current CSS:
#footer {
margin-top: 54%;
margin-left: 72%
}
body > div#footer {
margin-top: 53%;
margin-left: 72%
}

Thanks :)
_Aerospace_Eng_
06-18-2007, 03:21 AM
Absolute positioning is probably the better method to use in this case. Just be sure to make your container div position:relative; so its at the bottom of that div and not the browser window. If you have no idea what I'm talking about then post the rest of your code as we aren't psychic.
Troy297
06-18-2007, 04:16 AM
Ya I'm a little confused.... but what other code is there to post -_-'

<div id="footer">
text
</div>

That what you want?
1212jtraceur
06-18-2007, 05:00 AM
No, we want the entire webpage code (even the: <html><head><title> etc...).
_Aerospace_Eng_
06-18-2007, 06:16 AM
I'm talking about something like this, study this example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
background:#F00;
position:relative; /* remove this line to see how the footer is positioned using the body and not #container */
}
p {
margin:0;
padding:10px;
}
#footer {
position:absolute;
bottom:200px;
right:0;
width:200px;
border:1px solid #000;
padding:5px;
background:#00F;
}
</style>
</head>
<body>
<div id="container">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis magna iaculis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam blandit vestibulum libero. Phasellus nec diam a augue congue pharetra. Donec nunc. Proin porta adipiscing ligula. Nam purus velit, aliquam ut, porta ac, convallis eget, quam. Nullam elit. Vivamus adipiscing. Cras aliquet nonummy ligula. </p>
<p> Curabitur interdum varius tortor. Mauris purus. Nullam accumsan, nunc eu lacinia sodales, quam odio viverra nibh, vitae suscipit mi ligula et dui. Nunc purus. Mauris scelerisque arcu eget nulla. Nulla sit amet tortor. Ut eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget risus. Nullam feugiat mi. Integer libero elit, gravida ut, dignissim in, iaculis id, lectus. </p>
<p> Mauris vel elit. Morbi sit amet arcu ut nisi ultrices aliquam. Aliquam erat volutpat. Proin pretium neque nec felis. Vivamus ac lorem id ipsum bibendum dictum. Pellentesque facilisis odio sed turpis. Donec consequat nisl vitae massa. Nunc suscipit. Pellentesque pretium. In leo. Proin lectus ligula, volutpat condimentum, cursus sed, auctor vitae, justo. Quisque tempus ligula. Vestibulum facilisis. Maecenas ullamcorper gravida orci. Phasellus vitae justo rutrum mauris auctor tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut consequat, nulla ornare placerat ullamcorper, diam ligula rhoncus nibh, ut iaculis libero sapien quis orci. In hac habitasse platea dictumst. </p>
<p> Nunc magna. Vestibulum ac nunc id lectus scelerisque ultricies. Sed ante erat, dictum sed, rutrum vitae, dictum at, augue. Etiam arcu tortor, sollicitudin non, consectetuer sit amet, euismod id, ligula. Praesent ipsum ante, ultrices ac, consectetuer non, rhoncus et, arcu. Integer pharetra condimentum lectus. Nullam lobortis facilisis augue. In nisl. Vivamus facilisis euismod eros. Fusce magna. Suspendisse potenti. Cras mollis. Pellentesque justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed orci. Curabitur placerat, quam nec euismod sollicitudin, pede sapien lobortis mi, eu tempor sapien augue sit amet odio. Phasellus consectetuer. Donec urna justo, aliquet et, eleifend eu, tempus tristique, quam. </p>
<p> Nullam eget purus. Duis facilisis ante eget metus. In auctor urna quis quam. Maecenas mauris felis, mattis ut, condimentum in, tristique a, sapien. Donec a metus ac pede iaculis pharetra. Nullam urna risus, placerat a, malesuada sed, posuere consectetuer, mauris. Fusce quis libero ut enim egestas semper. Quisque lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur porttitor leo at nisi. Vestibulum egestas semper turpis. Sed elementum, eros id rutrum varius, massa sem porttitor urna, in scelerisque lacus nisi vulputate ante. Pellentesque feugiat feugiat nunc. </p>
<p> Nam vulputate convallis elit. Fusce rhoncus. Sed nisl neque, dignissim at, convallis sed, scelerisque ut, metus. Curabitur vehicula dapibus arcu. Aenean eget nisl. Integer hendrerit ipsum in nibh. Etiam nibh. Duis auctor, risus ac blandit rhoncus, libero dolor egestas augue, id egestas nunc sapien at dui. Praesent vel purus eget leo semper mollis. Suspendisse faucibus, arcu eu aliquam accumsan, lectus felis iaculis lectus, congue posuere leo lacus non dolor. Praesent sem purus, adipiscing id, vulputate at, suscipit ut, purus. Mauris massa. Cras hendrerit, turpis vitae condimentum tristique, ante risus fermentum est, vulputate mollis turpis lacus fringilla odio. Quisque eu elit. Pellentesque egestas scelerisque ligula. Fusce varius, sem at ullamcorper venenatis, metus justo fringilla arcu, ac pretium nunc purus id risus. Curabitur leo odio, molestie sed, posuere non, imperdiet vel, odio. Sed scelerisque euismod tellus. Etiam a mi vitae dui adipiscing interdum. </p>
<p> Cras id odio. Suspendisse potenti. Ut elementum. Nulla porta interdum lacus. Phasellus metus mi, rutrum vel, adipiscing sit amet, convallis nec, turpis. Ut eleifend elementum odio. Suspendisse augue nulla, placerat ut, vulputate sed, iaculis vitae, velit. Maecenas tellus eros, volutpat at, mattis sed, vulputate vitae, dui. Fusce venenatis placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc rhoncus dui et eros. </p>
<p> Maecenas mi. Proin at massa sed lorem rutrum eleifend. Aliquam aliquet lacinia magna. Nam ornare ipsum nec erat. Integer faucibus gravida elit. Pellentesque placerat ullamcorper velit. Duis pharetra tincidunt urna. Nullam rhoncus. Cras semper. Suspendisse metus. Donec viverra. Fusce in mi. Nam id magna eget eros euismod lobortis. Suspendisse blandit nunc vitae massa. In vitae turpis vitae diam tincidunt hendrerit. Phasellus posuere. </p>
<p> Proin gravida nisi eu leo hendrerit sollicitudin. Donec sit amet sem. Sed ornare. Aliquam erat volutpat. Sed porta semper mi. Donec faucibus posuere felis. Proin tristique faucibus leo. Vestibulum orci. Proin tempor orci in nisl. Quisque libero turpis, tristique ac, luctus vitae, rhoncus quis, libero. Mauris lectus odio, iaculis eu, vestibulum in, condimentum porta, diam. Quisque a eros. Nullam auctor dictum magna. </p>
<p> Nunc dapibus. Aenean justo tellus, consectetuer ac, aliquet a, ultricies volutpat, diam. Aliquam erat volutpat. Cras sed justo. Curabitur malesuada mollis nisi. Aliquam condimentum faucibus enim. Donec ullamcorper odio eget mi. Quisque tellus nulla, pharetra quis, gravida non, varius ut, mi. Fusce sit amet nibh. Maecenas nibh orci, consequat vitae, vestibulum nec, sagittis non, urna. Morbi nonummy ultricies pede. Mauris sed turpis ac libero hendrerit auctor. Nam elementum, erat sed interdum tempor, felis dui tempor velit, vehicula porttitor sapien mi placerat purus. </p>
<div id="footer">This is the footer, I'm at the bottom at all times.</div>
</div>
</body>
</html>
effpeetee
06-18-2007, 06:35 AM
When I put this code into Firefox, Opera or IE; the footer is not at the bottom. It's several inches from the bottom on the right hand side.

Am I missing something?

effpeetee
_Aerospace_Eng_
06-18-2007, 06:37 AM
No its at the bottom of the content not the browser. You aren't missing anything. You can adjust the bottom part on the #footer.
effpeetee
06-18-2007, 07:26 AM
Thanks, I should have read the explanation more carefully.
But it does overlay some of the text?

effpeetee
_Aerospace_Eng_
06-18-2007, 07:34 AM
Yes it does. If you don't want it to then give a right padding to the #container. These are simple things with simple solutions.
effpeetee
06-18-2007, 07:49 AM
Yes it does. If you don't want it to then give a right padding to the #container. These are simple things with simple solutions.
Thanks. I'm just easing myself into CSS. It sure is a powerful option.

I bought three books:-

CSS - The missing manual - David S. McFarland
CSS Mastery - Andy Budd
Sams Teach yourself CSS in 24 Hours. - Kynn Bartlett.

I still don't know which one to major on.

That's probably why I get confused.

CODE

#footer {
position:absolute;
bottom:-32px;
right:0;
width:300px;
border:1px solid #000;
padding:5px;
background:#f;
}

I have had to make these changes to get the footer to the bottom.
I did it by trial and error.

Is there a more elegant way to do this.
(I know that this was not the original intention, but I wanted to do this.)


effpeetee
Troy297
06-19-2007, 10:06 PM
Well I can't seem to get it working for me so here is my code.... I want it to always be in the very bottom of the right hand side, no matter where the page content is. An example of what I want is here:

http://quickscriptz.ca/djpanel4/

Index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Radio DJ Panel v4 - Beta</title>
<link rel="StyleSheet" href="css/login.css" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="horizon_content">
<div class="bodytext">
Centered Content Goes Here
</div>
</div>
</div>
<div id="footer">
<a href="?error=forgotpass">Forgot Password</a> | © <a href="http://quickscriptz.ca" target="blank">QuickScriptz Design</a> 2007
</div>
</body>
</html>

Login.css
body {
margin: 0px;
background: url(../images/gradient_bg.gif) repeat-x;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 11px;
color: white;
}
#horizon {
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block;
}
#horizon_content {
margin-left: -125px;
position: absolute;
top: -35px;
left: 45%;
width: 350px;
height: 70px;
visibility: visible
vertical-align: bottom;
text-align: center;
}
#footer {
margin-top: 54%;
margin-left: 72%
}
body > div#footer {
margin-top: 53%;
margin-left: 72%
}

Thanks again :)
_Aerospace_Eng_
06-19-2007, 10:34 PM
For something like that you can use this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Radio DJ Panel v4 - Beta</title>
<style type="text/css">
html, body {
margin: 0;
padding:0;
background: #000 url(../images/gradient_bg.gif) repeat-x;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 11px;
color: white;
height:100%;
}
#container {
height:100%;
display:table;
position:relative;
margin:auto;
}
#horizon {
display:table-cell;
vertical-align:middle;
width:350px;
margin:auto;
text-align:center;
}
#footer {
position:absolute;
bottom:20px;
right:20px;
width:100%;
text-align:right;
}
</style>
<!--[if IE]>
<style type="text/css">
#container {
overflow:hidden;
position:relative;
}
#horizon {
position:absolute;
top:50%;
left:50%;
margin-left:-175px;
text-align:center;
width:350px;
}
#horizon_content {
position:relative;
top:-50%;
left:0;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="horizon">
<div id="horizon_content"> Centered Content Goes Here </div>
</div>
<div id="footer"> <a href="?error=forgotpass">Forgot Password</a> | © <a href="http://quickscriptz.ca" target="blank">QuickScriptz Design</a> 2007 </div>
</div>
</body>
</html>

However if the content is not to be centered then you will have to use the example I gave you.
Troy297
06-20-2007, 01:23 AM
Thanks :)

That worked when I simply added the footer styles to the stylesheet. Here's what I used :D

#footer {
position:absolute;
bottom:20px;
right:20px;
width:100%;
text-align:right;
}
body > div#footer {
position:absolute;
bottom:20px;
right:20px;
width:100%;
text-align:right;
}

Thanks again :)
_Aerospace_Eng_
06-20-2007, 01:28 AM
You don't need this
body > div#footer {
position:absolute;
bottom:20px;
right:20px;
width:100%;
text-align:right;
}
Since the style are the same as the one before it.
Troy297
06-20-2007, 01:35 AM
Oh ya.... lol

Thanks :)