We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Bah @ text positioning
Topic Started: Mar 20 2005, 07:28 PM (625 Views)
Zach Mar 20 2005, 07:28 PM Post #1
Member Avatar
Missjayness
[ * * * * * ]
 I'm making a site with CSS ad div's just to clean up my knowledge of it. I'm encountering a problem with font positioning in my divs.

http://ascii.dbqphost.com

See content? It should be right at the top of the black area. Same thing with navigation, it should be at the top of it's div. Any thoughts? my CSS:

http://ascii.dbqphost.com/css.css
Offline Profile Quote Post Goto Top
 
FearKiller Mar 20 2005, 07:36 PM Post #2
Member Avatar
www.drewscripts.com
[ * * * * * ]
 In your CSS there is 120px of padding at the top of both these DIVs. Try messing with that and see what happens. If that doesn't work then I'll play around with it.
Offline Profile Quote Post Goto Top
 
Zach Mar 20 2005, 07:49 PM Post #3
Member Avatar
Missjayness
[ * * * * * ]
 Thanks it solved that problem. I'll figure out everytihng else. I seriously can't believe i missed that in my CSS!
Offline Profile Quote Post Goto Top
 
SkItZo Mar 20 2005, 09:21 PM Post #4
Support Volunteer
[ * * * ]
 Haven't looked at your css file nor will you probably find this useful, but you can also position something using this:

<div style="float: left;">content</div>
Offline Profile Quote Post Goto Top
 
Zach Mar 20 2005, 10:24 PM Post #5
Member Avatar
Missjayness
[ * * * * * ]
 ;) Already got it covered in my CSS.
Offline Profile Quote Post Goto Top
 
Zach Mar 22 2005, 05:52 PM Post #6
Member Avatar
Missjayness
[ * * * * * ]
 Bleh, I don't like double posting...:'(

Now I'm having a problem with footer placement. No matter what page you view it's always at the very bottom, right when you look at it, and it doesn't move with the bottom of the content div. Does anyone have suggestions as to how I could fix this?

http://ascii.dbqphost.com/wishgame.php

scroll down a bit, see how the footer stays on top of the text, and is stuck there? How would I fix that?
Offline Profile Quote Post Goto Top
 
Gornakle Mar 22 2005, 06:15 PM Post #7
Member
[ * * * * * ]
Quote:
 
#navi {
display: block;
background-color: #D5E2D4;
width: 175px;
margin-top: 0px;
text-align: center;
float: left;
}

#content {
background-color: #eeeeee;
position: absolute;
top: 81px;
left: 177px;
right: 0px;
margin-top: 10px;
margin-left: 200px;
}

#footer {
clear: both;
display: block;
position: absolute;
left: 177px;
right: 2px;
bottom: 1px;
height: 13px;
background-color: #D5E2D4;
border: 1px solid #303030;
color: #000000;
text-align: center;
}


Remove the things crossed out and add the things in red. Haven't fully tested it, but it should work. :)
Offline Profile Quote Post Goto Top
 
Zach Mar 22 2005, 06:17 PM Post #8
Member Avatar
Missjayness
[ * * * * * ]
Gornakle
March 22, 2005 05:15 PM
Quote:
 
#navi {
display: block;
background-color: #D5E2D4;
width: 175px;
margin-top: 0px;
text-align: center;
float: left;
}

#content {
background-color: #eeeeee;
position: absolute;
top: 81px;
left: 177px;
right: 0px;
margin-top: 10px;
margin-left: 200px;
}

#footer {
clear: both;
display: block;
position: absolute;
left: 177px;
right: 2px;
bottom: 1px;
height: 13px;
background-color: #D5E2D4;
border: 1px solid #303030;
color: #000000;
text-align: center;
}


Remove the things crossed out and add the things in red. Haven't fully tested it, but it should work. :)

Alright, I'll try those out now. ^_^
Offline Profile Quote Post Goto Top
 
Ben Mar 22 2005, 06:17 PM Post #9
Member Avatar
Quantum-locked when observed.

 Get rid of the absolute positioning on your navi, content, and footer divs. Use floats instead. :D

This should be the code for the three divs now.

Code:
 
#navi {
float: left;
background-color: #D5E2D4;
width: 175px;
margin-top: 0px;
text-align: center;
}

#content {
background-color: #eeeeee;
float: left;
margin-top: 10px;
width: 80%;
}

#footer {
clear: both;
height: 13px;
background-color: #D5E2D4;
border: 1px solid #303030;
color: #000000;
text-align: center;
}


You might want to experiment with the width of the #content box, but it needs a width declared for it float along side #navi. It might be easier to change the width of #navi from 175px to a percentage measure, but I'll leave that up to you. :)

Tested in the cool real-time CSS editor of Firefox's Web Developer extension. ;)

Edit: Whoops, too slow. :D And Gornakle's actually makes a little more sense, since he's using a margin . . .
Offline Profile Quote Post Goto Top
 
Gornakle Mar 22 2005, 06:21 PM Post #10
Member
[ * * * * * ]
Tachyon
March 22, 2005 11:17 PM
Tested in the cool real-time CSS editor of Firefox's Web Developer extension. ;)

Whoa.. talk about coincidence. :D
We posted (about) the same solution, with two minutes apart in posting, using the same extension.
Offline Profile Quote Post Goto Top
 
Zach Mar 22 2005, 06:23 PM Post #11
Member Avatar
Missjayness
[ * * * * * ]
 Alright, I tried it out, looks great. It now always goes to the bottom of the #content div. One more quick question, it's mainly for design aspect, but for pages that have less content than what would fill up the page, the #footer goes to the base of the #content div, no matter what. is there a way to specify it so that it'll always be at the very bottom, 100% of the time?

</CSS-noob>
Offline Profile Quote Post Goto Top
 
FearKiller Mar 22 2005, 06:25 PM Post #12
Member Avatar
www.drewscripts.com
[ * * * * * ]
 It's because when you position something abslutely and give it the "bottom: 1px" property, it displays the element 1 pixel from the bottom of the browser window, not the bottom of the page. You can either add a negative value to the "bottom" property and through trial and error you'll get it to where you want it, but it will most likely not be the same in all browsers and resolutions, so I wouldn't recommend doing it that way.

I encourage you to get away from positioning DIVs absolutely and take advantage of the "float" property and if you have the need to position something I recommend you use relative positioning rather than absolute positioning. Relative positioning moves something from where it should be rather than absolute positioning which completely ignores where the element should have been.

EDIT: wow this post was very late :wacko:
Offline Profile Quote Post Goto Top
 
0 users reading this topic
« Previous Topic · Technology Chat · Next Topic »
Add Reply