CSS can be a bitch. [Archive]

Hunter

November 29th, 2009, 11:38 AM

I have never managed to find a decent way of aligning content to the middle of the page.

To horizontal align I usually use <center>, but I have herd that is a bad way.

I can't seem to get a div and its content to align to the middle vertically.

CSS:

.login {
background-color:#121212;
top:0px;
left:0px;
z-index:5;
width:100%;
height:100%;
vertical-align:middle;
}
.login-form {
background-color:#1A1A1A;
width:50%;
height:30%;
vertical-align:middle;
}

HTML:

echo "<div class=\"login\">";
echo "<center>";
echo "<form name=\"login\" class=\"login-form\">";
echo "<p class=\"g2\">Username: </p>";
echo "<input type=\"text\" name=\"uname\" class=\"contact-feild\" size=\"14\">";
echo "<br />";
echo "<p class=\"g2\">Password: </p>";
echo "<input type=\"text\" name=\"pword\" class=\"contact-feild\" size=\"14\">";
echo "</form>";
echo "</center>";
echo "</div>";

Yoko

November 29th, 2009, 11:58 AM

margin:0 auto;

winner

Hunter

November 29th, 2009, 12:02 PM

That's horizontal aligning. I use that sometimes though :)

Yoko

November 29th, 2009, 12:12 PM

The only properties of vertical-align I can think of are

length, xx%, top, text-top, middle, bottom, text-bottom, inherit
margin:auto 0;
maybe? lol

Or set equal padding or margin on the top and bottom of it. And if you don't have this (https://addons.mozilla.org/en-US/firefox/addon/1843), I suggest you get it. Really helpful Firefox add-on to inspect elements and edit them in-browser.

Phopojijo

November 29th, 2009, 12:45 PM

Yeah that's what you do... you set equal auto margins on the top and bottom of the div.

Hunter

November 29th, 2009, 12:46 PM

Cool, cheers :)

Leaving that for now, need to look into some more PHP.

legionaire45

November 29th, 2009, 01:32 PM

Give your page a container div:

<html>
<head>
</head>
<body>
<div id="container">
*content*
</div>
</body>
</html>

CSS:

#container { width: xxx; margin: auto 0; }

You have to manually set the width of the page. This usually works pretty well in most cases. I haven't touched HTML or CSS in a while so I may have made a mistake in the code.

Also, off topic, but unless you're trying to do something dynamic with all of that html you probably don't need to use echo 10,000 times. If it helps, here's a good tutorial (http://css-tricks.com/app-from-scratch-1-design/) on making a web app that might be useful.

Hunter

November 29th, 2009, 01:36 PM

Which is best?

id / class

Because I always use class, which means the css style is like this:

.stylename

instead of

#stylename.

---

I will sort that out later though, well, another day. Just learning about sessions.

Phopojijo

November 29th, 2009, 03:34 PM

Basically... IDs are easier if there's only a minor change occurring once in your webpage.

Classes are for bigger changes that occur multiple times.

Limited

November 29th, 2009, 04:53 PM

Would top: 50% work or not.

Sel

November 29th, 2009, 05:11 PM

counter strike blows

Jelly

November 29th, 2009, 05:46 PM

http://craphound.com/images/css_is_awesome.jpg

I just wanted an excuse to post this mug thanks Hunter.

Hunter

November 29th, 2009, 06:44 PM

Recoded the design, works now. One problem, I have a div, with my menu items in, they are being pricks and won't vertically align to the center.

CSS:

.leftBar {
background-color:#000000;
height:8%;
left:0;
position:absolute;
top:20%;
width:100%;
border:1px;
border-style:solid;
border-color:#0066CC;
border-left:0px;
border-right:0px;
background-image:url(images/navBar-warn.gif);
background-repeat:repeat-x;
margin:0 auto;
text-align:center;
}

HTML:

<div class="leftBar"><?php include "includes/inc_menu.php"; ?></div>

klange

November 29th, 2009, 06:59 PM

lol CSS (http://cce.phpwnage.com/cerebrum.css)

@Hunter: Let's see what inc_menu generates, things changed depending on what sort of element you're using in there.

Hunter

November 29th, 2009, 07:04 PM

<a class="menu" href="index.php">Home</a>
<a class="menu" href="gallery.php">Gallery</a>
<a class="menu" href="aboutus.php">About Us</a>
<a class="menu" href="contactus.php">Contact Us</a>
<a class="menu" href="downloads.php">Downloads</a>

CSS - "menu"

/*Menu Links */
a.menu:link {
color:#CCCCCC;
text-decoration: none;
font-family:calibri;
background-image:url(../images/vista/button_unactive.png);
background-repeat:no-repeat;
background-position:center;
margin-left:25px;
padding:1em;
}
a.menu:visited {
color:#CCCCCC;
font-family:calibri;
text-decoration: none;
background-image:url(../images/vista/button_unactive.png);
background-repeat:no-repeat;
background-position:center;
margin-left:25px;
padding:1em 3em 1em 3em;
}
a.menu:hover {
color:#CCCCCC;
font-family:calibri;
text-decoration: none;
background-image:url(../images/vista/button.png);
background-repeat:no-repeat;
background-position:center;
margin-left:25px;
}
/*END LinkStyle */

klange

November 29th, 2009, 07:14 PM

Your margin: 0 auto; isn't going to work on an <a>.

Hunter

November 29th, 2009, 07:33 PM

Dammit, what will?

jcap

November 29th, 2009, 08:58 PM

http://craphound.com/images/css_is_awesome.jpg

I just wanted an excuse to post this mug thanks Hunter.

http://humor.beecy.net/geeks/web-design/web-design.gif

MetKiller Joe

November 30th, 2009, 12:08 AM

http://humor.beecy.net/geeks/web-design/web-design.gif

:gonk:

So... true.

Hunter

November 30th, 2009, 03:59 AM

DEFO true. Just loaded up the basic design in IE at college... and omg, how much I swore!

I may as well remove the style sheet because fucking IE shizen doesn't understand a single line of the CSS or uses it differently... It has used the percentages differently, so things are in the wrong place!

Daynm, I am pissed!
:smith:

beele

November 30th, 2009, 04:40 AM

Hence working with tables :realsmug:
Altough css is the better way to go.

Limited

November 30th, 2009, 06:18 AM

Hunter

November 30th, 2009, 11:51 AM

If this is a portfolio type website though it will need to be accessible through IE as the majority of businesses and computer nubs will use the default shit. IE.

I just made another quick design in photoshop based of Windows Mobile Centre GUI.

Yoko

November 30th, 2009, 03:21 PM

I may as well remove the style sheet because fucking IE shizen doesn't understand a single line of the CSS or uses it differently... It has used the percentages differently, so things are in the wrong place!
Welcome to the wonderful world of web design

If you haven't scrapped the old website yet, you could try some IE "hacks." Little things like !important on certain elements in your CSS and IE-specific parts you can add to the HTML markup to fix it.

Hunter

December 1st, 2009, 08:23 AM

Suppose I have the reasonable security in place, so here is the link now:
Click Here (http://martynleeball.x10hosting.com/website1/index.php)

Images are placeholders from DeviantArt. the main table still is a prick and won't align to bottom, I can't be bothered with it now. Lol.

Oh, and as you can see. It is for a college project at the moment, so the title ect all needs to be changed.
There is this one as well but it fails :(
Here (http://martynleeball.x10hosting.com/website1/template.php)