CSS + Vertical Centering

[sstein]

Can any CSS / HTML bods help me out,

I have a list of buttons down the side of a webpage and I would like the text inside them to be centered. The buttons are red with white text.

The code in HTML file looks like this:

<p class="homeButton">Home</p>
<p class="coursesButton">Courses</p>
<p class="feesButton">Fees</p>
<p class="newsButton">News</p>
<p class="servicesButton">Additional Services</p>
<p class="contactButton">Contact</p>

The CSS code for a button looks like:

.contactButton {
font-family: Tahoma, "Gill Sans MT";
font-weight: bolder;
color: #FFFFFF;
background-color: #ce4236;
text-indent: 15px;
text-align: left;
vertical-align: middle;
border: none;
font-size: 12px;
position: absolute;
height: 20px;
width: 140px;
left: 15px;
top: 270px;
z-index: auto;
visibility: visible;
background-position: center;
white-space: normal;
}

The problem is, it seems to be completely ignoring the vertical-align: middle; code ?? Or am I doing it wrong?? I haven't really used CSS much but would like this to work. Right now the text is appearing top aligned!!! I have tried moving the top of the button and bottom to center it around the text, but all that appears to do is move everything, text included??

Anyone else had this problem and know a way to fix it??

Any help GREATLY appreciated!! (and again bear in mind, i'm a bit hopeless at CSS / HTML so idiot speak please )

-

Stuart

[Stin Hambo]

Ok first of all there is no vertical align in CSS!
What made you decide to create a class for each <p> and also what package are you using to code with?

For a start it is much better to use an unordered list for navigation.

You html could look like this -

<ul class="navigation">
<li><a href="">Home</a></li>
<li><a href="">Courses</a></li>
<li><a href="">Fees</a></li>
<li><a href="">News</a></li>
<li><a href="">Additional Services</a></li>
<li><a href="">Contact</a></li>
</ul>

Now we want to style it -
/* */ = A comment in CSS

ul.navigation {
list-style-type: none; /* This gets rid of the dot in front of a list item */
width: 200px; /* You can choose whatever width you need for this */
padding: 5px 5px 5px 0; /* This adds padding of 5px to top and bottom and 0 to left and 5px to the right. The best way to work this out is to image a clock face starting on the hour (top padding/margin) then quarter past etc. */
}

ul.navigation li {
display: block; /* This allows us to add padding etc */
border-bottom: 1px #5f4c2b solid; /* Add a border too to break up each navigation item */
}

ul.navigation li a {
display: block; /* This allows us to add padding etc */
padding: 3px 1px; /* This adds padding of 3px to top and bottom and 1px to left and right */
font-size: 14px; /* You can change this value to suit */
text-decoration: none; /* This prevents any underlines etc from showing. Feel free to delete if neccessary */
}

ul.navigation li a:hover {
background-color: #5f4c2b; /* You can change the background of the navigation item to change when hovered over. Again feel free to change the color! */
}

sstein said:

<p class="homeButton">Home</p>
<p class="coursesButton">Courses</p>
<p class="feesButton">Fees</p>
<p class="newsButton">News</p>
<p class="servicesButton">Additional Services</p>
<p class="contactButton">Contact</p>

The CSS code for a button looks like:

.contactButton {
font-family: Tahoma, "Gill Sans MT";
font-weight: bolder;
color: #FFFFFF;
background-color: #ce4236;
text-indent: 15px;
text-align: left;
vertical-align: middle;
border: none;
font-size: 12px;
position: absolute;
height: 20px;
width: 140px;
left: 15px;
top: 270px;
z-index: auto;
visibility: visible;
background-position: center;
white-space: normal;
}

[sstein]

Hi Stin,

I am using Dreamweaver to code it, mostly manually coding as the graphical part doesnt seem to work! It never displays it the same as it actually looks. Me not being a web programmer, I thought it would be easier for me to use different classes, I just thought it would be easy to update as all I would have to change would be the CSS file, as it contains the positioning, size, font, colour etc. Also it let me have small gaps between each button. Your idea is probably better though as I am no web designer (programmer)!

Basically the site will have a main header, the 6 buttons to the left, a newsletter section to allow subscribing to newsletters below them (have it working in ASP). Then right aligned would be contact details and other stuff below.

I am at work at the minute but will play with your code when I get home to see if I can get it to look how I want it to

the website is going to be maintained by someone who doesnt know HTML, CSS etc at all. So it would be nice to have it as easy as possible to update and modify.

-

Stuart

Stin Hambo said:

Ok first of all there is no vertical align in CSS!
What made you decide to create a class for each <p> and also what package are you using to code with?

For a start it is much better to use an unordered list for navigation.

You html could look like this -

<ul class="navigation">
<li><a href="">Home</a></li>
<li><a href="">Courses</a></li>
<li><a href="">Fees</a></li>
<li><a href="">News</a></li>
<li><a href="">Additional Services</a></li>
<li><a href="">Contact</a></li>
</ul>

Now we want to style it -
/* */ = A comment in CSS

ul.navigation {
list-style-type: none; /* This gets rid of the dot in front of a list item */
width: 200px; /* You can choose whatever width you need for this */
padding: 5px 5px 5px 0; /* This adds padding of 5px to top and bottom and 0 to left and 5px to the right. The best way to work this out is to image a clock face starting on the hour (top padding/margin) then quarter past etc. */
}

ul.navigation li {
display: block; /* This allows us to add padding etc */
border-bottom: 1px #5f4c2b solid; /* Add a border too to break up each navigation item */
}

ul.navigation li a {
display: block; /* This allows us to add padding etc */
padding: 3px 1px; /* This adds padding of 3px to top and bottom and 1px to left and right */
font-size: 14px; /* You can change this value to suit */
text-decoration: none; /* This prevents any underlines etc from showing. Feel free to delete if neccessary */
}

ul.navigation li a:hover {
background-color: #5f4c2b; /* You can change the background of the navigation item to change when hovered over. Again feel free to change the color! */
}

sstein said:

<p class="homeButton">Home</p>
<p class="coursesButton">Courses</p>
<p class="feesButton">Fees</p>
<p class="newsButton">News</p>
<p class="servicesButton">Additional Services</p>
<p class="contactButton">Contact</p>

The CSS code for a button looks like:

.contactButton {
font-family: Tahoma, "Gill Sans MT";
font-weight: bolder;
color: #FFFFFF;
background-color: #ce4236;
text-indent: 15px;
text-align: left;
vertical-align: middle;
border: none;
font-size: 12px;
position: absolute;
height: 20px;
width: 140px;
left: 15px;
top: 270px;
z-index: auto;
visibility: visible;
background-position: center;
white-space: normal;
}

[sstein]

OK!!!

Thanks for your help, I almost have it working using lists, but the list is indented to the right, it sits about 50 pixels or so too far right. even though I have set the left to = "-22px" to get it sitting in the correct place?? Is this normal?

Thanks again,

Stuart

[shocker-z]

you could put it into a row/cell and use this valign="middle" inside it like in my very very brief example

<td height="60" align="center" valign="middle">item1</td>


I personally use tables and just use rows to devidse the items and set them to middle or bottom to keep all neat.


Regards
Liam

[Stin Hambo]

Well I would stay away form tables and cells for anything other than tables and cells (tabular data).

[Stin Hambo]

sstein said:

OK!!!

Thanks for your help, I almost have it working using lists, but the list is indented to the right, it sits about 50 pixels or so too far right. even though I have set the left to = "-22px" to get it sitting in the correct place?? Is this normal?

Thanks again,

Stuart

Can you give me a website address to see what you have so far?

[sstein]

The logo at the top will change, but the size should stay the same. Same for the ENROLL NOW button.

[url]www.elacademy.co.uk/[/url] <-- general layout I am going for, just want the code improved. Right now it all uses classes which is a bit messy (and some nicer graphics, like I said the top pic needs changing) I used some of your code and integrated it into the button classes to get the text centered. But having a different class for each button is NOT ideal (like you said )

[url]www.elacademy.co.uk/index2.htm[/url] <-- uses lists for navigation buttons BUT in Opera they are fine, in Firefox they are half off the page, I have to set the left positon to -22 to get them sitting right in Opera.


-

Stuart