Thread: CSS to HTML

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    CSS to HTML


    Hello, well I got this code (works normaly) but is there any way to center it and put the one to the next one. Like aligment.

    Code:
    <style type="text/css">
          #button {  /* Box in the button */
            display: block;
            width: 190px;
          }
    
          #button a {
            text-decoration: none;
          }
    
          #button ul {
            list-style-type: none;  /* Remove the bullets from the list */
          }
    
          #button .top {
            background-color: #DDD;  /* The button background */
          }
    
          #button ul li.item {
            display: none;  /* By default, do not display the items (which contains the links) */
          }  
    
          #button ul:hover .item {  /* When the user hovers over the button (or any of the links) */
            display: block;
            border: 1px solid black;
            background-color: #FFFFFF;
          }
        </style>
      </head>
      <body>
        <div id="button">
          <ul>
            <li class="top" align="center">Servers</li> 
            <li class="item"><a href="http://serverfault.com/">SA:MP</a></li>
            <li class="item"><a href="http://superuser.com/">World Of Warcraft</a></li>
            <li class="item"><a href="http://doctype.com/">World Of Tanks</a></li>
    		<li class="item"><a href="http://www.google.com/">Google</a></li>
    		
          </ul>
    	  
    	  <ul>
    		<li class="top" align="center">Test</li>
    		<li class="item"><a href="http://www.google.com/">TEST</a></li>
    	  </ul>
    	  
        </div>
      </body>
  2. #2
  3. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    what do you mean by "put the one to the next one"

    I am not able to understand what exactly you are asking.

    If you require to give alignment to the code, I don't feel it is necessary because your code is indented which is the correct PROFESSIONAL way of writing HTML and CSS codes.

    If you would like to display everything so that it appears in the center of the page, you may take a "container" class and place it within a div tag and place the entire code within it. Then set the CSS margin property to 0 auto

    ie margin:0 auto;

    if you would like the text to display in the center, simply use "align:center"

    If you would like your data to appear at the center vertically, use:
    "vertical-align: middle;"

    Hope this clears your doubt.

    If not, please feel free to elaborate your problem so that I may help you out accordingly
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    1
    Rep Power
    0
    Hello. I did some Twinki code correction

    Code:
    <style type="text/css">
          #button {  /* Box in the button */
            display: block;
            width: 500px;
          }
    
          #button a {
            text-decoration: none;
          }
    
          #button ul {
            list-style-type: none;  /* Remove the bullets from the list */
    		display: inline-block;
    		width: 150px;
    		padding: 0px;
    		vertical-align: top;
          }
    	  
    	  #button li {
    		text-align: center; /* Centering the list labels */
    		width: 150px;
    	  }
          #button .top {
            background-color: #DDD;  /* The button background */
          }
    
          #button ul li.item {
            display: none;  /* By default, do not display the items (which contains the links) */
          }  
    
          #button ul:hover .item {  /* When the user hovers over the button (or any of the links) */
            display: block;
            border: 1px solid black;
            background-color: #FFFFFF;
          }
        </style>
      </head>
      <body>
        <div id="button">
          <ul>
            <li class="top">Servers</li> 
            <li class="item"><a href="http://serverfault.com/">SA:MP</a></li>
            <li class="item"><a href="http://superuser.com/">World Of Warcraft</a></li>
            <li class="item"><a href="http://doctype.com/">World Of Tanks</a></li>
    		<li class="item"><a href="http://www.google.com/">Google</a></li>
    		
          </ul>
    	  
    	  <ul>
    		<li class="top">Test</li>
    		<li class="item"><a href="http://www.google.com/">TEST</a></li>
    	  </ul>
    	  
        </div>
      </body>

IMN logo majestic logo threadwatch logo seochat tools logo