CSS Layout

von **Mast3r** am 18.03.2007, 16:47

Hallo,

kann mir mal einer ein Grundgerüst mit CSS programmieren und dann alle dazugehörigen Dateien zuschicken? So soll es ungefähr aussehen:

oben = ein Banner
datrunter = eine navigation mit ausklappbaren untermenüs
links = die hauptnavigation
mitte = das main-fenster
rechts = ein news fenster

das wäre so meine Vorstellung!

Ich komm nämlich überhaupt nicht mit dem Programmieren zurecht, wie man soetwas macht. Also wenn mir jemand soetwas schicken könnte, das wäre nicht schlecht!

PS.: wenn noch fragen da sind dann fragt!

Mfg
Mast3r

von **BlueScreen-Bertrand** am 20.03.2007, 14:45

Hallo,

- das kann man nicht ausschließlich mit CSS machen, dazu gehört eine komplette (HTML-)Seite.
- css programmiert man nicht, es ist eine Auszeichnungssprache
- ich habe noch nie gesehen, dass jemand in einem Forum für einen anderen angeboten hätte, ein Template zu schreiben.

von **Mast3r** am 20.03.2007, 19:56

es war ja auch nur eine Frage!

von **BlueScreen-Bertrand** am 21.03.2007, 19:12

Mast3r hat geschrieben:es war ja auch nur eine Frage!

Eine Frage im Sinne einer Bitte :wink:

von **Mast3r** am 21.03.2007, 20:47

von **Woyciechowski[nixkönner]** am 22.03.2007, 09:49

index.html nennen

<!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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="diedatei.css" type="text/css" />
</head>
<body>
<div id="masthead">
<h1 id="siteName">blablablabal <a href="#">...</a></h1>
<div id="globalNav"> <a href="#">llink</a> | <a href="#"> link</a> | <a href="#"> link</a> | <a href="#"> link</a> | <a href="#">l link</a> | <a href="#">l link</a> | <a href="#">l link</a> </div>
<h2 id="pageName">blablablabal <a href="#">...</a></h2>
<div id="breadCrumb"> <a href="#">bblablablabal ...</a></div>
</div>
<div id="headlines">
<h3>Headlines</h3>
<p> blablablabal <a href="#">...</a> </p>
<p> Hblablablabal <a href="#">...</a><a href="#">.</a> </p>
<p>blablablabal <a href="#">...</a></p>
<p>blablablabal <a href="#">...</a><a href="#">.</a> </p>
<p> blablablabal <a href="#">...</a><a href="#">..</a> </p>
<div id="advert"> <img src="" alt="" width="107" height="66" />blablablabal <a href="#">...</a></div>
</div>

<div id="content">
<div class="feature"> <img src="" alt="" width="250" height="250" />
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablablablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
<div class="story">
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
<div class="story">
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
</div>

<div id="navBar">
<div id="search">
<form action="#">
<label>blablablabal <a href="#">...</a></label>
</form>
</div>
<div id="sectionLinks">
<h3>blablablabal <a href="#">...</a></h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ......</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>blablablabal <a href="#">...</a></h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
</div>

<div id="siteInfo"> <img src="" width="44" height="22" /> <a href="#">blablablabal ...</a> | <a href="#">blablablabal ...blablablabal ...</a> |blablablabal <a href="#">...</a>|blablablabal <a href="#">...</a></div>
<br />
</body>
</html>

DIESE DATEI MIT ENDUNG diedatei.css abspeichern

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: right;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:left;
width: 20%;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 55%;
}

#siteName{
margin: 0;
padding: 0 0 0 10px;
}

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

#navBar li {border-bottom: 1px solid #EEE;}

html>body #navBar li {border-bottom: none;}

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

job dat wars.

grüße woyciechowski

von **Woyciechowski[nixkönner]** am 22.03.2007, 09:50

index.html nennen

