...

View Full Version : A couple of CSS questions.



spl1nter
03-04-2004, 11:39 PM
Before I start, here is the site that I will be referring to:hBB (http://home.graffiti.net/spl1nter:graffiti.net/css_attempt/)

In CSS, I cannot seem to vertically align any text. This is the code I'm using for the header part on my page:



#header {
background-color: #FFFFFF;
color: #000000;
border: 2px solid #CCCCCC;
width: auto;
height: 100px;
text-align: center;
margin-bottom: 10px;
vertical-align: auto;
}


Also, to center align the page, I have used the following:



margin-right: auto;
margin-left: auto;


This works for Netscape 6, Opera 6 and Opera 7. It does not have any effect in IE6. Is there anything else I could use.

Thanks in advance.

missing-score
03-04-2004, 11:52 PM
as far as I know, there isnt any vertical align formatting in CSS, I may be wrong though.

To center content, I use


CSS:

body {
margin: 0px auto 0px auto;
text-align: center;
}

.wrapper {
margin: 0px auto 0px auto;
}


XHTML:

<body>

<div class="wrapper">

.... content in here

</div>

</body>


Hope this helps.

Nightfire
03-05-2004, 12:04 AM
There's vertical-align:top/middle/bottom Don't think there's an auto though

spl1nter
03-05-2004, 12:07 AM
Thanks a lot :D

Woops, I meant to edit the auto bit. I had tried middle, top and bottom but it had no effect at all on the text. I thought I'd just try auto out of hope, but it didn't work.

missing-score
03-05-2004, 12:16 AM
Ive seen the vertical align used but it never actually seems to do anything? does anyone know anything about this?

Nightfire
03-05-2004, 12:19 AM
Not sure how it works really. Better wait for the experts :D. It seemed to work for me though on my smilies for my site. I got them aligned to the bottom and they're staying inline with the text now.

