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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning buttons in a widget

    Hello everyone. I have a wordpress site, where I am going to put a widget area near the top that will span across the body of the site (940px).

    In this widget area I will add a text box that I want to have a background picture. This is the site, and yes that's mug is mine

    http://www.sandiegoautoaccidentlaw.com/

    I have to fix the image on the right to make it look good. In any event, I want to create three or four buttons, which I will position in that box. They'll be rectangular, and align vertically. I want these buttons to fade when hovered, and link out. I got the fade part (CSS) and the link out part. Just the alignment is the part I'm not experienced enough to get.

    I had a guy who created an aweber signup banner for me, and he created a table. Is that the best way to do this? Then for each input (and signup button) he assigned various values such as:

    Code:
    <button type="submit" style="width:190px; height:62px; position:absolute; right:18px; bottom: 50px; border:none; text-indent: -100em; overflow: hidden; background: url(http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png) no-repeat;"></button>
    Should I just do something similar? What do I call it in the "button type" area?

    Or is there a way to align these buttons without making a table?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by jdang307 View Post
    In any event, I want to create three or four buttons, which I will position in that box. They'll be rectangular, and align vertically. I want these buttons to fade when hovered, and link out. I got the fade part (CSS) and the link out part.
    The probable reason you can't align your button is because it's absolutely positioned via position: absolute; right: 18px; bottom: 50px;. Use CSS margins and padding for alignment instead.

    Also, unless these links are part of an HTML form, I would not use button elements. Use a elements in conjunction with img elements to create the buttons:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<title>Demo</title>
    		<style>
    			/* HTML5 Support */
    			nav { display: block; }
    			
    			/* Other Styles */
    			li { display: block; } /* Removes Bullets */
    		</style>
    	</head>
    	<body>
    		<nav>
    			<ul>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				
    			</ul>
    		</nav>
    	</body>
    </html>
    In the above code, ul { margin-left: 2em; } could be used to nudge the list of buttons over to the right, for example.

    Quote Originally Posted by jdang307 View Post
    What do I call it in the "button type" area?
    Buttons that aren't designed to submit a form should have type="button". If the button isn't inside of a form, it's kind of a moot point though since nothing will be submitted with type="submit".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    The probable reason you can't align your button is because it's absolutely positioned via position: absolute; right: 18px; bottom: 50px;. Use CSS margins and padding for alignment instead.

    Also, unless these links are part of an HTML form, I would not use button elements. Use a elements in conjunction with img elements to create the buttons:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<title>Demo</title>
    		<style>
    			/* HTML5 Support */
    			nav { display: block; }
    			
    			/* Other Styles */
    			li { display: block; } /* Removes Bullets */
    		</style>
    	</head>
    	<body>
    		<nav>
    			<ul>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				<li><a href="./"><img alt="Get Instant Access!" width="190" height="62" src="http://createyouronlinebiz.com/wp-content/uploads/2013/01/red_getinstantaccess-e1357858758175.png"></a></li>
    				
    			</ul>
    		</nav>
    	</body>
    </html>
    In the above code, ul { margin-left: 2em; } could be used to nudge the list of buttons over to the right, for example.

    Buttons that aren't designed to submit a form should have type="button". If the button isn't inside of a form, it's kind of a moot point though since nothing will be submitted with type="submit".
    Gotcha. Yeah I'm trying to figure it out and salvage code going from an actual form, over to just banners/buttons with a link. Figuring this all out and tinkering until it works. Thanks!


  •  

    Posting Permissions

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