<!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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="diedatei.css" type="text/css" />
</head>
<body>
<div id="masthead">
<h1 id="siteName">blablablabal <a href="#">...</a></h1>
<div id="globalNav"> <a href="#">llink</a> | <a href="#"> link</a> | <a href="#"> link</a> | <a href="#"> link</a> | <a href="#">l link</a> | <a href="#">l link</a> | <a href="#">l link</a> </div>
<h2 id="pageName">blablablabal <a href="#">...</a></h2>
<div id="breadCrumb"> <a href="#">bblablablabal ...</a></div>
</div>
<div id="headlines">
<h3>Headlines</h3>
<p> blablablabal <a href="#">...</a> </p>
<p> Hblablablabal <a href="#">...</a><a href="#">.</a> </p>
<p>blablablabal <a href="#">...</a></p>
<p>blablablabal <a href="#">...</a><a href="#">.</a> </p>
<p> blablablabal <a href="#">...</a><a href="#">..</a> </p>
<div id="advert"> <img src="" alt="" width="107" height="66" />blablablabal <a href="#">...</a></div>
</div>

<div id="content">
<div class="feature"> <img src="" alt="" width="250" height="250" />
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablablablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
<div class="story">
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
<div class="story">
<h3>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a>blablablabal <a href="#">...</a></h3>
</div>
</div>

<div id="navBar">
<div id="search">
<form action="#">
<label>blablablabal <a href="#">...</a></label>
</form>
</div>
<div id="sectionLinks">
<h3>blablablabal <a href="#">...</a></h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ......</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>blablablabal <a href="#">...</a></h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
<li><a href="#">blablablabal ...</a></li>
</ul>
</div>
</div>

<div id="siteInfo"> <img src="" width="44" height="22" /> <a href="#">blablablabal ...</a> | <a href="#">blablablabal ...blablablabal ...</a> |blablablabal <a href="#">...</a>|blablablabal <a href="#">...</a></div>
<br />
</body>
</html>

DIESE DATEI MIT ENDUNG diedatei.css abspeichern

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
float: right;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:left;
width: 20%;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

#content{
float: left;
width: 55%;
}

#siteName{
margin: 0;
padding: 0 0 0 10px;
}

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

#navBar li {border-bottom: 1px solid #EEE;}

html>body #navBar li {border-bottom: none;}

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

job dat wars.

grüße woyciechowski

von **Mast3r** am 23.03.2007, 15:34

Hallo,

danke für die info, aber ich hätte noch eine frage, und zwar was muss ich für einen Befehl eingeben, das er den link nicht durch eine neue seite öffnet sondern in der mitte. Der normale Befehl ist ja
<a href="home.htm" target="name des Feldes in der Mitte">Home</a>

ich hoffe Ihr könnt damit etwas anfangen!

Mfg

von **H-milch** am 25.03.2007, 03:29

für sowas must du frames benutzen. wenn es nur einfeld in der mitte ist benutzt du am besten ein "Iframe".

<iframe src="beispielseite.html" name="beispielname" height="200" width="300" frameborder="0" scrolling="no"><p>Ihr browser unterstüzt keine Inline-Frames</p></iframe>
<a href="neueseite.html" target="beispielname">neue seite im Iframe</a>

wenn der iframe nicht angezeigt werden kann, wird stattdessen der text innerhalb angezeigt. allerdings sollte inzwischen jeder browser iframes unterstützen.
scrolling kann auf "no", "yes" oder "auto" gesetzt werden.
der rest erklärt sich denk ich von selbst.

mfg
H-milch

von **Mast3r** am 28.03.2007, 14:25

Also irgendwie funktioniert das nicht :cry:

von **H-milch** am 29.03.2007, 18:07

Du solltes dein Problem etwas präziser formulieren.

Ich gehe mal davon aus, das du mit "das" die sache mit dem iframe meinst.
was genau funktioniert nicht. wird der ganze iframe nicht angezeigt oder wird die entsprechende seite nicht im iframe geladen, wenn du auf den link klickst.

Hilfreich wäre auch wenn man sich den Code angucken kann der die Fehler verursacht. d.h. du könntest die Seite hochladen und hier einen Link reinstellen, oder du postest die entschprechende Stelle deines Quellcodes.

mfg
H-milch

von **Mast3r** am 01.04.2007, 13:15

Die entsprechnede Seite wird nicht in dem frame geladen. Aufgebaut habe ich das so: als erstes die index.html mit den div befehlen und dazu habe ich ein style.css erstellt. Jetzt muss ich ja den iframe in die index.htm einbauen an der stelle wo ich das hinhaben will oder???

Mein Quelltext:

<html>
<head>
<title>456456</title>
</head>
<link rel="stylesheet"type="text/css" href="style.css">

<meta http-equiv="page-enter" content="blendTrans(Duration=0.5)">
<meta http-equiv="page-exit" content="blendTrans(Duration=0.5)">
<body>
<center><img src="456546.bmp"></center>

<ul id="Navigation">
<li><a href="456.htm"></a>456465</li>
<li><a href="65+.htm">456</a></li>

<li><h1>456</li></h1>
<li><a href="45.htm">45</a></li>
<li><a href="5555.htm">555</a></li>

<li><h1>45646</li></h1>
<li><a href="456456.htm" >456</a></li>
<li><a href="4564564.htm">456</a></li>
<li><a href="4564564.htm">456</a></li>
<li><a href="45645645.htm">456</a></li>
<li><a href="456456464.htm">456</a></li>
<li><a href="4564564.htm">4564</a></li>
<li><a href="123456.htm">4564</a></li>

<li><h1>84545645</li></h1>
<li><a href="27.htm">27</a></li>
<li><a href="26.htm">26</a></li>
<li><a href="25.htm">25</a></li>
<li><a href="24.htm">24</a></li>

<li><h1>798564</li></h1>
<li><a href="7899.htm">7899</a></li>
<li><a href="789.htm">789</a></li>

<li><h1>4567896</li></h1>
<li><a href="132.htm">789</a></li>
<li><a href="123.htm">7898785</a></li>

<li><h1>Sonstiges</li></h1>
<li><a href="123.htm">News</a></li>
<li><a href="123.htm">Links</a></li>
</ul>

<div id="Info">
<center>
<h2>Info</h2>
<b><a href="5.htm" target="main">555</a></b><p>
<a href="555555</a><p>
<b>555</b><p>
<b>5555<p>
</div>
<center>
<iframe src="home.htm" name="inahlt" height="800" width="580" frameborder="0" scrolling="no"><p>Ihr browser unterstüzt keine Inline-Frames</p></iframe>

<p id="Fusszeile">kkkkkk</p>

</body>
</html>

von **H-milch** am 01.04.2007, 15:09

ja klar. der iframe ist ja ein fenster in dem dann die andere seite angezeigt wird. das ist soweit richtig. allerdings verwiest keiner deiner links auf den iframe. du hast nur in einem link ein Target-attribut definiert und das verweist auf ein element namens "main". dein iframe heist aber "inhalt". du must noch das target attribut für jeden link definieren der im Iframe geladen werden soll und natürlich musst du den richtigen namen angeben.
mfg
H-milch

von **Mast3r** am 01.04.2007, 15:40

Also wenn ich das dann richtig verstanden habe dann muss das so aussehen:

<html>
<head>
<title>456456</title>
</head>
<link rel="stylesheet"type="text/css" href="style.css">

<meta http-equiv="page-enter" content="blendTrans(Duration=0.5)">
<meta http-equiv="page-exit" content="blendTrans(Duration=0.5)">
<body>
<center><img src="456546.bmp"></center>

<ul id="Navigation">
<li><a href="456.htm" target="inhalt"></a>456465</li>
<li><a href="65+.htm" target="inhalt">456</a></li>

<li><h1>456</li></h1>
<li><a href="45.htm" target="inhalt">45</a></li>
<li><a href="5555.htm" target="inhalt">555</a></li>

<li><h1>45646</li></h1>
<li><a href="456456.htm" target="inhalt">456</a></li>
<li><a href="4564564.htm" target="inhalt">456</a></li>
<li><a href="4564564.htm" target="inhalt">456</a></li>
<li><a href="45645645.htm" target="inhalt">456</a></li>
<li><a href="456456464.htm" target="inhalt">456</a></li>
<li><a href="4564564.htm" target="inhalt">4564</a></li>
<li><a href="123456.htm" target="inhalt">4564</a></li>

<li><h1>84545645</li></h1>
<li><a href="27.htm" target="inhalt">27</a></li>
<li><a href="26.htm" target="inhalt">26</a></li>
<li><a href="25.htm" target="inhalt">25</a></li>
<li><a href="24.htm" target="inhalt">24</a></li>

<li><h1>798564</li></h1>
<li><a href="7899.htm" target="inhalt">7899</a></li>
<li><a href="789.htm" target="inhalt">789</a></li>

<li><h1>4567896</li></h1>
<li><a href="132.htm" target="inhalt">789</a></li>
<li><a href="123.htm" target="inhalt">7898785</a></li>

<li><h1>Sonstiges</li></h1>
<li><a href="123.htm" target="inhalt">News</a></li>
<li><a href="123.htm" target="inhalt">Links</a></li>
</ul>

<div id="Info">
<center>
<h2>Info</h2>
<b><a href="5.htm" target="inhalt"</a></b><p>
<a href="555555</a><p>
<b>555</b><p>
<b>5555<p>
</div>
<center>
<iframe src="home.htm" name="inahlt" height="800" width="580" frameborder="0" scrolling="no"><p>Ihr browser unterstüzt keine Inline-Frames</p></iframe>

<p id="Fusszeile">kkkkkk</p>

</body>
</html>

Aber wenn ich das so mache, dann öffnet er mir ein eigenes fenster mit der seite, oder muss ich auch noch für die seiten ein eigenen style programmieren???

von **H-milch** am 02.04.2007, 00:21

Tschuldigung das ich die fehler nicht vorher schon gefunden hab. aber die hättest du auch selbst finden können.

ab <div id="info">
ist dein code totaler müll. da hällst du dich an keine regeln mehr.

<div id="Info">
<center>
<h2>Info</h2>
<b><a href="5.htm" target="inhalt"</a></b><p>
<a href="555555</a><p>
<b>555</b><p>
<b>5555<p>
</div>
<center>
<iframe src="home.htm" name="inahlt" height="800" width="580" frameborder="0" scrolling="no"><p>Ihr browser unterstüzt keine Inline-Frames</p></iframe>

ich hab dir mal unterstrichen was alles falsch ist.

die ersten 3 Zeilen sind richtig. aber dann kommt der erste Link...
<a href="5.htm" target="inhalt"</a> du hast den befehl zwar geöffnet aber nicht geschlossen..
<a href="5.htm" target="inhalt"> text...</a>

zu den <p>-tags kann ich gar nix sagen... der<P>-tag schließt einen absatz ein! das heißt er muss auch geschlossen werden!
<p> text text text</p>
wenn du allerdings nur einen Zeilenumbruch erzwingen willst benutzt du am besten den <br />-tag. dieser ist ein leerer tag und muss nicht geschlossen werden bzw wird er durch den slash direkt wieder geschlossen. du solltest immer an der leerzeichen vor dem slash denken.

dein 2. Link ist noch schlimmer als der erste.
<a href="555555</a> du hörst irgentwie mittendrin auf.
<a href="555555.htm" target="inhalt"></a>

der <b>-tag muss genauso wie der <p>-tag geschlossen werden. das hast du auch zuerst richtig gemacht daher denke ich du hast es einfach vergessen....

zum schluss willst du, nehme ich an, den <center> schließen, vergisst aber den slash => </center>
allerdings hast du da noch einen 2. fehler, denn dein div-element und dein center-element überlappen sich, was sie nicht dürfen.
---------------------------------------------------------------------------
<div>
<center>
...
</div>
</center> => Falsch!
---------------------------------------------------------------------------
<div>
<center>
...
</center>
</div> => richtig!
---------------------------------------------------------------------------
einfacher kannst du es dir machen wenn du im div-tag das align attribut auf center setzt.
<div align="center" id="info">
....
</div>

wenn du in deinem Code einen fehler hast kann es forkommen, dass der gesamte folgende teil falsch angezeigt wird. speziell wenn man vergißt die anführungszeichen wieder zu schlißen, was dir beim 2. link passiert ist.

mfg
H-milch

ps: du hast da sehr viele anfängerfehler drinne. auf , dass du die fehler nicht selber gefunden hast gibt den anschein als ob du noch nicht so den überblick hättest. du solltest vllt wenigstens mal die grundsätze in html lernen damit du solche fehler von Anfang an vermeiden kannst und für sowas nicht das forum brauchst... viel spass noch.

CSS Layout

CSS Layout

da :-)

da :-)

Ähnliche Themen

Wer ist online?