spl1nter
03-05-2004, 12:19 AM
When I set it to 500px (just to see if anything happened), it made the area with "This is where the logo will go." really tall (500 pixels I'm guessing :P). The text stayed at the top though?

lavalamp
03-05-2004, 02:15 AM
Just to clear a couple of points up:

vertical-align (http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align)
lots of stull on "auto" (http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins)

Antoniohawk
03-05-2004, 03:46 AM
center align:


margin: 0 auto;

ronaldb66
03-05-2004, 08:45 AM
IE (5.x, 6?) doesn't understand the margin: auto bit; as a hack, to center a block element, its parent should have a text-align: center property, which IE will incorrectly apply to the block element as well. Inside the centered block, text alignment may have to be corrected again. Do specify margin-left / -right: auto as well for compliant browsers.

The vertical-align property only applies to inline elements / content and table cells; check the specs for more detail: CSS 2.1: vertical-align (http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#propdef-vertical-align).

jdan
03-05-2004, 12:30 PM
Yea, you wanna do pretty much anything with IE you have to hack something or other...
Remember trying to get max width working in it. :P

spl1nter
03-05-2004, 02:24 PM
I've decided that (just this once) I'll use a table. It will hopefully get removed when I get a logo as it should take up the full space.

lavalamp
03-05-2004, 05:57 PM
Originally posted by ronaldb66
IE (5.x, 6?) doesn't understand the margin: auto bit;IE 6 does.


Originally posted by jdan
Yea, you wanna do pretty much anything with IE you have to hack something or otherNot true, I make a point never to use hacks and I've created (what I consider to be) a pretty decent layout (http://www.webdevforums.com/showthread.php?t=2890#post18287).


Originally posted by spl1nter
I've decided that (just this once) I'll use a table.NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO :(

The key is not to rely on fixed width content areas, but to determine the width of the content area via the left and right margins.
For example, the layout code that I posted a link to above has a content area with left and right margin widths of 170px.
Since then I have re-done the styles to have a left and right margin of 28% at the sides, this makes the page look fine on 640x480 and on higher resolutions such as 1024x768. You can see the layout in action here (http://www.fsg-uk.com/) and here (http://www.hackus.tk).

Your current layout could quite easily be converted into CSS while at the same time making it more fluid. If you still insist on centring a fixed width block of content then do this:

position:absolute;left:50%;

And then have a margin-left: set to minus half of the content width, so for instance if the content block is 200px wide you would do this:

margin-left:-100px;

Unfortunately if the content is very wide (like on yours) then on a smaller resolution the left hand side of the content will be cut off, but the user will still be able to scroll to the right and see the content over there.

Fluid layouts are the furture!!! :D

spl1nter
03-06-2004, 12:51 AM
I needed to vertically align the text, not horizontally.

It's OK, I managed to do it with



position: relative;
top: 50%;


But then I decided that I probably wouldn't need it and got rid of it :P

I have now got the design ready and you can see it here (http://home.graffiti.net/spl1nter:graffiti.net/).

If you go to the updates page you'll see how much CSS has helped the site.

lavalamp
03-06-2004, 02:10 PM
I'm still seeing tables...

me'
03-06-2004, 03:10 PM
Originally posted by lavalamp
I'm still seeing tables... Where? In the calendar? That's good, semantic usage.

lavalamp
03-06-2004, 04:06 PM
Check out the footer as well. There's two tables in there.

spl1nter
03-06-2004, 06:25 PM
I really, really did not want to put those two tables there.

I tried using CSS with position: relative; and it worked fine in Opera 6 + 7 and Netscap 6 but infortunately not in IE6.

The text appeared in the right place, but there was a massive gap where the text would have been (I was using DIV's) without the displacement.

Is there anyway of fixing this? Or is there another way of spacing the text out (as that is what they are used for).

missing-score
03-06-2004, 06:39 PM
you may want to change the doctype to XHTML, as this should support the box model properly, and it may help fix problems with the box model in IE 6.

spl1nter
03-06-2004, 06:49 PM
So how would I change this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

missing-score
03-06-2004, 06:55 PM
I use this doctype:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Which is XHTML 1.0 Strict. This will make sure IE6 interprets layers (div) the same as mozilla ect. Please note however that your page will follow XHTML 1.0 Strict definitions so some code may need to be we-written. Its good if you can code your page in XHTML, as it means that no matter what device is accessing it, providing your page validates, its readable and useful.

spl1nter
03-06-2004, 06:57 PM
Thanks.

I'll go and validate it to see what code needs changed and then write the CSS :D

missing-score
03-06-2004, 06:59 PM
if ya need any help, were here :D

spl1nter
03-06-2004, 07:09 PM
I managed to fix the problems (mainly not closing tags like </meta> and </img>

There are two that I don't understand.


Line 2, column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<html lang=en>

How do I set the default language?


Line 25, column 82: there is no attribute "border".

...alt='Click to skip this menu' border='0' width="0" height="0"></img></a>

What can I use then to make sure there is no border around my linked image?

missing-score
03-06-2004, 07:12 PM
As for the first part, im not sure, but you may just wish to try:

<html lang="en">


for the second question, border is not supported by img tags, so simply add (inline or in a style file)

border: 0px;


If you are doing this inline it will be:

<img style="border: 0px" .... />

missing-score
03-06-2004, 07:13 PM
Also, to let you know, for single tags, you dont have to do this:

<img ..></img>
<meta></meta>
<br></br>

XHTML allows them to be presented like this:

<img ... />
<meta />
<br />

EDIT: yay! post 700

spl1nter
03-06-2004, 07:28 PM
Thanks a lot :D

It passed. I'll now go and apply it to all the pages and get rid of those tables :D

spl1nter
03-06-2004, 07:48 PM
Um....it hasn't worked :(

This is the HTML code:



<div class="t1">latest news: <a href="index.htm" title="Click to go to this news article.">None</a></div>
<div class="t2">latest topic: <a href="index.htm" title="Click to go to this topic.">Hattrick</a></div>
<div class="t3">latest post: <a href="index.htm" title="Click to go to this post.">Hattrick</a></div>

<div class="m1">users online: <a href="index.htm?profile=spl1nter" title="Click to go to spl1nter's profile.">spl1nter</a></div>

<div class="b1">most users online: 12</div>
<div class="b2">total number of members: 725</div>
<div class="b3">total number of topics: 58</div>
<div class="b4">total number of posts: 321</div>


And this is the CSS:



#footer .t1 {
position: relative;
}
#footer .t2 {
position: relative;
left: 33%;
top: -14px;
}
#footer .t3 {
position: relative;
left: 66%;
top: -28px;
}
#footer .m1 {
position: relative;
top: -28px;
}
#footer .b1 {
position: relative;
top: -28px;
}
#footer .b2 {
position: relative;
left: 25%;
top: -42px;
}
#footer .b3 {
position: relative;
left: 50%;
top: -56px;
}
#footer .b4 {
position: relative;
left: 75%;
top: -70px;
}


Please don't bawl at me for crap programming :P I'm new to CSS.

missing-score
03-06-2004, 07:58 PM
Ok, there are 3 properties that will help no end here, they are:

width
height
float

Im busy right now so I dont have time to re-write your code for you, but have a play around with this and expiriment using float.


.container {
width: 700px;
}

.box {
width: 100px;
float: left;
border: 1px solid #999;
background: #DDD;
}

.rightbox {
width:200px;
float: right;
border: 1px solid #999;
background: #CCC;
}


<div class="container">

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

<div class="rightbox">Div 4</div>

</div>

spl1nter
03-06-2004, 09:06 PM
Thanks a lot :D

It works perfectly. My site now has fully compliant CSS and XHTML at a strict level thanks to you.

Check the site in a couple of hours to see something :P

Now I can go and complete the site in CSS and HTML before the real fun begins in PHP and MySQL.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum