Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Redirect Code

A

AFPoster

macrumors 68000
Original poster
Jul 14, 2008
1,565
152
Charlotte, NC
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
 
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.
 
red blob said:
"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.
Click to expand...

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.
 
AFPoster said:
I'm not seeing what I'm looking for in here, although very useful tips!
Click to expand...

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>
 
AFPoster said:
So like padding is in there but what can I put after that to redirect to a new page when submit is clicked.
Click to expand...

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='https://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).
 
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...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back