CODEWITHSUNDEEP
htmlcss
Ryan Lester
Ryan Lester

Reputation: 2403

How to redirect with CSS

Is there a way to make a Web page of which one can modify only the CSS display an entirely different page when viewed by a user?

Upvotes: 6

Views: 36027

Answers (7)

jrn.ak
jrn.ak

Reputation: 36619

Update: Is what you want a Full-Screen Overlay? (Live Demo)

Old Answer: I've used something like this on a site that did not provide any server-side scripting.. All I had to change was the class on <body> to change content. The downside is that the content is still visible in the source of the page.

<style type="text/css">
    body div { display: none; }
    body.blue div.blue { display: block; }
    body.red div.red { display: block; }
</style>

<body class="blue">
    <div class="blue">Blue content!</div>
    <div class="red">Red content!</div>
    <div class="blue red">Content for both!</div>
</body>

Upvotes: 1

TheDog
TheDog

Reputation: 355

You can add content with css, however it is severely limited and not supported in some browsers. Adding elements (which is needed to display an 'overlay') is a lot more complicated and generally frowned upon, however it is still possible (in some browsers).You need to manipulate the content css attribute.

See this question for more information.

To achieve your overlay or redirect effect, you would need to use content to add either javascript that would allow you to redirect or an element capable of showing other content, like an iframe.

Upvotes: 1

smartcaveman
smartcaveman

Reputation: 42256

You can't do this with CSS alone.

You can do it using JavaScript and CSS together, but it doesn't sound like a good idea. Here's an example of how you could do it.

<style>
#colorCode1{
    color:blue;
}
<style>

<script language=javascript type="text/javascript">
    function setVisible( setting ){
       var myElement = document.getElementById("colorCode1");
       if(myElement.style.color=="blue"){
            myElement.innerHTML = getPageContentForBlueCode();
       }
       if(myElement.style.color=="red"){
            myElement.innerHTML = getPageContentForRedCode();
       }
     }
</script>

and somewhere below you have <div id="colorCode1">. This would basically allow you to signal a JavaScript function to render a different page based on a style that is defined in the CSS class. I can't think of any reason this would be a good idea though

Upvotes: 1

Ben Keating
Ben Keating

Reputation: 8376

You may want to think carefully about what you are trying to achieve. If your intentions are to hide certain information from the user, depending on their state, you really wont be hiding anything. Sure CSS can help not display an element but it's still in the page's source.

You can conditionally load CSS based on the type of browser/device the end-user is reporting back with but outside of that, you will need some sort of underlying business logic in your page/app.

I use a web framework called Django (www.djangoproject.com) which gives me the ability to do what you are wanting to do. An example could look like this (in Django's template markup language):

{% if request.user.is_staff %} DISPLAY COOL DIV HERE {% else %} NOTHING TO SEE HERE {% endif %}

This is impossible to define with CSS. CSS is for presentation only.

Upvotes: 1

kbrimington
kbrimington

Reputation: 25682

Cascading Style Sheets affect only the styling of the page. To my understanding, they provide no functionality to change the behavior or location of the page.

That said, you can completely change the appearance of a well-designed page with CSS. See http://csszengarden.com/ as an example of a site that can change dramatically by manipulating only CSS.

Upvotes: 2

Keltex
Keltex

Reputation: 26436

Does csszengarden.com do what you are thinking?

Upvotes: 2

albert
albert

Reputation: 8153

if i think i get what you are saying, use media queries

Upvotes: 1

Related Questions