new to css with a bunch of starting problems [Archive]

Click to See Complete Forum and Search --> : new to css with a bunch of starting problems

akos91

05-26-2004, 06:03 PM

hello, I'm working on creating a site with css, it will be my first, getting rid of using tables to create a layout.

I've run into a bunch of problems that I need help with:

I can't seem to align divs properly; I've tried using text-align: center, but that doesn't seem to work.

I don't know how to get a border to hug a div/table, if you look on the previews of the pages, you will see that there is a small gap between the border and the actual content.

In the navigation bar of the page, there is a margin on the left part, which I can't seem to get rid of.

the temporary page is here:

http://www.freewebs.com/ftseng

and the css stylesheet is here:
http://www.freewebs.com/ftseng/style.css

freewebs, which I am using to temporarily host my site until I acquire some better host, froze whenever I tried to create new folders for images, so that's why there are no images. sorry about that!

thanks, I appreciate any help I can get!

Sam

05-26-2004, 06:07 PM

perhaps its just me, but I count 4 nested tables there... This layout is quite simple with just div's but I'd suggesting getting it down to a semantic markup before you try to move on.

akos91

05-26-2004, 06:18 PM

yea, it used to be all tables and I'm in the process of changing it, but I wan't to make sure everything's working properly along the way, so once I solve these problems, I'll continue with changing everything.

Sam

05-26-2004, 06:42 PM

here's the basics, add borders where needed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>chinesemythology@risingasia.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>

</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/chinesemythology.jpg" alt="Header Image" /></h1>
</div>
<div id="content">
<h2>HOME</h2>
<h3>introduction to chinese mythology and this site</h3>
<p>Chinese mythology is quite an broad field.
There is a large number of various dieties, gods, and goddesses which makes it difficult for me to completely cover, being that I lack a proficient background in the field.
Don't fret, because with extensive research, I will still be able to provide the proper knowledge.
<div id="floater"><img src="images/jadeemperor.jpg" alt="The Jade Emperor" style="width:149px;height:172px;"><br />The Jade Emperor (Yu Huang)</div>
<p>Anyways, because the Chinese civilization is thousands and thousands of years old, its mythology has had time to develop and flourish.
Countless stories have spawned from the seemingly endless pool of Chinese dieties. Many of these dieties are some sort of animal, but the highest authorities of the gods and goddesses are always honors reserved for human forms.
For example, the great Jade Emperor, Lord of Heaven and Creator of the Universe, depicted on the right, is a human (well, not really, but he looks like one).
For you Christians, its sort of like the "created in His image" idea.
The Jade Emperor is also known as Yu Huang Da Di (in Hanyu Pinyin).
It is at this point that I would like to mention that many of these dieties have both an English name (a translation of the true Chinese name), and the Chinese name.
All Chinese names on this site will be written in Hanyu Pinyin, which is the official phonetic system used in China.</p>
<p>The primary purpose of this site is to inform those who wish to know all that I can teach about Chinese mythology.
As I said before, there's alot to know about Chinese mythology, so sections will be relatively brief, but at the same time, informative.
This site will be updated as often as possible with new information and sections.
So, browse to your heart's content and learn all that there is to be learned!</p>
</div>
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">mythology</a></li>
<li><a href="#">monkey king</a></li>
<li><a href="#">links</a></li>
</ul>
</div>
<div id="footer">
Copyright © 2004 Francis Tseng. A Chinese/Japanese character viewing program may be necessary for full effect.
</div>
</div>
</body>
</html>

akos91

05-26-2004, 07:38 PM

thanks, I have recoded most of the stuff and uploaded it. I am still having the issue of aligning the container into the center, and also, the nav bar is above the content rather than to the left of it. How do I fix this?

Sam

05-26-2004, 07:42 PM

to center it apply delete the align:center line in #container, and replace your margin:0px; with margin:0px auto; to get your nav on the left, you'll first need to make the content's width less than the width of the container (right now they're both 850px. Once you get that I'll help you with the rest.

akos91

05-26-2004, 07:48 PM

thanks, its getting there. It's now centered, but I'm still having problems with the nav bar. The text seems to be drifting out of its place, and the content section still isnt on the same level as the navigation. The nav has a width of 10% and the content has a width of 90%.

Sam

05-26-2004, 08:08 PM

your html (http://validator.w3.org/check?verbose=1&uri=http%3A//www.freewebs.com/ftseng/) isn't valid. I also think your doctype may be part of the problem, I'd suggest using the one I used in my example.

akos91

05-26-2004, 08:30 PM

I moved the site to geocities:

http://www.geocities.com/akos91/

the images are there, so it should be clearer.

I changed the doc type and related stuff, and now my dividers are crossing through text and stuff. The nav bar is still not on the same level with the content. Right now I'm trying to solve the HTML problems.

akos91

05-26-2004, 08:35 PM

in the validation, I am constantly told to add "/" to tags, even to those that I dont think require them (suchas <br>). Are they really necessary?

oh, and since it is on geocities, alot of the invalid html is actually from the code geocities sticks in.

Sam

05-26-2004, 08:45 PM

tags that require a /> are:
<br />
<hr />
<img />
<link />
<meta />
I may have missed some, but I believe that is it

akos91

05-26-2004, 08:56 PM

thank you

for the xhtml transitional, i am getting this error:

#

Line 33, column 11: ID "divider" already defined

<div id="divider"><img src="images/divider.gif" width="100%" height="1" alt=".

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hock for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

(Send feedback on message #141)
#

Line 17, column 11: ID "divider" first defined here

<div id="divider"> <img src="images/divider.gif" width="100%" height="2" alt="

I don't understand why I am not allowed to use that twice?

nevermind, I guess I will just change it to a class.

another issue (im pretty picky when it comes to these things):

when I had border="0" for my little godchecker image in the navigation menu, the validator told me it did not belong there, so I removed it. However, now there is link border around it that I do not want. What is a valid way of removing it?

another edit: i got the floating divider things to work.

ray326

05-26-2004, 10:07 PM

IDs are supposed to be unique on a page. What you need for that is a "class".

akos91

05-27-2004, 02:39 PM

yea, I got that fixed, thanks.

my nav bar and content still won't go side by side. I am floating the content to the right, giving it a width of 700px and a left margin of 50px. The nav bar has a width of 50px, so the content's margin should accomdate it. but its not working, what I am doing wrong or missing?

KarmaKills

05-27-2004, 02:48 PM

the word mythology is 67 pixels wide. You'll either need to increase the size of your nav div or decrease the font size in order to fit it. Easiest way would be to set the nav to say 70px and content to 680px.

akos91

05-27-2004, 03:04 PM

ok, I did that, but it is still not working. I think it has something to do with the text not staying in its div.

I am having a similar issue with the picture I have in the main content. It seems to be drifting off to the right as well, like the navigation menu's text.

KarmaKills

05-27-2004, 04:30 PM

I took a quick look at it. There are a few problems. You should float your nav and content divs left. This will stack them side by side. There seems to be a 2px margin or padding somewhere. They'll stack side by side if you drop your width on one of them by 2px.

akos91

05-27-2004, 05:02 PM

thanks. I did that tweaking and its gotten me alot closer; now it looks like there is enough space to fit the content div...but its still not working. Does anyone know how I can jam the nav text back into its proper place?

KarmaKills

05-27-2004, 05:27 PM

oh yeah, delete the margin from your content div and remove 2px from either the nav width or the content width.

Daniel T

05-27-2004, 05:35 PM

Originally posted by KarmaKills
the word mythology is 67 pixels wide. You'll either need to increase the size of your nav div or decrease the font size in order to fit it.
Text widths will change all the time, so it is not safe to say that it is 67 pixels wide. What if the user has a larger or smaller font size set on their browser? In order to fix this to get it to work all the time, you will need to define the width with em's, rather than pixels.

Sam

05-27-2004, 08:17 PM

make sure your #nav ul has margin-left:0; I am pretty sure thats what's causing the problem (if not its padding-left)

akos91

05-27-2004, 08:27 PM

alright! with all your input, it finally worked. thanks alot!

but...the image in the content is still pushed off to the right for some reason. I will upload everything in a couple minutes.

also, how do I get the nav bar content to the top of its div? I have tried vertical alignment and removing any possible margins or padding on the top but they have not worked. Also, is it possible to make the nav bar's div stretch to be the same height as the content section?

Sam

05-27-2004, 08:46 PM

the vertical alignment and your extra spacing can all be resolved by making #nav ul margin:0; instead of margin-left:0;
As to the stretching, not really. your best bet is Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)

akos91

05-28-2004, 11:02 PM

alright, thats working now too, thanks. I can do without the vertical filling, but I still can't resolve the issue of the floater image drifting to the right.

KarmaKills

05-29-2004, 03:27 PM

I'd change floater from a span to a div. Then add some margin all the way around. Maybe change it to this...

#floater {
float: right;
font-family: Tahoma, Arial Unicode MS;
font-size: 7pt;
font-weight: bold;
font-style: italic;
padding: 0px;
text-align: center
margin: 3px;
}

Div is a block element and will handle it better then span which is for inline elements. Just delete the style for margin-left from your html. You might want to play around with the margin some for the desired effect. I'd say something like 6px - 8px. You could even fatten up the right margin a little with an extra line, margin-right: 12px; . You could also just use your padding and it will have the same effect as you arent using any borders around it.

akos91

05-29-2004, 07:13 PM

interesting...when I changed all the stuff in the css like you suggested, and then changed the span to a div. This did solve the problem of the picture floating off to the right, but now there is a gap between the text. If you look at the page, there is a break between the parts of the paragraph. How do I solve this one?

KarmaKills

05-29-2004, 08:56 PM

remove floater from the para containter and put it before it. add marin: 0px; to your para style.

akos91

05-29-2004, 09:12 PM

alright, it looks much nicer now, thank you. but for future reference, what if I want to put the picture in the middle of the para container? What would I do then?

KarmaKills

05-29-2004, 09:23 PM

If you havent much text, there will be a gap at the bottom of it before the new text as it wont flow around the image. The second paragraph is in a container that wont overlap the first paragraphs container, if that makes sense. If not add border: 1px to para and you will see whats happening.

akos91

05-29-2004, 09:51 PM

thanks, it seems to be working in a variety of positions now.