Links im Content - Bereich öffnen
bearbeitet von Gunnar BittersmannHallo,
ich bin neu in diesem Forum. Ich habe im Netz folgendes Grundgerüst einer Webseite gefunden und möchte erreichen, dass die Seiten, welche durch die Links geöffnet werden im Content–Bereich geöffnet werden.
Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.
Ich bin absuluter Anfänger und hoffe ich habe mich verständlich ausgedrückt.
Hier der Code von 2 Seiten, oder kann man hier Dateien hochladen?
Vielen Dank fürs lesen und die Hilfe.
mfg, Andreas
index.html
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="robots" content="index, follow" />
<script type="text/javascript">
/**
* HTML5-Fallback
*
* @param none
* @return none
*/
(function(d){
if(!d.createTextNode) return;
var elem = "header|nav|section|footer".split('|');
for(var i=0; i<elem.length; i++){
d.createElement(elem[i]);
}
}
)(document);
</script>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
margin-left: 5%;
margin-right: 5%;
background-color:#82FA58;
}
header, nav, section, footer {display: block;}
header {
font-family: Arial, Verdana, serif;
font-size: 1.2em;
font-weight: bold;
text-align:center;
top:10px;
position:fixed !important;
position:absolute;
height: 25%;
width:80%;
background-color:#14529a;
color: white;
}
nav {
bottom:0px;
left:0px;
height:50%;
width:100%;
position: absolute;
background-color: #088A08;
}
#Content {
top: 25%;
position:relative;
height:69%;
width:99%;
overflow:auto;
background-color:#ccc;
}
footer {
bottom:0px;
position:absolute;
height: 5%;
width:80%;
background-color: #088A08;
color: white;
}
a {
color:#fff;
}
#NavBsp {
list-style: none outside none;
/*margin: 0;*/
padding:0;
margin-left: auto;
margin-right: auto;
}
#NavBsp li{
font-family: Arial, Verdana, serif;
font-size: 0.8em;
font-weight: bold;
text-decoration:underline;
text-align:center;
margin: 0;
padding: 0;
display: block;
float: left; /* */
width: 16%;
position: relative; /* */
cursor: pointer;
background: #1e5799;
border-right: solid 0.0625em #666;
}
#NavBsp li a{
display: block;
padding: 0.5em 0;
color: #fff;
font-weight: bold;
text-decoration:none;
}
#NavBsp li a:hover, #NavBsp li a:focus, #NavBsp li a:active{
color: #fff;
background: #1b8ce2;
}
</style>
</head>
<body>
<header>
Webseite
<nav>
<ul id="NavBsp">
<li><a target="Content" href="startseite.html">Startseite</a></li>
<li><a href="seite2.html" title="Über uns" target="Content">Über uns</a></li>
<li><a href="#" title="Link zu Nav-Punkt 3">Mitteilungen</a></li>
<li><a href="#" title="Link zu Nav-Punkt 4">Test02</a></li>
<li><a href="#" title="Link zu Nav-Punkt 5">Test03</a></li>
<li><a href="#" title="Link zu Nav-Punkt 6">Test04</a></li>
</ul>
</nav>
</header>
<section id="Content">
Content Zeile 1<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content letzte Zeile<br />
</section>
<footer>
Footer
</footer>
</body>
</html>
startseite.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="language" content="de">
<meta name="robots" content="index, follow">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>TText</p>
<h1>Dies ist Ihre Startseite.</h1>
<p></p>
<p></p>
<p></p>
<p></p>
Die Überschriften der verschiedenen Größen sehen wie folgt aus:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<hr>
<h1>Überschrift</p>
</body>
</html>
```
Links im Content - Bereich öffnen
bearbeitet von Gunnar BittersmannHallo,
ich bin neu in diesem Forum. Ich habe im Netz folgendes Grundgerüst einer Webseite gefunden und möchte erreichen, dass die Seiten, welche durch die Links geöffnet werden im Content–Bereich geöffnet werden.
Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.
Ich bin absuluter Anfänger und hoffe ich habe mich verständlich ausgedrückt.
Hier der Code von 2 Seiten, oder kann man hier Dateien hochladen?
Vielen Dank fürs lesen und die Hilfe.
mfg, Andreas
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="robots" content="index, follow" />
<script type="text/javascript">
/**
* HTML5-Fallback
*
* @param none
* @return none
*/
(function(d){
if(!d.createTextNode) return;
var elem = "header|nav|section|footer".split('|');
for(var i=0; i<elem.length; i++){
d.createElement(elem[i]);
}
}
)(document);
</script>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
margin-left: 5%;
margin-right: 5%;
background-color:#82FA58;
}
header, nav, section, footer {display: block;}
header {
font-family: Arial, Verdana, serif;
font-size: 1.2em;
font-weight: bold;
text-align:center;
top:10px;
position:fixed !important;
position:absolute;
height: 25%;
width:80%;
background-color:#14529a;
color: white;
}
nav {
bottom:0px;
left:0px;
height:50%;
width:100%;
position: absolute;
background-color: #088A08;
}
#Content {
top: 25%;
position:relative;
height:69%;
width:99%;
overflow:auto;
background-color:#ccc;
}
footer {
bottom:0px;
position:absolute;
height: 5%;
width:80%;
background-color: #088A08;
color: white;
}
a {
color:#fff;
}
#NavBsp {
list-style: none outside none;
/*margin: 0;*/
padding:0;
margin-left: auto;
margin-right: auto;
}
#NavBsp li{
font-family: Arial, Verdana, serif;
font-size: 0.8em;
font-weight: bold;
text-decoration:underline;
text-align:center;
margin: 0;
padding: 0;
display: block;
float: left; /* */
width: 16%;
position: relative; /* */
cursor: pointer;
background: #1e5799;
border-right: solid 0.0625em #666;
}
#NavBsp li a{
display: block;
padding: 0.5em 0;
color: #fff;
font-weight: bold;
text-decoration:none;
}
#NavBsp li a:hover, #NavBsp li a:focus, #NavBsp li a:active{
color: #fff;
background: #1b8ce2;
}
</style>
</head>
<body>
<header>
Webseite
<nav>
<ul id="NavBsp">
<li><a target="Content" href="startseite.html">Startseite</a></li>
<li><a href="seite2.html" title="Über uns" target="Content">Über uns</a></li>
<li><a href="#" title="Link zu Nav-Punkt 3">Mitteilungen</a></li>
<li><a href="#" title="Link zu Nav-Punkt 4">Test02</a></li>
<li><a href="#" title="Link zu Nav-Punkt 5">Test03</a></li>
<li><a href="#" title="Link zu Nav-Punkt 6">Test04</a></li>
</ul>
</nav>
</header>
<section id="Content">
Content Zeile 1<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content letzte Zeile<br />
</section>
<footer>
Footer
</footer>
</body>
</html>
startseite.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="language" content="de">
<meta name="robots" content="index, follow">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>TText</p>
<h1>Dies ist Ihre Startseite.</h1>
<p></p>
<p></p>
<p></p>
<p></p>
Die Überschriften der verschiedenen Größen sehen wie folgt aus:
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<hr>
<h1>Überschrift</p>
</body>
</html>