Staredit Network

Staredit Network -> Computers and Technical -> HTML/CSS aid required.

Report, edit, etc...Posted by Centreri on 2006-10-06 at 16:57:24

I'm working on my site, and One thing that is bothering me most of all is aligning text itself vertically. For example, I'm making buttons for the site by using one background image, and when you mouse over the <div> of the button the class of the button changes and with it the background image. On the foreground is the text that answers the question 'Ooh, what does this button do?'. Now, I centered the text horizontally, but it's still on the first row vertically, so it's too high above the middle of the button. Here's the code for one button:

CODE

<li class="mainitems">
<div class="headerlinks"><a href="">

<div class="button1" onMouseOver = "this.className = 'button2'" onMouseOut = "this.className = 'button1'">
<center>Tutorials</center></div>
</a></div>
<ul class="submenus">
<li><a href="">Gaming</a></li>
<li><a href="">Web Languages</a></li>
<li><a href="">Programming</a></li>
<li><a href="">Other</a></li>
</ul>
</li>

The <li> things are what opens when you mouse over, showing you different options in that category.

Here is the relevant CSS data:

CODE

.button1 {
background-image: url('Images/ButtonBGReg.png');
height: 40px;
width: 150px;
}

.button2 {
background-image: url('Images/ButtonBGOn.png');
height: 40px;
width: 150px;
}

.mainitems {
border-left-width: 0;
}

.submenus li{
width: 100%;
}

I have the same problem in other places, but I'm almost sure that if fixed in one I can fix it anywhere else. I tried CSS margin-top, by the way, but didn't work. Margin-left does work, for some reason.

Report, edit, etc...Posted by Vibrator on 2006-10-06 at 18:10:17

It would be a little easier with a little more code an more explination on what isn't aligning itself but if it is the div and the submenu part is fine i suggest using valign

Report, edit, etc...Posted by Centreri on 2006-10-06 at 19:01:13

Valign isn't part of the w3c standard (admittedly I don't really care) and it doesn't work. I would have though of obvious things like that. I don't want to use absolute position because that messes the site up when people with different resolutions come along.

And giving you more codez will confuse you, not help. Much easier to read well-picked out snippets.

Report, edit, etc...Posted by Pie_Sniper on 2006-10-06 at 19:22:09

This is a bit offtopic but consider using the :hover pseudo-class rather than Javascript for your button highlighting so people with Javascript disabled can use them.

Report, edit, etc...Posted by Centreri on 2006-10-06 at 21:18:53

Nah, I'll be improving it later to look better and all. :hover won't be able to support that.

Report, edit, etc...Posted by Syphon on 2006-10-06 at 22:32:09

QUOTE(Centreri @ Oct 6 2006, 08:18 PM)

Nah, I'll be improving it later to look better and all. :hover won't be able to support that.
[right][snapback]572545[/snapback][/right]

You could always do both...

Report, edit, etc...Posted by Centreri on 2006-10-06 at 22:48:08

Which would ruin the purpose of using :hover at all. This topic is about something else, people..

Next Page (1)