daily pastebin goal
49%
SHARE
TWEET

vertical-alignment of inlined elements

a guest Sep 25th, 2012 91 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Untitled Document</title>
  6. <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
  7. <style type="text/css">
  8. html, body, div, ul, li, h1 {
  9.         margin: 0;
  10.         padding: 0;
  11.         border:none;
  12. }
  13. body {
  14.         font: 81.25% 'Droid Sans', Georgia, sans-serif;
  15. }
  16. #header {
  17.         width:100%;
  18.         height:4em;    
  19. }
  20. #header-content {
  21. width:955px;
  22. margin:0 auto;
  23. }
  24. #navigation li {
  25. margin:0 1em;
  26. }
  27. #navigation li,
  28. #navigation h1,
  29. #navigation ul#language-option-nav {
  30. display:inline;
  31. }
  32. /*Navigation*/
  33. #navigation {
  34.         list-style: none;
  35.         width: 130%;
  36. }
  37. #header #logo img {
  38.         width: 115px;
  39.         height:39px;:
  40. }
  41.  
  42. #language-option-nav li {
  43. display:inline;
  44. width:5em;
  45. margin:5px;
  46. }
  47. #language-option-nav li a {
  48. border:1px solid #FFF;
  49. text-align:center;
  50. margin-top:5px;
  51. }
  52.  
  53. #header {
  54.         background-color:#863138;
  55.         filter: Alpha(Opacity=88);
  56.         background-color: rgba(132, 48, 52, .88);
  57. }
  58. #navigation li a {
  59. color:#fff;
  60. }
  61.  
  62. </style>
  63. </head>
  64.  
  65. <body>
  66. <div id="header">
  67.           <div id="header-content">
  68.     <ul id="navigation">
  69.               <li id="logo"><!--logo-->
  70.         <h1><a href="#"><img src="_logo_115x39.png" alt="Immaculate"></a></h1>
  71.       </li><!--End logo -->
  72.               <!--Navigation-->
  73.               <li id="one"><a href="#" title="Hem">one</a></li>
  74.               <li id="two"><a href="#">two</a></li>
  75.               <li id="three"><a href="#">three</a></li>
  76.               <li id="four"><a href="#">four</a></li>
  77.              
  78.               <li id="language-option">
  79.         <ul id="language-option-nav">
  80.                   <li id="ch"><a href="#">ch</a></li>
  81.                   <li id="en"><a href="#">en</a></li>
  82.                 </ul>
  83.                 </li>
  84.                 <li id="login" lang="en"><a href="#">Log In</a></li>
  85.     </ul><!-- End Navigation-->
  86.   </div><!--End header-content-->
  87. </div><!--End header-->
  88. </body>
  89. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top