Vertical Align, Double Circles (Not Perfectly Round)

**Pamela1991** · May 27, 2012 08:09

Hi all, I hope you're all doing fine!

I'm having the following issues with my code:
- Vertical align works but produces two div's, or in my case two circles! How can I make it just one circle?
- My circles are refusing to be perfectly round

- Does my code seem at all messy/sloppy or does it look just fine in terms of neatness/organization?

Here is the Fiddle link.

Or, if you prefer the code here, here it is:

CSS:

Code:

#menu_div{
    margin-top:40px;
    margin-right:10px;
    float:right;
}

.menu_circle_1 {
    height: 106px;
    width: 106px;
}

.menu_circle {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    -moz-border-radius:50px;
    -khtml-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    display: block;
    float: left;
    font-size: 28px;
    //font-weight: bold;
    height: 106px;
    width: 106px;
    text-align: center;
    text-decoration: none;
}

.menu_circle:hover {
    border: 2px solid black;
    cursor:pointer;
}

#menu_bg {
    height: 200px;
    background: black;
}

#menu {
    margin-top:40px;
    float:right;
    height: 150px;
    background: black;
 }

#menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    -moz-border-radius:50px;
    -khtml-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    display: block;
    float: left;
    font-size: 28px;
    //font-weight: bold;
    height: 106px;
    width: 106px;
    text-align: center;
    text-decoration: none;
}

#menu a:hover {
    border: 2px solid black;
    cursor:pointer;
}

#menu ul {
	list-style-type: none;
	padding-top: 5px;
}

#menu li {
	float: left;
	position: relative;
	padding: 3px 0;
	text-align: center;
    margin-right:10px;
}

#menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 80px;
	left: -40px;
	padding: 10px;
	z-index: 90;
}

#menu ul.sub-menu li {
	text-align: left;
}

#menu li:hover ul.sub-menu {
	display: block;
	//border: 1px solid #ececec;
}

#menu ul.sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    display: block;
    font-size: 24px;
    padding: 10px 10px;
    //padding: 19px 25px;
    height: auto;
    width: 150px;
    border: 1px solid rgb(170, 170, 170);
    border-radius: 15px;
    background: white;
    //background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;
    text-decoration: none;
}

#menu ul.sub-menu a:hover {
    border: 1px solid black;
    cursor:pointer;
}

HTML:

Code:

<html>
<head>
    <meta charset="UTF-8" />
	<meta name="author" content="Pamela" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    
	<title>Home, Sweet Home</title>
</head>

<body bgcolor="#ffffff">

<div id="menu_bg">
<div id="menu">

<ul>
    <li>
        <div class="menu_circle_1" style="#position: relative; #top: -50%;">
            <a href="about.php">
                <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                        Red
                    </div>
                </div>
            </a>
        </div>
    </li>

    <li>
        <div class="menu_circle_1" style="#position: relative; #top: -50%;">
            <a href="about.php">
                <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                        White
                    </div>
                </div>
            </a>
                        <ul class="sub-menu">
                        <li><a href="about.php">Alaska</a></li>
                        <li><a href="about.php">Rhode Island</a></li>
                        <li><a href="about.php">Florida</a></li>
                        <li><a href="about.php">District of Columbia Downtown</a></li>
                        <li><a href="about.php">New York City</a></li>
                        </ul>

            
        </div>
    </li>
    
    <li>
        <div class="menu_circle_1" style="#position: relative; #top: -50%;">
            <a href="about.php">
                <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                        Blue
                    </div>
                </div>
            </a>
        </div>
    </li>
    
    <li>
        <div class="menu_circle_1" style="#position: relative; #top: -50%;">
            <a href="about.php">
                <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                        Stars
                    </div>
                </div>
            </a>
        </div>
    </li>

    <li>
        <div class="menu_circle_1" style="#position: relative; #top: -50%;">
            <a href="about.php">
                <div class="menu_circle" style="display: table; height: 106px; #position: relative; overflow: hidden;">
                    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
                        Stripes
                    </div>
                </div>
            </a>
        </div>
    </li>

