SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    Vertical center text in a block element with set height

    I always have trouble with vertical alignment. What I have here is a set of CSS tabs which can have a single or multiple lines of text. So, the line-height technique won't work here. What might be the best approach?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
    <style type="text/css">
    /* reset stylesheet */
    body {
    	margin:0;
    	padding:0;
    	font-size:100.0%;	
    }
    /* end reset */
    
    body {
    	background: #fffff;
    	/*min-width:1002px;*/
    }
    
    
    
    #breadcrumbs {
    	background: yellow;
    	color:black;
    	padding: .2em .5em .2em .5em;
    }
    
    #nav ul, #nav ul li {
    	padding:0;
    	margin:0;
    
    }
    #nav ul {
    	border-top:1px solid gray;
    }
    #nav ul li {
    	float:left;
    	list-style: none outside none;
    	width:10%;
    	margin: 0 .6em 0 .6em;
    	border-bottom:1px solid black;
    	border-left:1px solid black;
    	border-right:1px solid black;
    	
    }
    #nav ul li, #nav ul li a {
    	border-radius: 0px 0px 5px 5px; 
    	-moz-border-radius: 0px 0px 5px 5px; 
    	-webkit-border-radius: 0px 0px 5px 5px;
    }
    #nav ul li a, #nav ul li a:hover {
    	display:block;
    	text-align:center;
    	text-decoration: none !important;
    	color: #B7B7B7;
    	font-weight: bold;
    	font-size: 1.2em;
    	overflow:hidden;
    	height: 75px;
    	vertical-align:middle;
    }
    #nav ul li a:hover, #nav ul li a.selected {
    	margin-top:-1px;
    	color: #8B8B8B; 
    	background:yellow;
    	border-top:1px solid yellow;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="sectionheader">
    	<div id="announcement"></div>
    	<div id="logo"></div>
    	<div id="logosplash"></div>
    </div>
    
    <div id="sectionnav">
    	<div id="breadcrumbs">Home &raquo; Page1</div>
    	<div id="nav">
    		<ul id="branchtabs">
    			<li><a href="">This Best Tab Here Here</a></li>
    			<li><a href="">Tab</a></li>
    			<li><a href="">This Tab Here</a></li>
    			<li><a href="">This Tab Here</a></li>
    			<li><a href="">This Tab Here</a></li>
    		</ul>
    	</div>
    
    </div>
    
    <div id="sectioncontent">
    
    </div>
    
    <div id="sectionfooter">
    
    
    </div>
    
    </body>
    </html>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The easiest way i know of doing it is with display: table and display: table-cell as they allow you to use some of the the properties normally used for tables only. See the following link for a small demo i put together using no extra elements.

    http://jsfiddle.net/chrisupjohn/ZmNBk/

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    That doesn't quite work in this case.

    The anchors are block elements. I'm trying to vertically center the text inside the anchor.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Looks like the table-cell was actually the way to go, once I moved those rules to the correct elements. I eventually got it so that the li width worked properly, the tabs worked properly, and the vertical centering worked properly.

    Is there a better way to do this, or is this pretty much the only way to go?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
    <style type="text/css">
    /* reset stylesheet */
    body {
        margin:0;
        padding:0;
        font-size:100.0%;    
    }
    /* end reset */
    
    body {
        background: #fffff;
        /*min-width:1002px;*/
    }
    
    
    
    #breadcrumbs {
        background: yellow;
        color:black;
        padding: .2em .5em .2em .5em;
    }
    
    #nav ul, #nav ul li {
        padding:0;
        margin:0;
    }
    #nav ul {
        border-top:1px solid gray;
    }
    #nav ul li {
        display: table;
        float:left;
        list-style: none outside none;
        width:10%;
        margin: 0 .6em 0 .6em;
        border-bottom:1px solid black;
        border-left:1px solid black;
        border-right:1px solid black;
    }
    #nav ul li a, #nav ul li a:hover {
        display: table-cell;
        text-align:center;
        vertical-align:middle;
        text-decoration: none !important;
        color: #B7B7B7;
        font-weight: bold;
        font-size: 1em;
        overflow:hidden;
        height: 75px;
    }
    #nav ul li:hover, #nav ul li.selected{
        background:yellow;
    }
    #nav ul li a:hover, #nav ul li.selected a{
        position:relative;
        top:-1px;
        color: #8B8B8B; 
        border-top:1px solid yellow;
        padding-top:1px;
        height:73px; /* li height - (a border + a padding) */
    }
    #nav ul li, #nav ul li a {
        -moz-border-radius: 0px 0px 5px 5px; 
        -webkit-border-radius: 0px 0px 5px 5px;
        border-radius: 0px 0px 5px 5px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div id="sectionheader">
        <div id="announcement"></div>
        <div id="logo"></div>
        <div id="logosplash"></div>
    </div>
    
    <div id="sectionnav">
        <div id="breadcrumbs">Home &raquo; Page1</div>
        <div id="nav">
            <ul id="branchtabs">
                <li class="selected"><a href="">This is a mighty test with line</a></li>
                <li><a href="">smallish test</a></li>
                <li><a href="">bigger testaroonie</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test test</a></li>
            </ul>
        </div>
    
    </div>
    
    <div id="sectioncontent">
    </div>
    
    <div id="sectionfooter">
    
    </div>
    
    </body>
    </html>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is pretty much the only way i know how to vertically align text with extra markup and JavaScript

  6. #6
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    ok, I encountered a new issue when attempting to use this method of vertical centering. I can't seem to horizontally center the list.



    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
    <style type="text/css">
    
    /*reset*/
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100.01%;
    	color: black;
    	background-color: #f9f9f9;
    }
    /* --clearfix hack-- */
    .clearfix:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { display:inline-block; }
    
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    /* --end clearfix hack-- */
    /*reset*/
    
    body {
    	background: #fffff;
    	/*min-width:1002px;*/
    }
    
    
    /* start nav buttons */
    #breadcrumbs {
    	background: blue;
    	color:black;
    	padding: .2em .5em .2em .5em;
    }
    
    #sectionnav{
    	background:green;
    	padding-bottom:.8em;
    }
    
    ul#branchtabs, ul#branchtabs li {
    	padding:0;
    	margin:0;
    }
    ul#branchtabs {
    	border-top:1px solid black;
    }
    ul#branchtabs li {
    	display: table;
    	float:left;
    	list-style: none outside none;
    	width:10%;
    	margin: 0 .6em 0 .6em;
    	border-bottom:1px solid black;
    	border-left:1px solid black;
    	border-right:1px solid black;	
    
    }
    ul#branchtabs li {
    	/*left:20%;
    	position:relative;*/
    }
    ul#branchtabs li a, ul#branchtabs li a:hover {
    	display: table-cell;
    	text-align:center;
    	vertical-align:middle;
    	text-decoration: none !important;
    	color: black;
    	font-weight: bold;
    	font-size: 1em;
    	overflow:hidden;
    	height: 75px;
    }
    ul#branchtabs li:hover, ul#branchtabs li.selected{
    	background:blue;
    }
    ul#branchtabs li a:hover, ul#branchtabs li.selected a{
    	position:relative;
    	top:-1px;
    	color: white; 
    	border-top:1px solid blue;
    	padding-top:1px;
    	height:73px; /* li height - (a border + a padding) */
    }
    ul#branchtabs li, ul#branchtabs li a {
    	-moz-border-radius: 0px 0px 5px 5px; 
    	-webkit-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    }
    /* end nav buttons */
    
    
    </style>
    
    </head>
    <body>
    
    <div id="sectionheader">
    	<div id="announcement"></div>
    	<div id="logo"></div>
    	<div id="logosplash"></div>
    </div>
    
    
    
    <div id="contentcontainer">
    	
    	<div id="sectionnav" class="clearfix">
    		<div id="breadcrumbs">Home &raquo; Page1</div>
    		<ul id="branchtabs">
    			<li class="selected"><a href="">This is a test line</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">test line two</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">yet another test line</a></li>
    		</ul>
    	</div>
    	
    	<div id="contentcontainer-right">
    		<div id="contentcontainer-content">
    			<div id="content">
    				<div id="content-inner">
    					
    					content text
    				</div>
    			</div>
    			<div id="right">
    				<div id="right-inner">
    					
    					sidebar text
    				</div>
    			</div>
    		</div>
    	</div>
    	
    
    	
    	<div id="footer">
    		footer text
    	</div>
    </div>
    
    
    
    </body>
    </html>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Don't know if this is a very good solution, but here's my take:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
    <style type="text/css">
    
    /*reset*/
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100.01%;
    	color: black;
    	background-color: #f9f9f9;
    }
    /* --clearfix hack-- */
    .clearfix:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { display:inline-block; }
    
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    /* --end clearfix hack-- */
    /*reset*/
    
    body {
    	background: #fffff;
    	/*min-width:1002px;*/
    }
    
    
    /* start nav buttons */
    #breadcrumbs {
    	background: blue;
    	color:black;
    	padding: .2em .5em .2em .5em;
    }
    
    #sectionnav{
    	background:green;
    	padding-bottom:.8em;
    }
    
    ul#branchtabs, ul#branchtabs li {
    	padding:0;
    	margin:0;
    }
    ul#branchtabs {
    	border-top:1px solid black;
    	display: table;
    	text-align: center;
    	overflow: hidden;
    	margin: 0 auto;
    }
    ul#branchtabs li {
    	display: table;
    	float:left;
    	list-style: none outside none;
    	width:17%;
    	margin: 0 .6em 0 .6em;
    	border-bottom:1px solid black;
    	border-left:1px solid black;
    	border-right:1px solid black;	
    
    }
    ul#branchtabs li {
    	/*left:20%;
    	position:relative;*/
    }
    ul#branchtabs li a, ul#branchtabs li a:hover {
    	display: table-cell;
    	text-align:center;
    	vertical-align:middle;
    	text-decoration: none !important;
    	color: black;
    	font-weight: bold;
    	font-size: 1em;
    	overflow:hidden;
    	height: 75px;
    }
    ul#branchtabs li:hover, ul#branchtabs li.selected{
    	background:blue;
    }
    ul#branchtabs li a:hover, ul#branchtabs li.selected a{
    	position:relative;
    	top:-1px;
    	color: white; 
    	border-top:1px solid blue;
    	padding-top:1px;
    	height:73px; /* li height - (a border + a padding) */
    }
    ul#branchtabs li, ul#branchtabs li a {
    	-moz-border-radius: 0px 0px 5px 5px; 
    	-webkit-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    }
    
    
    
    
    /* end nav buttons */
    
    
    </style>
    
    </head>
    <body>
    
    <div id="sectionheader">
    	<div id="announcement"></div>
    	<div id="logo"></div>
    	<div id="logosplash"></div>
    </div>
    
    
    
    <div id="contentcontainer">
    	
    	<div id="sectionnav" class="clearfix">
    		<div id="breadcrumbs">Home &raquo; Page1</div>
    		<ul id="branchtabs">
    			<li class="selected"><a href="">This is a test line</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">test line two</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">yet another test line</a></li>
    		</ul>
    	</div>
    	
    	<div id="contentcontainer-right">
    		<div id="contentcontainer-content">
    			<div id="content">
    				<div id="content-inner">
    					
    					content text
    				</div>
    			</div>
    			<div id="right">
    				<div id="right-inner">
    					
    					sidebar text
    				</div>
    			</div>
    		</div>
    	</div>
    	
    
    	
    	<div id="footer">
    		footer text
    	</div>
    </div>
    
    
    
    </body>
    </html>

  8. #8
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    The border-top of the ul doesn't stretch to 100% using that method.

    If I set border-bottom of the #breadcrumbs instead, the li tabs don't cover #breadcrumbs border-bottom with a:hover
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Force Flow View Post
    The border-top of the ul doesn't stretch to 100% using that method.

    If I set border-bottom of the #breadcrumbs instead, the li tabs don't cover #breadcrumbs border-bottom with a:hover
    Yeah, that's what I would do. Just remove the overflow:hidden from the ul, which isn't needed anyway. (I should have removed it. It just made testing easier. )

  10. #10
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yeah, that's what I would do. Just remove the overflow:hidden from the ul, which isn't needed anyway. (I should have removed it. It just made testing easier. )
    Am I missing something? If I put a border-bottom on #breadcrumbs, the li doesn't cover it.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    This is what I posted above, but with overflow: hidden removed from the ul and the border on breadcrumbs. The breadcrumb border is hidden when the li is selected or hovered:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link rel="stylesheet" href="reset.css?v=1.0" type="text/css">
    <style type="text/css">
    
    /*reset*/
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100.01%;
    	color: black;
    	background-color: #f9f9f9;
    }
    /* --clearfix hack-- */
    .clearfix:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { display:inline-block; }
    
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    /* --end clearfix hack-- */
    /*reset*/
    
    body {
    	background: #fffff;
    	/*min-width:1002px;*/
    }
    
    
    /* start nav buttons */
    #breadcrumbs {
    	background: blue;
    	color:black;
    	padding: .2em .5em .2em .5em;
    	border-bottom:1px solid black;
    }
    
    #sectionnav{
    	background:green;
    	padding-bottom:.8em;
    }
    
    ul#branchtabs, ul#branchtabs li {
    	padding:0;
    	margin:0;
    }
    ul#branchtabs {
    	display: table;
    	text-align: center;
    	margin: 0 auto;
    }
    ul#branchtabs li {
    	display: table;
    	float:left;
    	list-style: none outside none;
    	width:17%;
    	margin: 0 .6em 0 .6em;
    	border-bottom:1px solid black;
    	border-left:1px solid black;
    	border-right:1px solid black;	
    
    }
    ul#branchtabs li {
    	/*left:20%;
    	position:relative;*/
    }
    ul#branchtabs li a, ul#branchtabs li a:hover {
    	display: table-cell;
    	text-align:center;
    	vertical-align:middle;
    	text-decoration: none !important;
    	color: black;
    	font-weight: bold;
    	font-size: 1em;
    	overflow:hidden;
    	height: 75px;
    }
    ul#branchtabs li:hover, ul#branchtabs li.selected{
    	background:blue;
    }
    ul#branchtabs li a:hover, ul#branchtabs li.selected a{
    	position:relative;
    	top:-1px;
    	color: white; 
    	border-top:1px solid blue;
    	padding-top:1px;
    	height:73px; /* li height - (a border + a padding) */
    }
    ul#branchtabs li, ul#branchtabs li a {
    	-moz-border-radius: 0px 0px 5px 5px; 
    	-webkit-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    }
    
    
    
    
    /* end nav buttons */
    
    
    </style>
    
    </head>
    <body>
    
    <div id="sectionheader">
    	<div id="announcement"></div>
    	<div id="logo"></div>
    	<div id="logosplash"></div>
    </div>
    
    
    
    <div id="contentcontainer">
    	
    	<div id="sectionnav" class="clearfix">
    		<div id="breadcrumbs">Home &raquo; Page1</div>
    		<ul id="branchtabs">
    			<li class="selected"><a href="">This is a test line</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">test line two</a></li>
    			<li><a href="">test line</a></li>
    			<li><a href="">yet another test line</a></li>
    		</ul>
    	</div>
    	
    	<div id="contentcontainer-right">
    		<div id="contentcontainer-content">
    			<div id="content">
    				<div id="content-inner">
    					
    					content text
    				</div>
    			</div>
    			<div id="right">
    				<div id="right-inner">
    					
    					sidebar text
    				</div>
    			</div>
    		</div>
    	</div>
    	
    
    	
    	<div id="footer">
    		footer text
    	</div>
    </div>
    
    
    
    </body>
    </html>

  12. #12
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Ah, I did miss something.

    There is a overflow:hidden for the anchor and the ul. I was looking at the one in the anchor instead.

    It looks like your suggestion did the trick. Thanks
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,166
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. I'm not sure if it's the best way, but still, it's nice to find something that works.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •