Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    buttons side by side

    How would I put two or more buttons side by side?

    Code:
    <p><a href="#" class="css-button">Download</a></p>
    Code:
    /*css for buttons in destinations starts here*/
    
    
    a.css-button {
    	
    		font-size:16px;
    		color:#000;
    		text-decoration:none;
    		display:block;
    		width:90px;
    		padding:10px;
    		border:2px solid #000;
    		text-align:center;
    
    		-moz-border-radius:5px;
    		-webkit-border-radius:5px;
    		-o-border-radius:5px;
    		border-radius:5px;
    		background:#FFFFFF;
    		-webkit-transition: all .4s ease-in-out;
    		-moz-transition: all .4s ease-in-out;
    		-o-transition: all .4s ease-in-out;
    		transition: all .4s ease-in-out;
    	}
    	a.css-button:hover {
    		color:#fff;
    		border-color:#000;
    		background:#000;
    	}
    	a.css-button.notransitions {
    		-webkit-transition: none;
    		-moz-transition: none;
    		-o-transition: none;
    		transition: none;
    	}
    /*css for buttons in destinations ends here*/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello chrarisma44,
    Why are your anchors wrapped in block level paragraph tags if you want your anchors inline...which is their normal behaviour.

    I'm not saying that's invalid, it's just opposite what you're trying to do.

    Look at it this way -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;	
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Once you do away with the <p> tags, you can add your styling with one small change that I've highlighted in red -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    a.css-button {
    	font-size: 16px;
    	color: #000;
    	text-decoration: none;
    	display: inline-block;
    	width: 90px;
    	padding: 10px;
    	border: 2px solid #000;
    	text-align: center;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-o-border-radius: 5px;
    	border-radius: 5px;
    	background: #FFFFFF;
    	-webkit-transition: all .4s ease-in-out;
    	-moz-transition: all .4s ease-in-out;
    	-o-transition: all .4s ease-in-out;
    	transition: all .4s ease-in-out;
    }
    a.css-button:hover {
    	color: #fff;
    	border-color: #000;
    	background: #000;
    }
    a.css-button.notransitions {
    	-webkit-transition: none;
    	-moz-transition: none;
    	-o-transition: none;
    	transition: none;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <a href="#" class="css-button">Download</a>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yours are vertical, not horizontal lol

  • #5
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you. Got it now.
    Last edited by charisma44; 11-25-2012 at 10:34 PM.


  •  

    Posting Permissions

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