</ul>

</div>
</div>

</body>
</html>

Thanks so much!

- Pam

**dresden_phoenix** · May 27, 2012 12:52

I am confused by what you mean mby multiple divs? Actually I am just confuse that you need so many unsemantic elements. BTW , unless you are using HTML5 you cant wrap an A tag around a DIV ( tho that isnt the cause your problem). Still you shouldn't change those inner DIVs to SPANs. Inline CSS is probably conflicting there too ( also not good practice, even if it isnt the cause of your problem) . Also you cant give position:absolute to something that has display:table-cell. (not that all rules in your inline style will be honored, since you have '#' in front of several of them). You also forgot to close the UL of your sub-menu.

So, multiple dives because you have too many elements on your markup. As far as getting perfectly round circles,

I hate to say it but at this point I would scrap the whole thing.

Instead try this:

Code:

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Pamela" />
    <style type='text/css'>

#menu {
    margin-top:40px;
    float:right;
    padding:  22px 0;
    width:100%;
    background: black;
 }
#menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    display: block;
    font-size: 28px;
    line-height: 106px;
    vertical-align: middle;
    /*font-weight: bold;*/
    width: 106px;
    height: 106px;
    text-align: center;
    text-decoration: none;
}

#menu a:hover, #menu .sub-menu a:hover {
    border-color: black;
    cursor:pointer;
}

#menu , #menu ul {list-style: none;}
#menu li {
    float: left;
    position: relative;
    text-align: center;
    margin-left:10px;
}

#menu .sub-menu {
    position: absolute;
    top: 80px;
    left: -9999em;
    padding: 10px;
    z-index: 90;
}

#menu .sub-menu li {
    text-align: left;
    margin-bottom:6px; 

}

#menu li:hover .sub-menu {
    left: -54px;
    /*border: 1px solid #ececec;*/
}

#menu .sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    display: block;
    font-size: 24px;
    padding: 10px;
    /*padding: 19px 25px;*/
    height: auto;
    width: 150px;
    border: 1px solid #ececec;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
    text-decoration: none;
    line-height: normal;
}

</style>
<title>Home, Sweet Home</title>
</head>

<body>


<ul id="menu">
    <li><a href="about.php">Red</a></li>
    <li><a href="about.php">White</a>
        <ul class="sub-menu">
        <li><a href="about.php">Alaska</a></li>
        <li><a href="about.php">Rhode Island</a></li>
        <li><a href="about.php">Florida</a></li>
        <li><a href="about.php">District of Columbia Downtown</a></li>
        <li><a href="about.php">New York City</a></li>
        </ul>
    </li>
    <li><a href="about.php">Blue</a></li>
    <li ><a href="about.php">Stars</a></li>
    <li><a href="about.php">Stripes</a></div></li>
</ul>

</body>
</html>

Now, isn't that cleaner?

One additional suggestion is beware of liberal use of IDs.. it tends to cause some serious specificity issues.

**Stomme poes** · May 27, 2012 15:09

Originally Posted by pamela

My circles are refusing to be perfectly round

In IE they are perfect, 90°-angled squares :)

**ralph.m** · May 27, 2012 15:49

Yes, lots o unnecessary divs and things there. You could just do a normal dropdown setup, with the <a> in the lop level LIs set to display: block and rounded corners on them.

**Pamela1991** · May 28, 2012 10:53

Originally Posted by dresden_phoenix

I am confused by what you mean mby multiple divs? Actually I am just confuse that you need so many unsemantic elements. BTW , unless you are using HTML5 you cant wrap an A tag around a DIV ( tho that isnt the cause your problem). Still you shouldn't change those inner DIVs to SPANs. Inline CSS is probably conflicting there too ( also not good practice, even if it isnt the cause of your problem) . Also you cant give position:absolute to something that has display:table-cell. (not that all rules in your inline style will be honored, since you have '#' in front of several of them). You also forgot to close the UL of your sub-menu.

So, multiple dives because you have too many elements on your markup. As far as getting perfectly round circles,

I hate to say it but at this point I would scrap the whole thing.

Instead try this:

Code:

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Pamela" />
    <style type='text/css'>

#menu {
    margin-top:40px;
    float:right;
    padding:  22px 0;
    width:100%;
    background: black;
 }
#menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    display: block;
    font-size: 28px;
    line-height: 106px;
    vertical-align: middle;
    /*font-weight: bold;*/
    width: 106px;
    height: 106px;
    text-align: center;
    text-decoration: none;
}

#menu a:hover, #menu .sub-menu a:hover {
    border-color: black;
    cursor:pointer;
}

#menu , #menu ul {list-style: none;}
#menu li {
    float: left;
    position: relative;
    text-align: center;
    margin-left:10px;
}

#menu .sub-menu {
    position: absolute;
    top: 80px;
    left: -9999em;
    padding: 10px;
    z-index: 90;
}

#menu .sub-menu li {
    text-align: left;
    margin-bottom:6px; 

}

#menu li:hover .sub-menu {
    left: -54px;
    /*border: 1px solid #ececec;*/
}

#menu .sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    display: block;
    font-size: 24px;
    padding: 10px;
    /*padding: 19px 25px;*/
    height: auto;
    width: 150px;
    border: 1px solid #ececec;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
    text-decoration: none;
    line-height: normal;
}

</style>
<title>Home, Sweet Home</title>
</head>

<body>


<ul id="menu">
    <li><a href="about.php">Red</a></li>
    <li><a href="about.php">White</a>
        <ul class="sub-menu">
        <li><a href="about.php">Alaska</a></li>
        <li><a href="about.php">Rhode Island</a></li>
        <li><a href="about.php">Florida</a></li>
        <li><a href="about.php">District of Columbia Downtown</a></li>
        <li><a href="about.php">New York City</a></li>
        </ul>
    </li>
    <li><a href="about.php">Blue</a></li>
    <li ><a href="about.php">Stars</a></li>
    <li><a href="about.php">Stripes</a></div></li>
</ul>

</body>
</html>

Now, isn't that cleaner?

One additional suggestion is beware of liberal use of IDs.. it tends to cause some serious specificity issues.

Wow, thanks dresden!

I seriously suspected my code wasn't so efficient, but I had no idea just how terribly horrendous it was! My code (if you want to call it that) was light years away from yours. By the looks of how terrible my code was, you would think I got dropped here from another planet where CSS doesn't exist! I didn't even get the CSS commenting right! What an insult to CSS!

Thanks so much dresden! I have been analyzing your code over and over again, trying to learn as much from it as possible. I'm still quite befuddled as to the reason for my coding CSS/HTML so incorrectly. I never learned CSS or HTML for that matter, in a structured manner, but rather learn the relevant methods for whatever it is that I am trying to do--perhaps this is the issue? Do you, or anyone else, have some tips for me as to how I can seriously, seriously improve--maybe not quite as good as your level, but at least half your level?

Again, thanks so much! You have made me see the CSS/HTML light--now I just have to figure out how to shine that light instead of just looking at it.

- Pam

**dresden_phoenix** · May 28, 2012 12:41

The first mistake you made was common , so no worries, and that is to code TRYING to make it LOOK some way rather than using semantics. The CSS part is just experience, that will come soon enough

Explaining what I did:
Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width.. so unless you measured the text exactly(another thing you SHOULDN'T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text.. but since everything was one or two words.. that was unlikely to happen.

Since we eliminated the extra tags, the problem with the dual borders on hover was automatically solved.

but rather learn the relevant methods for whatever it is that I am trying to do--perhaps this is the issue?

it could be. You will come to realize that is a really bad idea to write CSS piecemeal. What ever you do to one thing affects all things in the cascade , so a method that may solve your immediate issue may cause something else down the line. Thus the most effective frame of mind is to keep things simple and to think of the WHOLE code rather than one problem at a time.

Hope that sheds a little light on the subject , for you.

**Pamela1991** · Jun 14, 2012 04:19

Originally Posted by dresden_phoenix

Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width.. so unless you measured the text exactly(another thing you SHOULDN'T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text.. but since everything was one or two words.. that was unlikely to happen.

Thanks Ray!

How about if the text in the circle does wrap? Would the best way to do this be to omit line-height and then use span for non-wrapped lines and a div for wrapped lines like the following?

The fiddle.

The CSS:

Code:

#menu {
    margin-top:40px;
    float:right;
    padding:  22px 0;
    width:100%;
    background: black;
 }
#menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: white;
    color: black;
    border: 2px solid transparent;
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    display: block;
    font-size: 28px;
    /*line-height: 106px;*/
    vertical-align: middle;
    /*font-weight: bold;*/
    width: 106px;
    height: 106px;
    text-align: center;
    text-decoration: none;
}

#menu a:hover, #menu .sub-menu a:hover {
    border-color: black;
    cursor:pointer;
}

#menu , #menu ul {list-style: none;}
#menu li {
    float: left;
    position: relative;
    text-align: center;
    margin-left:10px;
}

#menu .sub-menu {
    position: absolute;
    top: 80px;
    left: -9999em;
    padding: 10px;
    z-index: 90;
}

#menu .sub-menu li {
    text-align: left;
    margin-bottom:6px;

}

#menu li:hover .sub-menu {
    left: -54px;
    /*border: 1px solid #ececec;*/
}

#menu .sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    display: block;
    font-size: 24px;
    padding: 10px;
    /*padding: 19px 25px;*/
    height: auto;
    width: 150px;
    border: 1px solid #ececec;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
    text-decoration: none;
    line-height: normal;
}

#menu span {
    margin-top: 35px;
    text-align: center;
    display: inline-block;
    padding: 0;
    width: 106px;
    height: 106px;
    overflow: hidden;
}
#menu .span2 {
    margin-top: 20px;
    text-align: center;
    display: inline-block;
    padding: 0;
    width: 106px;
    height: 106px;
    overflow: hidden;
}

The HTML:

Code:

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Pamela" />
    
<title>Home, Sweet Home</title>
</head>

<body>


<ul id="menu">
    <li><a href="about.php"><div class="span2">Red & White</div></a></li>
        <li><a href="about.php"><div class="span2">White & Blue</div></a>
        <ul class="sub-menu">
        <li><a href="about.php">Alaska</a></li>
        <li><a href="about.php">Rhode Island</a></li>
        <li><a href="about.php">Florida</a></li>
        <li><a href="about.php">District of Columbia Downtown</a></li>
        <li><a href="about.php">New York City</a></li>
        </ul>
    </li>
    <li><a href="about.php"><span>Blue</span></a></li>
    <li ><a href="about.php"><span>Stars</span></a></li>
    <li><a href="about.php"><span>Stripes</span></a></div></li>
</ul>

</body>
</html>

Thanks!

- Pam

**Pamela1991** · Jun 14, 2012 10:20

Sorry, just one correction to my above post (too late to edit my previous post): one span for non-wrapped lines and a separate span for wrapped lines like the following?

Here is the corrected fiddle.

The CSS is the same, but just one slight modification to the HTML:

Code:

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="Pamela" />
    
<title>Home, Sweet Home</title>
</head>

<body>


<ul id="menu">
    <li><a href="about.php"><span class="span2">Red & White</span></a></li>
        <li><a href="about.php"><span class="span2">White & Blue</span></a>
        <ul class="sub-menu">
        <li><a href="about.php">Alaska</a></li>
        <li><a href="about.php">Rhode Island</a></li>
        <li><a href="about.php">Florida</a></li>
        <li><a href="about.php">District of Columbia Downtown</a></li>
        <li><a href="about.php">New York City</a></li>
        </ul>
    </li>
    <li><a href="about.php"><span>Blue</span></a></li>
    <li ><a href="about.php"><span>Stars</span></a></li>
    <li><a href="about.php"><span>Stripes</span></a></div></li>
</ul>

</body>
</html>

**dresden_phoenix** · Jun 14, 2012 12:59

you were close.

Getting rid of the line height is not the solution tho, that only worked because of the mathematics of this specific case. :/ That's CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that's not good.

so here is the trick:
#menu a>span { line-height: 1;display: inline-block;vertical-align: middle}
#menu a:after { content: ""; display: inline-block; height:106px;vertical-align: middle}

and the explanation:
a>span ( is so we dont have to use a class name, as it automatically targets any span that is a DIRECT child of the anchor link.)
{#menu a>span { line-height: 1;display: inline-block;} set the lineheight back to normal within the span, and gives that element a display of inline-block...which acts just like it sounds... this means we can align it vertically with another inline element.

where do we get that extra element? We use a:after{content:""} to create it.

we give it a display of inline-block; and a height that's the same as the height of your circle... and that gives us the effect we wanted; the text will automatically align vertically to any # of lines or font size.
I hope that sheds more light on the subject.

**Pamela1991** · Jun 14, 2012 14:18

Originally Posted by dresden_phoenix

you were close.

Getting rid of the line height is not the solution tho, that only worked because of the mathematics of this specific case. :/ That's CCS trickery for you. You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines. So we are left having to add that span. However, you are still depending on tweaking line-height for multiple lines and that's not good.

so here is the trick:
#menu a>span { line-height: 1;display: inline-block;vertical-align: middle}
#menu a:after { content: ""; display: inline-block; height:106px;vertical-align: middle}

and the explanation:
a>span ( is so we dont have to use a class name, as it automatically targets any span that is a DIRECT child of the anchor link.)
{#menu a>span { line-height: 1;display: inline-block;} set the lineheight back to normal within the span, and gives that element a display of inline-block...which acts just like it sounds... this means we can align it vertically with another inline element.

where do we get that extra element? We use a:after{content:""} to create it.

we give it a display of inline-block; and a height that's the same as the height of your circle... and that gives us the effect we wanted; the text will automatically align vertically to any # of lines or font size.
I hope that sheds more light on the subject.

Wow, thanks Ray! That is CSS trickery, indeed! I had to carefully read it a few times.

Originally Posted by dresden_phoenix

You could adjust the amount of line space so that it verically centers but chances are you'd end up with a large amount of space between text lines.

That's exactly what happened and is what threw me off, and in turn made me wrongly throw away the line height!

This is my first time seeing that "after" value, but I'm already liking it!

Did you intentionally omit the semi-colons before the final brackets, after vertical-align: middle?

Thanks again!

**TechnoBear** · Jun 15, 2012 04:29

Originally Posted by Pamela1991

Did you intentionally omit the semi-colons before the final brackets, after vertical-align: middle?

The semi-colon is a separator, not a terminator, so strictly speaking it's unnecessary after the final declaration. I always include it, because I might want to add another rule later and, knowing me, will probably forget to put the semi-colon in first.

**Pamela1991** · Jun 15, 2012 06:35

Originally Posted by TechnoBear

The semi-colon is a separator, not a terminator, so strictly speaking it's unnecessary after the final declaration.

Thanks TechnoBear! So it looks like in regards to the semi-colon, CSS isn't too much different than the English language.

**dresden_phoenix** · Jun 15, 2012 13:13

So it looks like in regards to the semi-colon, CSS isn't too much different than the English language.

oooh I like that!

But yeah, I was kinda busy.. so I was being lazy, since it is allowed on CSS. It is good practice to end all your declarations with ";" IF ONLY because that way you can add more declarations to your rules later w/o having to worry about starting from a ";"

User Tag List

Thread: Vertical Align, Double Circles (Not Perfectly Round)

Thread Tools

Display

Vertical Align, Double Circles (Not Perfectly Round)

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions