✔ Divs per target ändern

sry habs vergessen zu sagen war vorhin in eile

Also ich hab deinen ersten Vorschlag genommen, den mit JS. Hat auch alles geklappt.
Hab jetzt ein Menü eingefürgt und will halt -wie oben auf den Bilder zu sehen ist- dass es so aussieht wie 1 Frame und nicht 2divs oder so hie mal der komplette Code^^ (sehr lang):

also 1. die "Hauptdatei"
Code: 
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">

/* Script-Code darf gemäß den Nutzungsbedingungen von dynamicdrive.com hier nicht veröffentlicht werden! */


</script>

<style type="text/css">
#leftcolumn{
margin-left: 500px;
width:750px;
height: 35px;
border: 3px outset black;


}


#rightcolumn{
margin-left: 500px;
width:750px;
height: 600px;
border: 3px outset black;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
div.one {
background-color: #0079b2;
}
</style>
</head>

<body>

<div id="leftcolumn" class="one">
<head>
	<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<ul id="menu" class="one">
<li><a href="javascript:ajaxpage('menu.html', 'rightcolumn');" class="current">Home</a></li>
<li><a href="javascript:ajaxpage('menu.html', 'rightcolumn');">Stargate</a></li>
<li><a href="" target="_self" title="Fun site">Fun site</a></li>
<li><a href="" target="_self" title="Support">Support</a></li>
</ul>

</div>

<div id="rightcolumn" class="one"></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>



menu_style.css
Code: 
ul#menu{ 
	width: 100%;
	height: 43px;
	background: #FFF url("http://www.tutorials.de/forum/images/menu-bg.gif") top left repeat-x; 
	font-size: 0.8em; 
	font-family: "Lucida Grande", Verdana, sans-serif; 
	font-weight: bold; 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	}
ul#menu li {
	display: block; 
	float: left; 
	margin: 0 0 0 5px; 
	}
ul#menu li a { 
	height: 43px; 
	color: #777; 
	text-decoration: none; 
	display: block; 
	float: left; 
	line-height: 200%; 
	padding: 8px 15px 0; 
	}
ul#menu li a:hover { 
	color: #333; 
	}
ul#menu li a.current{ 
	color: #FFF; 
	background: #FFF url("http://www.tutorials.de/forum/images/current-bg.gif") top left repeat-x; 
	padding: 5px 15px 0; 
	}

images in anhang

Hoffe ich hab nichts vergessen ;)

mfg
Browser-Zocker
 

Anhänge

  • current-bg.gif
    current-bg.gif
    47 Bytes · Aufrufe: 62
  • menu-bg.gif
    menu-bg.gif
    162 Bytes · Aufrufe: 62
Zuletzt bearbeitet von einem Moderator:
Die hinzugekommenen Komponenten hab ich im Code fett markiert:

Code: 
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">

/* Script-Code darf gemäß den Nutzungsbedingungen von dynamicdrive.com hier nicht veröffentlicht werden! */

</script>

<script type="text/javascript">
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|current)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'current':'nav';
                        }
                }
        }
}
</script>

<style type="text/css">
#leftcolumn{
margin-left: 500px;
width:750px;
height: 35px;
border: 3px outset black;


}


#rightcolumn{
margin-left: 500px;
width:750px;
height: 600px;
border: 3px outset black;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
div.one {
background-color: #0079b2;
}
</style>
</head>

<body>

<div id="leftcolumn" class="one">
<head>
	<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<ul id="menu" class="one">
<li><a class="nav" href="#home" onclick="ajaxpage('menu.html', 'rightcolumn');aktivieren(this.href)">Home</a></li>
<li><a class="nav" href="#stargate" onclick="ajaxpage('menu.html', 'rightcolumn');aktivieren(this.href)">Stargate</a></li>
</ul>

</div>

<div id="rightcolumn" class="one"></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>
Code: 
ul#menu li a.nav { 
	height: 43px; 
	color: #777; 
	text-decoration: none; 
	display: block; 
	float: left; 
	line-height: 200%; 
	padding: 8px 15px 0; 
	}
ul#menu li a.nav:hover { 
	color: #333; 
	}
ul#menu li a.current{ 
	color: #FFF; 
	background: #FFF url("images/current-bg.gif") top left repeat-x; 
	padding: 5px 15px 0; 
	}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück