...

View Full Version : my layout question



philvia
12-03-2007, 09:18 PM
so i've finally gotten into coding again after 5ish years of downtime... i'm starting another project and need help with css.

here is a GENERAL idea of what i need help with.. i've seen it done a long time ago but the website is gone now.

can someone point me in the right direction as to how to make this?

http://i15.photobucket.com/albums/a391/philvia/Untitled-1-10.jpg

when you rollover across the top, how can i get the whole thing to change? as in if you hover over prices, the big text area changes to the text for prices and so on.. know what i'm trying to say? lol
how would i do that

effpeetee
12-03-2007, 10:37 PM
I don't have the time to help in detail but you will need to learn CSS.
See the url "Sources" in my signature for many useful sites.

Frank

Apostropartheid
12-03-2007, 11:35 PM
This can only be done with JavaScript (I tried a more dramatical solution with pure CSS but...that didn't work.)
This should do nicely (I'm not a guru, but it works.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Let&rsquo;s get divvy!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font: 95&#37;/2 Georgia, sans-serif;
padding: 2em;
}
#home1, #prices1, #order1, #faqs1, #about1 {
display: none;
height: 200px;
width: 330px;
padding: 5px 10px;
background: #39f;
}
#home1 {
display: block;
}
#nav li {
display: inline;
float: left;
text-align: center;
width: 70px;
}
#nav a {
display: block;
width: 100%;
height: 100%;
color: #333;
text-decoration: none;
}
#nav a:hover {
background: #39f;
color: #fff;
}
#nav {
height: 2em;
}
#nav #home {
background: #39f;
color: #fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
function display(link) {
var page = link.id;
var page = page + "1";
document.getElementById("home1").style.display = "none";
document.getElementById("prices1").style.display = "none";
document.getElementById("order1").style.display = "none";
document.getElementById("faqs1").style.display = "none";
document.getElementById("about1").style.display = "none";
document.getElementById("home").style.color = "#333";
document.getElementById("home").style.backgroundColor = "transparent";
if(page == "home1") {
var home = document.getElementById("home");
home.style.color = "#fff";
home.style.backgroundColor = "#39f";
}
document.getElementById(page).style.display = "block";
}
</script>
</head>
<body>
<ul id="nav">
<li><a href="home.html" id="home"onmouseover="display(this)">Home</a></li>
<li><a href="prices" id="prices" onmouseover="display(this)">Prices</a></li>
<li><a href="order" id="order" onmouseover="display(this)">Order</a></li>
<li><a href="faqs" id="faqs" onmouseover="display(this)"><abbr title="Frequently Asked Questions">FAQ<abbr>s</a></li>
<li><a href="about" id="about" onmouseover="display(this)">About</a></li>
</ul>
<div id="home1">Home content</div>
<div id="prices1">Price content</div>
<div id="order1">Order content</div>
<div id="faqs1">FAQs content</div>
<div id="about1">About content</div>
</body>
</html>

effpeetee
12-04-2007, 10:42 AM
Purely out of interest, is this what you are trying to do.:confused:

http://www.exitfegs.co.uk/Alice.html#nogo4

Not my programming, but I did modify it a little.:D

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum