Few basic questions for the knowledgeable. [Archive]

Click to See Complete Forum and Search --> : Few basic questions for the knowledgeable.

Kurisu

10-15-2006, 06:15 AM

Hello, I'm pretty knew just started CSS last night and things are progressing, but I do have a few questions that perhaps someone can answer/clear up for me.

First my page layout can be seen from the following site:

http://one.xthost.info/Kurisu/Main.html
(hope the link works)

Anyways it is basically a:

header
menu
container
- Left navigation bar set with absolute.
- Main content set with relative.
- Right navigation bar set with absolute.

Here are my questions:

1) How do I center text vertically in an element? I want to center my title vertically in the header like it is horizontally.

#header h1
{
text-align: center;
/* what do I need here? */
}

2) I would like an image to be displayed in the bottom right corner of my container div. I thought something like the following might work, but it doesn't (i guess because of trying to do pixel math on a percentage?):

<div id="container">

<div id="bottom_right_image">
</div>

</div>

#bottom_right_image
{
position: absolute;
left: 100% - 118px; /*118px being the width of my image. */
top: 100% - 220px; /*220px being the height of my image. */
}

I'm sure there is a very easy way to accomplish what I'm trying to do, but what is it :P ?

3) This question relates to the height attributes of the divs. I would like my left bar, my main content, and my right bar to all always have the same height. I.e. if one grows the rest will follow. It seems the container div grows as one of its "relative" children does, but not an "absolute" child...

For example, the bars and main context are only the height of its own text. In my website the left bar is alot longer than my main text and my right bar so it looks really funny...

See here:
http://one.xthost.info/Kurisu/Main2.html

I can get around this by setting the container's background color the same as my bars so it appears the bars are expanding as the main text grows and all I have to due is make sure my main text is longer than either bar. This seems kinda lame though and would require like a bunch of 's in my main content area plus IE has a weird hitch in the transition from my bars to the background behind it?

see here: See here:
http://one.xthost.info/Kurisu/Main.html


This is the main content area. 
This is the main content area. 
This is the main content area. 

This is the main content area. 
This is the main content area. 
This is the main content area. 
This is the main content area. 
This is the main content area. 
This is the main content area. 

This is the main content area. 
This is the main content area. 
This is the main content area. 
This is the main content area. 
 


Also what if I wanted the right bar to be a different color than the left the above scheme wouldn't work? Is there an easy way to do this?

Can someone clarify relative too? It sets up things like they are stacked vertically right? I can't put two relative divs in the same container and have the positioned side by side can i? I have to use absolute to do this right?

Thanx for any help..

nshiell

10-15-2006, 08:33 AM

Try:

text-vertical-align:middle

P.s. not bad CSS considering you only statred last night

drhowarddrfine

10-15-2006, 10:19 AM

There is no such thing as text-vertical-align. Do you mean vertical-align? Haven't looked at the problem yet.

Also, validate your code. You have 13 bad errors.

Kravvitz

10-15-2006, 02:41 PM

Please make sure that your (X)HTML and CSS are valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Your XHTML error is that only <li>s are allowed to be direct children of <ul>s and <ol>s. You need to nest sub-lists inside the <li> of the parent list.

1) Vertically Centering With Line-Height (http://www.dynamicsitesolutions.com/css/vertically_centering_with_line-height/)

2) Align Elements To the Bottom of a Container (http://www.dynamicsitesolutions.com/css/align_elements_to_bottom_of_container/) -- instead of setting left:1em; set right:0;

3) Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)
Creating Liquid Faux Columns (http://www.communitymx.com/content/article.cfm?cid=AFC58)
Equal Height Columns - revisited (http://www.positioniseverything.net/articles/onetruelayout/equalheight)

Edit: Fixed broken link.

Kurisu

10-16-2006, 01:22 AM

P.s. not bad CSS considering you only statred last night
Sure, but in the process I smashed a calculator on the wall trying to figure out a nested <div> tutorial. It was a nice calculator *sigh*... Sure is annoying stuff for beginners :D , but making sense now.

Do you mean vertical-align?
I tried that, but it didn't seem to do anything. I tried it both in the header container and the header's text container.

Ex: I placed it in both at different times, but it had no effect on the text.

#header
{
background: #3f80b7;
text-align: center;
height: 59px;
}

#header h1
{
margin: 0;
font-family: Monotype Corsiva, Serif;
color: #ffffff;
font-size: 36px;
letter-spacing: 2px;
}

Also, validate your code. You have 13 bad errors.
Please make sure that your (X)HTML and CSS are valid.
Your XHTML error is that only <li>s are allowed to be direct children of <ul>s and <ol>s. You need to nest sub-lists inside the <li> of the parent list.

Okie, bookmarked one of those sites while reading up about XHTML/HTML, but hadn't tried one yet... will validate ASAP and see how all that works.

1) Vertically Centering With Line-Height
Yah yah that worked dude.. thnx... (had to set line-height: /*height of header*/)

Your uh second link led me to Puddleglum and Marsh-wiggles. :D

Equal Height Columns - revisited
This method kinda confuses me, but the other two sound quite simple and effective.. gonna give 'em a try... thnx

Kravvitz

10-16-2006, 01:34 AM

You're welcome :)
Your uh second link led me to Puddleglum and Marsh-wiggles. :D
Oops. :o Puddleglum is the name of my local development server. I forgot to change the URL to point to the public version of the site. I fixed it now. Fellow Narnia fan, I see. :D

Equal Height Columns - revisited
This method kinda confuses me, but the other two sound quite simple and effective.. gonna give 'em a try... thnx
Yeah, that method is complicated. I included the link because it's an alternative solution. I prefer using faux columns myself.