SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How could I vertically align like this ?

    Hi guys.

    First of all, sorry for my bad english & possible mistakes. Then...

    I'm beginner in web designing and I want to have something like the attached image...vertically aligned I mean.
    61489079913810064624.jpg

    I wrote something like this :
    http://codepen.io/Moh3eN/pen/faxur

    And as you can see, it's not what I want.
    What should I do now ?

    I appreciate your helps.

    Thank you .

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi okey. Welcome to the forums.

    I'm not the greatest expert on this, but here's one way to approach it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    
    .teamMembers {width: 960px; margin: 0 auto;}
    .teamMembers section {display: table; table-layout: fixed; border-spacing: 10px;}
    .teamMembers section div {display: table-cell; vertical-align: middle; }
    h4 span {display: block;}
    .name {width: 100px; text-align: right;}
    .info {width: 180px; text-align: center;}
    .image {width: 150px;}
    .text {width: 530px;}
    </style>
    </head>
    <body>
    
    <div class="teamMembers clear">
    	
    		<section>
    			<div class="name">
    				<h4>John Doe<span>CEO</span></h4>
    			</div>
    			
    			<div class="info">
    				<p>Some Information</p>
    			</div>
    			<div class="image">
    				<img src="#" width="150" height="150" alt="proper description" title="proper description">
    			</div>
    			<div class="text">
    				<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
    			</div>
    		</section>
    
    	</div>
    
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph & Thank you for sharing your knowledge. I learned a lot from your post.
    You're Great man...

    And I appreciate if anyone has another ways to do this. So I could learn more...

    cheers.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by okey View Post
    And I appreciate if anyone has another ways to do this. So I could learn more...

    cheers.
    Here's another way that should work back to IE6 (with any luck).

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style media="all">
    .teamMembers {
    	width: 960px;
    	margin: 0 auto;
    }
    h4.tm span { display: block; }
    .teamMembers p { margin:0 }
    .name {
    	width: 100px;
    	text-align: right;
    }
    .info {
    	width: 180px;
    	text-align: center;
    }
    .image {
    	border:1px solid #000;
    	border-radius:50%;
    	margin:0 10px;
    }
    .text { width: 490px; }
    .tm {
    	display:inline-block;
    	vertical-align:middle;
     *display:inline;/* ie6/7 inline-block hack */
     *zoom:1.0;/* ie6/7 inline-block hack */
    }
    </style>
    </head>
    <body>
    <section class="teamMembers">
    		<h4 class="tm name">John Doe<span>CEO</span></h4>
    		<p class="tm info">Some Information</p>
    		<div class="tm "><img class="tm image" src="http://placehold.it/150x150" width="150" height="150" alt="proper description" title="proper description">
    				<p class="tm text"> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
    		</div>
    </section>
    </body>
    </html>
    Ralph's method is more flexible and robust but support is only only IE8+ and requires slighlty more html.

  5. #5
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oss Sensei
    Thank you Paul for your answer. It works great too + it has wider range of support for older browsers & That's good point...

    Thanks again for your helps guys.

  6. #6
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again.

    Sorry but here's another question...

    Some days ago I wanted to write something like this :

    SNAG-0000.jpg

    But I couldn't write correct code so I changed my mind & I styled my training page's navigation this way :

    SNAG-0001.jpg

    Yesterday & after dear ralph.m solution, thought I can style navigation as I want using the display:table & table-cell.
    It works generally but there are some problems there with borders & center-aligned nav, etc :

    http://codepen.io/Moh3eN/pen/HCApc

    Now I'm looking for your helps.

    Thanks.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you remove the margins from the h1 the gap will reduce and if you set the uls to 50% width they will become even spaced.

    e.g.
    Code:
    .pageHeader {
    	width: 960px;
    	margin: 0 auto;
    }
    .pageHeader nav.container {
    	display: table;
    	table-layout: fixed;
    	border-spacing:20px;
    }
    nav.container ul {
    	list-style: none;
    	display: table-cell;
    	vertical-align: middle;
    	padding: 0;
    	margin:0;
    	width:50%;
    	border-top: 1px solid gray;
    	border-bottom: 1px solid gray;
    }
    nav.container ul li { float: left; }
    nav.container li a {
    	display: block;
    	text-decoration: none;
    	color: gray;
    	padding: 0px 15px;
    	-o-transition: color .75s ease 0s;
    	-webkit-transition: color .75s ease 0s;
    	transition: color .75s ease 0s;
    }
    nav.container li a:hover { color: black; }
    .pageHeader h1 a {
    	font-size: 1.3em;
    	color: #64b0a3;
    	text-decoration: none;
    	text-shadow: 1px 1px 10px #54d1b6;
    }
    .container h1 {
    	margin:0;
    	display:table-cell;
    }
    .container ul:first-child li { float:right }
    I set the first ul to float right so you would need to change the order of the html for that first one.

  8. #8
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much dear Paul.
    I'm so glad to find this forum & to become familiar with you guys.


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
  •