Hilfe
Neues Thema
Antworten
geschrieben ich habe da wie jeder hier mal eine page gebastelt:
www.meisterhaft-gestalten.de
- der mp3-player da unten ist nur ne vorübergehende spielerei. der kommt bald wieder weg. -
die page besteht im groben aus 4 teilen.
1.) header: von oben bis ende horizontale navigation
2.) subnavi: vertikale navigation links in der mitte (orangener hover-effekt)
3.) content: inhaltsfenster rechts neben der subnavi
4.) footer
ich möchte, dass sich die subnavi nur auf das inhaltsfenster bezieht. beim klick auf ein submenüpunkt also nicht die komplette seite lädt, sondern nur das content-fenster geändert wird. ich mag nämlich absolut keinen unnötigen quellcode, sprich wirrwarr in jeder scheiß verknüpfung. *entschuldigt den ausdruck pff*
allerdings möchte ich das nicht über frames erreichen, sondern möglicherweise über javascript? so wie man es auf microsoft.de unten in der mitte findet. nur dass sich der inhalt nicht unbedingt beim mouseover ändert, sondern möglichst erst nach einem klick.
hier mein quellcode der index.php und des css-dokuments (ich fürchte leider etwas wild hier reingewürfelt
)dann lasst mal eure köpfchen rauchen bzw. wisst ihr es ja eh schon - ich kenn' euch doch!
DANKE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<title>S&V - Meisterhaft Gestalten</title>
</head>
<body>
<center>
<div id="body">
<div class="cap">
<? include("cap.php")?>
</div>
<div class="header">
<a href="index.php">
<div class="intro">
<?
include("intro.php")
?>
</div>
</a>
<div class="show">
<?
include("show.php")
?>
</div>
<div class="admin">
<?
include("admin.php")
?>
</div>
<div class="search">
<?
include("search.php")
?>
</div>
</div>
<div class="navi">
<?
include("navi.php")
?>
</div>
<div class="main">
<?
include("index/inIndex.php")
?>
</div>
<div class="footer">
<?
include("footer.php")
?>
</div>
</div>
</center>
</body>
</html>
/* CSS Document */
body {
background-color:#6798AD; background-image:url(../images/main.background.jpg); background-repeat:repeat-x;
scrollbar-DarkShadow-Color:#A6C4C4;
scrollbar-Track-Color:#B8E983;
scrollbar-Face-Color:#A6C4C4;
scrollbar-Shadow-Color:#2D2D2D;
scrollbar-Highlight-Color:#408080;
scrollbar-3dLight-Color:#A6C4C4;
scrollbar-Arrow-Color:#3F3F3F;
}
a:link {color:#CCCCCC; text-decoration:none}
a:visited {color:#CCCCCC; text-decoration:none}
a:hover {color:#FFFFFF; text-decoration:underline}
a:active {color:#FFFFFF}
a.cappy:link {color:#CCCCCC; text-decoration:none}
a.cappy:visited {color:#CCCCCC; text-decoration:none}
a.cappy:hover {color:#FFFFFF; text-decoration:underline}
a.cappy:active {color:#FFFFFF; text-decoration:none}
a.footer:link {color:#999999; text-decoration:none}
a.footer:visited {color:#999999; text-decoration:none}
a.footer:hover {color:#FFFFFF; text-decoration:underline}
a.footer:active {color:#FFFFFF; text-decoration:none}
a.navi2:link {background:none}
a.navi2:visited {background:none}
a.navi2:hover {background:#E37500}
a.navi2:active {background:#E37500}
a.extra:link {color:#999999; text-decoration:none}
a.extra:visited {color:#999999; text-decoration:none}
a.extra:hover {color:#00CCFF; text-decoration:none}
a.extra:active {color:#FFFFFF; text-decoration:none}
a.main:link {color:#666666; text-decoration:none}
a.main:visited {color:#996600; text-decoration:none}
a.main:hover {color:#333333; text-decoration:underline}
a.main:active {color:#333333}
#body {
background:none;
width:1000px;
height:855px;
background-image:url(../images/background.jpg);
background-repeat:no-repeat;
}
div.cap {
height:20px;
background:none;
}
#capleft {
float:left;
padding-top:5px;
padding-left:7px;
color:#CCCCCC;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
input.search {
color:#CCCCCC; font-size:10px; background-color:#666666; border:1px;
}
#capright {
text-align:right;
padding-right:7px;
padding-top:3px;
color:#FFFFFF;
font-size:12px;
font-family:"Courier New", Courier, monospace;
}
div.header {
background:none;
width:1000px;
height:250px;
}
div.intro {
background:none;
cursor:pointer;
width:450px;
height:250px;
float:left;
}
div.search {
background:none;
height:40px;
width:250px;
float:right;
}
#search {
padding-top:8px;
}
div.admin {
background:none;
width:200px;
height:40px;
float:left;
}
div.show {
background:none;
height:210px;
width:550px;
float:left;
}
div.navi {
background:none;
padding-left:37px;
padding-right:37px;
height:35px;
}
#navi {
padding:8px;
width:167px;
float:left;
text-align:center;
font-size:15px;
text-transform:capitalize;
color:#333333;
font-family:"Courier New", Courier, monospace;
}
div.main {
background-color:#FF0000;
width:1000px;
height:500px;
}
div.plus {
background-color:#666666; background-image:url(../images/pinsel.gif); background-repeat:no-repeat;
background-position:bottom;
padding-top:50px;
float:left;
width:auto;
height:450px;
border-color:#000000; border-style:solid; border-width:2px;
border-bottom-width:0px; border-top-width:0px;
}
#plus {
width:200px;
height:30px;
background:none;
margin-top:10px;
font-family:"Courier New", Courier, monospace;
padding-top:7px;
border-color:#000000; border-style:solid; border-width:1px;
border-left:none; border-right:none;
cursor:pointer;
}
div.content {
background-color:#F7F7F7;
background-image:url(../images/content.jpg);
float:left;
overflow:auto;
height:500px;
border-right-color:#000000; border-right-style:solid; border-right-width:2px;
}
#content {
padding:15px;
background:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
overflow:auto;
text-align:justify;
}
#heading { background-color:#99CC33; padding:5px; font-size:14px; width:784px; text-align:left;
}
div.footer {
background-color:#666666;
width:996px;
height:50px;
border-color:#000000; border-style:solid; border-width:2px; border-top-width:1px; border-bottom:none;
}
#footer {
padding-top:5px;
text-align:center;
color:#999999;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
Dieser Beitrag wurde von felisse.courage bearbeitet: 22. August 2006 - 12:04
Nach oben
