Hallo,
ich habe ein folgendes Problem.
Ich habe eine css Datei (main.css) und eine XHTML Seite (index.html). Ich habe ein Prog. in css erstellt mit formartierung für Rahmen und Button, dem Button werden Links zugewiesen in dem XHTML Prog., die Links sind zum verschiedenen externen HTML Seiten. Ich brauche die externe HTML Seite immer aufmachen direkt in meiner index.html, in der mitte wo der Text steht, aber die Seiten werden natürlich in eine extra Seite aufgemacht.
Ich habe das bis jetzt probiert mit Frame in XHTML Seite zu einbauen, es funktioniert, aber ich brauche ein andere Art das zu machen, in der css Datei sollte dieser Frame (oder braucht man kein Frame)eingentlich definiert sein und auf der XHTML nur aufgerufen, bitte um Rat.
Sollte funktionieren wie diese Seite
http://css.fractatulum.net/index.htm , wenn man auf die Button klickt wechselt man in verschiedene html Seiten, die werden nur in der mitte angezeigt, Rahmen bleiben gleich.
Danke
Gruß
Adriana
Mein Cod:
main.css
html, body{height:100%}
body {
color:black;
background:#FFCC99;
font:13px verdana, sans-serif;
margin-right:80px;
margin-left:80px;
padding:0px;
text-align:justify;}
#head {
background:#FFFFFF url(bild.gif) no-repeat;
color:black;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
margin:5px;
padding-bottom:0px;
padding-top:5px;
padding:65px 0 0px 0;}
#head p{
color:white;
background:#C0C0C0;
padding:15px 5px 5px 5px;
margin:0;
text-align:left;
border-top:1px solid black;
font-weight:normal;}
#head a {
color:white;
font:bold 25px Times New Roman, sans-serif,vertical-align:middle;
text-decoration:none;
vertical-align:middle;
padding:8px 8px 0 10px;}
#head a:hover {border:black solid 1px;background:#FF6633;}
#content {
color:black;
background:#FFFFFF url(Tabelle.html);
height:100%;
margin:0 8% 0 8%;
padding:0px;}
#text {
clear:left;
border-top:3px solid black;
padding:0 50px 30px 50px;
color:black;
background:#ffffe6;}
.border {
width:710px;
height:1000px;
position:fixed;
border:solid 1px;}
h1{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 18px verdana, sans-serif;
border-left:10px solid #b3b300;
border-bottom:1px solid #b3b300;}
h2{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 16px verdana, sans-serif;
border-left:8px solid #b3b300;
border-bottom:1px solid #b3b300;}
h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:6px solid #b3b300;
border-bottom:1px solid #b3b300;}
und die XHTML Seite:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>CSS Layout1 zum mitnehmen</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="old.css" />
<style type="text/css">
<!--
@import url(main.css);
-->
</style>
</head>
<body>
<div id="content">
<div id="head">
<p><a href="Menue.html" target ="contect">Aktionen</a>
<a href="Tabelle.html" target="contect">Sortiment</a>
<a href=" Formulare.html" target="contect">Info</a>
<a href=" Formulare.html" target="contect">Beratung</a>
<a href=" Tabelle.html" target="contect">Über </a></p>
</div>
<iframe src="index.jpg" name="contect" width="710" height="1000"
marginheight="10" marginwidth="10" align="center">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>
<div id="text">
<br>
<h1>Erste Überschrift</h1>
<p><a href="../../sample/layout_zum_mitnehmen.htm"><strong>zurück zur Übersicht</strong></a><br />
<h2>Zweite Überschrift</h2>
<h3>Dritte Überschrift</h3>
<div align="center"><img src="index.jpg" width = "500" height = "400" border = "2" bordercolor = "#FFCC33" alt="Bild"></div>
</div>
</div>
</body>
</html>