CSS Redirect Code

Discussion in 'Web Design and Development' started by AFPoster, Apr 17, 2012.

  1. AFPoster macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #1
    In my style.css sheet I have code for a button (color, image, etc) and I'm trying to add a line of code to do a Redirect as well. Does anyone know what type of code to use for redirecting a button in CSS? Google was no use on this one.

    Thanks
     
  2. red blob macrumors newbie

    Joined:
    Mar 18, 2010
    #2
    are you sure?

    "a line of code to do a Redirect"

    I'm confused, what does your question mean? Do you need your button to link to another page when clicked?

    A 'redirect' is normally a bit of javascript that automatically sends the user to anothe page without that user's intervention. It can be activated upon page launch or timed to activate in a certain interval.
     
  3. AFPoster thread starter macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #3
    When a person clicks a button it redirects them to a new page. Normally you can use an <a href> but what I want is to know what line of code to put here:
    Code:
    input[type="submit"] {
    		background: #d7d7d7 !important;
    		float: right !important;
    		height: 35px !important;
    		margin: 10px 0 0 0 !important;
    		padding: 0 9px 0 9px !important;
    }
    So like padding is in there but what can I put after that to redirect to a new page when submit is clicked.
     
  4. AFPoster thread starter macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #5
  5. Apple Key macrumors 6502a

    Apple Key

    Joined:
    Jan 4, 2012
    #6
    Hmmm... I thought something like this might work, but seems like there's no luck with it. Why would you want to include the link in the css, and not have it be within the page itself?

    Code:
    <html>
    <head>
    <style>
    input[type="submit"] {
    	background: #d7d7d7 !important;
    	float: right !important;
    	height: 35px !important;
    	margin: 10px 0 0 0 !important;
    	padding: 0 9px 0 9px !important;
    }
    input[type="submit"]:before {
    	content: "<a href="http://www.google.com">";
    }
    input[type="submit"]:after {
    	content: "</a>";
    }
    </style>
    </head>
    <body>
    <input type="submit"></input>
    </body>
    </html>
    
     
  6. theluggage macrumors 68030

    Joined:
    Jul 29, 2011
    #7
    That's not what CSS is for. Logic like that belongs in the .html file, not the .css file. CSS is for defining the cosmetic appearance of the page, and the whole idea is to keep that separate from the logic of the page, usually with the intention of all your pages sharing the same CSS file to give them a consistent appearance.


    If you want an input button that just links to a new page without using the HTML form submission mechanism, you can use Javascript in the HTML file:

    Code:
    <input type="button" value="Click Me" onClick="window.location='http://www.macrumors.com'">
    If, for some reason, you don't want the link destinations hard-coded into the HTML file, then use a separate Javascript file to set "onClick" handlers on your buttons. Using a library like jquery will make that easier.

    The way of doing what you want in CSS works the other way around: use <a href="http://www.google.com" class="my_button"> in the HTML and use CSS to define a style for a.my_button to make it look more like a button (by using the background-image style to load an image of a button or, in a modern browser, use CSS3 effects - see http://www.w3schools.com/css3/css3_borders.asp).
     
  7. clemsonhomerun macrumors newbie

    Joined:
    Jul 11, 2009
    #8
    after reading this thread, its no wonder Google was of no help...lol

    before you start trying to dive into doing websites read up on html, css and javascript. this will solve 90% of the problems people ask about on here...
     

Share This Page