View Full Version : my layout question

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?


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

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.


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">
<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;
<script type="text/javascript">
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";
<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>
<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>

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


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